Bisher haben wir nur besprochen, wie das Verhalten der Anwendung implementiert wird, aber nicht, wie sie aussieht. In diesem Kapitel werden wir uns darauf 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 werden in eigenen Dateien definiert. Natürlich müssen sie dann noch mit Inhalten wie Text, Schaltflächen oder Bildern gefüllt werden. Sie können sich die Liste der UI-Elemente ansehen, um einen Überblick zu erhalten.
Die Layoutseite für unsere Komponente "Choice" enthält lediglich die Statusleiste, einen Titel und einen Inhaltsabschnitt mit dem <ContentPlaceHolder>-Tag, der vom 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 Layout-Seite verweist es dann auf den <ContentPlaceHolder Name="Content "/> mit <Content PlaceHolder="Content"....
Größenbestimmung und Orientierung
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 für ihr übergeordnetes Element (die Schaltfläche) verfügbaren Platz mit Weight="1".
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 FocusOrder Ihres Layouts muss bei 0 beginnen und fortlaufend sein, ohne Lücken oder Duplikate. Wenn dies nicht der Fall ist, wird Ihre Anwendung wahrscheinlich beim Versuch, das Layout zu laden, abstürzen. Wenn Sie während der Entwicklung jemals plötzliche Anwendungsabstürze erleben, sollte Ihnen die Überprüfung Ihrer FocusOrder sofort in den Sinn kommen.
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: das Erstellen 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 #{lef_option} in Ihrem Workflow geändert wird, zeigt die Benutzeroberfläche einen anderen Text auf dieser Schaltfläche an.
Die ui_update Aktion
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_updateactionverwenden 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
Aufgabe 1:
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-Attributdes 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 lernen Sie , wie Sie die Komponente konfigurierbar machen, damit sie wirklich wiederverwendbar wird.
