Sid B. Dane

The situation
Our customer offers a B2B application with which travel agencies can make holiday reservations. In the “old days” that used to be a terminal application which was later ported to a web browser based extranet.

To port the terminal application to the extranet, the client had developed a Java application which simplified the data entering process, and supported the most common functionality the users needed. A Java applet, almost completely controlled by keyboard input, was used to act like a terminal in the browser and that was how the application was used for many years.

Why want to change?
The company’s competitors of course use the same type of application for their B2B network and a lot of them developed internet technology driven applications. The company’s terminal application was very fast to use, and stayed the fastest of them all. The users were used to it. But the application started to look “old fashioned” especially in the perspective of the more modern approaches of the company’s competitors.

The fast performance wasn’t the main aspect of the application. The question arose how the company could keep the fast performance and the familiarity of the users and modernize the application to overtake the arrears with the competitors? And furthermore: this should be an investment for a new front-end, so the mid- and back office applications needed to stay in-tact and users should be able to choose from both applications...

Introducing the Rich Internet Application
The current application was in fact a RIA .... Why?
• It runs in a web browser;
• It needs no installation;
• Runs locally in a secure environment (sandbox).

Actually, you can consider most Java applets, which run in your common browser, a RIA.

When we had to select a RIA platform to do this job with, of course we preferred Macromedia Flex (back then version 1 was the one)., because of the strong and mature nature of this environment. Our business unit prefers to use Flex because it is simply good, we have experience with it (we’ve done the first commercial implementation of Flex in the Netherlands) and there is (was) not much else....

But our client was in the process of selecting a preferred RIA platform and it was not certain that that was going to be Flex, in fact, the chances for that to happen decreased rapidly. So we had to select a tool to create a RIA, which was not bound to a specific (server) platform...

Afterwards Flex 2.0 would be the perfect option, because it doesn’t need a Flex server, but hey, that’s afterwards...

So we chose Flash. It was the most logical choice. We could use interface controls which are used in Flex as well, and we have quite a lot of expertise in our business unit.

Connecting with mid- and back office
Independent from the selection of the RIA development environment, we needed something between the interface and the mid office, because the mid office application communicated with the Java applet with terminal control strings, and doing lots of string manipulation with environments like Flex and Flash... you don’t wanna do that!

We want XML! Not just because XML is the preferred way of exchanging information in RIA’s, but also because it is a standard which could be used in the future for other interfaces with the mid office (the mid office was the Java application which communicated with the Java applet and the mainframe back office). At this point the idea was born to make an XML gateway which acted like the Java applet but sits on a server inside and talks to the mid office in string messages and to the Flash interface (or any other interface) with XML.

The big advantage here was that for the Java applet to run, users needed to arrange some firewall settings because it used another port. The new solution was port 80 (web browser port) only, so no more firewall problems!

About Frameworks and Design patterns
In our previous projects we looked for a framework and/or design pattern to use for the development of our RIA. We used the Cairngorm Framework, developed by Iteration::two which was the only mature Framework then, described by Steven Webster and Alistair McLeod in their book “Developing Rich Clients with Macromedia Flex”. Since Flex also works with ActionScript 2.0, Cairngorm would be suitable for Flash as well.

That Framework is quite extensive and the question was if the effort for using Cairngorm would be in proportion with the total costs and efforts for the whole project.

We decided to use a simplified pattern, on which Cairngorm in fact is based on: the Model-View-Controller (MVC) design pattern. Colin Moock described how to use the MVC framework in ActionScript 2.0 .

What are the MVC components?
• The model contains the data;
• The view handles the user interface;
• The controller handles the actions and changes.

The MVC principle is also used in, for example, Java development and can be used in many more (object oriented) languages.

Christobal Baray, on March 1999, describes the following advantages of the MVC design pattern:
• Clarity of design;
• Efficient Modularity;
• Multiple Views;
• Ease of growth;
• Distributable;
• Powerful user interfaces.

So, MVC has been around for quite a while, but it is still going strong! Especially the last bullet is imperative for RIA development in our UxP (User Experience) business unit.

The implementation
In our project , I made one general view and controller, which handles the general interface elements (like the menu in the upper toolbar and some buttons) and things like automatically logging in and sending keep-alive messages to sustain the session with the XML gateway.

For all the screens in the application, a new view was created. When a screen change is needed, a ScreenChange event is broadcasted, and the Flash movie is sent to the corresponding frame. The views react to the event by becoming visible or invisible. If a view needs to become visible for the first time, it first creates his interface components and then shows itself. This just-in-time principle made the performance experience much better, from an unacceptable initialisation time to a very quick one (quicker that the Java Applet!).

Views each have a MovieClip object called “screen” on which all interface components are created. Sometimes they have some shared components with other views, which are put on another MovieClip component called “panel”.

We’ve combined some of the original screens to make the usage of the application faster and surveyable. We’ve changed the dialogs where the user had to browse through a lot of screens to a datagrid interface which is filled while the user can scroll through it. Clicking on an item displays more detail information instantly while previously the user had to enter the line number of the item and type the code for “detail” to see it.
And sure, most of the interaction can be done via the keyboard. There are some differences in text screen based interfaces and point-and-click mouse driven interfaces. The big difference here was the introduction of an “OK”-button. In the original application input ended when the last character of the last input field was entered, giving the user no change to correct errors!

The results
The period in which the application was launched, was just before a busy time when a lot of customers made their reservations. The new interface was introduced on a convention the client holds every year for her customers. Besides the publication of the new link on the extranet, no more publicity was given about the new product.

The customer wasn’t sure if the people who were used to the old application would be triggered to use the new one because of their habit of using the “fast” one. And would the users be willing to use a new system in the busiest period of the year?

Well...

The new application was in one aspect slightly slower than the old one, and that was the time it takes for the XML gateway to send and receive XML messages. But, because of the combination of some old screens to one and the availability of information without the previously needed user interaction makes it much quicker!

We closely monitored the usage of the new system and found that in the first days a lot of customers just took a look at the application. And in only a few weeks after that, already 15% of the reservations were being made via the new application!

Sid B. Dane
senior consultant
Capgemini Netherlands

Links

Here are some links you perhaps find useful:

What are Rich Internet Applications?
http://en.wikipedia.org/wiki/Rich_Internet_Application

Macromedia Flex product information
http://www.macromedia.com/software/flex

What is a Firewall?
http://www.wisegeek.com/what-are-firewalls.htm?referrer=adwords_campaign=firewalls_ad=009661&_search_kw=what%20is%20a%20firewall

What is a Framework?
http://en.wikipedia.org/wiki/Framework

The Cairngorm Framework for Flex
http://www.iterationtwo.com/open_source_cairngorm.html

Book: Developing Rich Clients with Macromedia Flex (Webster/McLeod)
http://www.amazon.co.uk/exec/obidos/ASIN/0321255666/ref%3Dsr%5Faps%5Fbooks%5F1%5F1/026-2353484-5478031

Flash ActionScript 2.0 Learning Guide
http://www.macromedia.com/devnet/flash/articles/actionscript_guide.html

Book: Essential ActionScript 2.0 (Colin Moock)
http://www.oreilly.com/catalog/0596006527/

The Model-View-Controller Design Pattern
http://www.macromedia.com/devnet/flash/articles/mv_controller.html

Christobal Baray: MVC introduction
http://www.cs.indiana.edu/~cbaray/projects/mvc.html

The MVC framework for Macromedia Flash including a Clock example
http://moock.org/eas2/examples/eas2_mvcclock.zip