top trim

Text Gadgets benutzen

Das Boxely Toolkit stellt eine Vielzahl an Text Gadgets bereit. Zwei der meistgenutzten Gadgets sind:

Die folgenden Übungen demonstrieren die Verwendung dieser Gadgets in der "To-Do List" Anwendung.

"To-Do List" Übung 3.1: Benutzen des multilineLabel Gadgets

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.

  1. In einem Texteditor öffnen wir die .box Datei, die unsere "To-Do List" Anwendung beschreibt.

  2. 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"?>
    
  3. 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>
    
  4. 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." />
    
  5. 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.

"To-Do List" Übung 3.2: Benutzen des label Gadgets

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.

  1. In einem Texteditor öffnen wir die .box Datei, die unsere "To-Do List" Anwendung beschreibt.

  2. 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>
    
  3. 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" />
    
  4. Wir wiederholen die vorigen zwei Schritte für das noteArea Gadget.

  5. Wir speichern und führen die Anwendung aus. Die "To-Do List" Anwendung wird mit label Gadgets angezeigt.

bottom trim