In Kapitel zwei haben wir ein eigenes Gadget mit dem Namen "myButton" erstellt, welches das Aussehen eines UI Buttons in verschiedenen Staten definiert. Es ist momentan fünf mal innerhalb des buttonsArea Gadgets instantiiert.
Während das Erstellen des myButton Gadget nützlich war, um zu lernen, mit Styles und States umzugehen, ist es nicht die Effizienteste Möglichkeit Buttons in eine Anwendung einzufügen. Anstelle von eigenen Button Gadgets, sollten vorgefertigte Button Steuerelemente aus dem Toolkit verwendet werden.
Zwei der meistverwendeten Button Steuerelemente sind:
textButton - Ein Gadget das einen "klickbaren" Link repräsentiert. Dieses Gadget befindet sich im Core Gadgets Pack.
button - Ein Gadget das einen "klickbaren" Button repräsentiert. Dieses Gadget befindet sich im Core Gadgets Pack.
In fogenden Übung werden wir lernen, diese Gadgets in unsere "To-Do List" Anwendung einzubinden.
In dieser Übung werden wir die prevNote und nextNote Buttons mit textButton Gadgets ersetzen.
In einem Texteditor öffnen wir die .box Datei, die unsere "To-Do List" Anwendung beschreibt.
Im buttonsArea Gadget, suchen wir die "Prev Note" und "Next Note" Buttons, unten fett hervogehoben.
<gadget id="buttonsArea">
<parts>
<box:hbox id="prevNextButtons">
<box:myButton label="« Prev Note" />
<box:hbox s:flex="1"/>
<box:myButton label="Next Note »" />
</box:hbox>
<box:myButton s:flex="1" label="Create To-Do Item" />
<box:hbox>
<box:myButton s:flex="1" label="Clear To-Do Item" />
<box:myButton s:flex="1" label="Clear To-Do List" />
</box:hbox>
</parts>
</gadget>
Wir ersetzen die "Prev Note" und "Next Note" Buttons mit folgendem Code, unten fett formatiert:
<gadget id="buttonsArea">
<parts>
<box:hbox id="prevNextButtons">
<box:textButton label="« Prev Note"
tooltip="Go to your previous Note."/>
<box:hbox s:flex="1"/>
<box:textButton label="Next Note »"
tooltip="Go to your next Note."/>
</box:hbox>
<box:myButton s:flex="1" label="Create To-Do Item" />
<box:hbox>
<box:myButton s:flex="1" label="Clear To-Do Item" />
<box:myButton s:flex="1" label="Clear To-Do List" />
</box:hbox>
</parts>
</gadget>
Wir speichern und führen die Anwendung aus. Die "To-Do List" Anwendung wird mit textButton Gadgets angezeigt.
Wir fahren mit der Maus über, und klicken die Textbuttons, um das eingebaute Verhalten anzusehen.
|
In dieser Übung werden wir die restlichen myButton Instanzen im buttonsArea Gadget mit button Gadgets ersetzen.
In einem Texteditor öffnen wir die .box Datei, die unsere "To-Do List" Anwendung beschreibt.
Im buttonsArea Gadget, suchen wir die Buttons, unten fett hervorgehoben.
<gadget id="buttonsArea">
<parts>
<box:hbox id="prevNextButtons">
<box:textButton label="« Prev Note"
tooltip="Go to your previous Note."/>
<box:hbox s:flex="1"/>
<box:textButton label="Next Note »"
tooltip="Go to your next Note."/>
</box:hbox>
<box:myButton s:flex="1" label="Create To-Do Item" />
<box:hbox>
<box:myButton s:flex="1" label="Clear To-Do Item" />
<box:myButton s:flex="1" label="Clear To-Do List" />
</box:hbox>
</parts>
</gadget>
Wir ersetzen sie mit folgendem Code, unten fett formatiert:
<gadget id="buttonsArea">
<parts>
<box:hbox id="prevNextButtons">
<box:textButton label="« Prev Note"
tooltip="Go to your previous Note."/>
<box:hbox s:flex="1"/>
<box:textButton label="Next Note »"
tooltip="Go to your next Note."/>
</box:hbox>
<box:button s:flex="1" defaultButton="true"
icon="../../theme/images/iconWrite.png"
label="Create To-Do Item" tooltip="Create new To-Do note."/>
<box:hbox>
<box:button s:flex="1"
icon="../../theme/images/iconClearItem.png"
label="Clear To-Do Item"
tooltip="Remove this note from your list."/>
<box:button s:flex="1"
icon="../../theme/images/iconClearList.png"
label="Clear To-Do List"
tooltip="Remove all notes from your list."/>
</box:hbox>
</parts>
</gadget>
Wir entfernen die Definition des myButton Gadgets und seinem zugehörigen Style, wie unten gezeigt. (Mit der Einbindung von Toolkit Gadgets, werden diese Elemente nicht mehr benötigt.)
<gadget id="myButton">
<attributes label="" blockEvents="true"/>
<parts>
<box:text id="buttonLabel" inherits="value=label"/>
</parts>
</gadget>
<style tag="myButton" stroke="#333333" strokeWidth="1"
strokeCornerRadius="4" fill="white" fillCornerRadius="4"
padding="1 4 2 4" margin="2" cursor="pointer" vAlign="center"
hAlign="center">
<state name="hovered" fill="#dddddd" stroke="red" strokeWidth="2"/>
<state name="pressed" fill="#aaaaaa" />
<part name="buttonLabel" textColor="black">
<state name="hovered" textColor="red"/>
</part>
</style>
Wir speichern und führen die Anwendung aus. Die "To-Do List" Anwendung wird mit Button Gadgets angezeigt. Wir betrachten das eingebaute Verhalten, wenn wir die Maus darueber bewegen, und die Buttons klicken.
