Rich Client based UI technologies- A Comparison of Thick Client UI tools

Rich Client v/s Thin Client

Software developers face many difficult decisions when building new applications, not the least of which is graphical user interface. There are various graphical user interface technologies used, but broadly they can be classified as Rich Client User interfaces and the thin client or web based user interfaces. To understand them better let us look at the history of rich and thin clients. While the Rich client GUI applications would support high quality end-user experience with features such a drag-and-drop, perspectives, customization, high speed local processing; it has had a traditional disadvantage of high deployment and upgrade costs. It was becoming highly difficult and costly to deploy and upgrade these applications. Then came the thin clients or the Web based applications. Thin clients solved many of the deployment and upgrade problems, but that was not without a cost, the cost was in terms of functionality and capability. Thin clients, based on the request-response model, required network capabilities, they used very limited local processing capabilities and thus where limited in their responses. With users needing to be mobile, work offline, integrate content and workflows, collaborate and take advantage of local processing, more and more there is a desire to have Rich Client based application, which would overcome the high deployment and upgrade costs of earlier applications.

There are Rich client based UI development tools like Adobe Flex and Eclipse framework offer several benefits that makes entire UI development more structured, easy to develop and maintain, which would insulate and isolate components from change and would make the integration between them, seamless. Also, some tools provide a simple graphical interface for developing displays to which nonprogrammers (like marketing managers) can also contribute their expertise. A tool can be used to build prototypes throughout the development cycle; some tools even provide a test/prototype mode for testing displays without compiling and executing the entire application. This paper talks about and compares the two upcoming technologies in the GUI area – Adobe Flex and Eclipse based UIs - Rich Client Platform.

The Eclipse platform:

Eclipse is a open source community initiative with over 1200 developers from as many as 60 countries working on it, with around 150 vendors working in collaboration with it, to develop tools and software over this platform. Eclipse is an highly extensible platform for IDE and rich UI development. Most important here is the extensible nature, because of which though being an IDE it is now termed as a platform, an open universal framework.

Developer would require to write components in Java, C/C++, Phython and other languages, all to support a single application, and with Eclipse platform it is possible to provide plugins for each. To start with eclipse provided a very extensible framework for IDE, wherein we could write components in varied languages. The real value of Eclipse lies in the tool plugins that teach eclipse how to work. That can easily be extended for any development environment and any modeling environment.

This inherent strength of Eclipse platform can be put to use for Application User Interfaces as well. Using eclipse applications UIs can be extended on fly by just adding plugins. Advanced users could have a different set of plugins from the beginners. Eclipse would provide seamless integration between plugins and the users wouldn’t realize where one ends and another begins. Applications other than IDEs can be built using a subset of the platform. The minimal set of plug-ins needed to build a rich client application is collectively known as the Rich Client Platform.

Components of Eclipse Platform:

The Eclipse Platform is based on discovering, integrating, and running plug-ins. A plug-in is a software unit that can be developed and delivered independently; it is usually a small tool. A complex functionality may span across multiple plug-ins.

The Eclipse Platform has been engineered with a new and very efficient set of GUI construction widgets. These are available to anyone implementing tools on the Eclipse Platform. The Standard Widget Toolkit (SWT) is agnostic to the operating system and thus very portable, yet the JNI interface over which it is built upon give a native Platform look-and-feel and performance. JFace is a higher level user interface construction toolkit implemented using SWT. JFace greatly simplifies common UI programming tasks.

The entire Eclipse Platform UI, and the tools that plug in to it, use SWT for presenting information to the user. This is true for all tools execution environments, including Linux, Microsoft Windows and other operating system platform-based workstations with a graphical environment. So, the Eclipse Platform successfully delivers good performance and portability without the inefficient layered user interfaces. Thus it is “Native” and still “Portable”. For example in order for an application to use Windows XP themes, all it needs is a manifest file. Moreover since SWT uses the native libraries standard keyboard shortcuts can be used successfully.

RCP(Rich Client Platform):

Applications other that IDEs or Development tools would need just a subset of the platform, the minimal set of plugins required for developing an enterprise application is called the “Rich Client Platform”.Using RCP you could do various things including developing pluggable and dynamically extensible systems, using third-party code libraries, and packaging applications for diverse environments. You'll build, refine, and refractor a complete prototype; customize the user interface; add Help and Update features; and build, brand, and ship the finished software.RCP can form the foundation of any desktop application as varied as a chat application to a enterprise software. Various commercial products today use RCP to provide rich user experience. Some examples are debuggers, reporting tool, Network Management Solutions, MIB browsers and editors, CRM solutions, e-learning applications, Enterprise software front end, Meta modeling tools etc.
Many of the enterprise applications use perspectives to effectively create an enterprise platform. Eclipse RCP enables a rich set of perspectives to work with.Web Based look? - Eclipse Forms:Eclipse Forms can make give the rich user experience. These are a thin layer on top of SWT, using which you could get the “web based” look in the desktop applications.Thus RCP addresses the following omnipresent requirement of every application:

• Componentization
• Focus on domain rather than infrastructure
• Adaptability to changing requirements.

Flex Overview

Adobe® Flex™ 2 is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems. Flex Builder provides a rich set of tools to speed app creation. Flex is open source (Flex 3) licensed under the open source MPL license
Adobe Flex 2, based on J2EE, is a rich Internet application (RIA) framework utilizing a data driven (XML) UI definition that allows developers to create rich, scalable applications that adheres to the MVC architecture.Adobe Flex Builder tool is built using the Eclipse IDE, and can be installed as a standalone application or as an Eclipse plugin – both provide the same functionality. Flex Builder provides code editors for components of Flex (MXML, ActionScript and CSS (cascading Style Sheet)). Flex Builder provides screen development both visually (drag and drop) and manually, writing the source code in XML. The Eclipse plug-in has auto-fill supported Flex tags and Action Script classes.

Components of Flex

• Flex Data Services - FDS manages the data synchronization process.  It removes the complexity and error potential by providing a robust, high-performance data synchronization engine between client and server. It also can easily integrate with existing persistence solutions to provide an end-to-end solution. Flex Data Services automatically facilitates the paging of large data sets, enabling developers to focus on core application business logic instead of worrying about basic data management infrastructure. It automatically handles temporary disconnects, ensuring reliable delivery of data to and from the client application.
• ActionScript is used by developers to run client-side scripts that control the application’s behavior at client end. ActionScript is a derivative of Javascript. Action Scripts can be used for the following purpose:
  • Handling events
    The Flex user interface is event-driven. For example, when a user selects a Button control, the Button generates an event. You handle events by defining functions in ActionScript called event listeners. Your event listener could open a window, play a SWF file, or perform whatever action is necessary for your application.
  • Handling errorsYou handle runtime errors in ActionScript. You can detect data validation errors and signal the error to the user, resubmit a request to the server, or perform some other actions based on your application.
  • Binding data objects to a Flex control within an MXML statement.
    You can use data binding to populate a data model from a Flex component, populate a component from a data model, or copy data from one component to another.
  • Defining custom componentsYou can derive custom components from the Flex component class hierarchy to create components specific to your application requirements.
• Java UI client bean – This bean used to communicate to the server side. It is a Java bean.
• Flex UI client bean – This bean is passed to and from Flex client UI (i.e mxml files). It is an ActionScript file. In this file we can specify the corresponding Java UI bean it maps to. The attribute names of Java bean and flex UI bean must be identical. The conversion form Flex UI bean to Java UI bean is done internally by Flex using this information.
• Service-Config – This is an xml file which has the information regarding which service class should be invoked for a particular bean.
• Service Class- The service class is an interface having the basic CRUD operations supported by Flex.
• UI assembler – The assembler is responsible for looking up to the service-config xml file to identify which service class implementation of CRUD apis must be invoked for a particular bean.
• Flex UI MXML – The MXML file is meant for rendering UI. Its an XML based file. The FDS methods (commit, createItem, Fill) to invoke server operations are also called from the mxml file.

Flex and Struts

Although Struts greatly facilitates the task of developers building web applications based on Java, it doesn't attempt to improve the end-user experience. Macromedia Flex addresses this requirement by providing a platform for building Rich Internet Applications. Flex and Struts are both based on a Model-View-Controller architecture.

• Struts primarily focuses on the controller part of the MVC architecture. In addition, it provides JSP tag libraries to help you create the view in a traditional JSP/HTML environment.
• Flex primarily focuses on the view part of the MVC architecture. It also provides some controller logic to help communicate with remote systems and implement security.

It is possible to integrate these two technologies using the HTTP request/response mechanism maintaining Struts' traditional workflow, or using a service-oriented architecture (SOA), transforming Struts artifacts into services.

Comparison between Flex and Eclipse RCP

Pros & Cons of Flex

Pros:

• Flex provides an extensible and scalable client /server based technology, future server deployment does not require any code change.
• Flex Builder enables drag and drop eclipse plug-ins which allows rapid GUI development.
• It has a rich client look and feel, supports all swing components.
• Flex provides with high performance client (MXML) for processing server data. Unlike struts where an action on the UI takes considerable amount of time to process the request/response.
• It’s possible to auto-generate flex code using Wireframes editor.
• The MXML files in flex are programming Language independent and can be integrate with backend of any other language. It also has its own data-structures and Flex is capable of converting other language data types to flex data types.
• Flex has large community support

Cons:

• Requires Flash Plug-in on browser or on client (free)
• Access server methods using Web Services or direct Java interaction requires FDS (not free).
• Not very stable, has some memory leak issues (would have got fixed in the latest release).

Pros & Cons of Eclipse RCP

Pros

• “Free” powerful Workbench UI.
• Plug-in architecture.
• Advanced features such as help, update manager, preferences, problem markers, etc.

Cons

• Steeper learning curve.
• Memory-intensive.
• Larger deployment packages

	FLEX 2	Eclipse RCP
Technology	Flash/Web Services	Java
Client	Thick/Thin Client	Thick Client
Server Deployment	Access via browser or Free Flash Player	Must have thick and thin client
GUI Development	XML component layout	Java code
IDE	Drag and Drop Plug-in facilitates rapid development, focus on feature implementation using Flex framework	Eclipse Plug-in development, drag and drop facilitates rapid development, focus on feature implementation using Eclipse framework
Maintenance	Flex support by Adobe and open source community	Open source community support
Training	One week Adobe training and online training provided. Small learning curve.	4-6 month training. Learning curve is large.
Cost	Distribution: Free IDE support: $600	Distribution: Free IDE support: Free
Skill level required for UI	Junior Eclipse user. Can also be used by non-programmers like marketing managers to come up with mockup screen(identical to the final screens)	Experienced Java Developer. Cannot be used by non-programmers.
Compatibility with other thin client technologies	Flex is compatible with Struts and AJAX	not trivial.
Best suitable application type	Suitable to both desktop applications and Web applications	Suitable to Desktop applications. Though has eclipse forms for web based look and feel.
Upgrade issues on the thick Client	User needs to install Adobe Flash on the browser and upgrade the versions whenever required.	Integration with plug-in upgrade is hassle free.
Debugging	Debugging Flex mxml and ActionScript files is very cumbersome. You need to install Flash debugger/eclipse plug-in. Very memory consuming.	Can be easily debugged as its java code.

Conclusion

Flex and Eclipse both are new generation technologies suited to different types of development and deployment environment. The choice of technology however should depend on various factors like, integration with existing legacy system, development time/skill set available and type of application. Broadly there are three types of applications: Content delivery (i.e. portals, dashboards, where presentation is very important), collaboration/workflow applications (where context and tasks switching is important) and Transactional applications. For the content delivery, Flex seems to be better suited for presentation and ease of content delivery. However, when you get into sophisticated workflow or collaboration, the ability to work offline and have persistent data is pretty important. Here RCP might be better suited.

References

1. http://www.adobe.com/products/flex/
2. Overview: http://www.adobe.com/devnet/flex
3. Flex Component Explorer: http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
4. Flex Samples Explorer: http://flexapps.macromedia.com/flex15/explorer/explorer.mxml?accessible=true&versionChecked=true
5. Quick Start: http://www.flashextensions.com/tutorials.php
6. Tutorial (videos): http://www.flashextensions.com/tutorials.php
7. Why Flex 2: http://java.sys-con.com/read/210991_1.htm
8. Sample Applications: http://www.adobe.com/devnet/flex/?tab:samples=1
9. Whitepapers: http://www.adobe.com/products/flex/whitepapers/
10. Action Script 2.0 Reference Guide: http://livedocs.adobe.com/flex/15/asdocs_en/
11. Working the Eclipse platform
12. Rich Client Platform - Eclipsepedia
13. Eclipse Rich Client Platform. - Designing, Coding and Packaging Java Applications by Jeff McAffer and Jean-Michel Lemieux.