White Paper AJAX. for Graphics-Intensive Web Applications

Transcription

1 White Paper AJAX for Graphics-Intensive Web Applications

2 AJAX for Graphics-Intensive Web Applications White Paper ILOG, May 2006 Do not duplicate without permission. ILOG, CPLEX and their respective logotypes are registered trademarks. All other company and product names are trademarks or registered trademarks of their respective holders. The material presented in this document is summary in nature, subject to change, not contractual and intended for general information only and does not constitute a representation.

3 Table of Contents What is AJAX?...2 What does AJAX improve and how?...2 How are AJAX applications developed?...3 What development effort is required?...3 JavaServer Faces...3 Where can it be used?...4 What are the benefits for graphical Web user interfaces?...5 Adaptive context menus...5 Editing capabilities...7 Vector Graphics on the Web...8 Real-time updates...8 Tiling and load on demand...9 Conclusion.10 Page 1

4 What is AJAX? AJAX is not a technology per se, but rather a design approach for Web applications. AJAX, which stands for Asynchronous JavaScript and XML, improves the user s Web application experience while retaining the benefits of transparent deployments and immediate availability of application updates for all users. It mixes a set of proven techniques available to most browsers, including Microsoft Internet Explorer (IE) and Mozilla Firefox. What does AJAX improve and how? A classic Web application model follows these steps: 1. User operations in the interface send data input to the Web server. 2. The server does some processing user input, talking to various legacy systems to retrieve data, number crunching, etc. and then returns the resulting HTML page to the client. What usually happens with a multifield Web-page form is that when the user clicks on a form element, the application freezes until the Web server responds, and when it does, the display flickers as the whole page is refreshed. With AJAX, Web form elements are updated individually, so there is no full-page flickering and the application remains usable while the request is sent to the server and the Web browser waits for an answer. This approach provides many benefits apart from a better user experience: 1. The server-side application can now be designed to compute answers as data and not as full pages to be redisplayed, boosting the server s scalability for serving more users. Also, as partial updates are made, less network capacity is usually required. 2. The application remains usable even when waiting for the Web server to answer, resulting in more productivity for the end users AJAX makes this possible with an execution engine in the end-user browser that interprets answers from the Web server as updates to individual items in the display, and only changes those items, instead of refreshing the entire page. Page 2

5 How are AJAX applications developed? Since AJAX is an application architecture and design philosophy, different technologies can be used to develop AJAX applications. The main focus is two fold: 1. Make the Web server provide answers in an XML or JSON format that can be understood by the AJAX engine 2. Develop or reuse an AJAX engine that interprets Web server answers and updates the individual display elements On the client side, the chosen technology must enable the AJAX engine to be streamed when the application starts, and the technology must be available to all browsers. JavaScript has become the primary development language since it is widely used and supported by all the major Web browsers. What development effort is required? Overall, AJAX applications are expensive to develop and even more so to maintain. Drawbacks to the AJAX approach include architecture complexity, asynchronous processing and limited browser scripting capabilities. Of course, the developer s solution depends on the chosen development technologies and toolkits used to produce the Web graphical user interface (GUI) and their ability to handle Web environments. If you use a traditional desktop solution to create the server-side framework for generating graphics, development time can range up to dozens of man-years to create the framework, define the information exchange protocol with the server, and develop a large set of browser scripts to create the AJAX engine and all its capabilities. But that s the long way. The short way is to use a solution built to handle Web environments. The ILOG JViews product suite comprises a complete line of graphical toolkits for Java developers. They provide Java classes and development tools for making charts, maps, diagrams, network GUIs and Gantt charts for desktop and Web applications. When you rely on a Web-enabled, AJAX-ready solution like ILOG JViews, the development effort is reduced to setting parameters and extending provided capabilities. JavaServer Faces To help cope with the inherent complexity of AJAX and JavaScript, ILOG JViews leverages the JavaServer Faces (JSF) standard. It hides any unnecessary complexity in application development, and the new JSF 1.2 brings us even closer to AJAX architectures and facilitates incremental updates. JSF allows the creation of advanced Web-based GUIs in JSP pages and makes development faster with cheaper maintenance. Page 3

6 The code below shows how to create a chart. Its data is handled by a server-side JavaBean and the style is defined by a cascading style sheet (CSS) file named style.css. This CSS file is produced with an ILOG JViews point-and-click designer tool. <%@ taglib uri=" prefix="f"%> <%@ taglib uri=" prefix="h"%> <%@ taglib uri=" prefix="jvrc"%> <html> <body> <f:view> <h:form id="form"> <jvrc:chart id="thechart" width="450px" height="300px" value="#{myserversidebean.datasource}" stylesheet="style.css"/> </h:form> </f:view> </body> </html> Where can it be used? AJAX was first used with Web applications that have users fill out forms through text-based entries. Filling out forms is an inescapable requirement for shopping or obtaining service through the Internet. To buy a ticket, get a quote or auction on e-bay, you have to fill out an online application form. With AJAX, a Web form is dynamically adapted in response to the user s entries without reloading the entire form after each entry. For instance, as someone is purchasing airline tickets for a group, new form fields are added for entering information such as ages and individual preferences. But AJAX isn t just for form-based applications. It is also used with graphical representations in which, for example, data for trends are shown in charts, assets on maps and schedules as Gantt charts. Page 4

7 What are the benefits for graphical Web user interfaces? Graphical Web applications have suffered a lot from today s technical limitations. Users are used to interacting smoothly with desktop applications. They expect instant zooming, scrolling, selection and editing in desktop applications like PowerPoint. When graphic intensive applications are deployed to the Web, the level of interactivity and the user experience degrade significantly: With each interaction, the user must wait for the server to generate a new image (e.g., new zoom level) and send it. The server s CPU speed and the network s bandwidth impact the response time. Consequently, the user s experience can be unpleasant if the refresh rate is slow and a blank screen appears between interactions. Secondly, in most cases, the browser displays images in which elements cannot be selected individually. Costly workarounds exist, typically as image maps, but the quality of interactivity falls way short of the user s expectations. AJAX offers solutions for the above issues, solutions whose effectiveness is well illustrated by Google Maps, which has helped fuel the tremendous interest in AJAX. But before detailing AJAX s benefits for advanced graphics, let s briefly describe how ILOG JViews produces and manages GUI maps, diagrams, charts and other graphics transmitted to the client browser. ILOG JViews components reside on both the server for display generation and the client browser for interactivity. On the server side, ILOG JViews transforms application data (e.g., records in a database or objects in an object model) into graphical representations that are meaningful to the final user, and generates DHTML code that combines raster images (visualization) and JavaScript code (behavior). The DHTML code is then sent to the Web browser, which interprets and displays the results. As noted above, the performance of Web GUIs is significantly degraded compared to their desktop equivalents. Without AJAX, most browser interactions result in time-consuming roundtrips to the server and complete Web-page refreshes. Now, let s see what benefits come from applying AJAX principles with a toolkit like ILOG JViews. Adaptive context menus Contextual menus the ones you get when you right-click provide application-specific information and actions on the selected object. With AJAX, contextual menus are created dynamically from an XML request sent to the server. Since ILOG JViews uses AJAX concepts, the interactions with the server are asynchronous to maintain a satisfying user experience. Such interactions are common in applications whose graphical displays are used to modify application elements. Support for this functionality in a graphical toolkit like ILOG JViews offers important value to Java developers, as they have significantly less code to write, and the final users get a benchmark of interactivity. With any ILOG JViews product, what appears in the contextual menu can be defined either once for all the menus in a JSP Web page or as needed for interactions with the server. Page 5

8 Here is an example of a contextual menu definition for an ILOG JViews Charts display in a Web page: <jvcf:chartcontextualmenu> <jv:menuitem label="zoom..." onclick="zoombutton.doclick()" image="images/zoom.gif" /> <jv:menuitem label="pan..." onclick="panbutton.doclick()" image="images/pan.gif" /> <jv:menuseparator /> <jv:menuitem label="zoom In" onclick="viewid.zoominx()" image="images/zoom.gif" /> <jv:menuitem label="zoom Out" onclick="viewid.zoomoutx()" image="images/unzoom.gif" /> </jvcf:chartcontextualmenu> Here is another example of a dynamic contextual menu definition. It requires interaction with the server, which answers according to AJAX concepts: <jvcf:chartcontextualmenu factory="#{chartbean.menufactory}" /> With: public class ChartBean { public IlvMenuFactory getmenufactory() { return new MyMenuFactory(); } } public class MenuFactory implements IlvMenuFactory { // actually create the menu content in Java } Page 6

9 Editing capabilities Almost all Web-based graphical applications rely on raster images (e.g., JPG, GIF and PNG). This approach limits the editing and manipulation of individual display elements. For instance, when a display represents a business process, the user may need to add, move, modify or delete activities, and this is difficult to provide through a Web-based application. Unlike desktop applications, the images displayed in a Web browser do not natively allow such editing capabilities. To detect an object selection or movement, we need to use the image maps mechanism. It defines the actionable areas of an image through JavaScript or a dialog with the server. With ILOG JViews components, the browser tracks mouse events and asks the server which elements have been selected according to the mouse s position and movements. The server replies for instance, Activity1 is selected and tells the browser to create a highlight rectangle around the selected object. This provides visual feedback to the user, who can move the selected objects with dynamic visual feedback during the operation. Once the user finishes his drag-and-drop action, ILOG JViews sends a new request to the server, which updates its data model to be consistent with the display. The server then replies with a new image reflecting the user s changes. All these operations are based on AJAX principles to minimize data exchange and prevent the end-user application from freezing. With ILOG JViews Diagrammer, you just need a few lines of code to define an AJAX selection and object move for a Web-based display. With the following example, users can select nodes in the diagram without page flicker (imagemode= false ) and can change their location interactively: <jvdf:selectinteractor id="selectinterator" imagemode="false" linecolor="#ff0000" linewidth="2" /> And set it on the ILOG JViews Diagrammer component interactorid attribute: <jvdf:diagrammerview id="diagrammer" style="width:600;height:350" interactorid="selectinterator" data="/data/genealogy.idpr" waitingimage="images/wait.gif" backgroundcolor="#ffffff" /> Step 1: Select Step 2: Drag object locally Step 3: Drop object With ILOG JViews components, the browser tracks mouse events and asks the server which elements have been selected according to the mouse s position and movements. The server replies for instance, Activity1 is selected and tells the browser to create a highlight rectangle around the selected object (Image 1). This provides visual feedback to the user, who can move the selected objects with dynamic visual feedback during the operation (Image 2). Page 7

10 Once the user finishes his drag-and-drop action, ILOG JViews sends a new request to the server, which updates its data model to be consistent with the display. The server then replies with a new image reflecting the user s changes (Image 3). Vector Graphics on the Web Even though solutions exist to improve the Web-user experience with graphic-intensive applications, the best option is to use vector graphics in the browser. With this approach, users can interact with the display without sending requests to the server for zooming and panning. This lets them select, modify, create and delete elements in the display exactly as we do with desktop applications. Today, there are two viable solutions for browser vector-based displays: Scalable Vector Graphics (SVG), an open World Wide Web Consortium (W3C) XML standard Flash, an Adobe/Macromedia proprietary language with an important installed base and a long history in Web marketing pages. It now provides extensions through Flex for Webbased application development. But to achieve a good user experience when there are exchanges with the server, the AJAX principles still need to be applied. ILOG JViews 7.5 provides advanced SVG-based AJAX components for an improved user experience, lower server and network load, and real-time update capabilities. Real-time updates Dashboard and supervision applications are often Web-based. They use server-generated images to display charts and gauges, but often lack interaction and frequent update capabilities. When a dashboard application needs advanced interactivity (e.g., zooming and panning), or frequent updates to match data changes (e.g., fluctuating production levels), the image generation process becomes a bottleneck both for the server and the network. ILOG has developed a client-side charting component based on SVG that overcomes the above limitations, no matter the number of users, and enables data refreshes down to the second. Upon creation, SVG components are sent to the user s browser, along with JavaScript to define the chart behavior. SVG allows the user to zoom, pan, display charts and get details via tool tiplike information when moving the mouse over data points, for instance, all without any interaction with the server. When input data changes, the server sends only the effected parts of the display to the connected clients as XML data. This reduces network load to a minimum. The XML data is interpreted by the browser AJAX engine, which updates the display to provide the user with desktop-like interactions. ILOG JViews SVG charting fully applies AJAX concepts to provide the best user-experience, and greater server and network scalability for sending frequent updates to thousands of users. SVG display is natively supported by Firefox 1.5. At this time, a free plug-in from Adobe is needed to display SVG with Microsoft Internet Explorer (IE), which is expected to support SVG display natively in future releases. This is not seen as a barrier to adoption of SVG, as a plug-in was initially needed to display PDFs with IE. Page 8

11 The following code sample shows the setup of a Rich Web Chart in SVG that includes: A set of predefined interactions (zooming, scrolling, etc.) A highlight behavior showing a marker over the mouse pointer in the chart A JavaScript client-side action executed when the user clicks on a point : <jvrc:chart id="chart" width="450" height="300" value="#{stockbean.datasource}" stylesheet="#{stockbean.stylesheet}" > <jvrc:zoominteractor /> <jvrc:xscrollinteractor /> <jvrc:yscrollinteractor /> <jvrc:highlightinteractor style="square"/> <jvrc:pickinteractor onpick= alert( picked point index: +pickedpoint.getindex()) /> </jvrc:chart> Tiling and load on demand Map displays are typically heavy and take a significant amount of time to be generated on the server and transported through the network. Tiling and caching offer the best solution, as Google has demonstrated with the Google Map Web-based map viewer. This approach builds a map from several images (tiles) cached locally by the browser. As the user pans or scrolls, he doesn t have to wait for all the images to be received again because only the tiles needed to extend the map are sent by the server through an asynchronous AJAX mechanism. The application remains usable even while receiving new tiles, and the browser s caching mechanism prevents tiles from being loaded repeatedly. ILOG is working to implement the same approach in its ILOG JViews map displays and other schematics, and will support interactive foreground objects such as telecom graphic objects. Page 9

12 Conclusion The demand for Web-based user interfaces is growing fast as Internet services strive to broaden their customer base. Google has shown that the painfully slow user experience we ve come to except from the Internet can be much faster and smoother with AJAX..Since its introduction, AJAX has become one of the most popular subjects in IT news, papers and application requirements. The new AJAX features in ILOG JViews products enable developers to take a big step closer to a great Web-based user interface with charts, maps, diagrams and Gantt charts. Based on JavaServer Pages, ILOG JViews makes use of DHTML and SVG to offer meaningful displays that heighten the user experience. No doubt demand will grow for an even higher level of interaction and more real-time displays. ILOG is preparing the path. Page 10