OpenLaszlo Event Programming

Event programming means you can respond to an event raised by an object. To do so, you wire the event with an event handler that contains code to be executed when the object raises the event. A handler is basically a function or a method. If you are a Java programmer, this wiring is the same as registering an event listener in the Java programming language.

There are several ways to wire an event with an event handler.

  1. By assigning the name of the event handler to the event name in the tag declaration of the object. The event handler can be a method nested inside the object’s tag declaration or a JavaScript function. For example, the following tag creates a Window object whose onx event is wired to the event handler myHandler.

    <window name="win" onx="myHandler">

  2. By writing a method nested in the tag declaration of an object, and then assign the event handler to the event attribute of the method. For example, the following snippet wires a button’s onclick event to the event handler within its tags.

    <button>
    <handler name="onclick">
        // code to be executed when the button is clicked here
    </handler>
</button>

For example, a button emits the onclick event when the user clicks the button. To wire this event to a handler, you specify the name of the method that is the event handler for the event. Listing 5.2 shows you how.

Listing 5.2. Wiring an event with an event handler
<canvas>
    <button>Click here
        <handler name="onclick">
            setAttribute("text", "Hello");
            setAttribute('width', 200);
        </handler>
    </button>
</canvas>

The button’s onclick event is wired to handler defined within the button tag’s body. There are two lines of code that will be executed when the button is clicked:

setAttribute("text", "Hello");
setAttribute('width', 200);

The first line changes the button’s text to Hello. The second one changes the button’s width to 200 pixels. Note that the setAttribute method is defined in the LzNode class:

setAttribute(name, value)

You use double quotes or single quotes around an attribute name.

Because the handler tag is written within the button tag, the setAttribute method is called on the Button object.

You can compile the code in Listing 5.2 by using this URL:

http://localhost:8080/lps-4.0.x/app05/onclickTest1.lzx

Figure 5.2 shows a button that will respond to a click.

Figure 5.2. Handling the click event of a button


Alternatively, you can embed the method body in the tag that defines the object, as shown in Listing 5.3.

Listing 5.3. Embedding code in the tag
<canvas>
    <button onclick="setAttribute('text', 'Hello'),
            setAttribute('width', 200);">
        Click here
    </button>
</canvas>

However, this is only suitable if the event handler consists of only one statement. If the handler is longer than that, This syntax is not recommended as it reduces code readability. If you must do this, make sure you do not use double quotes in your event handler because the occurrence of a double quote will indicate to the compiler that it is the end of your event handler.

Passing Arguments to a Handler

A method can also be used as an event handler, and using <method> instead of <handler> allows you to pass arguments from the object that raised the event. For example, the code in Listing 5.4 shows how to pass two arguments to the handler that responds to the onclick event.

Listing 5.4. Passing arguments to a handler
<canvas>
    <button onclick="myHandler('Welcome', 300)">Click here
        <method name="myHandler" args="text, componentWidth">
            setAttribute("text", text);
            setAttribute('width', componentWidth);
        </method>
    </button>
</canvas>

You can test the code in Listing 5.4 by using this URL:

http://localhost:8080/lps-4.0.x/app05/argumentPassingTest1.lzx

Functions as Event Handlers

A method is associated with a class. Therefore, it is normally only used with the instance of the class. If you want to have a global event handler that can be called from multiple objects, you cannot use a method. Instead, you use JavaScript functions.

For example, the code in Listing 5.5 defines the myHandler function that can be called from any point in the program.

Listing 5.5. Using functions as event handlers
<canvas>
    <button id="button1" onclick="myHandler()">
        Click here
    </button>
    <script>
    <![CDATA[
        function myHandler() {
            button1.setAttribute("text", "Hello");
            button1.setAttribute('width', 200);
        }
    ]]>
    </script>
</canvas>

Use this URL to compile and run the code in Listing 5.5.

http://localhost:8080/lps-4.0.x/app05/functionTest1.lzx

Passing an Object’s Reference

In OpenLaszlo, you can pass a value as well as an object reference to a method. The example in Listing 5.6 shows how you can pass an object to a function.

Listing 5.6. Passing an object reference
<canvas>
    <simplelayout axis="x"/>
    <button id="button1" onclick="myHandler(this)">
        Click here
    </button>
    <button id="button2" onclick="myHandler(this)">
        Click here
    </button>
    <script>
    <![CDATA[
        function myHandler(b) {
            b.setAttribute("text", "Hello");
            b.setAttribute('width', 200);
        }
    ]]>
    </script>
</canvas>

There are two buttons in the LZX application in Listing 5.6, each of which is wired to the myHandler function. Each onclick calls myHandler by passing the button (by using the this keyword). This in effect causes a reference to the button to be passed to myHandler, as b. You can then use b to access the clicked button. Whichever button is clicked, its attributes will be changed.

You can test this application by using this URL:

http://localhost:8080/lps-4.0.x/app05/referencePassingTest1.lzx

Figure 5.3 shows the generated result.

Figure 5.3. Passing an object reference to an event handler


Handling Mouse Events

So far you’ve seen examples that show how to handle the click event. There are dozens of other events that you might be interested in. One of them is the onmouseover event. Listing 5.7 shows such an example. It features a view that moves when the user moves the mouse over it.

Listing 5.7. Handling onmouseover
<canvas>
    <view width="280" bgcolor="silver">
        <view bgcolor="0x123456" height="50" width="50">
            <handler name="onmouseover">
                var newX = parent.getMouse("x") + 2;
                // if the newX would cause the view to be clipped
                // shift the moving view to left
                if ((newX + this.width) > parent.width) {
                    // shift to left
                    newX = parent.getMouse("x") - 2;
                }
                this.setX(newX);
            </handler>
        </view>
    </view>
</canvas>

As you can see, the second view tag nests a handler tag with its name attribute assigned “onmouseover”. This makes the method get executed every time the user hovers over the view. Note also that the getMouse method returns the location of either the x or y position of the mouse pointer.

You can test this application by using this URL:

http://localhost:8080/lps-4.0.x/app05/onmouseoverTest1.lzx

Figure 5.4 shows the application.

Figure 5.4. Handling onmouseover


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

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