In this exercise, you'll use the timer object (which is made available through the basics service) to refresh the date/time value that displays in the titleArea gadget at regular intervals.
To complete the exercise, follow these steps:
Step 1: Modifying the titleArea gadget's onInitialized function - In the titleArea gadget's onInitialized function, instantiate the basics.timer object and then invoke the setForOffset method to call a new function (onUpdateClock) in 101 milliseconds. Create the onUpdateClock function; this function resets the value stored in the dateTime part and then invokes the timer object's setForOffset method to call itself again in 101 milliseconds.
Step 2: Testing your application - Run the application and verify that the date and time value in the titleArea gadget refreshes at intervals of 101 milliseconds.
Step 1: Modifying the titleArea gadget's onInitialized function
To refresh the time in the titleArea gadget, you need to modify the titleAreaGadgets.js file by:
In the onInitialize function, instantiating the basics.timer and, assuming it is available, invoking the setForOffset method to call an onUpdateClock function in 101 milliseconds.
Creating the onUpdateClock function; it will reset the dateTime value with the current date and time and then invoke the timer's setForOffset method to call itself in 101 milliseconds. (This creates a loop where the onUpdateClock function is regularly invoked at intervals of 101 milliseconds.)
The code shown below in bold demonstrates how to do this:
// The component function is called when the gadget is first instantiated
function component (_gadget) { }
// Declare properties for use in the gadget
component.prototype.dateTime = null;
// The onInitialized function is called when the gadget is created,
// but not yet presented (i.e. it's called before it's visible)
component.prototype.onInitialized = function()
{
// Get each part within the gadget based on its id attribute
this.dateTime = this._gadget.getPartById("dateTime");
// Set the value attribute of the dateTime box to the value getDate() returns
this.dateTime.setAttribute("value", getDate());
try
{
// Initialize the basics.timer
this.timer = shell.serviceManager.basics.timer;
// Set the timer to fire after waiting 101 milliseconds; when it fires,
// the onUpdateClock function is invoked
this.timer.setForOffset(this, "onUpdateClock", 101);
}
catch (e)
{
// If the timer service isn't available, set the dateTime once using getDate
this.dateTime.setAttribute("value", getDate());
}
}
component.prototype.onUpdateClock = function ()
{
// Set the value attribute of the dateTime box to the value getDate() returns
this.dateTime.setAttribute("value", getDate());
// Reset the timer to fire after waiting 101 milliseconds; when it fires,
// the onUpdateClock function is called again.
this.timer.setForOffset(this, "onUpdateClock", 101);
}
This is how it works:
The onInitialized function begins with a try block that initializes the timer object and sets it to fire in 101 milliseconds, at which point the onUpdateClock function is called. If the try statement fails (for example, when the basics service is not available), the value of the dateTime part is set once using the getDate function.
When you cannot guarantee that a method or property will be available, you should always encapsulate your code in a try…catch statement, thereby ensuring that errors and exceptions are handled.
The onUpdateClock function sets the value of the dateTime part using the getDate function. It then resets the timer to fire after waiting 101 milliseconds, at which point the onUpdateClock function is called again, creating a loop.
When developing your own Boxely applications, you may find you need to destroy a timer object in your code. This can be accomplished using the timer.cancel() function.
Step 2: Testing your application
Now, when you run your application, the dateTime part of the titleArea gadget refreshes every 101 milliseconds. This displays as the seconds of the time ticking.
Falls eine Boxely Anwendung nicht ordningsgemäß funktioniert, kann die Problembehandlungsreferenz für allgemeine Debugging und Problembehandlungstipps zu rate gezogen werden.