What is OpenLaszlo?

April 4, 2008

Tools & IDEs

OpenLaszlo – Sample Code

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

a) JDK1.4.2
b) Tomcat-5
c) 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.

c:\tomcat5\bin>

set JAVA_HOME=D:\JDK1.4.2

>startup

After starting Tomcat5, we can type the url as :

“http://localhost:8080/laszlo”

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:

d:\winnt\system32;c:\laszlo\bin

Let us create

e:\laszlotrials\hello.lzx

<canvas height="40">
 
<text>WELCOME!</text>
 
</canvas>
 
e:\laszlotrials>lzc hello.lzx
 
We will get hello.swf
 
To test, just type
 
e:\laszlotrials>hello.swf

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 :
 
c:\tomcat5\webapps\root
 
and type the url as:
 
'http://localhost:8080/demo.htm'

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:

‘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:

‘http://localhost:8080/laszlo/my-apps/demo.lzx’

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 :

e:\laszlotrials>lzc alert.lzx

Then run it at command line as:

e:\laszlotrials>alser.swf

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

<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="$path{'@name'}"/>
 
</list>
 
 
<list id="list2">
 
 
<textlistitem
 
datapath="ds:/student/nameplace"
 
text="$path{'@place'}"/>
 
</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
 
c:\tomcat5\webapps\laszlo\my-apps .
 
 
We need not restart the tomcat server.
 
Just type the URL in browser as
 
'http://localhost:8080/laszlo/my-apps/xmlgrid.lzx'