In der letzten Übung dieses Kapitels, werden wir die restlichen Buttons im buttonsArea Gadget programmieren: Prev Note, Next Note, Clear To-Do Item, und Clear To-Do List.

Da diese Buttons die Hauptdaten in der Anwendung manipulieren, werden die buttonsArea Funktionen Funktionen, die im Parent Objekt (die ToDoList) definiert sind, aufrufen, wo der items Array gespeichert ist.

Um die Übung abzuschließen, gehen wir folgender maßen vor:

Schritt 1: Hinzufügen von JavaScript Funktionen zum ToDoList Gadget

Zuerst müssen wir JavaScript Funktionen zum ToDoList Gadget hinzufügen, um den vorigen oder nächsten Eintrag im items Array anzuzeigen. Zusätzlich müssen wir Funktionen definieren, um einen oder alle Einträge aus dem items Array zu löschen.

Wir öffnen die ToDoList.js Datei und fügen folgende Funktionen hinzu:

// Navigationsfunktionen
component.prototype.onPreviousItem = function ()
{
  shell.print("ToDoList::onPreviousItem");
  this.displayItem(this.currentItem - 1);
}

component.prototype.onNextItem = function ()
{
  shell.print("ToDoList::onNextItem");
  this.displayItem(this.currentItem + 1);
}

// Entfernen Funktionen
component.prototype.onClearItem = function ()
{
  shell.print("ToDoList::onClearItem");

  // Einblenden eines Bestätigungsdialogs
  var confirmed = this.scene.confirm
     ("Are you sure you want to remove the item?", "Remove this item?");
  if (confirmed.results)
  {
    // Löschen des aktuellen Eintrags
    this.deleteItem(this.currentItem);
    this.displayCurrentItem();
  }
}

component.prototype.onClearAllItems = function ()
{
  shell.print("ToDoList::onClearAllItems");

  // Einblenden eines Bestätigungsdialogs
  var confirmed = this.scene.confirm
     ("Are you sure you want to remove all the items?", "Remove ALL items?");
  if (confirmed.results)
  {
    // Löschen aller Einträge
    while (this.items.length > 0)
    {
      this.deleteItem(0);
    }
    this.displayCurrentItem();
  }
}

component.prototype.deleteItem = function (index)
{
  if (this.items == null || this.items[index] == null) { return; }

  this.items.splice(index, 1);
}

Und so funktioniert es:

Die onPreviousItem Funktion ruft die displayItem Funktion auf, und übergibt den Index des vorigen Eintrags im items Array an die displayItem Funktion.

Die onNextItem Funktion ruft die displayItem Funktion auf, und übergibt den Index des nächsten Eintrags im items Array an die displayItem Funktion.

Die onClearItem Funktion fragt den Benutzer um Bestätigung, dass er oder sie den Eintrag löschen möchte. Wenn der Benutzer Ja auswählt wird die deleteItem Funktion aufgerufen, und der Index des aktuellen Eintrags im items Array an die deleteItem Funktion übergeben. Dann wird die displayCurrentItem Funktion aufgerufen.

Die onClearAllItems Funktion fragt den Benutzer um Bestätigung, dass er oder sie alle Einträge löschen möchte. Wenn der Benutzer bestätigt durchläuft di Funktion alle Einträge im items Array, und ruft die deleteItem Funktion auf, um den aktuellen Eintrag in jeder Wiederholung zu löschen. Nach abschließen des Vorgangs wird die displayCurrentItem Funktion aufgerufen.

Die deleteItem Funktion überprüft zunachst den Wert der ihr übergeben wurde. Falls der Index null ist, oder falls ein Eintrag im items Array für den festgelegten Index Wert nicht existiert, wird die Funktion beendet ohne etwas zu tun. Andernfalls, wenn der Index nicht null ist und der Eintrag der duch den Index festgelegt wurde im items Array existiert, wird die splice Methode aufgerufen, um den Eintrag zu löschen.

Schritt 2: Hinzufügen von JavaScript Funktionen zum buttonsArea Gadget

Als nächstes müssen wir JavaScript Funktionen zum buttonsArea Gadget hinzufügen um die betreffende Parent Objekt Funktion aufzurufen, wenn ein Button geklickt wird.

Wir öffnen die buttonsAreaGadgets.js Datei und fügen folgenden Code hinzu:

// Navigationsbefehle
component.prototype.onPreviousItem = function()
{
  this.parent.onPreviousItem();
}

component.prototype.onNextItem = function()
{
  this.parent.onNextItem();
}

// Entferne Eintrag oder Einträge aus der To-Do List
component.prototype.onClearItem = function()
{
  this.parent.onClearItem();
}

component.prototype.onClearAllItems = function()
{
  this.parent.onClearAllItems();
}

Schritt 3: Zuweisen der JavaScript Funktionen zum buttonsArea Gadget

Um Funktionen aufzurufen, wenn Buttons geklickt werden, bearbeiten wir die buttonsAreaGadgets.box Datei, wie unten fett formatiert gezeigt:

<gadget id="buttonsArea" language="jscript"
    code="buttonsAreaGadgets.js" >
  <parts>
    <box:hbox id="prevNextButtons">
        <box:textButton  on:command="gadget:onPreviousItem();" 
            label="&#171; Prev Note" tooltip="Go to your previous Note."/>
        <box:hbox s:flex="1"/>
        <box:textButton  on:command="gadget:onNextItem();" 
            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  on:command="gadget:onClearItem();" s:flex="1"
        icon="../../theme/images/iconClearItem.png"
        label="Clear To-Do Item" tooltip="Remove this Note from your list."/>
      <box:button  on:command="gadget:onClearAllItems();" 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>

Schritt 4: Testen der Anwendung

Nach dem Abschließen der vorigen drei Schritte, sollten wir die "To-Do List" Anwendung auszuführen können und: