Das Boxely Toolkit stellt eine Vielzahl an Text Gadgets bereit. Zwei der meistgenutzten Gadgets sind:
multilineLabel - Ein Text Gadget, das mehrere Zeilen Text mit aktivierten Zeilenumbruch anzeigt. Dieses Gadget befindet sich im Input Gadgets Pack.
label - Ein Text Gadget, das nur eine einzige Zeile Text anzeigt. Dieses Gadget befindet sich im Core Gadgets Pack.
Die folgenden Übungen demonstrieren die Verwendung dieser Gadgets in der "To-Do List" Anwendung.
In dieser Übung werden wir die mehrzeilige Textbox im noteArea
Gadget mit dem multilineLabel
Gadget ersetzen. Wir gehen folgendermaßen vor, um die Übung zu absolvieren.
In einem Texteditor öffnen wir die .box Datei, die unsere "To-Do List" Anwendung beschreibt.
In der Nähe der XML Deklaration importieren wir das Input Gadgets Pack durch das Einfügen der Zeile die unten fett formatiert ist.
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/inputPack/inputGadgets.box"?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
Im noteArea
Gadget, suchen wir die mehrzeilige Textbox mit der itemDescription
ID. Sie ist unten fett hervorgehoben.
<gadget id="noteArea">
<parts>
<box:text id="itemTitle" value="To-Do Item Title"/>
<box:text id="itemDate" value="00/00/0000 12:00:00 PM"/>
<box:vbox id="descriptionContainer">
<box:text id="itemDescription" multiline="true" wordwrap="true"
value="This is the description for the to-do item. If it gets
too long, it will be scrollable." />
</box:vbox>
<box:image id="itemImage"
src="../../theme/images/image4.jpg"/>
</parts>
</gadget>
Wir ersetzen die mehrzeilige Textbox mit dem multilineLabel
Gadget, wie unten gezeigt.
Wir ersetzen das:
<box:text id="itemDescription" multiline="true" wordwrap="true" value="This is the description for the to-do item. If it gets too long, it will be scrollable." />
Durch das:
<box:multilineLabel id="itemDescription" value="This is the description for the to-do item. If it gets too long, it will be scrollable." />
Wir speichern und führen die Anwendung aus. Die "To-Do List" Anwendung wird mit dem multilineLabel
Gadget angezeigt. Durch das Ersetzen der mehryeiligen Textbox mit dem multilineLabel
Gadget, ist unser XML Code vereinfacht und verbessert mit automatischer, eingebauter Unterstützung für Zugreifbarkeit. Für mehr Informationen über Zugreifbarkeit, kann Anhang E: Zugriffsreferenz eingesehen werden.
In dieser Übung werden wir die Textboxen in der "To-Do List" Anwendung mit label
Gadgets ersetzen. Wir gehen folgendermaßen vor, um die Übung zu absolvieren.
In einem Texteditor öffnen wir die .box Datei, die unsere "To-Do List" Anwendung beschreibt.
Wir suchen die Textboxen (bezeichnet box:text
) im titleArea
Gadget. Sie sind unten fett formatiert.
<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>
Wir ersetzen box:text
mit box:label
, wie hier gezeigt:
<box:label id="title" value="My To-Do List"/> <box:label id="dateTime" value="Date/Time: 00/00/0000 12:00:00 PM" />
Wir wiederholen die vorigen zwei Schritte für das noteArea
Gadget.
Wir speichern und führen die Anwendung aus. Die "To-Do List" Anwendung wird mit label
Gadgets angezeigt.