Understanding laszlo classes, attributes, and events: A laszlo language pre primer
Recently Laszlo, an XML platform for rich internet applications went open source. This platform applies an architecture that is similar to XUL and XAML to accomplish programming on the browser. Laszlo uses "Flash" as its execution platform resulting in unsurpassed browser compatibility, while requiring no Flash executables or license for development. Laszlo offers a fairly matured platform to exercise this architecture.
As Bill Grosso has already covered the basics of this platform on Java.net, in this article I will focus on some of language fundamentals that will come handy when you are experimenting with Laszlo.
Although the documentation on Laszlo site is quite good, it will take a while to cover all the variations even to get your footing. This article exposes some of the language aspects of Laszlo even for a casual reader.
A brief taste of laszlo
Although this article focuses on a working example, you can get a taste of what laszlo is and what it does by looking at their "10 minute exploration url". At least you will get a general feel for the language syntax. This article will then take you to the second step of attempting to write something of your own by exercising some of the basic language semantics.
Setting up your experimental Laszlo developer pad
Use my notes on Laszlo or the Laszlo website to download and install. Laszlo comes with its own tomcat. Like me, if you have your own tomcat, you can follow my notes to enable the installed Laszlo in your tomcat. For an experienced tomcat user it is just a matter of setting the webapp root. You are also advised to stop your tomcat while installing Laszlo.
Let me start the discussion by creating a small lzx file to start your development process. This file looks like the following
<canvas height="500" width="800" debug="true">
<debug x="450" y="0" height="300"/>
</canvas>
When accessed through a browser you will see the following picture in your browser. I call this your development pad
Writing a class
Let me show you how a class can be written in Laszlo
<canvas width="800" debug="true">
<debug x="450" y="0" height="300"/>
<class name="test">
<attribute name="a1" type="string"/>
<attribute name="b1"/>
</class>
</canvas>
In Laszlo everything happens inside a canvas. The above code defines class named "test" and defines two attributes, "a1" and "b1".
Instantiating a class
Now that I have a class, I should be able to instantiate it.
<canvas width="800" debug="true">
<debug x="450" y="0" height="300"/>
<class name="test">
<attribute name="a1" type="string"/>
<attribute name="b1"/>
</class>
<!--Instantiating a class-->
<test name="testInstance">
</test>
</canvas>
See how the class name becomes a subsequent node for instantiation.
Nature of attributes in Laszlo
In Laszlo every time an attribute is set or changed, an on change event is generated. That is pretty nice. Let me show you how I could write an on change event for one of the attributes "a1".
<canvas width="800" debug="true">
<debug x="450" y="0" height="300"/>
<class name="test">
<attribute name="a1" type="string"/>
<attribute name="b1"/>
</class>
<!--Instantiating a class-->
<test name="testInstance">
<!--Demonstrating an onchange for attribute event-->
<method event="ona1" name="ona1Method">
Debug.write("hey this works");
</method>
</test>
</canvas>
See how a method is defined for the "ona1" event. This event is fired when changes are made to "a1". This code also gives you the basic syntax for defining a method. The method body writes a line to the debugger. As the debugger is already enabled, this line will show up in the debugger window.
Alerts: A detour
While programming in Javascript it is very common to debug things using "alert()". Going through the Laszlo docs I have come across a control (a modal dialog to be precise) called "alert". So I figured I could use this to debug. But I haven't found a function called "alert". So I have decided to simulate such a function using this visual control. Here is that attempt
<canvas width="800" debug="true">
<debug x="450" y="0" height="300"/>
<class name="test">
<attribute name="a1" type="string"/>
<attribute name="b1"/>
</class>
<!--Instantiating a class-->
<test name="testInstance">
<!--Demonstrating an onchange for attribute event-->
<method event="ona1" name="ona1Method">
Debug.write("hey this works");
</method>
</test>
<!-- Simulating an alert -->
<!-- A modal alert dialog -->
<alert name="myalert" width="100" y="100">
hi - initial text
</alert>
<!-- A method to work the modal dialog -->
<method name="showAlert" args="displayText">
canvas.myalert.setAttribute("text",displayText);
canvas.myalert.open();
</method>
<!-- Testing the alert function -->
<button onclick="canvas.shwoAlert('button pressed')">Show Alert</button>
</canvas>
I have created an "alert" component as a child of the "canvas". I have given it co-ordintaes and size. Then proceeded to name it as "myalert". I have then given it a body "hi - initial text".
I also wrote a method called "showAlert" so that I can show the dialog. This method has an argument named "text". The body of the method is accessing the modal dialog and setting its attribute "text" to the displayText. Subsequently the method does an open on the modal dialog.
I have also created a button to call the "showAlert()" when it is pressed. Because this button is a child of the canvas and has no positioning set, it will show up at the top left corner of the canvas. When it is pressed, you will see an alert dialog with your text.
Back to attributes and events
The main goal of this article is to show you how when an attribute is set, its attached event is fired and does something recognizable. To do this let me write a method on the canvas called "respondToButton()".
<canvas width="800" debug="true">
<debug x="450" y="0" height="300"/>
<class name="test">
<attribute name="a1" type="string"/>
<attribute name="b1"/>
</class>
<!--Instantiating a class-->
<test name="testInstance">
<!--Demonstrating an onchange for attribute event-->
<method event="ona1" name="ona1Method">
Debug.write("hey this works");
</method>
</test>
<!-- Simulating an alert -->
<!-- A modal alert dialog -->
<alert name="myalert" width="100" y="100">
hi - initial text
</alert>
<!-- A method to work the modal dialog -->
<method name="showAlert" args="displayText">
canvas.myalert.setAttribute("text",displayText);
canvas.myalert.open();
</method>
<!-- Testing the alert function -->
<button onclick="canvas.respondToButton()">Show Alert</button>
<method name="respondToButton" >
//Prepare a string
somestring = "Hey, I am setting the a1 attributes value";
//Write a debug to see it
Debug.write(somestring);
//Callt the alert to see it
showAlert(somestring);
//Go ahead and set the attribute
canvas.testInstance.setAttribute("a1",'satya');
//The above will fire an event causing "ona1Method" to execute.
//You will that in the debugger
</method>
</canvas>
See how the respond button is setting the attribute of the "testInstance" that is declared using its class "test". While writing a method make sure the name of the method doesn't have the brackets in them.
Using a "script" instead of a "method"
Laszlo also allows a script tag to define functions and procedural logic. Let me modify now the above code to include some scripting and briefly note the characterastics on LZX script.
<canvas width="800" debug="true">
<debug x="450" y="0" height="300"/>
<!-- Your method -->
<method name="respondToButton" >
//Prepare a string
somestring = "Hey, I am setting the a1 attributes value";
//Write a debug to see it
Debug.write(somestring);
//Callt the alert to see it
showAlert(somestring);
//Go ahead and set the attribute
canvas.testInstance.setAttribute("a1",'satya');
//The above will fire an event causing "ona1Method" to execute.
//You will that in the debugger
</method>
<!-- Your method rewritten as a script -->
<script>
function respondToButtonUsingScript()
somestring = "Hey, I am setting the a1 attributes value";
Debug.write(somestring);
showAlert(somestring);
canvas.testInstance.setAttribute("a1",'satya');
</script>
<!-- Button now calling the global script function -->
<button onclick="respondToButtonUsingScript()">Show Alert</button>
<class name="test">
<attribute name="a1" type="string"/>
<attribute name="b1"/>
</class>
<!--Instantiating a class-->
<test name="testInstance">
<!--Demonstrating an onchange for attribute event-->
<method event="ona1" name="ona1Method">
Debug.write("hey this works");
</method>
</test>
<!-- Simulating an alert -->
<!-- A modal alert dialog -->
<alert name="myalert" width="100" y="100">
hi - initial text
</alert>
<!-- A method to work the modal dialog -->
<method name="showAlert" args="displayText">
canvas.myalert.setAttribute("text",displayText);
canvas.myalert.open();
</method>
</canvas>
Conclusion
This very introductory article gave you a good starting point for experimenting with Laszlo and start exploring the tool. This is a good introduction with out getting into lot of the details of Laszlo. The following refereces on the Laszlo site are a good place to start reading more about the language elements. I also keep running notes on Laszlo as I experiment with the tool. You are more than welcome to browse through these resources on my weblogging system "akc".
Laszlo References
2. Methods, Events, and Attributes