In der "To-Do List" Anwendung, stellt das buttonsArea Gadget dem Benutzer alle Navigationsoptionen zur Verfügung:

Fangen wir mit der ersten Option an: Einen neuen To-Do List Eintrag erstellen. Das Benutzererlebnis sollte zwei Phasen enthalten:

Um diese Funktionalität zu implementieren, folgen wir diesen Schritten:

Schritt 1: Erstellen von JavaScript Funktionen für das ToDoList Gadget

Zuerst müssen wir eine JavaScript Datei erstellen, die das ToDoList Gadget repräsentiert und die "Create New Item" Dialog Box öffnet.

In einem Texteditor, erstellen wir eine neue Datei namens ToDoList.js und fügen folgenden Code hinzu. 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.titleArea = null;
component.prototype.noteArea = null;
component.prototype.buttonsArea = null;

component.prototype.items = Array();
component.prototype.currentItem = -1;

// Die onInitialized Funktion wird aufgerufen wenn ein Gadget erstellt
// wird, aber noch nicht dargestellt wird (d.h. sichtbar ist)
component.prototype.onInitialized = function ()
{
  // auslesen jedes Parts des Gadgets mit deren zugehörigen ID Attributen
  this.titleArea = this._gadget.getPartById("titleArea");
  this.noteArea = this._gadget.getPartById("noteArea");
  this.buttonsArea = this._gadget.getPartById("buttonsArea");

  // Wir haben nu Zugriff aud die individuellen Gadgets und können ihre
  // Funktionen verwenden und auf ihre Eigenschaften zugreifen
}

// Die onCreateItem Funktion wird aufgerufen, wenn der "create to-do item"
// Button gedrückt wird.
component.prototype.onCreateItem = function ()
{
  shell.print("ToDoList::onCreateItem");

  var paramDictionary = shell.serviceManager.basics.dictionary;
  paramDictionary.setValueForKey(this._gadget,"parentGadget");

  // öffnen des eigenen Dialogs
  shell.openSceneAndWait("../../common/CreateNewItemDialog.box",
                          this.scene, "CreateNewItemDialog", paramDictionary);
}

component.prototype.insertItem = function (item)
{
  this.items.push(item);
  this.currentItem = this.items.length - 1;
}

Der obige Code bewirkt folgendes:

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

Die onInitialized Funktion liest die Part innerhalb des ToDoList Gadgets aus, und speichert sie in Variablen für die spätere Verwendung.

Die onCreateItem Funktion definiert zunächst das paramDictionary Objekt, ein Basisverzeichnis, das Schlüssel-Wert Paare beinhalten kann. In unserem Fall, ist "parentGadget" der Schlüssel und der WErt eine Referenz zur Instanz des ToDoList Gadgets. Wir rufen dann die openSceneAndWait Funktion auf, um das Dialogfenster zu öffnen, das durch die CreateNewItemDialog.box Datei definiert ist, und übergeben das paramDictionary Objekt an das Dialogfenster. Wenn des CreateNewItemDialog Gadget's onInitialized aufgerufen wird, verwendet es die setCallback Funktion um eine Referenz zum ToDoList JavaScript Objekt zu speichern, sodass seine insertItem Funktion aufgerufen werden kann, wenn ein neuer Eintrag erstellt wurde. Diese Referenz wurde vom Basisverzeichnis der Szene erhalten, die wir durch die openSceneAndWait Funktion übergeben haben.

Die insertItem Funktion nimmt einen Parameter, item, welchen sie zum items Array hinzufügt. Sie setzt dann die Position der currentItem Eigenschaft mit der Position des neuen Eintrags im Array gleich.

Schritt 2: Zuweisen von JavaScript Funktionen zum ToDoList Gadget

Als nächstes müssen wir die ToDoList.box Datei bearbeiten um:

Der Code, unten fett dargestellt, zeigt wie dies zu tun ist.

<gadget id="ToDoList"  language="jscript"
    code="ToDoList.js" >
  <parts>
    <box:titleArea id="titleArea"/>
    <box:noteArea id="noteArea"/>
    <box:buttonsArea id="buttonsArea"/>
  </parts> 
  <behavior>
    <reaction event="initialized" action="gadget:onInitialized();" />
  </behavior>
</gadget>

Schritt 3: Erstellen des "Create New Item" Dialogfensters

Das Create New Item Dialogfenster enthält die Felder und Buttons, die im Bild unten gezeigt sind:

Um ein neues Fenster in unserer Anwendung zu erstellen, müssen wir eine neue .box Datei erstellen, die das Fenster beschreibt, sowie irgendwelche JavaScript Funktionen, die nötig sind um sein Layout zu konstruieren und unterstützen.

Um Zeit zu sparen, wurde die .box Datei, die das "Create New Item" Dialogfenster beschreibt (createNewItemDialog.box) und seine zugehörige JavaScript Datei (createNewItemDialog.js) vorbereitet, und befinden sich im ToDoList/common Verzeichnis.

Einige Funktionen in der createNewItemDialog.js, die erwähnenswert wären, sind:

Schritt 4: Testen des "Create New Item" Interfaces

Sobald das "Create New Item" Interface heruntergeladen wurde, können wir es testen, indem wir die CreateNewItemDialog.box Datei ausführen.

Wir sollten ein Fenster sehen, das etwa so aussieht:

Das "Create New Item" Interface testen:

Schritt 5: Erstellen von JavaScript Funktionen für das buttonsArea Gadget

Jetzt müssen wir eine JavaScript Datei erstellen, die das buttonsArea Gadget repräsentiert und die "Create To-Do Item" Funktion instantiiert, durch das Aufrufen der betreffenden Parent Objekt Funktion. (Das Parent Objekt ist die ToDoList.)

In einem Texteditor, erstellen wir eine neue Datei namens buttonsAreaGadgets.js fügen folgenden Code hinzu. Es ist sicherzustellen, die Datei im gleichen Verzeichnis 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 zur Verwendung im Gadget
component.prototype.parent = null;

// Die onInitialized Funktion wird aufgerufen, wenn
// das Gadget erstellt wird, aber noch nicht
// dargestellt wird (d.h. sichtbar ist)
component.prototype.onInitialized = function()
{
  component.prototype.parent = this._gadget.gadgetParent;
}

/*
 * Button Befehle
 * Wir übergeben diese Befehle an das Parent Gadget.
 * Wir nehmen an, das Parent Gadget weiss was zu tun ist.
 */
// create new item Befehl
component.prototype.onCreateItem = function()
{
  this.parent.onCreateItem();
}

Und so funktioniert es:

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

Die onInitialized Funktion verwendet die gadgetParent Methode um das Parent Objekt zu erhalten, und es in der parent Eigenschaft zu speichern. (Wie bereits erwähnt, das Parent Objekt ist die ToDoList.)

Die onCreateItem Funktion ruft die onCreateItem Methode auf, die für das Parent Objekt definiert ist. (Wir haben die onCreateItem Funktion des Parent Objekts in Schritt 1 erstellt.)

Schritt 6: Zuweisen von JavaScript Funktionen zum buttonsArea Gadget

Als nächstes bearbeiten wir die buttonsAreaGadgets.box Datei:

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

<library xmlns="http://www.aol.com/boxely/resource.xsd"
  xmlns:box="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"  
  xmlns:on="http://www.aol.com/boxely/reaction.xsd" >

  <gadget id="buttonsArea"  language="jscript"
      code="buttonsAreaGadgets.js" >
    <parts>
      <box:hbox id="prevNextButtons">
          <box:textButton label="&#171; Prev Note"
              tooltip="Go to your previous Note."/>
          <box:hbox s:flex="1"/>
          <box:textButton label="Next Note &#187;"
              tooltip="Go to your next Note."/>

      </box:hbox>
      <box:button  on:command="gadget:onCreateItem();" s:flex="1"
          defaultButton="true" icon="../../theme/images/iconWrite.png"
          label="Create To-Do Item" tooltip="Create new To-Do Note." />
      <box:hbox>
        <box:button s:flex="1"
          icon="../../theme/images/iconClearItem.png"
          label="Clear To-Do Item" tooltip="Remove this Note from your list."/>
        <box:button s:flex="1"
          icon="../../theme/images/iconClearList.png"
          label="Clear To-Do List" tooltip="Remove all Notes from your list."/>
      </box:hbox>
    </parts> 
    <behavior>
      <reaction event="initialized" action="gadget:onInitialized();" />
    </behavior>
  </gadget>
  <style tag="buttonsArea" height="88" orient="vertical" >
    <part name="prevNextButtons" flex="1" margin="0 0 12 0"/>
  </style>
</library>

Schritt 7: Testen der Anwendung

Wenn wir jetzt die "To-Do List" Anwendung ausführen, sollte es und möglich sein, den "Create New Item" Button auszuwählen und danach Informationen über den neuen Eintrag einzugeben, wie in den Bildern hier gezeigt:

Während das ein guter Anfang ist, so ist dennoch etwas mehr zu tun. Wir fahren mit dem nächsten Teil fort, um die noteArea und ToDoList Gadgets so zu programmieren, dass sie Einträge im items Bereich anzeigen.