RIA Visualization Frameworks

In finance (and in most domains for that matter) your information is as good as the way it is presented. Few features on your applications will be more critical than the function of visualization.

Price, Volume, Gain & Loss in 3D

The example above from MIT’s financial visualization lab shows price, volume over a time series and instantaneous gain/loss. As you can see this and other similar applications out there resemble a neat 3D gaming interface and not grandpa’s trading blotter.

Anyway, needless to say, the choice of a framework to support your user experience can go as far as determining the success or failure of your application – in some cases it can even balance for limitations on other functions performed in the back-end.

As of now thankfully there are many good options out there. Hands down RIA (rich internet [or interactive in MS parlance] applications) frameworks are best suited for the task. In essence RIA frameworks allow thick, full featured clients to be deployed and launched over the internet. The main current players are JavaFX, Silverlight, Flex, GWT and Openlazslo.

JavaFX

The JavaFX platform was announced by Sun about a year ago. A long waited response to something to counter balance deficiencies in the standard Swing/AWT. It is available by default on JRE 6 and can optionally rely on battle tested JNLP for remote deployment, execution and security.

Some of its major limitations come from the fact that even after one year, good development tools are still not available. Most common development tools are provided as part of the NetBeans IDE, some limited plugins are available for Eclipse IDE. We could not find many commercial applications relying on the framework as well.

Strong points are embedded JDK support, reliance on stable Java protocols and Java language binding and a neat scripting language for view definition, for example:

Button {
  text: "Click Me"
  action:
    function():Void {
      MessageDialog {
        title: "JavaFX Script Rocks!"
        // This string has a newline in the source code
        message: "JavaFX Script is Simple, Elegant,
         and Leverages the Power of Java"
        visible: true
       }
     }
}

Defines a button, and a function to be triggered after an action to that button – this sample code is an exact copy of code found in the scripting tutorial.

Silverlight

Silverlight is MIcrosoft’s RIA framework for .NET, very popular in financial software shops. Runtime is supported for Mac and Windows, development environment in Visual Studio requires Windows. Views are declared following XML descriptors as well.

<UserControl x:Class="DiggSample.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Digg="clr-namespace:DiggSample;assembly=DiggSample">
    <Grid Style="{StaticResource TopGrid}">
            <Button x:Name="btnSearch"
                    Content="Search"
                    Click="SearchBtn_Click"
                    Style="{StaticResource SearchButton}" />
    </Grid>
</UserControl>

Again, the same usage sample: a button and an action. This code snippet – reduced for simplicity – is from Silverlight’s tutorial and samples. Silverlight is target mainly at Windows platforms, Mac is supported as a run time as well. For an open source implementation covering other OSes as of this moment you will have to rely on Moonlight, Mono’s implementation.

Flex

Adobe’s Flex has a commercial and an open source SDK distribution. Since it was one of the early products on this arena, is the most widely used, specially for public web applications.

It is not an exception when it comes to XML-like language for UI definition called MXML and a “powerful object-oriented language” called ActionScript (yes, we need yet another). Below is a sample MXML and script of a Flickr-like photo application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[0xFFFFFF, 0xAAAAAA]"
    horizontalAlign="left"
    verticalGap="15"
    horizontalGap="15">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var photoFeed:ArrayCollection;

            private function requestPhotos():void {
                photoService.cancel();
                var params:Object = new Object();
                params.format = 'rss_200_enc';
                params.tags = searchTerms.text;
                photoService.send(params);
            }

            private function photoHandler(event:ResultEvent):void {
                 photoFeed = event.result.rss.channel.item as ArrayCollection;
            }
         ]]>
    </mx:Script>

    <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)" />

	<mx:HBox>
		<mx:Label text="Flickr tags or search terms:" />
		<mx:TextInput id="searchTerms" />
		<mx:Button label="Search"
			click="requestPhotos()" />
	</mx:HBox>

	<mx:TileList width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail">
	</mx:TileList>

</mx:Application>

There is extensive documentation and tutorials available. This code snippet came from there as well.

It is interesting to note the recent swap of designers and developers working on JavaFX and Flex SDK – some common strategies on these two arenas started to take shape. It would not come as a surprise if these platforms converge in the near future.

GWT

The GWT platform from all powerful Google is basically a set of development tools and IDE plugins that allow you to use Java to define RIA solutions. No surprises here as well, although you should not need to manipulate them directly, XML is used again to define GWT “modules”. You can find plenty of examples and documentation on GWT’s tutorial resources.

OpenLaszlo

My favorite, an DHTML (optionally FLASH) based framework, many strong points: stable, open source, simple to deploy, test. A variety of resources to support data biding and scripting. My only comment would be once more, the over use of XML as a language called LZX:

<canvas height="200" width="500">
  <window x="20" y="20" width="150" title="Simple Window" resizable="true">
    <button text="My button" onclick="this.parent.setAttribute('title', 'You clicked it');"/>
  </window>
</canvas>

Well, self explanatory. A button again and an action. You can embed scripts in LZX as well:

<canvas height="120">
   <script>
     <![CDATA[
     for (var i = 0; i < 11; i++) {
       Debug.write(i);
     }
     ]]>
   </script>
</canvas>

Again, these examples and many others can be found in Openlaszlo’s scripting tutorial.

Finally

Great options, you might want to try these tutorials and find out which ones fit your use cases better. Sorry if you were expecting this article to provide a definitive answer here, far from that.

This is an active area of development currently, so you should expect many improvements for each of these contenders over the upcoming months.