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