Im vorigen Teil haben wir gelernt, eine Benutzerumgebung zu erstellen, durch das Hinzufügen von vertikalen, horizontalen und Textboxen zum window Element. Auch wenn technisch nichts an dieser Methode falsch ist, ist es dennoch nicht die effizienteste Weise eine Boxely Anwendung zu erstellen. Stattdessen, falls geplant ist, den Quelltext weiterzuverwenden, sollte man Gadgets und die Boxely Library verwenden.
Ein gadget ist eine Prototypbox, die ein oder mehrere Elemente enthält, die, als Ganzes, ein mehrfach verwendbares Object oder Steuerungselement wie ein Label, Eingabefeld , Button, Toolbar und weitere repräsentieren.
Die Boxely library ist ein Bereich oder eine Stelle, an der alle eigenen, benutzerdefinierte Gadgets, und andere wiederverwendbaren Elemente definiert sind.
Es gibt zwei Arten von Gadgets im Boxely UI Toolkit: eigene, benutzerdefinierte Gadgets, und Toolkit Gadgets. Diese Teil beschreibt das hinzufügen eigener, benutzerdefinierter Gadgets. Toolkit Gadgets werden in Kapitel 3: Toolkit Gadgets benutzen behandelt.
Bevor wir fortfahren, nehmen wir uns einen kleinen Moment, um einen Blick auf die Struktur einer .box Datei zu werfen.
Wenn eine Boxely Anwendung erstellt wird, ist es wichtig, dass alle XML Elemente in der Art und Weise eingefügt sind, wie in der Grafik unten gezeigt. Das bedeutet, die Library muss das erste Element innerhalb des Hauptfensterelements sein. Alle Instanzen an Objekten in der Anwendung, egal ob das Objekt ein Gadget, eine Box, oder irgendein anderes Element ist, müssen dem Library Element folgen.
Um ein benutzerdefiniertes Gadget zu verwenden, müssen wir das Gadget zunächst innerhalb des library Elements definieren.
Der folgende Code, unten fett dargestellt, zeigt auf, wie zwei benutzerdefinierte Gadgets, myGadget1 und myGadget2, innerhalb des Library Elements zu definieren sind:
<window...>
<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">
<gadget id="myGadget1">
<parts>
<box:text id="myText1" value="Some text" />
<box:text id="myText2" value="Some more text" />
</parts>
</gadget>
<gadget id="myGadget2">
<parts>
<box:text id="myText3" value="Some text" />
</parts>
</gadget>
</library>
</window>
So funktioniert der obige Code:
Das library Element definiert die Bibliotheken; in seinem Start-Tag muss der standard Namespace (xmlns), der Box Namespace (xmlns:box) und optional der s Namespace (xmlns:s) deklaiert werden, um sicherzustellen, dass der XML Code richtig formatiert ist. (Der s Namespace wir detailliert in Kapitel 2: Styles benutzen behandelt.)
Die gadget Elemente definieren neue, benutzerdefinierte Gadgets identifiziert als myGadget1 und myGadget2. Innerhalb jedes Gadget Elements dient das parts Element als Container für die Boxen, die das Gadget bilden. Es können beliebig viele Boxen innerhalb des parts Elements eingefügt werden, wenn das box: Präfix verwendet wird.
Sobald ein Gadget in der Library definiert wurde, kann es innerhalb des window Elements instanziiert werden, durch das deklaieren der Start- und End-Tags für das Gadget, wie unten fett dargestellt:
<window... >
<library... >
...
</library>
<myGadget1></myGadget1>
<myGadget2></myGadget2>
</window>
Falls mehrere Instanzen des gleichen Gadgets im gleichen Fenster erscheinen, ist das id Attribut zu verwenden, um jede Instanz zu identifizieren, wie in folgendem Code gezeigt:
<window... >
<library... >
...
</library>
<myGadget1 id="firstInstance"></myGadget1>
<myGadget1 id="secondInstance"></myGadget1>
<myGadget2 id="thirdInstance"></myGadget2>
</window>
Wenn ein Wert für das id Attribut bestimmt wird, ist sicherzustellen, dass der Wert im Projekt einzigartig ist. Enthält eine Anwendung zwei Instanzen mit der gleichen ID, könnte sie nicht wie erwartet dargestellt werden.
Gadgets sind aus verschiedenen Gründen vorteilhaft. Falls geplant ist, ein Objekt an mehreren Orten in einer Anwendung zu verwenden, erlaubt es ein Gadget, es einmal zu definieren, und es wie geplant erneut zu nutzen. Außerdem ist nur nötig, wenn die Definitionen geändert werden sollen, das Gadget zu ändern, um es für alle Instanzen zu übernehmen.
In dieser Übung werden wir gadgets zur "To-Do List" Anwendung, die wir im vorigen Teil erstellt haben, hinzufügen, indem wir die Boxen, die momentan im Window Element sind, ersetzen. Wir gehen folgendermaßen vor, um die Übung abzuschließen:
In einem Texteditor, öffnen wir die .box Datei, die unsere "To-Do List" Anwendung beschreibt, und fügen folgenden Code innerhalb des window Elements ein:
<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"> </library>
Innerhalb des library Elements, fügen wir folgende Gadgets ein. Wichtig hierbei ist, Boxen, die innerhalb eines Gadgets definiert werden, müssen mit dem box: Präfix deklaiert werden.
<gadget id="titleArea">
<parts>
<box:text id="title" value="My To Do List"/>
<box:text id="dateTime" value="Date/Time: 00/00/0000 12:00:00 PM" />
</parts>
</gadget>
<gadget id="noteArea">
<parts>
<box:text id="notes" value="Notes Go Here" />
</parts>
</gadget>
<gadget id="buttonsArea">
<parts>
<box:text id="buttons" value="Buttons Area" />
</parts>
</gadget>
Nach dem library Element, aber immernoch innerhalb des window Elements, instanziieren wir jedes der drei Gadgets durch die verwendung des folgenden Codes:
<titleArea></titleArea> <noteArea></noteArea> <buttonsArea></buttonsArea>
Wir loeschen den Titelbereich, Notizbereich und den Schaltflächenbereich, den wir im vorigen Teil durch direktes Einfügen der Boxen in das window Element erstellt haben.
Wir speichern und führen die Anwendung aus. Ein Fenster mit drei Gadgets wird angezeigt.
