Build Rich Web Applications with OpenLaszlo

Build Rich Web Applications with OpenLaszlo

penLaszlo, an open source framework sponsored by LaszloSystems, has attracted a significant attention after Earthlink, the second largest Internet Service Provider, announced that it will use OpenLaszlo technology for its new generation of interactive Web mail clients. OpenLaszlo is a rich, well-documented open source alternative to the popular Macromedia framework for rich Internet application delivery: Flash and Flex (it leverages the Flash runtime environment).

OpenLaszlo has very exciting presentation features for state-of-the art Web application development, a straightforward programming model, and excellent learning and development resources. And IBM Alphaworks has contributed a complete Eclipse-based open source IDE for OpenLaszlo, making this an excellent time to give it a test drive.

In this second article on rich Web clients (an earlier article looked at AJAX applications), I will look in-depth at OpenLaszlo’s architecture, walking through the simple “web mail” application.

OpenLaszlo Architecture
OpenLaszlo architecture comprises three major components: the OpenLaszlo API, a server-side interpreter, and the browser runtime.

OpenLaszlo’s programs are straightforward, XML-based scripts. It uses an object-oriented visual language that provides a variety of familiar structural and behavioral constructs for the composition of dynamic Web user interfaces. OpenLaszlo scripts?XML compliant files?are saved as LZX (Laszlo XML) files on the server and invoked by the clients in the runtime. The Laszlo API is well documented, with excellent, interactive examples and very usableonline reference.

The server component is deployed as a J2EE Web application (a servlet) that intercepts the script requests from the client, interprets them, and serves them as Flash runtime binaries. OpenLaszlo leverages Macromedia’s virtual machine for runtime execution of its scripts; applications developed in OpenLaszlo run as Flash applications, natively within the Macromedia Flash Player. This is in contrast to AJAX-based applications such as Google’s Gmail Web client or Google Maps, which use JavaScript to asynchronously invoke the server in order to perform dynamic zooms and scrolls, spellchecking, and other server-side operations.

With an understanding of the basic architecture in hand, I will move on to an example application, wherein you’ll get a detailed look at how OpenLaszlo UIs are developed and how all the pieces of the framework fit together.

Laszlo at Work: An Inbox Preview Example
My example application is a Web-based e-mail inbox preview component, similar to the one used in my earlier article on AJAX. It allows Web users to preview their inbox messages in a rich client fashion. The application is loosely based on the sample application “Contacts” that ships with Laszlo server. Using this example, I will demonstrate essential OpenLaszlo programming concepts, including layout components, attributes, scripting, and data access. (Download the source for the example application here or from the link in the left column.)

A Look and Feel
The e-mail inbox preview component features a tabbed preview pane that allows users to preview e-mail messages by clicking on the messages itself. While this is a common feature in desktop email clients, remember that allowing dynamic preview of emails over the Web is far trickier. For my example, clicking on a message will open the preview area and immediately display sender, date, subject line, and message body (see Figure 1).

Figure 1. Inbox Preview: The screenshot shows the inbox preview example application in action.

Component Layout and Rendering
The component in OpenLaszlo is a parent container for all other visual components. A canvas component looks like a typical XML tag, and it supports number of attributes that describe the color and size of the application container. The canvas tag below describes the background color, height and width for the email inbox preview app.

The inbox data will be fed from the XML file that contains inbox entries. I’ll use an element to declare the source of the data entries, in this case inbox.xml:


Below you can see the contents of the inbox.xml file:


Getting to the Data
OpenLaszlo recognizes XML only as a data source (which greatly simplifies the framework), and there are no specific facilities provided for interacting with traditional data sources such as relational databases. In a real-world scenario the data would likely need to be pulled from some sort of data store?be it a database, LDAP file, or an e-mail server. In order to make this possible a transformational component is needed to make the relevant data available to OpenLaszlo applications as XML.

There are many simple ways of accomplishing this. For one, a jsp file or servlet could be used to pull data from the original store and render it as XML. Using that approach (see inbox.jsp, located at the root of the downloadable sample application), the data source declaration would like this:


I’ll use XPath expressions to access the data from inbox.xml. I want to utilize the values of the attribute “from” to populate the headers for the inbox items:

and “body,” “subject,” and “date” to populate the previews of the messages themselves:

                date:                    subject:                     message:                          

Object-oriented Features
OpenLaszlo is a scripting framework with full support for essential object-oriented features. The example application uses a custom class for an inbox row representation. I simply declare a new class “row” with custom appearance properties (see the supplied source for the full listing):


Later, I use it as shown here to render the UI:


OpenLaszlo supports inheritance as well. If for example, you wanted the application to be able to designate certain rows as”high importance,” you can simply declare it with the keyword “extends”:


Another important aspect of OpenLaszlo’s object orientation is that methods and events are supported as standalone elements that can be attached to other visual components. In the following example I am declaring the anonymous method attached to the button. (This method maximizes and minimizes the preview area for each e-mail):

                                                      if (classroot.height == classroot.minheight) {              'visible',true);                        newheight = classroot.maxheight;                     } else {              'visible',false);                        newheight = classroot.minheight;                     }                     classroot.animate('height', newheight, 600);                                 

However, you could also define standalone methods that could be invoked from other components. The syntax would look like:

   ...          this.move(newLocation);    

The method could be executed as:


As you may have noticed, OpenLaszlo’s method syntax looks a lot like JavaScript, for which there is a strong rationale: Authors of OpenLaszlo found it easier to implement the framework?and believed that developers would be inherently more productive?by adopting a syntax that is identical or similar to existing standards, including XML, XPath, HTML, and JavaScript. This pragmatic approach should lower the learning curve significantly.

Running the Laszlo Scripts
Installation and testing of the OpenLaszlo scripts is easy. For the deployment of my example application I used OpenLaszlo Server 3.0, which includes the Jakarta Tomcat 5.0 server. OpenLaszlo also includes complete documentation, numerous demos and examples, as well as a “my-apps” directory that is used for learning, testing, and prototyping custom scripts. To run the inbox component I simply placed inbox.lzx, inbox.xml, and supporting images into this directory and invoked the inbox.lzx from the Web browser:


As with any other interpreted scripting language, changes to the OpenLaszlo scripts are immediately available simply by reloading the URL.

Figure 1 shows the look and feel of the OpenLaszlo explorer runtime, as well as the component that I just implemented (Inbox) running in it. This workbench ships with the server and allows for runtime debugging, optimization, and preview of the source code, as well as access to the documentation.

Other installation options for OpenLaszlo include installation of the OpenLaszlo server as a J2EE Web application on the servlet container of your choice. OpenLaszlo can also be installed in a minimalist distribution, which consists just of a Laszlo servlet that is mapped to handle .lzx files.

Rich and Exciting Alternatives
OpenLaszlo is an extraordinarily rich Web framework, and reviewing all of its features could take several articles. What I like best about this framework is that it is simple and straightforward to develop with. It is well documented and feature rich, has active user forums for support, and offers an alternative to commercial Flash-based frameworks. While Macromedia’s Flex is equally engaging, exciting, and feature rich, it can’t match OpenLaszlo’s budget friendliness.

As more and more companies begin to investigate rich client architecture in order to deliver applications that offer a combination of usability, aesthetics, and dynamic features, OpenLaszlo should be seen as a capable and appropriate platform option. I hope that you will find a good use for this great framework in your applications.


Share the Post: