Download An introduction to creating Web 2.0 applications in September 2010

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