Using Timer

A timer is an object that can be set to invoke a method after the specified period of time elapses. For example, you can display a message ten minutes after user inactivity. The LzTimer class encapsulate the behavior of all timer objects in OpenLaszlo.

Table 7.2 shows the attribute of the LzTimer class.

Table 7.2. The attribute of the LzTimer class
NameUsageTypeDefaultAccessibility
timerListJS onlyarray of LzTimer read-only
 Description. The array of active timers.

The following are the methods defined in the LzTimer class.

addTimer(delegate, timeElapse)

Adds a timer that will invoked the specified delegate after the specified number of milliseconds elapses.

removeTimer(delegate)

Removes the timer that is associated with the delegate. If more than one timer is linked to the specified delegate, the first timer will be removed.

resetTimer(delegate, time)

Resets the timer for the specified delegate to the new amount of time.

For example, the code in Listing 7.11 displays an Alert box ten seconds after loading.

Listing 7.11. Using LzTimer
<canvas>
    <alert id="alertBox">Your session will expire in 10
       minutes</alert>
    <method event="oninit">
        var delegate = new LzDelegate(this, "showAlertBox");
        LzTimer.addTimer(delegate, 3000);
    </method>
    <method name="showAlertBox">
        alertBox.open();
    </method>
</canvas>

To test this application, direct your browser here:

http://localhost:8080/lps-4.0.x/app07/animationTest11.lzx

Figure 7.6 shows the generated result.

Figure 7.6. Using LzTimer


As another example, consider the application in Listing 7.12. It is a digital clock that relies on an LzTimer object.

Listing 7.12. Digital clock
<canvas fontsize="48">
    <text id="display" width="250" bgcolor="0x99DDEE"/>
    <method event="oninit">
        this.myDelegate = new LzDelegate (this, "updateClock");
        LzTimer.addTimer( myDelegate, 1000);
    </method>
    <method name="updateClock">
        LzTimer.addTimer(this.myDelegate, 1000);
        var now = new Date();
        var hour = now.getHours();
        var minute = format(now.getMinutes());
        var second = format(now.getSeconds());
        display.setText(hour + ":" + minute + ":" + second);
    </method>

    <method name="format" args="n">
    <![CDATA[
        if (n < 10) {
            return "0" + n;
        } else {
            return n;
        }
    ]]>
    </method>
</canvas>

To compile and run this program, use this URL:

http://localhost:8080/lps-4.0.x/app07/animationTest12.lzx

Figure 7.7 shows the digital clock.

Figure 7.7. The digital clock


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

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