OpenLaszlo basic tutorial for a SOLO App

Deep Into the code

All the below code has to be in a .lzx file located in the Server folder of your OpenLaszlo installation. Then, to compile/run it, just call this file from your web browser.

The basic declarations


<canvas debug="false" proxied="false">
<font name="title_fnt" src="congab.ttf"/>
<dataset name="ds_main" type="http"/>


Here, {debug=”false”} allows to disable the debugging tool, and {proxied=”false”} specifies that we are writing a solo app, so the flash won’t try to connect to the server.

Then, we declare an embedded font because the system fonts don’t allow fading. And finally, a dataset that will contain all the texts of our application. We could have defined the dataset items directly in the source, but our goal is to write a customizable application, so we we load all the texts and URLs at runtime.

A class to handle the small links

Now let’s write the class that will be used by each of our small links. Basically, we need an item that can:
– be loaded from our external dataset
– be clickable (to open the specified URL)
– update itself to move and fade randomly.


<class name="FxText" extends="text" font="title_fnt" fontsize="${params.TextsFontSize}" fgcolor="${params.TextsColor}">
<attribute name="m_Text" type="string" value=""/>
<attribute name="m_Freq" type="number" value="0"/>
<attribute name="m_URL" type="string" value=""/>
<attribute name="m_PauseUpdate" type="boolean" value="false"/>
...
</class>


m_Text will contain the caption of the object, and m_URL the url to open when the user clics on the link.

m_Freq is a computed parameter, and contains the time of a fragment of the animation. For instance, if the object goes from x1 to x2 and fade from f1 to f2 in 4000ms, m_Freq will be 4000.

m_PauseUpdate is just a boolean to let us know when we should interrupt the animation. Typically, when the user moves the cursor above a link, it should stop moving.

That’s it for the attributes. Now the methods and events. One of the most important event is the ondata, called when the object is bound to a part of the dataset. In this method, we merely read our attributes from the dataset.


setAttribute("m_Text",datapath.getNodeAttribute("value"));
setAttribute("m_URL",datapath.getNodeAttribute("url"));
setAttribute('x',Math.random()*canvas.width);
setAttribute('y',Math.random()*canvas.height);
setAttribute('opacity',Math.random());
setAttribute('text',m_Text);
LzTimer.addTimer(new LzDelegate(this,"Update"),200);


setAttribute(‘text’, m_Text); will set the real caption from what we read from the dataset. And the last line setups a timer that will constantly update the position and the opacity of the object.

The mouse events are also important. However, they are quite easy to understand: we need to load an URL when the user clicks on the link, to pause the animation whenever the user moves the cursor on the link, and resume on a mouseout.

That can be done by:


LzBrowser.loadURL(m_URL);
if(m_URL=="") return;
setAttribute("m_PauseUpdate",true);

setAttribute("m_PauseUpdate",false);
Update();


and the last, but not the least, the Update method. As you could see, we called it undirectly from {ondata}. On the first call, we will calculate the speed of the object. This speed will be bound by MinTime and MaxTime, defined in the external parameters.

Then, the animate function will handle everything else for us. The only thing we need to do at the end of the method is to setup another timer to recall the same method once the animation is over.


if(m_Freq==0)
{
var vmax=params.MaxTime*1;
var vmin=params.MinTime*1;
var fr=vmin+Math.random()*(vmax-vmin);
if((fr=="NaN") || (fr=="undefined")) fr=0;
setAttribute('m_Freq',fr);
}
if(m_PauseUpdate==true) return;
animate('x',Math.random()*canvas.width,m_Freq,false);
animate('opacity',Math.random(),m_Freq,false);
LzTimer.addTimer( new LzDelegate( this, "Update" ), m_Freq );