RICH INTERNET APPLICATIONS

By | July 6, 2010

ABSTRACT

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.

Rich Internet Applications, or RIA,provide users with a much richer set of controls, and a more sophisticated server interaction mechanism, that approach the speed and elegance of local applications. The most powerful of these RIAs will take advantage of standards-based, service-oriented approaches to integrate all the content, communications, and application interfaces it can physically access. Rich Internet Applications  go beyond the standard limited set of conventional user interface (UI) controls provided by HTML.

However, what is most important is that RIAs loosely couple presentation from application logic, allowing developers to change server-side logic without breaking the usability of their applications

Rich Internet Applications (RIA) technologies are capable of providing advanced capabilities for User Interaction(UI), including seamless navigation, desktop-like GUI features and Data Integration. Some of the UI technologies are:

  • Laszlo
  • Dojo
  • XUL
  • Micromedia Flex

INTRODUCTION

Rich Internet Applications, or RIA, are web-based applications that approach the speed and elegance of local applications. The term Rich Internet Application was introduced in a Macromedia white paper in March 2002.

In traditional web applications, systems all processing is used to be done on the server, this proved it is a very slow and tedious process .With RIA, a client side technology  is capable of executing the instructions on the clients computer. The biggest advantage of RIA is that it can circumvent the slow and synchronous loop for multiple user interactions.

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.

Some RIA technologies give simple ways to add richness and more informative visual experiences, such as providing animation APIs in the page.

Rich Internet Applications (RIAs) go beyond the standard limited set of conventional user interface (UI) controls provided by HTML. RIAs provide users with a much richer set of controls, and a more sophisticated server interaction mechanism.

UI technologies

In this paper we discuss 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. It also 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. Xpath is a primary purpose to navigate through any node and attributes in XML documents. 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.

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.

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>

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.

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 2. 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>
          dojo.require("dojo.widget.*");
      dojo.require("dojo.widget.Button2");
</script>

Recently, the Dojo Foundation announced a partnership agreement with Laszlo.

RIA image created with Laszlo and Dojo

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. 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 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.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.

Listing 3. Example, simplexul.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<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/>
<button label="Yes"/>

</window>

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.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. Flex also keeps data model, data presentation, data validators, and data services separate. 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 Integrated Development Environments (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 4. 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 />
      </mx:FormItem>
</mx:FormItem>
</mx:Form>
<!-- The myEmployee data model. -->
<mx:Model>
   <name>
      <first />
      <last />
   </name>
   <department />
   <email />
</mx:Model>
mx:Binding source="firstName.text" destination="myEmployee.name.first" />
</mx:Application>

Comparison of tools: The following table compares all the above four technologies.

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
Macromedia Flex Flash, XML MXML files High Not open source. Proprietary tool of Macromedia.
Dojo JavaScript HTML+JavaScript Up to certain extent JavaScript based. Growing and adaptable.

Beneficial Features of Rich Internet Applications

  • Increased success rate of End-User transactions
  • Dropping the expense to Application Development and IT Infrastructure
  • Reforming development
  • Quick and smooth evolvement of Online Businesses in online market sphere
  • Providing better interactive and Real-Time User Experience
  • Facilitating the business standards of the industry
  • To save time, introduction of more featured interface with multiple options.

Drawbacks

  • Complexity of advanced solutions can make RIA more difficult to design, develop,        deploy and debug than traditional web applications.
  • Richness by way of features not supported natively by the web browser such as video capture (eg. Adobe Flash).
  • Performance depends on the application and network characteristics.

FUTURE TECHNOLOGY ADVANCEMENTS

The fact ismost of the technology accomplishing 99% of what is required by todays consumers/companies already exists.

  • Development of some support for dimensional renderings to keep up with WPF(Windows Presentation Foundation).
  • Looking for those platforms that equally address performance AND compatibility.
  • Standards for measuring RIAs are in their infancy. companies can improve and measure their returns on investment.
  • We need to have the ability to run on multiple devices, and auto-magically allow
  • devices to synchronize the data between them.

CONCLUSION

This paper introduced RIAs which is pointing to the current UI technologies. This comparison of the tools will help us to choose our 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 gives power to the user experience with audio, video, graphics, and animation. RIAs have almost embraced XML, and XML is undoubtedly the winner here.In the future RIAs will play a major role in transforming Web UIs to the next level, and aid preparation to support Web 2.0.

Please Share: Tweet about this on TwitterShare on FacebookShare on Google+Share on RedditPin on PinterestShare on LinkedInDigg thisShare on StumbleUponShare on TumblrBuffer this pageShare on VKEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *