An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0 September 2010 Copyright IBM Corporation 2010. 1
Overview Rational Application Developer, Version 8.0, contains tools for creating Web 2.0 applications. Web 2.0 is the second generation of services and applications available on the World Wide Web that enable collaboration, information sharing, dynamic service delivery, and interaction. The concept of Web 2.0 typically includes later-generation Web-based applications such as wikis and weblogs. Web 2.0 applications look more like desktop applications and are often dynamically data driven rather than comprising static HTML content. Web 2.0 applications provide users with a richer set of controls and a more sophisticated server interaction mechanism in order to deliver Web-based applications that look and feel like desktop applications. Typically with Web 2.0, users do not have to refresh a page when they submit data from a browser; they can refresh only a part of page. This is achieved through the use of a rendering engine, such as the RPC Adapter, that works from the client-side and mediates between the client and the server. Asynchronous JavaScript and XML (AJAX) is an implementation of Web 2.0. It is made up of a group of technologies that are used to create dynamic, interactive Web pages that respond quickly to requests through the exchange of smaller chunks of data. AJAX uses a combination of existing technologies and protocols including XHTML, CSS, XML, client-side scripting languages such as JavaScript, Document Object Model, and an asynchronous data retrieval mechanism such as XMLHttpRequest. It is an architecture that makes browsers more interactive by running JavaScript on the client. To create a Web 2.0 application in Rational Application Developer: 1. Create a Web 2.0 enabled Web project. 2. Create a Web page using HTML, XHTML, and CSS. 3. Create the dynamic display using Dojo widgets, JavaScript, and Document Object Model (DOM). 4. Create the data interchange mechanism using JSON, XML, and XMLHttpRequest. What is Ajax? Asynchronous JavaScript and XML (Ajax) refers to a group of technologies that are used to develop Web applications. By combining these technologies, Web pages appear more responsive since small packets of data are exchanged with the server and Web pages are not reloaded each time a user makes an input change. Ajax allows a Web application user to interact with a Web page Copyright IBM Corporation 2010. 2
without the interruption of constant Web page reloading. Web site interaction happens quickly with only portions of the page reloading and refreshing. Ajax is made up of the following technologies: XHTML and CSS for presenting information. Document Object Model (DOM) for dynamically interacting with and displaying the information presented. XMLHttpRequest object to manipulate data asynchronously with the Web server. XML, HTML, and XSLT for data interchange and manipulation. JavaScript for binding data requests and information display. Ajax incorporates these technologies to create a new approach to developing Web applications. Ajax defines a method of initiating client to server communication without page reloads. It provides a way to enable partial page updates. From a Web page user perspective, this means improved interaction with a Web application giving the user more control of their environment similar to a desktop application. In a traditional Web application, HTTP requests, that are initiated by the user's interaction with the Web interface, are made to a Web server. The Web server processes the request and returns an HTML page to the client. During HTTP transport, the user is unable to interact with the Web application. In an Ajax Web application, the user is not interrupted in interactions with the Web application. The Ajax engine or JavaScript interpreter allows the user to interact with the Web application independent of HTTP transport to and from the server by rendering the interface and handling communications with the server on the user's behalf. Copyright IBM Corporation 2010. 3
Ajax limitations While Ajax is a Web application development technique that is designed to make Web pages more responsive and interactive with a user, Ajax has some limitations that should be considered before developing an Ajax-based application. The following limitations are some of the more prominent disadvantages: Browser support - Not all browsers support JavaScript or XMLHttpRequest object. Even among browsers that do have support for JavaScript and XMLHttpRequest, these objects can be treated differently. Each browser's implementation of Ajax must be considered. Security and user privacy - Not all concerns have been addressed. Issues surrounding security and user privacy need to be considered when developing an Ajax application. Accessibility - Because not all browsers have JavaScript or XMLHttpRequest object support, you must ensure that you provide a way to make the Web application accessible to all users. Bookmark and navigation - Since Ajax is used to asynchronously load bits of content into an existing page, some of the page information may not correspond to a newly loaded page. Browser history and bookmarks may not have the correct behavior since the URL was unchanged despite parts of the page changing. Search engine - Ajax applications are not searchable; however, it is possible to use Ajax features and elements within an application that is searchable. The Dojo Toolkit The Dojo Toolkit is a powerful open-source JavaScript library that can be used Copyright IBM Corporation 2010. 4
to create rich and varied user interfaces running within a browser. The library requires no browser-side runtime plugin and runs natively on all major browsers. This is boon for JavaScript developers since it helps abstract away the eccentricity of different browser implementations.abstract. The Dojo Toolkit is a powerful and flexible modular Ajax software development kit. It is broken down in to three major layers: Dojo Core, Dijit, and DojoX. Dojo Core - All the major functions needed to do Ajax development, plus many features not found in other toolkits Dijit - A high quality set of interaction rich widgets and themes for use when developing Ajax applications. DojoX (Dojo extensions) - A module to contain widgets and APIs that are useful for developing Ajax applications, but are not needed in all applications. The Dojo Toolkit Web site serves as a guide to these layers, introducing concepts as you need them and working downward from high-level usage to building your own widgets, custom namespaces, and unit tests. In Rational Application Developer, Dojo widgets can be dropped on a Web page from a palette. The palette is shown below: For more information about the Dojo Toolkit, refer to the http:// Copyright IBM Corporation 2010. 5
www.dojotoolkit.org/ Web site. Firebug Support Firebug is an open source extension for Mozilla Firefox that assists you with debugging, editing, profiling, logging, and monitoring HTML pages, DOM, CSS, and JavaScript. When you use Firebug to debug your Web pages, the Console view and editor in this product and the Firebug tools are synchronized. The debug view is integrated into the workbench, allowing you to easily set breakpoints and monitor variables. For more information To learn more about Web 2.0 applications and Rational Application Developer, see these resources: Rational Application Developer Web site: http://www-01.ibm.com/software/awdtools/developer/application/index.html Copyright IBM Corporation 2010. 6
Rational Application Developer Information Center: http://publib.boulder.ibm.com/infocenter/radhelp/v8/index.jsp Rational Application Developer wiki: https://www.ibm.com/developerworks/wikis/display/rad/home Copyright IBM Corporation 2010. 7