Bisher haben wir nur besprochen, wie das Verhalten der Anwendung implementiert wird, aber nicht, wie sie aussieht. In diesem Kapitel werden wir uns auf dieses Thema konzentrieren.
Layout-Struktur und Grundlagen
Ähnlich wie der Workflow wird auch das Layout Ihrer Anwendung in XML definiert. Layouts bestehen aus einer LayoutPage
, die einen wiederverwendbaren Rahmen für mehrere Bildschirme definiert, und einem LayoutModel
, das zur Gestaltung der Besonderheiten eines bestimmten Bildschirms verwendet wird. Darüber hinaus können wir Stile
definieren, die auf mehrere Layoutelemente angewendet werden können, und PartTemplate
, die bestimmte Layoutteile wiederverwendbar machen.
Alle diese Strukturelemente sind in eigenen Dateien definiert. Natürlich müssen sie noch mit Inhalten wie Text, Schaltflächen oder Bildern gefüllt werden. Um einen Überblick zu erhalten, können Sie sich die Liste der UI-Elemente ansehen.
Die Layoutseite für unsere Komponente "Choice" enthält lediglich die Statusleiste, einen Titel und einen Inhaltsbereich mit dem <ContentPlaceHolder>-Tag
, der durch das "LayoutModel" gefüllt wird.
<LayoutPage Name="DefaultMaster">
<Part Template="STATUS_BAR" Weight="0.1"/>
<Text Name="Topic" Weight=".15" Style="TitleStyle" Content="Pick a fruit"/>
<Panel Weight="0.75">
<ContentPlaceHolder Name="Content"/>
</Panel>
</LayoutPage>
Das "LayoutModel" sieht wie folgt aus:
<LayoutModel Name="ChoiceScreen" Page="DefaultMaster" Orientation="Vertical">
<Content PlaceHolder="Content" Weight="1" Orientation="Horizontal">
<Button Name="Apple" FocusOrder="0" Weight="0.5" Style="ImageButtonStyle">
<Text Name="LEFT_TEXT" Style="FooterButtonTextStyle" Weight="1" MaxSize="30" Content="Apple"/>
<Events/>
</Button>
<Button Name="Pear" FocusOrder="1" Weight="0.5" Style="ImageButtonStyle">
<Text Name="RIGHT_TEXT" Style="FooterButtonTextStyle" Weight="1" MaxSize="30" Content="Pear"/>
<Events/>
</Button>
</Content>
</LayoutModel>
"LayoutModel" ist das Element, das wir mit dem Workflow verbinden. Dies geschieht bei der Definition eines Schritts des Workflows: <step id="choose" descriptor="der Benutzer wählt zwischen zwei Optionen" uitemplate="ChoiceScreen">.
Wie Sie oben sehen können, verweist das "LayoutModel" dann auf die Page="DefaultMaster
, um seinen äußeren Rahmen zu erhalten. Von der "LayoutPage" verweist es dann auf den <ContentPlaceHolder Name="Content"/>
mit <Content PlaceHolder="Content"....
Dimensionierung und Ausrichtung
Je nach Art des UI-Elements können Sie eine Reihe von Attributen verwenden, um die Benutzeroberfläche nach Ihren Wünschen zu gestalten. Die beiden Attribute, die Sie sich zuerst ansehen sollten, sind Gewicht
und Ausrichtung
, da sie Ihnen helfen, die allgemeine Struktur Ihrer Benutzeroberfläche zu gestalten.
Gewicht
definiert die Größe eines Elements in einem Bereich zwischen 0 und 1, wobei 1 100% der Größe des übergeordneten Elements entspricht.- Die
Ausrichtung
wird auf ein übergeordnetes Element angewendet und bestimmt, ob die untergeordneten Elemente innerhalb des übergeordneten Elements horizontal
(nebeneinander) oder vertikal
(übereinander) angeordnet sind.
In unserem obigen "LayoutModel" hat das Content-Element
eine horizontale
Ausrichtung, so dass die Schaltflächen nebeneinander angezeigt werden. Sie erhalten jeweils Weight="0.5"
(also 50%) der für das Content-Element
verfügbaren Größe. Die Textelemente innerhalb der Schaltflächen hingegen nutzen den gesamten Platz, der ihrem übergeordneten Element (der Schaltfläche) mit Weight="1" zur Verfügung steht.
Wenn Sie die Größe und Ausrichtung Ihrer Elemente festlegen, ist es oft hilfreich, auf Flächenelemente
zurückzugreifen. Diese Elemente sind rein strukturell und können verwendet werden, um die Ausrichtung innerhalb eines übergeordneten Elements einfach zu ändern oder dessen Bereich zu unterteilen.
Schaltflächen und Fokusreihenfolge
Bei der Arbeit mit Schaltflächen ist ein Attribut besonders wichtig: FocusOrder
. Dieses Attribut definiert die Reihenfolge, in der die Schaltflächen fokussiert werden, wenn Sie sie mit Hilfe von Hardware-Schaltflächen durchblättern. Es definiert auch, welche Schaltfläche vorausgewählt wird, nämlich die Schaltfläche mit FocusOrder="0".
Jede Schaltfläche in Ihrem Layout muss eine andere FocusOrder
haben. Selbst wenn sich einige Schaltflächen in einem PartTemplate und damit in einer anderen Datei befinden, müssen sie dennoch in dieser Gesamtreihenfolge Ihres Layouts sein.
Tipps und Tricks: Die Fokusreihenfolge Ihres Layouts muss bei 0 beginnen und ohne Lücken oder Duplikate aufeinander folgen. Wenn dies nicht der Fall ist, wird Ihre Anwendung wahrscheinlich beim Versuch, das Layout zu laden, abstürzen. Wenn Sie während der Entwicklung plötzliche Anwendungsabstürze erleben, sollten Sie sofort Ihre FocusOrder überprüfen.
Textformatierung
Es ist möglich, die Texte, die auf der Smart Glasses angezeigt werden, mit.html-Tags
zu formatieren. Sie können die Formatierung zu einer UI-Vorlage, in einer Layout-Datei oder zu einer Komponente hinzufügen, während Sie einen neuen Text im Code erstellen.
<Text Name="LEFT_TEXT" Style="FooterButtonTextStyle" Weight="1" MaxSize="30" Content="<h1>Red Apples taste the best</h1> green Apples<br>are not so <sub>tasty</sub>"/>
Das Ergebnis der Formatierung kann von der Layoutkomponente, der sie zugewiesen ist, und von der Konfiguration der jeweiligen Komponente abhängen.
Weitere Informationen hierzu finden Sie unter Textformatierung im Abschnitt Workflow Engine Reference.
Layout-Änderungen
Was dem Benutzer gezeigt wird, ist selten statisch. Jede Benutzerinteraktion führt in der Regel auch zu einer Änderung der Benutzeroberfläche. Natürlich wollen wir nicht jedes Mal, wenn sich der Inhalt eines Textfeldes ändert, ein neues Layout und einen neuen Schritt erstellen. Es gibt zwei Möglichkeiten, die Benutzeroberfläche dynamisch anzupassen: die Erstellung eines <mapping>
im Workflow und die Verwendung der Aktion ui_update
.
Kartierung
Mit der Zuordnung können Sie einen Wert oder eine Variable dauerhaft mit einem Attribut eines Oberflächenelements verknüpfen. Wenn Sie eine Variable zuordnen, wird das Attribut des UI-Elements automatisch geändert, wenn sich der Wert der Variable ändert.
<step ...>
<states>...</states>
<mapping>
<ui_element name="LEFT_TEXT">
<param name="content">#{left_option}</param>
<param name="text_color">#{option_color}</param>
</ui_element>
</mapping>
</step>
Das obige Beispiel zeigt, dass das Mapping als untergeordnetes Element des Step-Tags hinzugefügt wird. Sie können hier eine beliebige Anzahl von ui_element-Tags hinzufügen, die auf ein UI-Element aus Ihrem Layout verweisen. In diesem Fall steht name="LEFT_TEXT
, der Text der Schaltfläche für unsere erste Option. Immer wenn die Variable #{left_option}
in Ihrem Workflow geändert wird, zeigt die Benutzeroberfläche einen anderen Text auf dieser Schaltfläche an.
Die Aktion ui_update
Eine weitere Möglichkeit, dynamisch Änderungen an Ihrem Layout vorzunehmen, ist die Aktion ui_update
. Diese Aktion führt eine einmalige Änderung des Layouts durch:
<ui_update id="change_left_button_text">
<widget_params>
<ui_element name="LEFT_TEXT">
<param name="content">#{left_option}</param>
<param name="text_color">#{option_color}</param>
</ui_element>
</widget_params>
</ui_update>
In den meisten Anwendungsfällen ist es besser, einfach ein Mapping einzurichten, als diese Aktion zu verwenden. Es gibt jedoch einen Anwendungsfall, in dem das Mapping nicht funktioniert und Sie die ui_updateaction
verwenden müssen:
JavaScript innerhalb eines Mappings wird nur einmal ausgeführt. Wenn Sie also JS verwenden müssen und sich der Wert während des Lebenszyklus des Schritts ändert, müssen Sie die Benutzeroberfläche manuell mit der Aktion ui_update
aktualisieren.
📌Zuweisung
Bislang haben wir zwischen zwei Textoptionen gewählt. Jetzt wollen wir Bilder in den Mix einbringen:
- Fügen Sie ein Bild-UI-Element zu den Schaltflächen hinzu.
- Fügen Sie die folgenden Bilder zu Ihren Workflow-Ressourcen hinzu (im erweiterten Editor).
- Sie können die Bilder einfach per Drag & Drop aus der Ressourcenliste in das
Content-Attribut
des Image-Tags ziehen.
Download-Komponente (Pre-Assignment)
Hilfe und Ressourcen
Laden Sie die Zwei-Punkte-Bilder herunter.
Lösung
Nachstehend finden Sie ein Lösungsbeispiel:
<Button Name="Apple" FocusOrder="0" Weight="0.5" Style="ImageButtonStyle">
<Image Name="LEFT_IMAGE" Weight="0.8" Margin="0,0,0,0" Content="§{apple.jpg}§" ScaleType="CenterCrop"/>
<Text Name="LEFT_TEXT" Style="FooterButtonTextStyle" Weight=".2" MaxSize="30" Content="Apple"/>
<Events/>
</Button>
<Button Name="Pear" FocusOrder="1" Weight="0.5" Style="ImageButtonStyle">
<Image Name="RIGHT_IMAGE" Weight="0.8" Margin="0,0,0,0" Content="§{pear.jpg}§" ScaleType="CenterCrop"/>
<Text Name="RIGHT_TEXT" Style="FooterButtonTextStyle" Weight=".2" MaxSize="30" Content="Pear"/>
<Events/>
</Button>
Download-Komponente (Post-Assignment)
In der nächsten Lektion werden Sie lernen, wie Sie die Komponente konfigurieren können, um sie wiederverwendbar zu machen.