Exploring Laszlo Classes, Attributes, and Events

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.

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:

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

Now that you have a workable development pad, you can start the
coding exercise by writing a class in Laszlo. The fundamental
aspect of a class is its set of local variables. The following code
defines a class and a couple of variables for that class. If not
for the XML syntax, the class definition in Laszlo would be quite close
to a class definition in Java. Unlike Java, Laszlo's type system is
closer to that of a dynamic language like JavaScript; that is to
say, it is flexible, or loose.

Look at how the class name test becomes a subsequent
node or <test> tag for instantiation. The
instantiated object is named testInstance and is
available as the variable canvas.testInstance where
needed.

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,
a1.

See how a method is defined for the ona1 event?
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.

While writing LZX, notice that all of the LZX constructs and
naming are case-insensitive. Nevertheless, while defining the nodes
and tags in XML, XML is still case-sensitive; so is JavaScript. So
bear this distinction in mind as you proceed with Laszlo.

Refining the "Developer Pad" with Alerts

While programming in JavaScript, it is common to debug using
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 alert. I
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.

In the code above, I created the alert component
instance as a child of the canvas, and provided the
alert with coordinates and size. I also named the
component myalert and gave it a body: "hi - initial
text."

I also wrote a method called showAlert to show the
dialog. This method has an argument named text. The
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(). When
this 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: