Introducing OpenLaszlo 4

The root XML node in all OpenLaszlo applications is the <canvas> tag, which contains the declarative code that describes the application's behaviour. To see how all this works, let's play with some LZX code, building on the simple test application above. Create a file called ljhello.lzx, and put the following LZX code in it:

<canvas>
  <window title="My First App"
          x="50" y="50"
          height="200" width="500"
          realizable="true">
    <text id="message"
          text="Hello from Linux Journal!"/>
  </window>
</canvas>

Save the file, then copy it to a location where OpenLaszlo and the Tomcat server can find it:

sudo cp ljhello.lzx /usr/local/lps-4.0.10/Server/lps-4.0.10/

Typing http://localhost:8080/lps-4.0.10/ljhello.lzx into a browser results in the creation of a movable, realizable window, as shown in Figure 1.

Figure 1. Our First OpenLaszlo Application: ljhello.lzx

Referring to the LZX code, it is not too difficult to work out what's specified for this application. We start with a blank canvas, then create a window that has a title, an x/y position, height/width values and the realizable property switched on. Within the window, we ask for some text, give the text an identifier and an initial value. Note how the use of indentation within the LZX code helps to describe which components of the application are related to which other components rather naturally. Within the browser, the resulting window can be grabbed and dragged, as well as resized.

For the purposes of demonstration, let's imagine we have a small on-line store that wants to provide access to its client list via a nice, modern Web-based interface. To provide the required functionality, let's put the data into a MySQL database and provide access to the list via an OpenLaszlo application.

To begin, log in to the MySQL client as root, then create a database called store and a MySQL user called store_manager:

mysql> create database store;
mysql> use mysql;
mysql> grant all on store.* to store_manager identified by 'passwordhere';

Log in to MySQL as this new user, and create a table to hold the client list:

mysql -u store_manager -p store

mysql> create table client_details 
       (
	    id int not null auto_increment primary key,
	    name varchar (64) not null,
	    address varchar (255),
	    contact_tel_no varchar (64),
            email_address varchar (64)
       );

A small collection of SQL insert statements (formatted to fit this page) provides us with some data to play with:

mysql> insert into client_details value ( 0,       \
'Joe Bloggs', '25 Somewhere Street, Anytown, USA', \
'00-1-415-555-3226', 'joe@bloggs.com' );
mysql> insert into client_details value ( 0,       \
'Jane Doe', 'Apt. 2a, 16 Treatsville, Canada',     \
'00-1-416-555-1222', 'jane@idontknow.ca' );
mysql> insert into client_details value ( 0,       \
'Harry Smith', 'P.O. Box 46, Streetstown, USA',    \
'00-1-581-555-9823', 'harry@harrysmith.com' );
mysql> insert into client_details value ( 0,       \
'Julie Jones','CharmsRus, BT Tower, London, UK',   \
'00-44-081-555-2398', 'julie@charmsrus.co.uk' );

With the database table ready, and some sample data inserted, we next need to get the data into a format that OpenLaszlo can understand. It shouldn't surprise you to learn that the best format for your data when communicating with OpenLaszlo is XML. OpenLaszlo has some rather neat, built-in functionality for working with XML data. To demonstrate this, we first have to arrange for MySQL to produce some XML output.

There are a number of ways to do this, and I'm going to write a simple CGI in Ruby that connects to the database, selects all the data from the required table and turns it into XML. My program, called get_data.rb, will execute from Apache's CGI directory, which is /usr/lib/cgi-bin on my system. Here's the Ruby code I wrote:

#! /usr/bin/ruby 

require 'cgi'
require 'dbi'

resp = CGI.new

puts resp.header( "text/xml" )

dsn =  "DBI:Mysql:store"
user = "store_manager"
pass = "passwordhere"

sql =  "SELECT * FROM client_details"

DBI.connect( dsn, user, pass ) do |dbh|
    rows = dbh.select_all( sql )
    DBI::Utils::XMLFormatter.table( rows, 
                                    "clients", 
                                    "client" )
end

This code is straightforward. The key line is the call to DBI::Utils::XMLFormatter, which takes the result of the SQL query and produces correctly formatted XML. To see the results, install get_data.rb into Apache's cgi-bin directory (setting get_data.rb to be executable), and then type the following into a browser: http://localhost/cgi-bin/get_data.rb. Figure 2 shows the XML produced by the get_data.rb CGI script.

Figure 2. The XML Output Produced by the get_data.rb CGI Script

To access this data from within an OpenLaszlo application, all that's required is the appropriate declaration using the LZX dataset tag. Here's another file, called clients.lzx, which displays the name of each of the store's clients in an OpenLaszlo window:

<canvas>
  <dataset    src="http://localhost/cgi-bin/get_data.rb" 
              name="dataClients"
              request="true" />

  <window     title="Client Listing"
              name="top"
              height="300" width="200"
              x="50" y="50"
              realizable="true">
    <view>
      <text>
        <datapath xpath="dataClients:/clients/client/name/text()"/>
      </text>
      <simplelayout/>
    </view>

    <scrollbar/>

  </window>

</canvas>

As in the previous example, there's a window with some text in it. Note that the text is contained within an LZX view, which combines the text with something called simplelayout, an in-built OpenLaszlo style that stacks text one line on top of another. The window, called top, also has a scrollbar associated with it. The dataset LZX tag informs the OpenLaszlo application where to get the data from (src), what to call the dataset (name) and instructs the application to go and get the data as soon as it is loaded (request). The datapath tag is a standard XML XPath specification pointing to the dataset that we want to use. In this case, we want to retrieve the text of the name tag, which is contained within the inner-enclosing client tag, which is itself contained within the outer-enclosing clients tag. Referring back to Figure 2, it is easy to see the data that we are referring to within this XPath specifier.

To try out this application, copy the LZX file to the appropriate directory on the server (using the same destination directory as for the ljhello.lzx file), then start the application running within your browser using the following URL: http://localhost:8080/lps-4.0.10/clients.lzx.

This produces an OpenLaszlo window with the names of the four clients displayed within it, as shown in Figure 3.

Figure 3. Displaying a List of Names within the OpenLaszlo Application