Jusqu'à présent, nous n'avons abordé que la manière de mettre en œuvre le comportement de l'application, mais pas son apparence. Dans ce chapitre, nous allons nous concentrer sur ce sujet.
Structure de la mise en page et principes de base
Tout comme le flux de travail, la présentation de votre application est également définie en XML. Les mises en page se composent d'un LayoutPage qui définit un cadre réutilisable pour plusieurs écrans et d'un LayoutModel qui est utilisé pour concevoir les spécificités d'un écran particulier. En outre, nous pouvons définir un Style à appliquer à plusieurs éléments de la mise en page et un PartTemplate qui rend réutilisables des parties spécifiques de la mise en page.
Tous ces éléments structurels sont définis dans des fichiers distincts. Bien entendu, ils doivent toujours être remplis avec du contenu tel que du texte, des boutons ou des images. Vous pouvez consulter la liste des éléments de l'interface utilisateur pour avoir une vue d'ensemble.
La page de présentation de notre composant "Choix" comprend simplement la barre d'état, un titre et une section de contenu utilisant la balise <ContentPlaceHolder>, qui sera remplie par le "LayoutModel".
<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>
Le "LayoutModel" se présente comme suit :
<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" est l'élément que nous connectons au flux de travail. Cela se fait lors de la définition d'une étape du flux de travail : <step id="choose" descriptor="the user selects between two options" uitemplate="ChoiceScreen">. Comme vous pouvez le voir ci-dessus, le "LayoutModel" se réfère alors à la Page="DefaultMaster pour obtenir son cadre extérieur. À partir de la "LayoutPage", il fait ensuite référence au <ContentPlaceHolder Name="Content "/> en utilisant <Content PlaceHolder="Content"....
Dimensionnement et orientation
Selon le type d'élément de l'interface utilisateur, vous pouvez utiliser une série d'attributs pour styliser l'interface utilisateur à votre convenance. Les deux attributs que vous devez examiner en premier lieu sont le poids et l'orientation, car ils vous aident à concevoir la structure générale de votre interface utilisateur.
- Le
poids définit la taille d'un élément dans une fourchette comprise entre 0 et 1, où 1 correspond à 100 % de la taille de l'élément parent. - L'
orientation est appliquée à un élément parent et détermine si les éléments enfants sont horizontaux (les uns à côté des autres) ou verticaux (les uns sur les autres) à l'intérieur de l'élément parent.
Dans notre "LayoutModel" ci-dessus, l'élément Content a une orientation horizontale, les boutons seront donc affichés l'un à côté de l'autre. Ils utilisent chacun Weight="0.5" (soit 50 %) de la taille disponible pour l'élément Content. Les éléments de texte à l'intérieur des boutons, en revanche, utilisent tout l'espace disponible pour leur élément parent (le bouton) avec Weight="1".
Souvent, lorsque vous définissez la taille et l'orientation de vos éléments, il est utile d'utiliser les éléments du panneau. Ces éléments sont purement structurels et peuvent être utilisés pour modifier facilement l'orientation d'un élément parent ou pour subdiviser son espace.
Boutons et ordre de priorité
Lorsque l'on travaille avec des boutons, un attribut est particulièrement important : FocusOrder. Cet attribut définit l'ordre dans lequel les boutons seront mis en évidence si vous les parcourez à l'aide de boutons matériels. Il définit également le bouton qui sera présélectionné, à savoir le bouton dont l'attribut FocusOrder="0". Chaque bouton de votre présentation doit avoir un FocusOrder différent. Même si certains boutons se trouvent dans un PartTemplate et donc dans un fichier différent, ils doivent toujours figurer dans l'ordre général de votre mise en page.
Trucs et astuces : Le FocusOrder de votre mise en page doit commencer à 0 et être séquentiel, sans lacunes ni doublons. Si ce n'est pas le cas, votre application risque de se bloquer lors du chargement de la mise en page. Si vous constatez un plantage soudain de votre application au cours de son développement, la vérification de votre FocusOrder devrait vous venir immédiatement à l'esprit.
Modifications de la présentation
Ce qui est montré à l'utilisateur est rarement statique. Toute interaction avec l'utilisateur entraîne généralement une modification de l'interface utilisateur. Bien entendu, nous ne voulons pas créer une nouvelle présentation et une nouvelle étape chaque fois que le contenu d'un champ de texte change. Il existe deux façons d'adapter l'interface utilisateur de manière dynamique : en créant un <mapping> dans le flux de travail et en utilisant l'action ui_update.
Cartographie
Le mappage vous permet d'associer de manière permanente une valeur ou une variable à un attribut d'un élément de l'interface utilisateur. Si vous mappez une variable, l'attribut de l'élément de l'interface utilisateur sera automatiquement modifié lorsque la valeur de la variable changera.
<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>
L'exemple ci-dessus montre que le mappage est ajouté en tant qu'enfant de la balise step. Vous pouvez ajouter ici un nombre quelconque de balises ui_element qui feront référence à un élément d'interface utilisateur de votre mise en page. Dans ce cas, name="LEFT_TEXT, le texte du bouton représente notre première option. Chaque fois que la variable #{lef_option} est modifiée dans votre flux de travail, l'interface utilisateur affiche un texte différent sur ce bouton.
L'action ui_update
L'action ui_update est une autre option permettant d'apporter dynamiquement des modifications à votre mise en page. Cette action effectue une modification unique de la mise en page :
<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>
Dans la plupart des cas d'utilisation, il est préférable d'établir une correspondance plutôt que d'utiliser cette action. Il existe cependant un cas d'utilisation dans lequel le mappage ne fonctionne pas et où vous devez utiliser l'action ui_update :
Le JavaScript à l'intérieur d'un mapping n'est exécuté qu'une seule fois, donc si vous devez utiliser le JavaScript et que la valeur change pendant le cycle de vie de l'étape, vous devrez mettre à jour manuellement l'interface utilisateur à l'aide de l'action ui_update.
Il est possible de formater les textes qui sont affichés dans les lunettes intelligentes avec des balises.html . Vous pouvez ajouter la mise en forme à un modèle d'interface utilisateur, dans un fichier de mise en page ou à un composant lors de la création d'un nouveau texte dans le code.
<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>"/>
Le résultat du formatage peut varier en fonction du composant de mise en page auquel il est affecté et de la configuration du composant en question.
Voir Formatage du texte dans la section Référence du moteur de flux de travail.
Affectation
Affectation 1 :
Jusqu'à présent, nous avons choisi entre deux options textuelles. Nous voulons maintenant ajouter des images :
- Ajoutez un élément d'interface utilisateur Image aux boutons.
- Ajoutez les images ci-dessous à vos ressources de flux de travail (à partir de l'éditeur avancé).
- Vous pouvez simplement glisser-déposer les images de la liste des ressources dans l'
attribut content dela balise image.
Composant de téléchargement (mission préalable)
Aide et ressources
Téléchargez les images à deux éléments.
Solution
Vous trouverez ci-dessous une solution exemplaire :
<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>
Composant de téléchargement (après l'affectation)
Dans la prochaine leçon, vous apprendrez à rendre le composant configurable afin qu'il devienne réellement réutilisable.
