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.