top trim

"To-Do List" Übung 4.1: Programmieren des titleArea Gadget

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.

Tabelle 4.4. Ein titleArea Gadget mit und ohne Programmierung

titleArea Gadget (ohne Programmierung)

titleArea Gadget (mit Programmierung)


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.

Wichtig

Für Informationen, wie die Übungsdateien herunterzuladen sind, kann der Downloaden erforderlicher Übungsdateien Teil dieser Anleitung gelesen werden.

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:

Wichtig

Der initialized Event tritt auf, wenn ein Gadget das erste mal in einer .box Datei mit XML instantiiert wird. Wenn ein Gadget durch JavaScript mit der createBox Funktion instantiiert wird, wird der initialized Event nicht ausgelöst. Stattdessen wird der boxCreated Event ausgelöst. Das bedeutet, falls es nötig ist Code hinzuzufügen, um ein Gadget mit JavaScript zu initialisieren, muss auf den boxCreated Event reagiert werden.

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>

Wichtig

Es ist sicherzustellen, dass die Werte der script und href Attribute auf die richtige Position der titleAreaGadgets.js und common.js Dateien zeigen.

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.

Wichtig

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

bottom trim