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.
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!
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.
We can download OpenLaszlo software from the URL given below. The zip is for version 3.3.3.
The zip was extracted into e: drive as
We will find two folders there.
If we open the server folder, we will find three folders a) misc b) tomcat5
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.
c:\tomcat5\bin>; set JAVA_HOME=D:\JDK1.4.2 > startup
After starting Tomcat5, we can type the url as :
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:
Let us create
<canvas height="40"> <text>WELCOME!</text> </canvas> e:\laszlotrials>lzc hello.lzx
We will get hello.swf
To test, just type
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.
<html> <body> <embed src="demo.swf"> </body> </html>
copy demo.htm and demo.swf to :
and type the url as:
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:
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:
'c:\tomcat5\webapps\laszlo\my-apps' folder. Note that any lzx file placed in my-apps folder gets compiled automatically.
We can see the result by typing the URL as:
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
<canvas height="200"> <alert name="msgbox1"> HOW ARE YOU? </alert> <button onclick="canvas.msgbox1.open()"> click here to get greeted! </button> </canvas>
As before, we compile this in command line at :
Then run it at command line as:
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.
<canvas height="160"> <view> <list id="listItem" height="80"> <textlistitem text="THOMAS"/> <textlistitem text="SAMUEL"/> <textlistitem text="DOMINIQUE"/> <textlistitem text="JOSEPH"/> <textlistitem text="DANIEL"/> <textlistitem text="MATHEW"/> </list> </view> </canvas> -- >lzc simplelist.lzx >simplelist.swf **************************************
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.
// students.xml <student> <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 <canvas height="200"> <dataset name="ds" src="students.xml" /> <simplelayout axis="x" spacing="20" inset="100"/> <list id="list1"> <textlistitem datapath="ds:/student/nameplace" text="[email protected]'}"/> </list> <list id="list2"> <textlistitem datapath="ds:/student/nameplace" text="[email protected]'}"/> </list> </canvas>
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:
//xmlgrid.lzx <canvas height="200"> <dataset name="ds" src="students.xml"/> <simplelayout axis="x" inset="100" /> <grid datapath="ds:/student"> <gridcolumn showheader="true" width="50 <text datapath="position()"/> </gridcolumn> <gridcolumn width="100"> name <text datapath="@name"/> </gridcolumn> <gridcolumn width="100">place <text datapath="@place"/> </gridcolumn> </grid> </canvas>
We can test this by copying xmlgrid.lzx as well as students.xml to
We need not restart the tomcat server.
Just type the URL in browser as