ONJava.com -- The Independent Source for Enterprise Java
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Exploring Laszlo Classes, Attributes, and Events

by Satya Komatineni
06/15/2005

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.

The Laszlo 'Developer Pad'
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.


<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 <canvas> tag. This code defines a class named test and two attributes, a1 and b1.

Instantiating a Class

With the above class definition in place, the following code shows how to instantiate the defined class test:


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


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


<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 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:


<button x="500" y="310" 
        onclick="canvas.respondToMethod()">
Show Alert
</button>

You can see the result in Figure 2.

The Laszlo 'developer pad' with an alert
Figure 2. The Laszlo "developer pad" with an alert window

Pages: 1, 2

Next Pagearrow