Rich Internet Applications (RIAs) go beyond the standard limited set of conventional user interface (UI) controls provided by HTML, such as text boxes, checkboxes, or radio buttons. RIAs provide users with a much richer set of controls, and a more sophisticated server interaction mechanism. With RIAs, users don't have to refresh the page when they submit data from a browser; they can refresh only a part of page, have better error handling, and a lot more.
This article covers:
- Overview of RIAs
- UI technologies, including Laszlo, XUL, XForms, Dojo, and Macromedia Flex
- Comparison of tools
- Other technologies
The term "Rich Internet Application" has been around for a few years, although the concept has also been known as:
- Remote scripting
- X Internet
- Rich (Web) clients
- Rich Web application
The Internet is a huge source of information, and technologies strive to improve information delivery and storage performance on the Web in a sophisticated and user-friendly manner. In most Web applications, a substantial amount of processing takes place on the server side and mere user interaction takes place on the client side. This eventually burdens the server with a heavy data and processing load, and increased dependency on network traffic.
The ancient client-server based architecture has high flexibility and richness, but died in the age of the Web. One reason was the lack of uniformity or standardization of client applications. Now, undoubtedly, the browser is the universally accepted Web tool. Yet, it lacks intelligent processing. So the onus lies on client applications that can deliver a richer user experience and do simple processing on the client side. RIAs provide opportunities to design much better, faster, more engaging, and infinitely more usable user experiences -- all within a browser.
Developers who work on the Web and internet UI layer often experiment on the UI layer and try various RIA tools that can work effectively with minimum external support. In most cases, however, the browser needs some support in terms of plug-ins, extensions, or downloads to work seamlessly inside the browser.
This article discusses the tools and parameters that help identify the best RIA choices for a business case. It isn't possible to discuss all the factors of RIAs, but I'll concentrate on some important features to review as you evaluate RIA technologies.
When you evaluate RIA technologies, consider the following factors:
- Richness of the UI
- How many basic, out-of-the-box UI widgets or controls are readily available to develop a UI? How can you do data binding and event binding with these controls? The new controls should be easy to use, and also easily pluggable. Some RIA technologies give simple ways to add richness and more informative visual experiences, such as providing animation APIs in the page. For example, to ensure users click only once on a button, you can animate the button to move out of the view.
- Developers have used existing page-based models for so many years because it is easy and simple, however clumsy it might appear. RIA technology has to be easy to learn, build, and extend. It should also interoperate with existing Web technologies.
- Flexibility and componentization
- Flexibility to collaborate with different middleware components is important. Collaboration should be easily composable and extendable to create new customized widgets. Once you create libraries of custom widgets, you can reuse them in applications.
- Refreshing the page
There is a significant advantage to refreshing a block of a page instead of an entire page, as it directly depends on network traffic. Refreshing a block makes the application faster, more usable, and a much better visual experience for users. It also helps manage errors better.
Suppose a user performs an action or a first task on a Web page, and the data is submitted to a server in the background. Then the user resumes another task on the same page. In the meantime, the feedback from the first task has come back and updated some part of the same page. Thus, if you design the Web page in such a way, you make the work and tasks more efficient.
- When you adapt to RIAs, ensure that there is no increased security threat compared to conventional applications. Be aware of security surrounding server communications, or browser plug-ins and extensions downloaded on a client.
- Support for basic Web paradigms
- The technology should support the basic Web paradigms that have evolved in today's Web applications, such as internationalization, user device independence, browser independence, and binary file transfer support for upload and download functions. Even the maturity of the technology matters.
- Review the tooling that's available for developers in the form of integrated development environments (IDE), with unit testing and debugging support. Tooling might be plug-ins with existing editors or supported editors.
- Users expect the browser application to work with its usual browser features. In particular, features such as saving images, Ctrl+F to search for content on a page, and copy-and-paste don't work in Flash-based solutions. Base your RIA usability design on human-computer interaction (HCI) principles.
This section discusses some different options provided by current UI technologies.
Laszlo is the leading open source platform for the development and delivery of RIAs on the Web using Flash. Flash player was initially started with a small plug-in to run Flash files inside browsers. Because of its high reliability and compatibility, it is extensively used for creating flashy and animated images. Later versions have incorporated some serious scripting compatibility, data exchange with servers, and Flash 6 that adds bidirectional audio and video communications.
Laszlo has extended this richness, and used scripting language that generates Flash and delivers in a browser. It provides an open source XML-native platform for building RIAs.
Listing 1. Example, simplelaszlo.lzx
<canvas width="500" height="80"> <view> <text align="center" valign="middle">Hello, World!</text> <button >Update <method event="onclick"> Debug.write("Button pressed"); </met> </button> </view> </canvas>
You'll find Laszlo easy to learn, develop new components, componentize, and integrate with any Web application. It has a rich library of components compared to other RIA tools.
LZX has the capability to make HTTP and Web services requests with SOAP and RPC protocols to the server, in the background, without refreshing the page. A plug-in is already present to integrate any Web application file with the Laszlo library. Currently, an Eclipse-based IDE is available for development. There is also some tooling available for debugging in LZX on the client side. Interestingly, they also provide the Lzunit framework for testing Laszlo applications.
Recently, Laszlo announced support to deliver the application in a browser as a DHTML using the same existing framework. This provides you the option to configure whether you want to deliver the application to DHTML or Flash. Laszlo has also extended support to the Ajax community and multiple user device delivery.
Figure 1 shows an example of Laszlo and Dojo.
Figure 1. RIA image created with Laszlo and Dojo
XML user-interface language (XUL) is Mozilla's XML-based, cross-platform language that describes user interfaces of applications. It provides a rich library of ready-made components for use in a page. Currently, it works only on Gecko-based browsers such as Mozilla Firefox, or Netscape 6 or later.
A browser handles XUL files similarly to HTML or other browser content when accessed from a remote location. However, when they are installed locally in a browser in its chrome system as an extension, they receive special privileges to access local systems and bookmarks. In this case, it can perform additional privileged operations.
XUL uses the eXtensible Bindings Language (XBL) for binding. Each control can be bound using Mozilla's XBL. XUL uses the RDF format, which can be used to store resources. You can use data in other formats and create RDF data from it, which will be bound to XUL elements.
Because XUL is like an XML file, you can use any text editor or XML editor for the IDE. Since the same underlying code handles all the XUL files, HTML, and SVG, you can use CSS properties to style XUL files. It has built-in support for localization, as all text content is kept separately in a browser.
Skins, made up of CSS files in Mozilla, define the user interface of the browser. You can modify and create skins for different looks without changing the code. It is similar to extending the power of the browser APIs by adding features.
If you run the file in Listing 2 in Mozilla Firefox, it will render a text box and button.
Listing 2. Example, simplexul.xul
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="example-window" title="Example 2.4.1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <label control="label" value="Enter some text"/> <textbox id="textid"/> <button id="yes" label="Yes"/> </window>
XForms 1.0 provides a new platform-independent markup language for online interaction. W3C has come up with the specification for implementing XForms, and it is considered a successor to HTML forms.
XForms is independent of the presentation device. It can be delivered without any code changes to a traditional browser, PDA mobile phone, voice browser, and even some more exotic emerging clients such as an instant messenger. This makes it an attractive tool for RIA.
In XForms, the actual data (XML form definition) is separated from the presentation of the form. This device-independent XML form definition, called the XForms model, can work with a variety of standard or proprietary user interfaces.
XForms user interfaces provide a standard set of visual controls that are targeted toward replacing today's XHTML form controls. They are usable inside XHTML SVG or other groups, voice browser groups, or can also independently develop user interface components for XForms.The XForms model is referred in each XForms control to render the data. It follows the XPath to refer the elements in XML. When data is submitted, it can just submit the populated XML data model.
XForms uses XML events for handling events and actions. The XML event specifies event, observer, and handler. As shown in Listing 3,
DOMActivate is the event, message element is the handler, and parent trigger is the observer.
You can integrate XForms with AJAX. Currently, at the W3C, you can find 20 or more example implementations of XForms. Many vendors, including IBM, have already developed XForms engines (see Resources for the XML Forms Package). Mozilla has announced that XForms will be supported on all platforms on which Mozilla runs. To look at a good example of XForms implementation, see Resources.
Listing 3 shows a simple example of XForms that displays a text box and button rendered with a FormFaces™ implementation.
Listing 3. XForm displaying a text box and button rendered with a FormFaces™ implementation
Dojo also provides a set of widget libraries that you can use directly in any application. You can use some of the core widgets as UI controls, such as the menu widget, tabs set, tree widget, and more. Others are generic functions, such as layout widgets, date picker, SVG widget, and so on.
Dojo is built around a single markup language that provides a simple way to declare and use response DHTML interface components. Listing 4 shows a simple example of a Dojo component for a special button to the user in an HTML page.
Listing 4. Example, dojosample.html
Recently, the Dojo Foundation announced a partnership agreement with Laszlo. Under this agreement, you can use the Dojo Toolkit in Laszlo's open source projects. In turn, Laszlo will contribute libraries to the Dojo Foundation, thereby advancing the growing open source communities at large.
Macromedia Flex is another Flash-based user interface. It provides a Flex presentation server that sits on top of an application server, and generates Flash files dynamically from the server and delivers to a browser. These Flash files are executed inside the Flash player of the browser, and allow interaction with users, the performing of operations, and even the generation of SOAP, HTTP, or AMF requests to connect back to the server.
The layout and UI components are defined in an XML-based language called MXML. Flex provides a rich MXML extensive class library for visual components, containers, and remote service objects and data models. It also does data binding with controls, and accesses server-side data.
All requests that come to MXML are processed through the Flex compiler, which compiles MXML and generates SWF, and caches until it is modified and finally delivered to the browser.
Any XML editor can be used for scripting of MXML, but Macromedia also provides a special IDE called Flex Builder 1.5 for Flex application development. It has the advantage that it is integrated with the Flex server. It also provides components that allow connecting to the server, doing normal HTTP calls, connecting to remote Java™ objects, and interacting with Web services from the browser itself. It can be integrated with existing J2EE and .NET application models.
Listing 5 shows an example of Macromedia Flex code.
Listing 5. Example of Macromedia Flex code
<?xml version="1.0"?> <mx:Application xmlns:mx="http://macromedia.com/2003/mxml"> <mx:Form label="Employee Information"> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" /> </mx:FormItem> </mx:FormItem> </mx:Form> <!-- The myEmployee data model. --> <mx:Model id="myEmployee"> <name> <first /> <last /> </name> <department /> <email /> </mx:Model> mx:Binding source="firstName.text" destination="myEmployee.name.first" /> </mx:Application>
Macromedia Flex looks similar to Laszlo. Both are rich and powerful Flash-based applications. Laszlo stands outside of the Flash engine, so performance might take a hit, but it has several other advantages.
The following table compares the five technologies discussed in the previous section, as well as Altiolive (a rich enterprise application).
Table 1. Comparison of tools
|XForms||Xform||Depends on implementation||Up to certain extent||Device-neutral and W3C compliant|
|Macromedia Flex||Flash, XML||MXML files||High||Not open source. Proprietary tool of Macromedia.|
|Altiolive||Applet, XML||Java||Up to certain extent||http://www.altio.com/|
You've looked at five technologies, but there are certainly more. A number of companies provide very impressive prototypes of RIAs using various technologies. While out of the scope of this article to discuss each of them, it is worth your looking into the following:
- Backbase - Develops and sells software that helps create AJAX applications.
- Netvibes - A free service for custom-made Web home page solutions.
- Zimbra - An open source server and client technology for next-generation enterprise messaging and collaboration.
- Protopage - Free, personal start pages.
- Nexaweb - A software platform for building and deploying Enterprise Internet Applications.
- altio - Rich enterprise applications in a browser.
This article introduced RIAs, discussed current UI technologies, and pointed to additional technologies. I hope this comparison of the tools will help you choose the one right for your requirements. Each technology has different advantages, giving developers a rich set of controls based on your needs.
The technologies discussed bring some amazing things to users, and provide a richer user experience. You can now go beyond the browser and render to PDAs, mobile devices across platforms, and empower the user experience with audio, video, graphics, and animation. RIAs have almost embraced XML, and XML is undoubtedly the winner here.
In the future, I expect RIAs will play a major role in transforming Web UIs to the next level, and aid preparation to support Web 2.0.
- OpenLaszlo: Learn all about this open source platform.
- XULPlanet: See how easily you can create rich, sophisticated, cross-platform Web applications.
- XForms: Visit the W3 place for XForms and the latest implementations.
- Macromedia Flex: Look at sample applications at Adobe's Flex Development Center.
- Dojo WikiHome: Contribute a Dojo project.
- Articles: Read about Rich Internet Applications, and how "RIAs are designed to deliver 8A's Software Simply."
- Orbeon: Check out a good example of XForms implementation.
- developerWorks Web architecture zone: Expand your Web-building skills.
- developerWorks technical events and webcasts: Stay current on technology with these sessions.
Get products and technologies
- Ajax Toolkit Framework: From Eclipse Web tools, try this as an IDE for Dojo.
- XML Forms Package: Get these XForms engines available from alphaWorks.
- IBM trial software: Build your next development project with software available for download directly from developerWorks.
- Participate in the discussion forum.
- developerWorks blogs: Participate and get involved in the developerWorks community.
Vaibhav V. Gadge is a software engineer at the IBM Software Lab in Bangalore, India. He currently works on the Portal team of the Websphere Product Center. He is a Java certified professional, and has around five years of technical experience in Java, J2EE, and Web-based technologies on multiple platforms. He holds a Bachelor's degree of Electronics Engineering from Nagpur University.