Creating an Object

There are two ways to create an object in LZX, by using the tag associated with a class and by using the new keyword in a JavaScript script. For example, every application must have exactly one canvas, to which all other components are added. To create a canvas, you use the canvas tag like this.

<canvas>

</canvas>

You can nest tags to create an object within an object. For example, the following code creates a canvas and then a view component inside the canvas.

<canvas>
    <view bgcolor="0x00ffdd">
    </view>
</canvas>

In this case, the view will be a child of the canvas.

You can use the script tag to write JavaScript code. Note that the script tag can only be nested within the canvas tag. It is a compile error to write it as a child tag of other tags. For example, Listing 1.2 shows an LZX application that uses a script to change the background color of a view from lime to red.

Listing 1.2. Using scripts

<canvas width="400">
    <view name="v1" width="150" height="100" bgcolor="lime"/>
    <script>
        canvas.v1.setAttribute("bgcolor", 0xFF0000);
    </script>
</canvas>

You can compile and run this program by using this URL:

http://localhost:8080/lps-4.0.x/app01/scriptTest.lzx

To create an object programmatically, you can use the new keyword with a class’s constructor:

var obj = new LzView();

For example, the code in Listing 1.3 shows how to create a view using the new keyword.

Listing 1.3. Using the new keyword to create an object

<canvas width="400">
    <script>
        var v1 = new LzView(canvas, {width: 200, height: 50,
                bgcolor: green, name: "myView"});
        myView.setX(100);
    </script>
</canvas>

To test this program, use this URL:

http://localhost:8080/lps-4.0.x/app01/newKeywordTest.lzx

Because an LZX source must be a valid XML document, you must encode XML special characters, such as < and >, that occur in your scripts. An easier way is to enclose scripts with <![CDATA[ and ]]>. For example, Listing 1.4 is a rewrite of the code in Listing 1.3.

Listing 1.4. Securing scripts with a special block

<canvas width="400">
    <script>
    <![CDATA[
        var v1 = new LzView(canvas, {width: 200, height: 50,
                bgcolor: green, name: "myView"});
        myView.setX(100);
    ]]>
    </script>
</canvas>

As you read through this chapter and the next, you will find more about programming with LZX.