Recently i decided to try out OpenLaszlo, the RIA platform from Laszlo Systems. Previously i have tried, but failed to get to grips with it. But the iPhone demonstration on the OpenLaszlo blog spurred my interest again.

OpenLaszlo is a bit like Adobe’s Flex, except that instead of just Flash you can output content for multiple runtimes, such as DHTML or J2ME. This is very interesting as it opens the doors for creating functional web-based applications which can be run on a multitude of devices.

In a way, OpenLaszlo is the perfect solution for creating self-contained Flash or DHTML internet widgets, as a lot of the framework emphasizes the use of AJAX style requests to dynamically update information on the page rather than taking the aging “dumb terminal” approach where you reload the whole page.

Enough of the theory, i decided to try and make myself a little self-contained OpenLaszlo application. Its task was to get the latest updates off of Twitter, a popular web-based chat system.

Starting off

OpenLaszlo comes with a nicely designed presentation server which run’s off Tomcat. On this presentation server, you can develop and even deploy your applications. It is supposed to act as an intermediary between your application and any data it requests, which comes in handy in the case of Flash as it transcodes data such as images into a native format Flash can easily understand.

Thankfully, if you don’t fancy running a bloated Java application server just to deploy your OpenLaszlo application, you can choose to deploy it “SOLO” which means it run’s self-contained. Although of course you loose all the neat caching and transcoding that the presentation server can provide. But looking at the bigger picture, its not that much of a loss.

Being one who didn’t want to do things the easy way, i developed much of my Twitter application in the demonstration explorer (not the best environment it has to be said, although later on when i got to the deployment stage i moved the “lzx” code onto the actual presentation server).

Data binding & Replication

The first thing i did was to determine how i could get the recent updates feed from Twitter loaded into OpenLaszlo. Thankfully, OpenLaszlo provides a pretty powerful data binding system. You can take in XML from any source and create a rather feature full front end in minutes – provided of course you have read the documentation and know how to get from A to B.

Quite simply, in order to just view the data from Twitter, all i had to do was the following:

<canvas>
<dataset name="dset" request="true"
type="http" src="http://twitter.com/statuses/public_timeline.xml"/>

<simplelayout axis="y"/>

<!-- Data replication -->
<view datapath="dset:/statuses/status">
<simplelayout axis="x"/>
<image datapath="user/profile_image_url/text()"/>
<text datapath="user/name/text()"/>
<text> - </text>
<text datapath="text/text()"/>
</view>

</canvas>

As you can see, i have a “dataset” which points to the xml feed for the recent activity on Twitter. This is referenced via the datapath in the view. There are also a few elements in the view which also reference XML elements in the dataset, relative to the datapath of the view.

Whenever the dataset is loaded, OpenLaszlo automatically replicates the view to show every “status” element in the dataset. It should also be noted that OpenLaszlo also has the common sense to delete the replicated view’s whenever you decide to reload the dataset (via calling “dset.doRequest();”).

You might also notice the “simplelayout” object which i have placed in both the root “canvas” and the replicated view. The purpose of this object is to automatically position elements in the element it is located – which is nice as it is one less thing for me to think about!

Polishing everything up

Now i could see the data from Twitter, i needed to polish everything up. Importantly, i needed a button to invoke the request on the dataset, and i needed a scrollbar to scroll the list of statuses which were replicated.

The button was easy. I decided to add a header at the top which contains the button and also some text which tells the user if something is happening. As for the loading text, it uses OpenLaszlo’s useful constraints feature so it always appears in the right place relative to the width of the page (in this case, right aligned).

The scrollbar was the hard part. I ended up having to nest the replicated views in another view in order to get the scrollbar to appear correctly (as otherwise the simplelayout would position the scrollbar below the list of statuses). I also had to play about with the width’s of the views and turn on the clipping so that when everything scrolled, the text didn’t draw over everything else.

The end result

After much frustration, here is the end result!

I also decided to add in a little fade-in animation when the images load, which makes everything look that bit cooler.

For reference, here is the code i ended up with. Feel free to copy and experiment with it!

<canvas>
<dataset name="dset"
ondata="header.throbber.setText('');"
type="http" src="http://twitter.com/statuses/public_timeline.xml">
</dataset>

<simplelayout axis="y"/>

<!-- Header -->

<view name="header" width="${parent.width}" bgcolor="#CCCCCC">
<button>Update
<handler name="onclick">
parent.throbber.setText("Updating...");
dset.doRequest();
</handler>
</button>

<text name="throbber" x="${parent.width - this.width}">
</text>
</view>

<!-- Scrollbar container -->

<view width="${parent.width}"
height="${parent.height-header.height}" clip="true">
<scrollbar name="scroller" axis="y"/>

<view width="${parent.width-parent.scroller.width}" clip="true">

<!-- Data replication -->

<simplelayout axis="y"/>

<view datapath="dset:/statuses/status" visible="false">
<simplelayout axis="x"/>
<image datapath="user/profile_image_url/text()">
<method event="onload">
parent.setOpacity(0);
parent.setVisible(true);
parent.animate("opacity", 1, 1000, false);
</method>
</image>
<text datapath="user/name/text()" fontstyle="bold"/>
<text> - </text>
<text datapath="text/text()" fgcolor="#AAAAAA"/>
</view>
</view>

</view>

</canvas>