Gear up your Java Web Applications for RIA experience
Date: Friday , February 29, 2008
There are many tools and technologies out there that will help you develop new generation applications. In this article we will discuss about developing Rich Internet applications using Java and OpenLaszlo.
About OpenLaszlo
OpenLaszlo is an open source platform for developing rich Internet applications. As this is being written the latest stable release is 4.0.10 and all listings in this article have been tested on this version. With OpenLaszlo you write XML files containing special OpenLaszlo tags and event handling code, also called the LZX language, to define your user interface. The event handling code is very similar to JavaScript, and so it is easy to learn and get used to. These XML files are then converted and rendered as flash movies (sw7 or sw8 files) or as DHTML code. As you already know, the flash movies will be played on a Flash Player and the DHTML code will be rendered directly by the browser.
Getting started
Installation: OpenLaszlo comes in two download options: a full server installation or just the core web application. The full server installation has a bundled Tomcat Server with it.
To install the server version simply download the OpenLaszlo server and run the installer executable. There is a separate download for windows, Unix/Linux and Mac OS X. You need to have JDK (and not just the JRE) 1.4 or above installed and available before you start the installation process.
To install just the core web application into an existing application server (or a Servlet container like Tomcat), download and pack the contents of the directory lps-4.0.10 as a WAR (Web Archive) package and deploy the WAR file into the web container. (Note that LPS stands for its former name, Laszlo Presentation Server.)
Run your first OpenLaszlo Application: For the sake of this article, I assume that you have installed the full server version of OpenLaszlo in Windows.
To begin, you need to start the server by selecting the ‘Start OpenLaszlo Server’ menu under ‘OpenLaszlo Server’ from the Start or Programs Menu. Otherwise, you may also start by navigating to the tomcat directory of Laszlo and starting Tomcat Server by running the startup.bat from the command prompt.
Once you have the Tomcat server started, open your web browser and type the url: http://localost:8080/lps-4.0.10/examples/hello.lzx. You should see ‘Hello Laszlo!’ displayed. Debug: OpenLaszlo displays a debug frame towards the end of an LZX page. You should see this if you scroll down to the end of the ‘Hello.Laszlo!’ page. This debug frame gives you options to change compile-formats between flash video and DHTML. Just select DHTML instead of sw7/sw8 and hit compile button and you will see the same page reloaded as a DHTML page. You may also select the debug checkbox and hit compile, you should see an additional debug window where your debug messages can be printed and viewed.
OpenLaszlo features
In this section, I will introduce you to writing Laszlo programs with commonly used user interface components along with how to respond to user interface events by writing event handlers.
The window and the view component: The window and view components are containers for other components. The following code snippet shows how easy it is to create a window with OpenLaszlo.
Canvas is the container for all views and represents the viewable area of the application. You may provide values for various attributes of the canvas objects (as well as other objects) like the ‘bgcolor’ and ‘width’ attributes. Copy paste the above code snippet into a file and name it ‘sample.lzx’. Copy this file to the my-apps folder in Server/lps-4.0.10 directory and point your browser to http://localhost:8080/lps-4.0.10/my-apps/sample.lzx. You should see the following: A View is the most basic viewable element and every component that can be displayed on the Canvas inherits from the View component. Note that OpenLaszlo is Object Oriented and supports Object Oriented concepts like Inheritance and method overriding. The following code snippet shows a View containing a text component and a button component along with a layout manager to render the components inside the View.
Try changing the axis attribute value to ‘y’ and you will see the components are aligned along the ‘y’ axis instead of the ‘x’ axis. Also, note that the button’s click event is handled by opening an alert dialog box.
CheckBox, ComboBox, Lists, etc.: You have already seen how to work with Buttons, and here we will see some more components like CheckBox, ComboBox and Lists. Most of the lines in the code shown below are self-explanatory. The dataset element defines structured data that can be referenced from components like ComboBox and Lists. Take note of the usage of ‘xpath’ expressions to refer ‘xml’ elements in the dataset.
The above code will run and the display will be as shown below: Menu, Tabs, Tree, etc.: OpenLaszlo also provides other components like Menu, Tree, Tabs, Data Grid, and others out of the box. Like the other components shown above, these are also easy to learn and use. Point your browser to the url http://localhost:8080/lps-4.0.10/examples/components/ to view a demo of all available components. You may also look at the source code for the demos listed here.
Integrate OpenLaszlo with your Java Web applications
OpenLaszlo can be easily integrated with your Java Web applications. One way is to have your Java application serve data elements for the datasets that are defined in the LZX pages as shown below:
Here, the students.jsp can respond with ‘xml’ data for a student list and the Laszlo pages can render them in a suitable component. Another approach is to invoke server side objects using JAXRPC. The following code sample shows how to do this: Debug.write(‘—————————-’);------'); Debug.write(‘ getAllStudents response:’); Debug.write(list);
Deploy your Laszlo application
You may deploy your Laszlo application as either Proxied or Solo deployment. In the former case the Laszlo server proxies web requests to the backend application. This means all requests for ‘lzx’ pages and dataset loads will go through the Laszlo server. As explained earlier, the server compiles ‘lzx’ pages on the fly and creates flash movies (or DHTML code) that is sent to the browser for rendering. In the case of Solo deployment, the Laszlo pages are compiled offline to create flash movies. Laszlo application in Solo mode interact with the Java backend application directly and not through the Laszlo server.
What’s the Future?
Web applications are becoming more and more similar to rich client applications. Web applications that use plain HTML screens are fast becoming obsolete and are getting replaced with applications built with the RIA technology. Moreover, web applications are changing in what they offer; modern web applications are built around the concepts of Web 2.0. Popular social networking sites are a good example of this new trend. The Web will continue to evolve and will become more and more user centric.
|