Browse DevX
Sign up for e-mail newsletters from DevX


Build Rich Web Applications with OpenLaszlo  : Page 2

OpenLaszlo, an open source framework for creating dynamic and highly interactive Web applications, makes your (and end users') life easier by using the ubiquitous Flash runtime on the client side. Find out how to get started building RIAs with OpenLaszlo.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 <canvas> 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.

<canvas bgcolor="#ffffff" width="250" height="462">

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:

<dataset src="inbox.xml" name="mydata"/>

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

<resultset > <result id="1" from="John Doe" nickname="John" date="15-5-2005 15:21" subject="Status" body="Project is doing good" /> <result id="2" from="Emdon Belogi" date="15-5-2005 15:11" subject="Status 2" body="Project is doomed" /> <result id="3" from="Joanna Doe" date="15-5-2005 11:43" subject="Meeting" body="Are you available for meeting at 3 PM?"/> </resultset>

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:

<dataset name="mydata" autorequest="true" type="http" src="inbox.jsp"/>

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:

<text x="10" y="4" datapath="@from" width="100%"/>

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

<view x="10" name="open" width="100%" visible="false"> <text width="100%" fontstyle="bold">date:</text> <text datapath="@date" width="100%"/> <text width="100%" fontstyle="bold">subject:</text> <text datapath="@subject" width="100%"/> <text width="100%" fontstyle="bold">message:</text> <text datapath="@body" width="100%"/> <simplelayout axis="y"/> </view>

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date