The class Tag

In OpenLaszlo, you create a class by using the class tag. By default, any class you define implicitly extends the LzView class.

Note

You can write your class in the same LZX file that contains code that will use the new class. In this case, you can write your class tag directly below the canvas tag. Alternatively, you can isolate your new class in a separate file so that you can distribute it easily and the class can be used by different applications. In the latter cases, the class tag should be enclosed by the library tag.


For example, the LZX application in Listing 12.1 defines a new class called square. A square is like a view but by default its width is always equal to its height.

Listing 12.1. The square class
<canvas width="500" height="80">
    <class name="square" width="80" height="${this.width}">
    </class>

    <square bgcolor="#336699"/>
</canvas>

In Listing 12.1 you defined a class by using the class tag:

<class name="square" width="80" height="${this.width}">
</class>

Because you did not specify the parent class of your custom class, it will inherit the LzView class. Needless to say, the square class inherits all the attributes, methods, and events from the LzView class. To instantiate the class, you use the square tag:

<square bgcolor="#336699"/>

With the square class, you override the height attribute so that it always defaults to the square’s width.

Note that you must not define the id attribute in the class tag when declaring a custom class.

To test the application in Listing 12.1, use this URL.

http://localhost:8080/lps-4.0.x/app12/customClassTest1.lzx

Figure 12.2 shows the result.

Figure 12.2. An instance of the square class


If you do not want your new class to extend LzView, you can use the extends attribute in your class tag to extend a different class. For example, the following class extends drawview.

<class name="roundwindow" extends="drawview">

You can only extend one class. However, your custom class can in turn be the parent class of other classes.

As another example, the borderedview class in Listing 12.2 adds a new behavior to drawview. As the class name implies, instances of borderedview have borders. Note that the borderedview class is written in a separate class. This way, it can be used by other applications easily. The class tag is located within the library tag and is saved as borderedview.lzx file.

Listing 12.2. The borderedview class
<library>
    <class name="borderedview" extends="drawview">
        <method name="init">
            super.init();
            this.rect(0, 0, this.width, this.height);
            this.stroke();
        </method>
    </class>
</library>

The code in Listing 12.3 shows how you can use the borderedview class.

Listing 12.3. Using borderedview
<canvas height="200">
    <include href="borderedview.lzx"/>
    <borderedview bgcolor="silver" x="40" y="40" width="50"
            height="50"/>
</canvas>

To compile the code in Listing 12.3, direct your browser to the following URL.

http://localhost:8080/lps-4.0.x/app12/borderedviewTest1.lzx

Figure 12.3 shows the result.

Figure 12.3. Using borderedview

[View full size image]

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset