Base de connaissances

Retour à la vue d’ensemble de l’assistance

Jusqu’à présent, nous n’avons discuté que de la façon d’implémenter le comportement de l’application, mais pas de son apparence. Dans ce chapitre, nous allons nous concentrer sur ce sujet.

Structure et principes de base de la mise en page

À l’instar du flux de travail, la mise en page de votre application est également définie en XML. Les mises en page se composent d’un qui définit un cadre réutilisable pour plusieurs écrans et d’unLayoutModel  qui est utilisé pour concevoir les spécificités d’un écran particulier. LayoutPage  De plus, nous pouvons définir Style à appliquer à plusieurs éléments de mise en page et PartTemplate qui rendent des éléments de mise en page spécifiques réutilisables.

Tous ces éléments structurels sont définis dans leurs fichiers séparés. Bien sûr, ils doivent toujours être remplis de contenu comme du texte, des boutons ou des images. Vous pouvez jeter un coup d’œil à la liste des éléments de l’interface utilisateur pour obtenir une vue d’ensemble.

La page de mise en page de notre composant « Choice » comprend simplement la barre d’état, un titre et une section de contenu utilisant la <ContentPlaceHolder> balise, qui sera remplie par le « LayoutModel ».

<LayoutPage Name="DefaultMaster">
  <Part Template="STATUS_BAR » Weight="0.1"/>
  <Text Name="Topic » Weight= ».15 » Style="TitleStyle » Content="Cueillir un fruit"/>
  <Panel Weight="0.75">
    <ContentPlaceHolder Name="Content"/>
  </Panel>
</LayoutPage>

Le « LayoutModel » ressemble à ceci :

<LayoutModel Name="ChoiceScreen » Page="DefaultMaster » Orientation="Vertical">
  <Content PlaceHolder="Contenu » Weight="1 » Orientation="Horizontal">
    <Button Name="Apple » FocusOrder="0 » Weight="0.5 » Style="ImageButtonStyle">
      <Nom du texte="LEFT_TEXT » Style="FooterButtonTextStyle » Weight="1 » MaxSize="30 » Content="Apple"/>
      <Events/>
    </Button>
    <Button Name="Poire » FocusOrder="1 » Weight="0.5 » Style="ImageButtonStyle">
      <Text Name="RIGHT_TEXT » Style="FooterButtonTextStyle » Weight="1 » MaxSize="30 » Content="Poire"/>
      <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 workflow : <step id="choose" descriptor="the user selects between two options" uitemplate="ChoiceScreen">. Comme vous pouvez le voir ci-dessus, le « LayoutModel » fait alors référence à l’objet Page="DefaultMaster pour obtenir son cadre extérieur. À partir de la « LayoutPage », il fait ensuite référence à l’utilisation de <Content PlaceHolder="Content"...<ContentPlaceHolder Name="Content"/>  .

Dimensionnement et orientation

Selon le type d’élément d’interface utilisateur, vous pouvez utiliser une gamme d’attributs pour styliser l’interface utilisateur à votre guise. Les deux attributs que vous devez d’abord examiner sont weight et orientation, car ils vous aident à concevoir la structure générale de votre interface utilisateur.

  • Weight Définit la taille d’un élément compris entre 0 et 1, où 1 correspond à 100 % de la taille de l’élément parent.
  • Orientation est appliqué à un élément parent et détermine si les éléments enfants sont horizontal (les uns à côté des autres) ou vertical (les uns au-dessus des autres) à l’intérieur de l’élément parent.

Dans notre « LayoutModel » ci-dessus, l’élément a  Horizontalune Content orientation, de sorte que les boutons seront affichés les uns à côté des autres. Ils peuvent chacun utiliser Weight="0.5" (donc 50%) de la taille disponible pour l’élément. Content  Les éléments de texte à l’intérieur des boutons, quant à eux, utilisent tout l’espace disponible pour leur élément parent (le bouton) avec Weight="1".

Souvent, lors de la configuration de la taille et de l’orientation de vos éléments, il est utile d’utiliser des Panel éléments. Ces éléments sont purement structurels et peuvent être utilisés pour modifier facilement l’orientation d’un élément parent ou subdiviser son espace.

Boutons et ordre de mise au point

Lorsque vous travaillez 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 faites défiler à l’aide de boutons matériels. Il définit également quel bouton sera présélectionné, à savoir le bouton avec FocusOrder="0". Chaque bouton de votre mise en page doit avoir un fichier . FocusOrder Même si certains boutons se trouvent dans un PartTemplate et donc dans un fichier différent, ils doivent toujours être dans cet ordre général de votre mise en page.

Trucs et astuces : L’ordre de mise au point 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 se bloquera probablement lors de la tentative de chargement de la mise en page. Si jamais vous rencontrez des plantages soudains de l’application pendant le développement, la vérification de votre FocusOrder devrait immédiatement vous venir à l’esprit.

Mise en forme du texte

Il est possible de mettre en forme les textes qui s’affichent dans les lunettes intelligentes avec .html des balises. Vous pouvez ajouter la mise en forme à un modèle d’interface utilisateur, à un fichier de mise en page ou à un composant lors de la création d’un nouveau texte dans le code.

<Nom du texte="LEFT_TEXT » Style="FooterButtonTextStyle » Weight="1 » MaxSize="30 » Content="<h1>Les pommes rouges ont le meilleur goût</h1> les pommes vertes<br>ne sont pas si <sous>savoureuses</sub>"/>

Le résultat de la mise en forme peut varier en fonction du composant de mise en page auquel il est affecté et de la configuration du composant particulier.

Pour plus d’informations à ce sujet, consultez Mise en forme du texte dans la section Référence du moteur de workflow.

Modifications de la mise en page

Ce qui est montré à l’utilisateur est rarement statique. Toute interaction de l’utilisateur entraînera généralement une modification de l’interface utilisateur. Bien sûr, nous ne voulons pas créer une nouvelle mise en page 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 : la création d’un dans le workflow et l’utilisation de l’action  ui_update. <mapping> 

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 d’interface utilisateur est automatiquement modifié chaque fois que la valeur de la variable change.

           <étape ... >
             <États>... </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 n’importe quel nombre de balises ui_element qui feraient 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 #{left_option} est modifiée dans votre flux de travail, l’interface utilisateur affiche un texte différent sur ce bouton.

L’action ui_update

Une autre option pour apporter dynamiquement des modifications à votre mise en page est l’action ui_update . Cette action effectue une modification unique sur 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 de simplement configurer un mappage au lieu d’utiliser cette action. Il existe cependant un cas d’utilisation dans lequel le mappage ne fonctionne pas et vous devez utiliser l’action ui_update:

JavaScript à l’intérieur d’un mappage n’est exécuté qu’une seule fois, donc si vous avez besoin d’utiliser JS et que la valeur change au cours du cycle de vie de l’étape, vous devrez mettre à jour manuellement l’interface utilisateur à l’aide de l’action ui_update .

📌Mission

Jusqu’à présent, nous avons choisi entre deux options textuelles. Maintenant, nous voulons ajouter des images dans le mélange :

  • 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 contentde la balise image.

 Télécharger le composant (pré-affectation)

Aide et ressources

Téléchargez les images des deux éléments.

Solution

Vous trouverez ci-dessous une solution exemplaire :

    <Nom du bouton="Apple » FocusOrder="0 » Poids="0.5 » Style="ImageButtonStyle">
      <Nom de l’image="LEFT_IMAGE » Poids="0.8 » Margin="0,0,0,0 » Content="§{apple.jpg}§ » ScaleType="CenterCrop"/>
      <Nom du texte="LEFT_TEXT » Style="FooterButtonTextStyle » Weight= ».2 » MaxSize="30 » Content="Apple"/>
      <Events/>
    </Button>
    <Button Name="Poire » 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="Poire"/ >
      <Événements/>
    </Bouton>

 Télécharger le composant (post-affectation)

Dans la leçon suivante, vous apprendrez à rendre le composant configurable afin qu’il devienne réutilisable.