Cross-Browser Internet Applications with Openlaszlo in a FLASH Timbec, Photocase.Com
KNOW-HOW OpenLaszlo
Cross-browser Internet applications with OpenLaszlo IN A FLASH timbec, photocase.com
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 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 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 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 Firefox/ Mozilla and Internet Explorer 6 media types, such as animations, vec- 10 have been able to render OpenLaszlo tor graphics, and sounds. 11 DHMTL applications reliably. OpenLaszlo applications are based on 12 Adobe’s Flash has a number of techni- XML files. The OpenLaszlo language, 13 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- 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 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 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- access by multiple clients to a shared da- makes effects simple – to create a 02 04 cgi-pub/weather. this are contained in the parame- 13 "forecast/day"/> application logic. Besides global 17
