OpenLaszlo basic tutorial for a SOLO App

A class to handle all the external parameters of our app


<class name="Params" datapath="ds_main:/header/params">
<attribute name="Width" type="number" value="$path{'@Width'}"/>
<attribute name="Height" type="number" value="$path{'@Height'}"/>

<attribute name="Title" type="string" value="$path{'@Title'}"/>
<attribute name="TitleFontSize" type="number" value="$path{'@TitleFontSize'}"/>
<attribute name="TitleColor" type="color" value="$path{'@TitleColor'}"/>

<attribute name="TextsFontSize" type="number" value="$path{'@TextsFontSize'}"/>
<attribute name="TextsColor" type="color" value="$path{'@TextsColor'}"/>

<attribute name="MinTime" type="number" value="$path{'@MinTime'}"/>
<attribute name="MaxTime" type="number" value="$path{'@MaxTime'}"/>

</class>

<Params id="params"/>


And finally, the main objects

The main objects won’t require a lot of comment. Basically, we instanciate a Params object and the main view, and we bind a subset of the dataset to the class FxText. Laszlo will handle the instanciation automatically, and call the ondata method of FxText.

<FxText datapath=”ds_main:/header/texts/text”/> means flash should instanciate as many FxText as there are items in the xml file, following the xpath: header/texts/text. In our file, there are 5 “text” items, so flash will instanciate 5 FxText, and each will be bind to their own subpart of the xml structure.

Another important part is the request to retrieve the external parameters. In the oninit event, we will read the flash parameters (i.e. the parameters passed in the “object” tag in HTML), and retrieve this file to read the parameters.


var dset = LzBrowser.getInitArg("dset");
if(dset!=null) ds_main.setSrc(dset);
ds_main.doRequest();


The external parameters

Here below is the content of the parameter file, linked to the main dataset in our application. As you can see, all we had to do was to tie to what we used in the code.


<header>
<params Title="OL tuto" TitleFontSize="50" TitleColor="990000" TextsFontSize="8" TextsColor="111111" MinTime="5000" MaxTime="8000" />

<texts>
<text value="Yahoo" url="http://www.yahoo.fr"/>
<text value="Google" url="http://google.com"/>
<text value="This tutorial" url="http://www.gruaz.net/spip.php?article64"/>
<text value="OpenLaszlo" url="http://www.openlaszlo.org" />
<text value="And so on..." url="" />
</texts>

</header>


then, in order to use the flash we just generated, we only need to add something like:


<object type="application/x-shockwave-flash" data="header.lzx.swf?dset=params.xml"
width="450" height="100">
<param name="movie" value="header.lzx.swf?dset=params.xml" width="450"
height="100" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="LT" />
<param name="menu" value="false" />
</object>


in an html page.

Conclusion

This tutorial aims to be a starting point for any visual piece of flash based on OL. As you can see, the mecanism for retrieving parameters is fairly simple, so it is easy to imagine more complex apps with graphics, video and so on. (for instance in our case, we could have added a BgSrc=”test.jpg” in the main params, and used this as a background image). Flash being very good at image manipulation, stretching and fading a background is really nothing to do.

As you can see in this tutorial, few lines are enough to make something reusable, so it is easy to get enthusiam about OpenLaszlo.
While I agree great things can be done using OL, be careful not to be over confidant: on large scale projects, when a lot of processing needs to be done on the client side, OL definately cannot challenge a java applet or an ActiveX. On the other hand, it is really perfect for small UI parts.

Enjoy, and feel free to leave a comment!

---

Download the sources here.