Jetzt, da wir in die nötigen Schritte des Programmierens eines Gadgets eingeführt wurden, werden wir es mit der "To-Do List" Anwendung ausprobieren.

Der erste Bereich, der Programmierung erfordert, ist das titleArea Gadget. Bis zu diesem Zeitpunkt wurden Datum und Uhrzeit im titleArea Gadget als statischer Wert, "00/00/00 12:00:00 PM", angezeigt. In dieser Übung werden wir lernen, das Gadget zu programmieren, um die aktuelle Systemzeit auszulesen und anzuzeigen, wie im rechten Bild gezeigt.

Wir führen folgende Schritte aus, um die Übung abzuschließen:

Schritt 1: Erstellen allgemeiner JavaScript Funktionen

Die erste Funktion, die in dieser Übung benötigt wird, ist die getDate Funktion, eine Funktion, die die aktuelle Systemzeit ausliest und formatiert. Da diese Funktion möglicherweise für mehrere Gadgets nützlich ist, sollte sie sich in einer Datei mit globalem Einfluss befinden.

Wir können die getDate Funktion selbst schreiben, indem wir eine JavaScript Funktion schreiben, die einen String zurückgibt, der die die aktuelle Systemzeit repräsentiert. Um Zeit zu sparen können wir die getDate Funktion der common.js Übungsdatei verwenden, die sich im ToDoList/common Verzeichnis befindet.

Schritt 2: Erstellen von JavaScript Funktionen für das titleArea Gadget

Als nächstes müssen wir JavaScript Funktionen erstellen, die das titleArea Gadget repräsentieren und die dateTime Anzeige basierend auf der Systemzeit anzeigt. Diese Funktionen gehören nur zum titleArea Gadget, sie müssen deshalb in einer einzelnen Datei namens titleAreaGadgets.js untergebracht sein.

In einem Texteditor erstellen wir eine neue Datei namens titleAreaGadgets.js fügen folgenden Code ein. Es ist sicherzustellen, die Datei im gleichen Verzeichnis (/samples/TodoList) zu speichern, in dem sich die anderen "To-Do List" Anwendungsdateien befinden.

// Die component Funktion wird aufgerufen,
// wenn das Gadget das erste mal instantiiert wird
function component (_gadget) { }

// Deklaieren der Eigenschaften für die Verwendung im Gadget
component.prototype.dateTime = null;

// Die onInitialized Funktion wird aufgerufen, wenn das Gadget erstellt wird,
// aber noch nicht dargestellt wird (d.h. es wird aufgerufen bevor es sichtbar ist)
component.prototype.onInitialized = function()
{
  // Jeden Teil im Gadget abfragen, basierend auf seinem ID Attribut
  this.dateTime = this._gadget.getPartById("dateTime");

  // Festlegen des value Attributs der dateTime Box auf den Wert,
  // den getDate() zurückgibt
  this.dateTime.setAttribute("value", getDate());
}

Und so funktioniert der obige Code:

Die component Funktion repräsentiert das titleArea Gadget. Das OCP Toolkit erstellt, eine Instanz des component Objekts, wenn das Gadget das erste mal instantiiert wird.

Die onInitialized Funktion verwendet die getPartById Methode um den Part des Gadgets zu erhalten, der als "dateTime" identifiziert ist. Sie verwendet dann die setAttribute Methode um den Wert des dateTime Parts mit dem Ausgabewert der getDate Funktion gleichzusetzen. (Die getDate Funktion befindet sich in der common.js Datei. Im nächsten Schritt werden wir lernen, diese Funktion dem Gadget verfügbar zu machen, indem wir die Datei in dessen Definition unterbringen.)

Schritt 3: Zuweisen von JavaScript Funktionen zum titleArea Gadget

Nun werden wir die titleAreaGadgets.box Datei bearbeiten, um:

Der fett formatierte Code unten zeigt, wie das zu tun ist.

<gadget id="titleArea"  language="jscript"
    code="titleAreaGadgets.js" >
   <script id="common" language="jscript"
      href="../../common/common.js" />
  <parts>
    <box:label id="title" value="My To Do List"/>
    <box:label id="dateTime" value="Date/Time: 00/00/0000 12:00:00 PM" />
  </parts> 
  <behavior>
    <reaction event="initialized" action="gadget:onInitialized();" />
  </behavior>
</gadget>

Schritt 4: Testen der Anwendung

Jetzt, da wir die benötigten Javascript Dateien erstellt haben und die Definition des titleArea Gadgets modifiziert haben, um die zugehörige Funktion aufzurufen, wenn es das erste mal initialisiert wird, können wir die "To-Do List" Anwendung testen.

Die aktuelle Systemzeit dateTime Part des titleArea Gadgets angezeigt werden, wie im Bild unten gezeigt.