top trim

"To-Do List" Übung 6.1: Den basics Dienst benutzen

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

To refresh the time in the titleArea gadget, you need to modify the titleAreaGadgets.js file by:

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.

Wichtig

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.

Wichtig

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.

Wichtig

Falls eine Boxely Anwendung nicht ordningsgemäß funktioniert, kann die Problembehandlungsreferenz für allgemeine Debugging und Problembehandlungstipps zu rate gezogen werden.

bottom trim