Exploring Laszlo Classes, Attributes, and Eventsby Satya Komatineni
Laszlo, an XML platform for rich internet applications, recently went open source. This platform applies an architecture that is similar to XUL and XAML to accomplish programming on the browser side. Laszlo uses Macromedia Flash as its execution platform, resulting in unsurpassed browser compatibility without requiring Macromedia Flash executables or licensing for development.
Laszlo applications are written in LZX. LZX is an XML-based programming language that can be written using any text editor. When these files are accessed through a Laszlo servlet, Laszlo compiles these LZX files into byte codes or binary format, which are then sent to the Macromedia Flash plugin in your browser. No Macromedia Flash components are needed on your server side. The Macromedia Flash plugin is widely available and compatible with most browsers.
You can read the basics of this platform in an article titled "Laszlo: An Open Source Framework for Rich Internet Applications," by Bill Grosso at Java.net. In this article, I will focus on some of the language fundamentals that will come in handy as you start writing your own programs using LZX. For in-depth study, refer to the documentation on the Laszlo site.
Setting Up your Experimental Laszlo "Developer Pad"
Use my notes on Laszlo, or the Laszlo website, to download and install Laszlo. It is possible you may already have a prior installation of Tomcat. If so, Laszlo's installation documentation advises stopping Tomcat while installing Laszlo. If you don't already have it, Laszlo comes with a copy of Tomcat. Once installed, you can use my notes above to set Laszlo as another web app in your installation of Tomcat. For an experienced Tomcat user, this is just a matter of setting the web app root.
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 this LZX file is accessed through a browser, you will see the layout in Figure 1 in your browser. I call this your "developer pad." This will be the starting point for your application needs. This initial set up allows you to write debug statements and have them displayed in the debug window. This setup also allows you enough space outside of the debugger for placing the visual controls.
Figure 1. The Laszlo "Developer Pad"
Writing a Class
<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 of the
<canvas> tag. As
this example shows, an LZX class is defined inside of a
This code defines a class named
test and two
Instantiating a Class
With the above class definition in place, the following code
shows how to instantiate the defined class
<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>
Look at how the class name
test becomes a subsequent
<test> tag for instantiation. The
instantiated object is named
testInstance and is
available as the variable
The Nature of Attributes in Laszlo
In Laszlo, every time an attribute is set or changed, an
onchange event is generated for that attribute. This
is pretty nice for visual programming, where things are controlled
by events. Making this a language construct saves a lot of coding,
not to mention the increase in readability and understanding.
Since the main focus of this article is to show you how
attributes are set, events fired, and code written in response to
those events, let me show you how one could write an
onchange event for one of the attributes,
<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
This event is fired when changes are made to the attribute
a1. This code also shows you the basic syntax for
defining a method. Also notice that, unlike Java, this method belongs to
the object or the instance, and is not available in the class. The
method body here writes a line to the debugger. As the debugger is
already enabled, this line will show up in the debugger window.
Refining the "Developer Pad" with Alerts
alert(). So I searched for the trusted
alert() in Laszlo--to no avail. But I did come
across a control (a modal dialog, to be precise) called
figured I could use this control to debug by simulating an
alert function. What follows is a first attempt. In
addition, this code exercises the basic features of LZX I have
talked about so far.
<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 --> <!-- Instantiate 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.showAlert('Alert Button Pressed')"> Show Alert </button> </canvas>
In the code above, I created the
instance as a child of the
canvas, and provided the
alert with coordinates and size. I also named the
myalert and gave it a body: "hi - initial
I also wrote a method called
showAlert to show the
dialog. This method has an argument named
body of the method accesses the modal dialog and sets its attribute
text to the
displayText. Subsequently, the
method does an
open on the modal dialog.
I also created a button to call
showAlert button is pressed, you will see an
alert dialog with your text. 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. You can change the button positioning by
placing it underneath the debug window using the following code:
<button x="500" y="310" onclick="canvas.respondToMethod()"> Show Alert </button>
You can see the result in Figure 2.
Figure 2. The Laszlo "developer pad" with an alert window
Pages: 1, 2