 | Level: Introductory Mr. Vaibhav V. Gadge (vaigadge@in.ibm.com), Software Engineer, IBM
25 Jul 2006 Web applications are ready to go to the next level, and Rich Internet Applications (RIAs) can greatly enhance user interaction. In this overview of RIAs, you'll learn how to adapt them in the user interface (UI) layer. Web developers and architects might be particularly interested in the discussion of Laszlo, XUL, XForms, Macromedia Flex, and Dojo -- the common technologies currently available in this area. Links to other technologies are also included. A fair understanding of traditional UI tools, such as HTML and XML, is assumed.
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
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.
What to evaluate
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.
- Complexity
- 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. - Security
- 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.
- Tooling
- 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.
- Usability
- 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.
 |
UI technologies
This section discusses some different options provided by current UI technologies.
Laszlo
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.
|
What is XPath?
XML Path Language is a W3C-recommended language designed to address the information in an XML document. XPath's primary purpose is to navigate through any node and attributes in XML documents. |
|
It needs only Flash 5.x+ installed on any browser. The script is written in an XML-based language called LZX. LZX is an object oriented, tag-based language that uses XML and JavaScript syntax to create the dynamically generated Flash files. The LZX compiler on a server compiles an LZX file and sends out Flash files to the browser. The actual data exchange is in XML form, and LZX controls use XPath to refer to XML. Events are also easy to bind with the controls. Each control defines a set of events that can inherit events from the parent. The example in Listing 1 shows how to use an event.
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
XUL
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.
XUL uses an XML-based markup language to describe the user interfaces controls. It provides all sorts of popular rich internet controls such as menus, tabs, trees, and pop-up menus. XUL uses a document object model (DOM) to store the tree of nodes. Once all XUL files are loaded, XUL parses and converts all tags in a hierarchical document structure of nodes. You can then use the DOM structure to examine and modify the data using its own method and additional methods provided by XUL functions. You can always access and manipulate DOM from JavaScript, making it easy to handle it like a typical HTML control. Each control and each node have several attributes that define their appearance and structure.
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.
The Mozilla browser itself is also a set of packages containing XUL files, JavaScript, and stylesheets, although it is a much larger and much sophisticated extension.
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
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.
|
XML events
XML events is an XML language with the ability to uniformly integrate event listeners and associated event handlers with a DOM event. When an event occurs, it's dispatched to the element (target) through a document tree path and can be passed back to the tree again. The observer can respond to the event in the path. |
|
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:form=http://www.w3.org/2002/xforms
xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en">
<head>
<title>Simple example</title>
<link rel="stylesheet" type="text/css" href="xforms.css" />
<script type="text/javascript" src="../../formfaces.js"></script>
<form:model>
<form:instance>
<data xmlns="">
<greeting>Hi there!</greeting>
</data>
</form:instance>
</form:model>
</head>
<body>
<form:input ref="greeting" incremental="true">
<form:label>Greeting:</form:label>
</form:input>
<form:trigger>
<form:label>Trigger</form:label>
<form:message level="modal" ev:event="DOMActivate">You clicked
button</form:message>
</form:trigger>
</body>
</html> |
Dojo
Dojo is an open source DHTML toolkit written in JavaScript. The Dojo Toolkit provides a core set of libraries, and rich set of different package libraries, and each one provides specific functions. Dojo provides lower level APIs to write portable JavaScript and simplify complex scripts. It is easy and quick to prototype interactive widgets and animated transitions. It provides libraries for events system, I/O packages, and generic language enhancement. You can write scripts with Dojo, and can include as little or as much of the available APIs as you want to suit your needs.
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
<button dojoType="Button2" widgetId="helloButton">Hello World!</button>
You need to include the Dojo widgets library that is required in your HTML page.
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button2");
</script> |
The Dojo kit also includes some debugging options. The AJAX Toolkit Framework (ATF) can be used as a powerful IDE. This is part of IBM's Emerging technology Toolkit (ETTK), which is a special collection of emerging techniques. ATF is based largely on the Eclipse Web tools project, which enables support for DOM browsing, JavaScript debugging, and more.
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
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.
An ECMA scripting language (ActionScript 2) is embedded in MXML to handle user events, system events, or to construct complex data models. This is an object-oriented language, similar to JavaScript and ECME script. Like XForms, Flex also keeps data model, data presentation, data validators, and data services separate (similar to the MVC style).
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.
Comparison of tools
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
| Technologies | Browser technology | Scripting | Richness | Notable |
|---|
| Laszlo | Flash,XML | LZX files+JavaScript | High | Easy to learn, rich | | Mozilla XUL | XUL language | XUL files+JavaScript | High | Powerful with browser dependency | | XForms | Xform | Depends on implementation | Up to certain extent | Device-neutral and W3C compliant | | Dojo | JavaScript | HTML+JavaScript | Up to certain extent | JavaScript based. Growing and adaptable. | | 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/ |
Other technologies
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.
In conclusion
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.
Resources Learn
Get products and technologies
- Dojo tool kit: Speed your Web developement with this JavaScript toolkit.
- Mozilla Firefox: Set up the browser to run XUL files. It also comes with a JavaScript Debugger extension that helps JavaScript debugging.
- 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.
Discuss
About the author | 
| | 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. You can reach Vaibhav at vaigadge@in.ibm.com. |
Rate this page
| |
