Advertisment

Flash with OpenLaszlo

author-image
PCQ Bureau
New Update

RAD (Rapid Application Development) tools like Visual Studio, animation studios like Macromedia Flash, HTML editors like Macromedia Dreamweaver, all help in developing a rich user interface. All these IDEs (Integrated Development Environment) allow us to come up with magnificent interfaces by dragging and dropping components and controls onto a frame, stage or a window. On the flip side, changing the user interface of your program developed using these IDE's would usually mean opening up your program code again in the respective IDEs, making changes, recompiling and redeploying. Also a programmer will need to spend significant time in understanding these IDE. 

Advertisment
Direct Hit!
Applies to: Web developers
USP: Develop flashy Web applications using simple XML tags
Primary Link:

www.openlaszlo.org 
Google keywords: 'rich internet applications' flash xml 

Considering the above mentioned points, it seems now everyone is shifting towards markup languages like XML to develop user interfaces-for desktop as well as for Web. This shift is primarily because of the ease of using a markup to maintain user interfaces wherein the markup is defined in an external (to the application) file, which can be changed on the fly without recompiling. 

For example, the new user interface system for Windows Vista called Windows Presentation Foundation (formerly called Avalon) is based on XAML markup language. There are packages like SwingML and SwiXml which allow you to generate Java Swing using XML markup. And for Web there are solutions like OpenLaszlo which allows us to create Flashy sites using only XML without ever touching the Macromedia Flash IDE. 

Advertisment

OpenLaszlo, based on Java, is a set of Java Servlets which compiles the user interface markup defined in XML files to a Flash-based interface. This means, OpenLaszlo must be deployed on a Java application server. Let us now install and deploy OpenLaszlo on Tomcat application server running on PCQLinux 2005 (a Linux distribution given out by PCQuest with the March 2005 issue). Subsequently we will code simple but flashy applications using it. 

The setup



Before installing Tomcat you will need to install JDK (Java Development Kit). For this install the RPM named pcqlinux-j2se-installer-1-0.i386.rpm found on PCQLinux CD 3. This will produce a directory named pcqlinux-j2se-installer in /opt. Change to this directory and issue the following.

./jdk-1_5_0_01-linux-i586-rpm.bin

Advertisment

A full-fledged portal page written in OpenLaszlo, contains active and rich content

Type in 'yes' for the license agreement, which will then install JDK in the directory /usr/java/jdk1.5.0_01. Next, to install Tomcat, install the RPM named tomcat-5.5-4.i386.rpm found on PCQLinux CD 3. This will install Tomcat in the directory /opt/tomcat. Next issue the following.

export JAVA_HOME=/usr/java/jdk1.5.0_01

Advertisment

Append the above line to the file named bashrc found in /etc directory to make this setting persistent across reboots. 

To download the latest version of OpenLaszlo (version 3.0.2 as of this writing) browse to the URL

www.openlaszlo.org. Under Download click on Binaries. Scroll down and click on the 'Get It' link for Linux/Unix. On the subsequent page, select 'Development kit of any OS' and click on download file. You should be able to download an archive named openlaszlo-3.0.2.war. Create a directory named openlaszlo under /opt/tomcat/webapps. Copy openlaszlo-3.0.2.war to this directory and extract it as:

jar -xvf openlaszlo-3.0.2.war

Advertisment

Next, start Tomcat by issuing the following.

/opt/tomcat/bin/catalina.sh start

To view an OpenLaszlo application in your Web browser, you must have Macromedia Flash plugin 6 or above installed. To access the pre-written demos, key in this URL in your flash-enabled Web browser:

Advertisment

http://:8080/openlaszlo/.

Click on 'Dashboard' under 'Demos' and then click on the 'Launch Demo' button. Upon login, you will be greeted by a stunning interface of a website portal, written using

OpenLaszlo. 

Write your own application



Create a directory named myapp under/opt/tomcat/webapplications. Create a subdirectory named WEB-INF within it. Copy the directories named lib and lps found in /opt/tomcat/webapps/openlaszlo/WEB-INF directory to myapp/WEB-INF directory. Also copy the file named web.xml found in /opt/tomcat/webapps/openlaszlo/WEB-INF directory to myapp/WEB-INF. Copy the directory named lps found in /opt/tomcat/webapps/openlaszlo to myapp directory. Below is the code for an application which displays 'My Laszlo App is Working' in a window. 






title="OpenLaszlo App"



resizable="true" closeable="true">


My Laszlo App is Working









Advertisment

Let's go through the above lines of markup. All the OpenLaszlo components like windows, buttons, form, views and datepicker lie within a canvas. Assume the to be the root element (of the application or the XML document). Most components including canvas and window have a width and height property which sets their dimensions on the screen. Note that for the , we define a x,y position which are the top left co-ordinate of the window (10,10 in this case). We give the window a title using the title attribute. We also specify that the window is closable (will have a close button on the top right corner) and it will be resizable. Within a element we can write any line of text. Since the element is contained within the element, the text will always be displayed within the window. To see your application working, save the above content as window.lzx (all OpenLaszlo app files have a .lzx extension by default) in the directory /opt/tomcat/webapps/myapp.

Restart Tomcat as:

/opt/tomcat/bin/catalina.sh stop



/opt/tomcat/bin/catalina.sh start

Go to http://:8080/myapp /window. lzx. You will see a sleek looking window with the mentioned text within it. Appreciate the rich functionality provided by the window with a few lines of XML-the window is draggable, resizable and it can be closed. Such a functionality through such few lines of code cannot be achieved with DHTML (Dynamic HTML) or Flash. You'll also see a panel at the button. The various options on the panel can be used to debug your application. In case you don't want to see this panel (you would like to hide it when deploying your application for end users), open the file named lps.properties found in myapp/WEB-INF/lps/config in a text editor and change the line:

defaultRequestType=app_console

to 

defaultRequestType=html

Save the file and restart Tomcat. Subsequent access to the OpenLaszlo application will not show the debug panel. 

A glimpse to events



In this part we'll tell you how to use Javascript for event handling. Note that when you click on the close button of the window, the window disappears without any way of bringing it back. We add a button called show which when clicked, will display the window again. 






title="OpenLaszlo App"



resizable="true" closeable="true">


My Laszlo App is Working













We have given an 'id' named win to the because without an ID the button will not be able to access the window element- to display it. Next, note the use of onclick attribute in the

Shekhar Govindarajan, IT4enterprise

Advertisment