Wiederverwenden einer Vorlage
Einer der wichtigsten Vorteile von Steuerelementvorlagen ist ihre Wiederverwendbarkeit. Nachdem Sie eine Steuerelementvorlage erstellt haben, können Sie diese an verschiedenen Stellen in Ihrem Design verwenden. In unserem Beispiel Cities1-Reuse.mtd soll der Benutzer seine Stadt durch Auswahl des Kontinents, Landes und der Stadt (in dieser Reihenfolge) auswählen können (siehe Abbildung unten). (Alle geografischen Daten werden von der XML-Seitenquelle CitiesWorldwide.xml aus referenziert.)
Da wir zwei Gruppen von horizontalen Optionsfeldern verwenden (eine für Länder und eine für Städte), haben wir eine einzige Steuerelementvorlage namens Dynamic Radio Buttons (Horizontal) erstellt und diese zwei Mal verwendet: einmal zur Generierung von Optionsfeldern für die Länder des ausgewählten Kontinents und ein zweites Mal zur Generierung von Optionsfeldern für die Städte des ausgewählten Landes.
Das Projektdesign
Das Projekt besteht aus der Steuerelementvorlage Dynamic Radio Buttons (Horizontal), welche auf der Toplevel-Seite Select Country and City zwei Mal verwendet wird. In der Abbildung links unten sehen Sie das Design der Toplevel-Seite. Nachdem der Benutzer einen Kontinent aus der Auswahlliste ausgewählt hat, werden Optionsfelder für die Länder auf diesem Kontinent angezeigt. Nach Auswahl eines Landes werden Optionsfelder für die Städte in diesem Land angezeigt.
Der Kontinent, das Land und die Stadt, die der Benutzer ausgewählt hat, werden jeweils in separaten Nodes der Seitenquelle $PERSISTENT gespeichert (siehe Abbildung rechts oben). Durch Ziehen dieser drei Seitenquellen-Nodes (der Attribute @Continent, @Country und @City des Elements $PERSISTENT/Root) auf die entsprechenden Designkomponenten werden bestimmte wichtige Funktionalitäten implementiert.
•@Continent in der Auswahlliste: aktualisiert @Continent mit der Auswahl in der Auswahlliste und macht @Continent zum Kontext-Node der Auswahlliste.
•@Country imPlatzhaltersteuerelement-1 macht @Country zum Kontext-Node des Platzhaltersteuerelements und der dadurch aufgerufenen Steuerelementvorlage. Der Wert in @Country wird über die Aktion BeimBeendenDerBearbeitung des Optionsfelds in der Steuerelementvorlage (siehe unten) aktualisiert.
•@City im Platzhaltersteuerelement-2 macht @City zum Kontext-Node des Platzhaltersteuerelements und der dadurch aufgerufenen Steuerelementvorlage. Der Wert in @City wird über die Aktion BeimBeendenDerBearbeitung des Optionsfelds in der Steuerelementvorlage (siehe unten) aktualisiert.
Die Definition eines Kontext-Node für das Platzhaltersteuerelement ist wichtig, da alle in der Steuerelementvorlage vom Platzhaltersteuerelement aufgerufenen XPath-Ausdrücke relativ zu diesem Kontext-Node ausgewertet werden.
Die Steuerelementvorlage "Dynamic Radio Buttons (Horizontal)"
Für die Steuerelementvorlage wurde ein einziger obligatorischer Parameter namens $values deklariert. Sie sehen diese Deklaration, wenn Sie im Fenster "Seiten" auf die Schaltfläche Zusätzliche Komponenten klicken (in der Abbildung unten rot umrandet).
In der Abbildung unten sehen Sie das Design der Steuerelementvorlage. Die Steuerelementvorlage besteht aus einer Tabelle, die horizontal erweitert wird, d.h. für jedes Element der Sequenz, über die sich die Tabelle erstreckt, wird eine neue Spalte erstellt. Diese Sequenz bildet laut Definition (für den Umfang der Tabelle) den Inhalt des Parameters $values (wie in der Abbildung unten gezeigt). Jede Spalte enthält ein Optionsfeld. Wenn daher $values eine Sequenz von Ländernamen enthält, wird für jeden Ländernamen in der Sequenz eine Spalte erstellt, die ein Optionsfeld enthält. Wenn $values eine Sequenz von Städtenamen enthält, wird für jeden Stadtnamen in der Sequenz ein Optionsfeld erstellt. Eine Anleitung zur Definition des Inhalts von $values finden Sie weiter unten.
Das Optionsfeld-Steuerelement hat die folgenden (im Fenster "Stile & Eigenschaften" definierten) Einstellungen:
•Eine Eigenschaft Text, die den Text zu den einzelnen Optionsfeldern definiert. Der Text in unserem Beispiel wird durch den Inhalt der Variablen $MT_TableColumnContext definiert. Diese Variable ist eine speziell für die Verwendung mit horizontal expandierenden Tabellen angelegte MobileTogether-Applikationsvariable. Sie enthält für jede Spalte solcher Tabellen den aktuellen Kontext-Node. Wenn daher in unserem Beispiel aufgrund eines Ländernamens in der $values-Sequenz eine neue Spalte erstellt wird, so bildet der Name dieses Landes den Kontext-Node für diese Spalte und wird während der Generierung dieser Spalte in der Variablen $MT_TableColumnContext gespeichert. Da die Eigenschaft Text des Optionsfelds auf $MT_TableColumnContext gesetzt wurde, erhalten die einzelnen Optionsfelder jeweils den Namen des Datenelements der Sequenz, aufgrund dessen die aktuellen Spalte generiert wurde.
•Durch die Eigenschaft Steuerelementaktion (für BeimBeendenDerBearbeitung) wird der aktuelle Node mit dem Wert von $MT_TableColumnContext aktualisiert. Daher: Erstens, welcher ist der aktuelle Node? Es ist der Kontext-Node des aufrufenden Platzhaltersteuerelements (siehe oben). In unserem Beispiel ist dies (jeweils für den ersten und zweiten Platzhalter) das Attribut @Country bzw. @City des Elements $PERSISTENT/Root. Zweitens: Welcher $MT_TableColumnContext-Wert (d.h. von welcher Spalte) wird an den aktuellen Node übergeben? Antwort: Es ist der Wert der Spalte, die das Optionsfeld enthält, auf das geklickt wurde. Daraus folgt: An das Attribut @Country bzw. @City wird der Länder/Städtename des ausgewählten Optionsfelds übergeben.
•Die Eigenschaft Markierte Werte (oder Wert aus XPath abrufen) des Optionsfelds definiert, ob die Schaltfläche ausgewählt ist (Wert 1) oder nicht (Wert 0). Der XPath-Ausdruck, der diesen Wert in der Steuerelementvorlage ermittelt, lautet: if ($MT_TableColumnContext = .) then 1 else 0. Mit diesem Ausdruck wird der Wert des Optionsfelds dessen $MT_TableColumnContext-Wert gleich dem Wert des aktuellen Node ist (welcher der Kontext-Node des Platzhaltersteuerelements und in unserem Beispiel entweder das Attribut @Countryoder @Cityoder des Elements $PERSISTENT/Root ist) auf 1 gesetzt. Da der aktuelle Node über die Aktion BeimBeendenDerBearbeitung mit dem Wert von $MT_TableColumnContext aktualisiert wurde, erhält nur das ausgewählte Optionsfeld (das die Aktion BeimBeendenDerBearbeitung ausgelöst hat) den Wert 1.
Wir müssen nun nur noch die Sequenz, die an den Parameter $values der Steuerelementvorlage übergeben wird, definieren. Diese Definition wird am Platzhaltersteuerelement (siehe unten) vorgenommen.
Anmerkung: | Mit Hilfe der Steuerelementvorlage Dynamic Radio Buttons (Horizontal) können Sie für jede für den Parameter $values bereitgestellte Sequenz horizontale Optionsfelder erstellen. |
Die zwei Platzhaltersteuerelemente, in denen die Steuerelementvorlage wiederverwendet wird
Ein Platzhaltersteuerelement für eine Steuerelementvorlage wird erstellt, indem man das Platzhaltersteuerelement an die gewünschte Stelle des Designs zieht und für die Eigenschaft Steuerelementvorlage die gewünschte Steuerelementvorlage auswählt. Alternativ dazu können Sie die gewünschte Steuerelementvorlage an die gewünschte Stelle im Design ziehen, woraufhin die Eigenschaft Steuerelementvorlage automatisch definiert wird.
Im Folgenden werden die wichtigsten Einstellungen für das Platzhaltersteuerelement in unserem Beispiel erläutert. In der Abbildung oben sehen Sie die Eigenschaften des ersten Platzhaltersteuerelements, mit dem Länder ausgewählt werden.
•Verknüpfter Seitenquellen-Node: Damit wird der Seitenquellen-Node, der den Kontext-Node des Platzhaltersteuerelements und durch Erweiterung auch den Kontext-Node der aufgerufenen Steuerelementvorlage bilden soll, definiert. Alle XPath-Ausdrücke in der Steuerelementvorlage (auch diejenigen für ihre Parameter und Variablen) werden relativ zu diesem Node ausgewertet. Sie können diese Einstellung durch Ziehen des Seitenquellen-Node auf das Platzhaltersteuerelement konfigurieren. In unserem Projekt sind die verknüpften Seitenquellen-Nodes für die zwei Platzhaltersteuerelemente die Attribute @Country bzw. @City des Elements $PERSISTENT/Root.
•Steuerelementvorlage: Dient zur Auswahl der Steuerelementvorlage, die an der Stelle des Platzhaltersteuerelements instanziiert wird. Sie können die Steuerelementvorlage in der Auswahlliste der Eigenschaft auswählen. (Alternativ dazu können Sie eine Steuerelementvorlage in das Design ziehen und für diese Eigenschaft wird automatisch definiert, dass diese Steuerelementvorlage ausgewählt wird.)
•Parameter: Definiert die Werte, die an den Parameter $values der Steuerelementvorlage gesendet werden sollen. Im Fall des Platzhaltersteuerelements, das die Optionsfelder für die Länder des vom Benutzer ausgewählten Kontinents instanziiert, lautet der XPath-Ausdruck: $COUNTRIES-AND-CITIES/Cities/Continent[@name=$PERSISTENT/Root/@Continent]/Country/@name. Der (gelb markierte) Prädikatfilter in diesem Ausdruck wählt den vom Benutzer ausgewählten Kontinent (der in nun der $PERSISTENT-Struktur gespeichert ist) aus. Der XPath-Ausdruck des zweiten Platzhaltersteuerelements, der Optionsfelder für die Städte des ausgewählten Landes generiert, lautet: $COUNTRIES-AND-CITIES/Cities/Continent[@name=$PERSISTENT/Root/@Continent]/Country[@name=$PERSISTENT/Root/@Country]/City/@name.
Beachten Sie, dass die beiden Platzhalter unterschiedliche Kontext-Nodes haben und unterschiedliche Sequenzen an den Parameter $values senden. Auf diese Art kann die Steuerelementvorlage an den zwei Stellen, an denen sie von den entsprechenden Platzhaltersteuerelementen instanziiert wird, die entsprechenden Optionsfelder generieren.