top trim

Toolkit Gadgets benutzen: Wie es funktioniert

Um Toolkit Gadgets in einer Anwendung zu verwenden, müssen zuerst die Library, die die Gadgets enthält, sowie die toolkit.box Library importiert werden. Zum Beispiel, um die label, input, multilineInput, und button Gadgets zu verwenden, die in den core Gadgets und input Gadgets Libraries enthalten sind, würde der folgende Code zum Einsatz kommen, wie unten fett hervorgehoben:

<?xml version="1.0" encoding="utf-8" ?> 
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/content/inputPack/inputGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<window ...>
  ...
</window>

Wichtig

In einer .box Datei müssen alle Import Tags in der Nähe der XML deklaration und vor dem Basis window Element stehen. Falls diese Konvention nicht eingehalten wird, wird es dem OCP Toolkit nicht möglich sein, die externe Datei erfolgreich zu importieren.

Sobald die benötigten Dateien importiert wurden, können Toolkit Gadgets auf die selbe Weise verwendet werden, wie jedes andere Gadget. Der folgende Code demonstriert das definieren eines eigenen Gadgets (das sich innerhalb der Library befindet), das die label, input, multilineInput, und button Gadgets enthält.

<library... > 
<gadget id="myForm" >
    <parts>
        <box:hbox flex="1" s:height="10" />
        <box:hbox  >
            <box:label id="myLabel1" value="Label 1:" />
            <box:input id="myInput1" value="" s:width="200"  />
        </box:hbox>
        <box:hbox >
            <box:label id="myLabel2" value="Label 2:" />
            <box:input id="myInput2" value="" s:width="200"  />
        </box:hbox>
        <box:hbox flex="1" s:height="10" />
        <box:vbox  >
            <box:label id="myLabel3" value="Label 3:" />
            <box:multilineInput id="myInput3" value="" s:width="250" s:height="100" />
        </box:vbox>
        <box:hbox flex="1" s:height="10" />
        <box:hbox>
            <box:hbox s:width="4"  />
            <box:button id="myButton1" label="Save" />
            <box:button id="myButton2" label="Cancel"  />
        </box:hbox>
    </parts>
</gadget>
<style tag="myForm" orient="vertical" />
</library>

Auf dem Bildschirm dargestellt, präsentiert das obige Gadget eine Form mit Labels, Eingabefeldern und Buttons, wie im Bild unten gezeigt:

Auf dieselbe Art und Weise, auf die eigene Gadgets innerhalb des Window Elements instatiiert werden, werden auch Toolkit Gadgets direkt ins Fenster eingebunden anstatt in der Library. Dazu ist das Gadget mit seinem Namen ohne das "box:" Präfix zu referieren, wie unten veranschaulicht:

<window...> 
<label id="myLabel1" value="Label 1:" />
<input id="myInput1" value="" s:width="200"  />
</window>
bottom trim