Experimenting in the domain of RIA's and Web 2.0

Experimenting in the domain of RIA's and Web 2.0 Seenivasan Gunabalan IMIT IV Edition, Scuola Suoperiore Sant'Anna,Pisa, Italy E-mail: s.gunabalan@websynapsis.com ABSTRACT This paper provides an overview of the RIA's, web2.0 and how those technologies can be implemented using the tool developed inside Synapsis. It starts by looking in to the two terms RIA and web 2.0 and their role in the next generation web based application. The MIDA visual tool and the process are then described and their use in ITS deployment explained. The paper finishes with an implementation of RIA scenario by using MIDA. OBJECTIVE The final objective of this study is to implement the Web 2.0 scenario by using the visual tool developing at Synapsis. This is accomplished by explaining the real time charting which explores open source charting library and a case study that explains how MIDA is used in deploying RIA applications. TECHNOLOGY REVIEW WEB 2.0 Web 2.0 provides a new and enhanced makeover for the World Wide Web by providing users with an easier and a faster web. Web 2.0 makes use of the desktop applications at a greater level than the traditional version with static web pages. It makes use of a number of techniques that includes web syndication, AJAX, and public web service APIs. In web syndication, a part of the website is made available to be used by other sites. AJAX is used to create interactive web applications. Technology Infrastructure of Web 2.0 Web 2.0 has a developing and complex technology infrastructure. The technology includes the use of content syndication, server software, standards-based browsers that have extensions and plugins, client applications, and messaging protocols. All these advanced technology provides Web 2.0 with dissemination, creation, and information storage capability. Some of the major techniques that Web 2.0 website uses includes, 1

Rich Internet Application techniques that are unobtrusive like AJAX. The Rich Internet Applications are the web applications having the traditional desktop applications functionality and features. CSS (Cascading Style Sheets) are used to describe the presentations of documents that are documented in a markup language. CSS describes them in a stylesheet language. Semantically valid XHTML markup and the application of Microformats. The Microformats are the markups that permit expression of semantics in an HTML web page. Proper aggregation and syndication of data in RSS/Atom. RSS (Really Simple Syndication) is mainly used by the news websites and weblogs for web syndication in XML. Significant and clean URLs. Publishing Weblogs. Weblogs are the web-based periodic publication of articles. Mashup, which is a web application or a site that merges content from various sources into an integral knowledge. REST or XML Webservice APIs. Representation State Transfer (REST) is a software architectural approach for dispersed hypermedia systems similar to the World Wide Web. Benefits Business - ways in which Web2.0 can benefit the business and IT industry Users - ways in which Web2.0 can help end-users Business perspective Website - a site that has easy accessibility for data transfer. It should be easy to extract data in and out of the system Data - the data on the site are owned by the users. This feature facilitates the users to modify the data whenever they wish to. Instead of being static like in the traditional versions, Web 2.0 has dynamic data returns. It is the query of the users that determines the change of data Platform - a web-based network as platform Perpetual beta In web2.0, software is delivered as a service rather than as a product. This makes operations as one of the core competencies of this business since regular enhancements are required. Being a service, the major gain from this is delivery that is fast and perpetual free from stringent release cycles, as in case of traditional software. Assembly replaces product development Web2.0 is an assembly of services. The major advantage being that this does not require an elaborate business model. All that the business requires is to pick-up the right components and assemble them in a useful way so as to deliver valuable services to the business. 2

Cost effective Since Web2.0 data originate from end-users, data generation is almost free From a service perspective, Web2.0 is based on a self-service philosophy users contribute what they know and find what they are looking for on their own. This considerable reduces support overhead Lightweight business model RICH INTERNET APPLICATIONS (RIA) Rich-Internet application (RIA) techniques such as AJAX, Adobe Flash[www.adobe.com/products/flash/], and Microsoft Silverlight[http://silverlight.net/ ] have significantly improved user experience for browser-based web applications. Flash/Silverlight allows a part of the content of a web page to be altered without refreshing the whole page at the same time. RIAs typically transfer the processing necessary for the user interface to the web client but keep the bulk of the data (i.e. maintaining the state of the program, the data etc) back on the application server. RIAs typically run in a web browser does not require software installation Benefits of RIA Richer. More responsive. Client/Server balance. Asynchronous communication. Network efficiency. Richer They can offer user-interface behaviors not obtainable using only the HTML widgets available to standard browser-based Web applications. This richer functionality may include anything that can be implemented in the technology being used on the client side, including drag and drop, using a slider to change data, calculations performed only by the client and which do not need to be sent back to the server. More responsive The interface behaviors are typically much more responsive than those of a standard Web browser that must always interact with the server. 3

Client/Server balance The demand for client and server computing resources is better balanced, so that the Web server need not be the workhorse that it is with a traditional Web application. This frees server resources, allowing the same server hardware to handle more client sessions concurrently. Asynchronous communication The client engine can interact with the server asynchronously that is, without waiting for the user to perform an interface action like clicking on a button or link. This option allows RIA designers to move data between the client and the server without making the user wait. Perhaps the most common application of this is pre-fetching, in which an application anticipates a future need for certain data, and downloads it to the client before the user requests it, thereby speeding up a subsequent response. Google Maps uses this technique to move adjacent map segments to the client before the user scrolls their view. Network efficiency The network traffic may also be significantly reduced because an application-specific client engine can be more intelligent than a standard Web browser when deciding what data needs to be exchanged with servers. This can speed up individual requests or responses because less data is being transferred for each interaction, and overall network load is reduced. However, use of asynchronous pre-fetching techniques can neutralize or even reverse this potential benefit. Because the code cannot anticipate exactly what every user will do next, it is common for such techniques to download extra data, not all of which is actually needed, to many or all clients. REAL TIME CHARTING Objective To experiment and develop a web based charting library to display real time data in an efficient and lucid way. Scenario To render chart depending on real time values. The chart was observed by doctors as a part of patient monitoring. The real time values are the measurements of patient s sensor readings taken every 2/3 minutes. The readings were the values of room temperature, room humidity, room light, patient s heart rate, patient s pressure...etc. The chart should render all these readings in a single comparative page so that the readings can be used to analyze the effect of one sensor reading on another. The difference in scale should be considered since the sensor readings have huge difference in the readings. 4

Things to consider The Chart should be lucid and should be rendered in real time. Data is huge, since overall arrival rate of sensor values is 2/3 minutes. Difference in scale value is huge. For example the environmental light reading fluctuates from 6000 to 30000 while the temperature values range from 30-50. The chart should render all the sensor values simultaneously and synchronously so that the data can be compared. Only the new data should transfer from server to client to minimize data overhead. The X axis range and Y axis should be limited/restricted so that the data is lucid. One hospital room may contain one or more patients, so each patient s data should be displayed on cyclic basis but the environment data will be same for the patients inside a common room. Solution Provided Technologies used HTML, JavaScript, Flash, AJAX, XML HTML Act as a container for flash chart library. JavaScript To handle data in the client side and to dynamically set flash chart variables. Flash To have a lucid chart presentation. Open Flash chart[http://teethgrinder.co.uk/openflash-chart/] is a free open source charting library used to render a chart. AJAX It is one of the Web2.0 techniques to make server requests without refreshing the entire page. XML XML is heavily used as a format for document storage and processing, both online and offline. In this application the sensor data are stored using exist[http://exist-db.org/ ] XML native database, and the requested data are returned in the form of XML. AJAX technology is used to request data behind the user interface from the server. Initially all the data for current date were fetched and then rendered. There is a chart configuration setting to display number of values in the x axis. So that at any instant the number of values in x axis won t exceed the configured number. This increases the lucidity of the chart. The AJAX request timing is configured to coincide with the timings of the sensors to avoid unnecessary requests. To overcome huge range difference in readings of the different sensors, values from different sensors are rendered in different charts. A JavaScript class for chart was created which on initiating will render a graph. This object oriented approach made the solution easier. 5

There is a need to synchronize each chart, since all sensor values are not taken at exact time stamp. while some other sensor values are taken every 3 minutes, so it needs to be synchronized at specific intervals. This was done after specific set of AJAX request. OpenFlash chart, an open source flash charting library, is used for chart rendering. The input data for chart were provided as JSON. So the XML values are processed to JSON format using JavaScript and then rendered. To make the chart representation lucid and fast only specific range of values are rendered. To just update the new values the last reading's time stamp at client side was sent along with the request. So that the query will be only for the data after that time stamp. At the first time the query will be for the values from mid night to still current time. Then this process will continue. The screen shot of chart application is displayed below. Fig: Chart application 6

Benefits of using RIA Technology The entire presentation information from server needs to be sent for every request if AJAX is not used. The use of AJAX reduces data over head during data transfer from client to server. Solution using RIA Platform Even though RIA techniques are used above, no RIA platforms are used. The RIA platforms have following benefits: Handling and requesting data at client side will be much easier, since RIA platforms have very good data structures for handling data at client side. MIDA MIDA is an framework designed and developed by Synapsis for easy development and deployment of applications. MIDA's core can be classified into two MIDA Designers MIDA Runtime MIDA Designers MIDA designers are Eclipse plugins for creating front ends, flow graphs and configuration files for MIDA based project. MIDA Runtime MIDA runtime consists of graphs that controls the flow of process. The user can design a graph using MIDA flow designer, containing sequence of nodes which are configured to do specific tasks. Technology Used : J2EE Mida Work Flow Engine Database Client Tomcat File System MIDA Designer Fig : Illustrating application with MIDA architecture In the above figure, MIDA designer runs throughout the total system structure indicating MIDA designers are available to develop the entire part of system. While the MIDA work flow engine occupies only the part of middle portion indicates that the client can either directly interact with persistent data or through MIDA run time. MIDA runtime needs to be accessed by Tomcat web server. Implementing MIDA through Mule ESB [http://mule.mulesource.org/display/mule/home] is also in progress. 7

Flows are mapped using URI configured in a mapping file. Flows contains the graphs thats directs the execution and data flow. The view contains the web pages. The visual tool that we discussed in objective section is to design pages for view. For example, http://localhost:8082/sampleproject/mapped/getdata getdata In mapping file this word is mapped to specific flow graph. by requesting to the URI will make the corresponding flow graph to execute. In this case it may reply with some data needed for processing. MIDA made it easy to integrate different technologies together. Since one has to refer only the URI rather than knowing the underlying technology. Any change in technology will cause the flow graph to be altered or to construct a new one, which reduces ripple changes. By this approach rather than sticking to single platform solution one can use different best technologies and mingle it easily. A sample graph designed using MIDA designer can be seen below. Fig: Sample Graph and Node list for Graph 8

Since flow is generated by the existing components there is no need to consider about the implementation details of the component. This also eliminates the programmer to rewrite the same code for different applications. So it paves the way for an highest level of code re usability. It is possible to refer one flow inside another flow making development easier. Robustness of the application depends on robustness of the components rather than individual programmer. CASE STUDY TeleGCA TeleGCA is a patient management system developed in Synapsis for Instituto Sant'Anna, a private hospital specialized for treatment in the neural system. Scenario Other hospitals have to request and book beds for admitting patients to SantAnna institute. The solution should be web based so that there won't be need for any software installation at every client hospital. Many features have to be yet added like remote monitoring of patient by their relatives or parents...etc Implemented System Technologies used MIDA, OpenLaszlo, exist OpenLaszlo is used for developing RIA front end and exist XML native database is used as persistent database. The project is currently deployed using MIDA Tomcat architecture. OpenLaszlo Tomcat MIDA Designer 9

Openlaszlo interface at client side HTTP Posting new patient data in XML format to http://server: 8080/TeleGCA/mapped/statusInsert Byte array of XML data received by MIDA at http://server:8080/telegca/mapped/statusinsert Flow is executed. The data is inserted into exist DB using XqueryExecutor and the response is relaied through HttpServletResponseWriter The exist response is relayed through HttpServletResponseWriter which arrived as a response to client's post Fig : Inserting New patient record in TeleGCA using MIDA 1

CONCLUSIONS To sum up, Web 2.0 will be here to stay and revolutionize the whole world of computers and the Internet by making it easier, faster, simpler and better. The MIDA visual tool developing at Synapsis Srl provides an easier way to integrate multiple technologies, reuse existing robust components, easy to deploy and nice GUI to develop the application work flow. ACKNOWLEDGEMENTS This work is as a result of Stage work during May 2008 to Sep 2008 in Synapsis Srl. I would really like to thank the support and help that has been offered to me both by the tutors at Scuola Superiore Sant 'Anna and at Synapsis Srl, Livorno. I would specially like to thank Davide Guerri, Marco Lettere, Mauro Mugnaini and Franchi Valerio who never failed to answer any of my persistent doubts and were always patient with me during the entire course of my stage work. I would like to include a special mention and would like to thank Dr Claudio Manfroni, the Secretary of our course at Scuola Superiore Sant'Anna who never ceased to help me in any of the issues I faced during and before the stage. 1