KNOW-HOW OpenLaszlo Cross-browser Internet applications with OpenLaszlo IN A FLASH timbec, photocase.com timbec, Long before Ajax hit the scene, Flash gave developers a basis for designing interactive web content. The OpenLaszlo framework, with its easy-to-learn command syntax, is the foundation on which many Flash applications build. BY PETER KREUSSEL and provides a basis for client-side appli- cation logic, which keeps barriers low lash does not have many friends [1] claims that more than 95 percent of for newcomers by integrating both among the open standard lobby all browsers have a Flash plugin in- HTML and CSS elements. The language Fon the Internet. This said, if you stalled, and you can assume that just as is XML compliant and object oriented, have no objection to using the closed- many surfers disable Javascript as have which means that you can reuse code source Flashplayer, the OpenLaszlo browsers that do not support Flash. framework offers a powerful, easy-to-use Flash technology, which supported inter- Listing 1: Object platform for interactive Internet applica- active applications before Ajax hit the Orientation tions with sophisticated graphics. Open- scene, offers a number of advantages: Laszlo creates Flash bytecode based on • Flash avoids browser compatibility is- 01 <class name="box" height="100" an XML language that uses HTML-style sues. Flashplayer will render a .swx 02 width="100" bgcolor="red"/> tags for interface design and plain Javas- file identically in Firefox, Opera, Inter- 03 cript for the client-side application logic. net Explorer, or other browser that 04 <class name="borderedbox" Flashplayer 7 for Linux (which has been supports Mozilla or Internet Explorer extends="box"> around for a while) is all you need to plugins. Even if Ajax applications are 05 <view bgcolor="yellow" run the applications without restrictions. based on libraries or frameworks that 06 x="3" y="3" The early preview of OpenLaszlo ver- introduce an abstraction layer between 07 width="${parent.width-6}" sion 4 can convert applications to Ajax content and browser capabilities, code, and thus do without proprietary achieving comparable robustness 08 height="${parent. height-6}"/> technology. However, this does not work means much cross-browser testing. for the full feature set, and thus far, only • Flash applications can integrate many 09 </class> Firefox/ Mozilla and Internet Explorer 6 media types, such as animations, vec- 10 have been able to render OpenLaszlo tor graphics, and sounds. 11 <box/> DHMTL applications reliably. OpenLaszlo applications are based on 12 <borderedbox/> Adobe’s Flash has a number of techni- XML files. The OpenLaszlo language, 13 <borderedbox/> cal benefits compared with Ajax. Adobe LZX, defines the user-interface design 50 ISSUE 78 MAY 2007 WWW.LINUX - MAGAZINE.COM OpenLaszlo KNOW-HOW effectively for your in- supports methods that provide specific x="10" y="10" /> terface design. Listing functionality for individual display ele- <window visible=ßß 1 creates the display ments or element classes. Event handlers "${cbox.value}" /> shown in Figure 1. call Javascript code while keeping to The listing starts Javascript standards. The value of the window attribute, visi- with the definition of The following example, which moves ble, is bound to the current value of the the box and bordered- a button five pixels to the right when cbox checkbox by a constraint. When a box classes, which clicked, provides an idea of how Open- user enables or disables the checkbox, can be displayed as Laszlo handles user input. The button OpenLaszlo will modify the visibility of often as you like by tag defines an onclick handler, which the window accordingly, without need- calling <classname> calls the moveHoriz() function with an ing an event handler to do so. in the source code. argument of 5. After adding the label borderedbox inherits Move me, the sample code implements Data Handling Figure 1: Object- from the box class; at the moveHoriz method, which incre- The core task of many web applications oriented inter- the same time, the ap- ments the x position by the number is that of displaying or editing data saved face designs. pearance of bordered- passed in as a parameter, again using server-side. To support this, the Open- box is redefined on syntax borrowed from Javascript. The Laszlo XML language integrates a num- the basis of the inherited properties. code keeps to existing Internet stan- ber of powerful methods. dards, simplifying life for newcomers: The grid display element draws the GUI Design displayed elements from the superordi- Let’s look at a couple of examples to <button onclick=U nate dataset element. The dataset tag demonstrate how powerful the XML "moveHoriz(5);"> contains either the XML-formatted data, interface design language is. <dat- Move me as in Listing 5, or the dataset element epicker></datepicker> is all it takes to <method name="moveHoriz"U loads the data from the server via HTTP, create a sophisticated date picker. Menus args="moveAmount"> as shown in Listing 3. This gives devel- that work reliably, no matter what this.setAttribute("x",U opers the ability to evaluate current da- browser you choose, are not much more this.x+moveAmount); tabase data. complicated. Listing 2 shows the XML </method> OpenLaszlo processes data on the code for a drop-down menu. </button> basis of XPath [3], a technology devel- A multicolumn list (grid), which sorts oped by the W3C consortium to address the entries in a column when you click The constraints in ${DOM path to input parts of an XML document. In the exam- on the column header and supports edit- field} offer another option for respond- ple, /forecast/day in contentdatapath, ing or selecting in rows, is just a couple ing to user input: which is in the data source, addresses of lines of code. See Listing 3. See the all day nodes in the forecast category. OpenLaszlo homepage [2] for an over- <checkbox id="cbox"ßß view of the available form elements. text="Show Window"U Client-Server Interaction Animations make life easier for Interactions between client- and server- users, especially if a developer Listing 2: Drop-Down Menu side program logic are typical for larger needs to visualize a state change scale web applications. In many cases, from state 1 to state 2. OpenLaszlo 01 <menubar width="200" > access by multiple clients to a shared da- makes effects simple – to create a 02 <menu text="Menu 1" width="100"> tabase requires access to functionality smooth movement, all you need 03 <menuitem text="Menu item 1" implemented server-side, often with the do is call the animate method in 04 onselect="canvas.whichOne(this);"/> aim of keeping the client application any display element. In Listing 4, lean. A lean client application saves 05 <menuitem text="Menu item 2" the onclick handler for the box ele- 06 onselect="canvas.whichOne(this);"/> ment takes care of this, causing a Listing 3: Multicolumn Grid 07 <menuitem text="Menu item 3" view-type element – a square 01 <canvas height="250"> “window” with an original height 08 onselect="canvas.whichOne(this);"/> 02 <dataset name="weatherdata" of 20 pixels – to grow to a height 09 <menuseparator/> request="true" of 200 pixels in 500 milliseconds. 10 <menuitem text="Menu item 4" 03 src="http://www. Clicking a second time shrinks the 11 onselect="canvas.whichOne(this);"/> laszlosystems.com/ box again. The instructions for 12 </menu> 04 cgi-pub/weather. this are contained in the parame- 13 <menu text="Menu 2" width="100"> cgi?zip=10022"/> ter box height==20?200:20, and 05 <grid datapath= the 500 parameter defines the du- 14 <menuitem text="More items..." "weatherdata:/weather" ration of the animation. 15 onselect="canvas.whichOne(this);"/> 06 contentdatapath= OpenLaszlo uses Javascript for 16 </menu> "forecast/day"/> application logic. Besides global 17 </menubar> <script> blocks, the framework 07 </canvas> WWW.LINUX - MAGAZINE.COM ISSUE 78 MAY 2007 51 KNOW-HOW OpenLaszlo Listing 4: State Change SOAP has been criticized for transmit- For more information on server adminis- ting large volumes of XML code for the tration, see the OpenLaszlo site [4]. In 01 <canvas> simplest of calls. As an alternative to environments without a Java Runtime 02 <view id="box" width="200" SOAP, OpenLaszlo also supports the sim- Environment, such as shared web host- height="20" pler XML RPC protocol. ing without root access, OpenLaszlo can 03 <bgcolor="red"/> OpenLaszlo is based on Tomcat 5. The be run in solo mode. An OpenLaszlo 04 <text onclick="box. OpenLaszlo SDK contains a Tomcat serv- server can compile the applications as animate( let container. The precondition for a full- separate, executable .swx files that pro- 05 'height',box.height== fledged OpenLaszlo server is a Java Run- vide the whole functionality in Flash 06 20?200:20, 500, false)"> time Environment, Version 1.4 or newer. code that runs client-side. A web server The Java platform brings the ability to without Java can provide this support on 07 Click here access Java objects and methods directly the Internet; however, RPC functions are 08 </text> from the client application. An Open- not available in these applications. 09 </canvas> Laszlo server is easy to set up. After in- stalling the Java SDK, unpack the Open- Conclusions client resources and saves downloading Laszlo tarball and call Path/to/unpack/ The OpenLaszlo XML language relies on large amounts of program code when directory/server/tomcat-5.0.24/bin/ standards that web developers will be fa- launching an Internet application. startup.sh. The sample applications in miliar with in many areas. The XML tags Besides data access, OpenLaszlo offers the archive should then be accessible on for defining display elements are similar various approaches to integrating server- http://localhost:8080/lps-Openlaszlo- to HTML tags.