OpenLaszlo Tutorials and Guide

Introduction

In this lab-oriented beginner’s tutorial, the author explores OpenLaszlo technology and explains its basic features.

Rich Internet Applications(RIA)

RIA stands for Rich Internet Applications. RIA tries to create browser-based applications,which are as rich and as responsive as stand-alone desktop applications. AJAX, Flex2 and OpenLaszlo are the three important RIA technologies.

Google Web Toolkit is an AJAX toolkit, worth serious attention from Java coders , because it wraps AJAX in familiar Java code , is free and comes from a path-breaking company.It also frees the coder from the vagaries of browser-dependent variations in implementing javascript.It is instructive to note James Gosling’s views on plain AJAX , as given below.

“Gosling: Ajax is a really funny thing. You can actually do, using Java applets, pretty much everything you can do in Ajax and you get much better portability. Ajax is a technology that at its heart has been around for quite a few years and mostly took off when they came up with a clever name, but it really suffers from the fact that here are so many flavors of JavaScript. And it’s kind of been… it’s the example that keeps convincing us that we have to be really,really careful about interoperability in the Java platform. Because when you start to get out of line, the way JavaScript did, it just causes an interoperability nightmare for developers. So, one of the things we try to do is make it so that people who are using JavaScript components don’t actually have to worry about JavaScript at all. They just see the components as kind of a black box that they can drag and drop onto their applications and they don’t have to worry about the can of worms that’s inside”.

That much, for plain AJAX vs. AJAX in JAVA wrappers.(JSF coders can make use of ICEFaces, which provides one such wrapper to be used with JSF).

Flex 2.0 and OpenLaszlo

But, Flex 2.0 and OpenLaszlo, base themselves on the ubiquitous Flash player which comes bundled with all modern and popular browsers. OpenLaszlo also depends on the presence of Flash player in browser side .But unlike Flex 2.0 which is free but not open-source, ( the Flex-IDE comes at a cost but Eclipse plug-in can be used instead..that makes Flex 2.0 also ALMOST free) OpenLaszlo is both open-source and free. Thus,both in Flex 2.0 and OpenLaszlo, browser variation problems are disposed off effectively.(However, it seems that extensions are being created to access the user’s hard disk,by scripting, so as to mimic a regular desktop application! This is a grave danger.)

How OpenLaszlo works?

Just like Flex 2.0, OpenLaszlo also begins with a source in special type of XML file( demo.lzx) for creating the GUI . There is provision for scripting also.This is compiled into a flashplayer format as swf(shockwave) file. The server then sends the swf file to the browser. As all modern browsers are already bundled with flashplayer, this swf file is displayed in browser without any special arrangement. All this is exactly similar to Flex 2.0

When we compile the laszlo xml file, we get swf file and this file is displayed in the browser. This type of using the lzx file is known as ‘SOLO’ mode. This is quite simple but if we use this method, we forego advanced features like SOAP communication etc.It may be remembered that Flex2 also has similar facility.

The better method is to use the swf thus generated ALONG with the Laszlo Application Server( LAS). The LAS can do the automatic compilation by itself, just like Tomcat compiling our JSP files.Or we can compile the lzx file separately and then place the resultant swf file within the LAS folder and use it.

The Laszlo Application Server is a j2ee-compliant web application and can be placed in Tomcat5 webapps folder. If the correct procedure is followed, the lzx file is dynamically compiled by the Laszlo server sitting on top of Tomcat server.

However, the OpenLaszlo package is not specific to Java coders only. It can be used by PHP coders too. How? Though the Laszlo Presentation Server makes use of Tomcat5, it comes bundled with its own Tomcat5.

For PHP developers on Linux platforms, installing OpenLaszlo on Linux is just unzipping the ‘tar’ file.( read ‘jar file for Windows).

To get a directory as ‘server’ and within that lps-3.3.3. This folder contains the built-in Tomcat server, OpenLaszlo servlets, samples, documentation etc. One of the special features from PHP4 onwards has been the facility to use Java objects from within PHP…… A point to ponder!

AJAX-based applications, use JavaScript to asynchronously invoke the server for other server-side operations, whereas in Flex2 and OpenLaszlo, dynamic action takes place mostly within the browser itself, like an applet.

If Flex2 and Laszlo are so much similar, what is the rationale for the open-source OpenLaszlo project? There are three reasons. The first reason is that SUN is collaborating with OpenLaszlo group to extend this technology to J2ME devices.As wireless and mobile devices are definitely emerging as dominant clients very fast,this factor alone makes OpenLaszlo ,the preferred choice for Java coders.

According to the OpenLaszlo website, “With more than 3.8 billion Java devices including 1.2 billion Java technology-powered phones in the world today, Sun has one of the most widely distributed client runtime environments.”

Another reason is that in OpenLaszlo-4 in beta stage now, the Laszlo compiler creates flashplayer file(swf) as well as DHTML file, which would make it independent of Flash player.As Flashplayer is a proprietory technology from Macromedia(Adobe), it would free the OpenLaszlo project from the ignomy of creating something ‘open’ and ‘free’ on the labours of another company’s intellectual property, though that might be free to a certian stage. Flex2 team criticizes the Laszlo project on this score and chides that Laszlo cannot utilise Flash, as efficiently as themselves , as Flash is their own brainchild.Without bias, it is not unreasonable to expect the FLOSS world to create its own ‘Flash’ and ‘Flashplayer’. (perhaps, there already are such projects?) .These are ‘political’ issues best skipped for the present.

The third reason is that Flex2 requires Flashplayer9 in the browser while Laszlo can do with even earlier versions of Flashplayer.

OpenLaszlo – Sample Code

With this perspective, let us now begin our lab session. First of all we require the following software.

JDK1.4.2
Tomcat-5
Laszlo-Presentation-server

We can download OpenLaszlo software from the URL given below. The zip is for version 3.3.3.

<http://www.openlaszlo.org/download/>

The zip was extracted into e: drive as

c:\laszlo.

We will find two folders there.

a) server

b) bin

If we open the server folder, we will find three folders a) misc b) tomcat5

c) lps-3.3.3

We need not use the built in Tomcat5. We can just copy the lps-3.3.3 folder into c:\tomcat5\webapps.

As this is an already expanded folder, it will have the standard j2ee directory structure. Hence, OpenLaszlo is readymade for J2EE environment.Thus, it can work in any j2ee-compliant webserver like Tomcat or JBoss or WebLogic etc.

After thus, placing the lps-3.3.3 folder in c:\tomcat5\webapps, we can rename this folder as something friendlier such as ‘laszlo’.

( Laszlo is the name of the anti-nazi leader in the vintage classic from Hollywood (1942!)Casablanca,featuring Humphrey Bogart and Ingrid Bergman.CD is available.A classic…pardon the digression!).

Let us now start the Tomcat5 server.
[code]
c:\tomcat5\bin>;

set JAVA_HOME=D:\JDK1.4.2

> startup
[/code]
After starting Tomcat5, we can type the url as :
[code]
"http://localhost:8080/laszlo"[/code]

We will get the index page of the webapp ‘laszlo’ as shown in laszlo-index-page.doc When we click on the ‘welcome’ link in this index page, we get the demo application ‘OpenLaszlo World Clock’.

After trying this demo, we assure ourselves that the package is correctly installed.

Let us now begin with the simpler method of directly compiling the lzx file . Let us create a working folder as e:\lazslotrials

Give path as:
[code]
d:\winnt\system32;c:\laszlo\bin
[/code]
Let us create
[code]
e:\laszlotrials\hello.lzx[/code]
[code lang=”html”]<canvas height="40">

<text>WELCOME!</text>

</canvas>

e:\laszlotrials>lzc hello.lzx
[/code]
We will get hello.swf

To test, just type
[code]
e:\laszlotrials>hello.swf[/code]
As Adobe Flash player has been installed in our system, the swf file gets executed and we get display as shown in screen3.

How shall we get it displayed sent from server? create a simple html file to embed the swf file.
[code lang=”html”]<html>
<body>

</body>

</html>
[/code]
copy demo.htm and demo.swf to :

c:\tomcat5\webapps\root

and type the url as:
[code]
‘http://localhost:8080/demo.htm'[/code]
We will get the result displayed in a ‘flash!’.Actually , any webserver would do. How about apache server? Let us copy the above two files to c:\apache\htdocs
Start Apache server now and type the url in browser as:

‘http://localhost/demo.htm’

This time also, we get correct result as expected.

We can also place the htm and swf files in d:\inetpub\wwwroot and get the same result

Thus, just like Flex2, OpenLaszlo also provides standalone compilation and using the swf file either in JSP or PHP or whatever.SOLO applications

like this need not make use of the Laszlo Presentation Server. (lps-3.3.3). But, if we want the server to compile our file dynamically, we have to use it and also for webservice applications.

Let us now copy our demo.lzx file to:
[code]
‘c:\tomcat5\webapps\laszlo\my-apps’ folder. Note that any lzx file placed in my-apps folder gets compiled automatically.
[/code]
We can see the result by typing the URL as:
[code]
‘http://localhost:8080/laszlo/my-apps/demo.lzx’
[/code]
We will next see a simple demo where on clicking a button , you get a messagebox that greets you.Let us name it as alert.lzx
[code lang=”html”]<canvas height="200">
<alert name="msgbox1">
HOW ARE YOU?
</alert>

click here to get greeted!

</button>

</canvas>
[/code]
As before, we compile this in command line at :
[code]
e:\laszlotrials>lzc alert.lzx
[/code]
Then run it at command line as:
[code]
e:\laszlotrials>alser.swf
[/code]
We get a button first. On clicking it, we get a msgbox. That’s some event for us!
Our next example is to create a simple list.

// simplelist.lzx
[code lang=”html”]<canvas height="160">

<view>

</list>

</view>

</canvas>

—

>lzc simplelist.lzx

>simplelist.swf

**************************************[/code]
The soul of all practical applications is ‘data’. As succinctly put by Nirav Mehta in his article on OpenLaszlo and PHP(Linux for You—January,2006), “a lot of data handling happens via datasets in Laszlo.Datasets are essentially XML documents. You can load them from XML files are from URL’s”.

For any query, we can generate the result through a php or jsp or servlet, but convert it into an xml file and then refer to this xml file in our lzx file.This is the standard method.

Let us show an xml file in a list first. We begin by creating an xml file ‘students.xml’ in e:\laszlotrials’ folder.
[code lang=”html”]// students.xml

<nameplace

name="thomas" place="madras" />

<nameplace

name="joseph" place="ooty" />

<nameplace

name="mathew" place="bombay" />

<nameplace

name="jacob" place="delhi" />

</student>

—————–

Next we create the following lzx file in the same folder.

// studentlist.lzx

<dataset name="ds"

src="students.xml" />

<simplelayout axis="x"

spacing="20" inset="100"/>

<textlistitem

datapath="ds:/student/nameplace"

text="$path{‘@name’}"/>

</list>

<textlistitem

datapath="ds:/student/nameplace"

text="$path{‘@place’}"/>

</list>

</canvas>[/code]
We can compile and execute this file to get the display shown in studentlistscreen.doc If we study the code and display, it would be easy to decipher.Carefully note the (:) after ds however, when defining the datapath. It would be better if we can show the data in grid form.

The code follows in:
[code lang=”html”]//xmlgrid.lzx

<dataset name="ds"

src="students.xml"/>

<simplelayout axis="x"

inset="100" />

<gridcolumn showheader="true" width="50

</gridcolumn>

<gridcolumn width="100"> name

</gridcolumn>

<gridcolumn width="100">place

</gridcolumn>

</grid>

</canvas>
[/code]

We can test this by copying xmlgrid.lzx as well as students.xml to
[code]
c:\tomcat5\webapps\laszlo\my-apps .
[/code]

We need not restart the tomcat server.

Just type the URL in browser as
[code]
‘http://localhost:8080/laszlo/my-apps/xmlgrid.lzx'[/code]