Exemple : Style des vues

Cet exemple montre comment appliquer un style à des vues individuelles afin d'en modifier l'apparence selon que les utilisateurs les affichent dans une page Web ou sur un périphérique mobile.

Cet exemple contient deux ensembles des mêmes vues d'interface utilisateur qui illustrent la façon dont vous pouvez appliquer des styles à une même vue pour qu'elle s'affiche différemment. Dans le premier ensemble, certaines configurations de style optimisent les vues pour une page Web. Certaines des configurations de style du second ensemble optimisent ces contrôles pour un périphérique mobile tel qu'un smartphone.

Les configurations de style de l'exemple utilisent des définitions dans le thème Classique. Ces définitions contrôlent l'aspect de toute vue utilisant le thème. Si vos vues utilisent un autre thème, elles peuvent avoir une apparence différente en fonction des différences entre les deux thèmes.

  1. Ouvrez Process Designer et créez une vue, puis ajoutez-y les vues d'interface utilisateur suivantes :
    • Texte
    • Case à cocher
    • Bouton
    • Texte
    • Basculer
    • Bouton
    La vue se présente comme suit :
    Capture d'écran montrant les vues répertoriées disposées verticalement. Le nombre 2 est ajouté au libellé du deuxième ensemble de vues.
  2. Sélectionnez la première vue Texte. Dans ses propriétés de configuration Apparence, définissez la taille du texte sur Petite. Même si la taille par défaut (Moyenne) est parfaitement adaptée, un texte plus petit permet d'afficher plus de texte à l'écran tout en préservant l'espace. Lorsque vous effectuez ce changement, le texte du libellé est réduit. Si vous avez ajouté du texte d'espace réservé, le texte à l'intérieur de la vue Texte est également réduit. Outre le changement de la taille du texte, le cadrage autour de la vue est également modifié. Vous pouvez voir la différence entre le texte de taille moyenne et celui de petite taille en regardant les deux vues Texte de la présentation.
  3. Apportez les mêmes modifications au premier bouton, en changeant la taille du texte en Petite.
  4. Sélectionnez la seconde vue Texte. Dans ses propriétés de configuration, développez la section Style et définissez la taille du texte sur Grande. Plus le texte est grand, plus il est facile à lire sur des appareils type smartphone. Vous pouvez néanmoins utiliser du texte de grande taille sur une page Web et du texte de petite taille sur un smartphone en fonction des besoins de votre conception de présentation.
    La première vue Texte possède un libellé plus petit que la seconde vue. La seconde vue Texte contient un libellé et un texte réservé plus grands que ceux de la première vue.
  5. Sélectionnez la vue Bascule. Dans ses propriétés de configuration, développez la section Style et définissez la taille du texte sur Grande.
  6. La vue Bascule utilise une couleur pour indiquer quelle partie est sélectionnée. Par défaut, il s'agit de la couleur principale, définie par le thème Classique comme étant le bleu foncé. Changez la propriété Couleur de la bascule activée en Informations pour utiliser la couleur d'information, définie par le thème Classique comme étant le bleu clair. Dans ce cas, il s'agit uniquement d'un choix esthétique. Toutefois, vous pouvez choisir de colorer la vue en fonction de son objectif : vue Info, vue Réussi, vue Avertissement ou vue Danger.
  7. Sélectionnez la seconde vue Bouton. Dans ses propriétés de configuration, développez la section Style, définissez la taille du texte sur Grande et définissez le type de couleur du thème sur Réussi. Dans la présentation, la vue se présente comme suit :
    Le texte du deuxième ensemble de vues est plus grand, le commutateur est bleu clair et le deuxième bouton est vert.
Cet exemple a utilisé deux ensembles différents de vues pour montrer que le fait de définir le style d'une instance de bouton n'affecte pas l'autre instance. Toutefois, si vous créez cette vue en tant qu'interface utilisateur utilisable à la fois dans un navigateur de bureau et dans une application mobile, vous n'avez besoin d'utiliser qu'un seul ensemble de vues. Dans ce cas, définissez l'agencement sur un écran de grande taille "Grand écran", puis la taille du texte des vues sur petit. Vous définissez ensuite l'agencement sur une petite taille d'écran "Petit écran" et la taille du texte des vues sur grand. Notez que les options de configuration de couleur ne changement pas quand la taille d'écran varie. C'est-à-dire qu'un bouton dont la couleur est "réussi" conserve cette couleur pour toutes les tailles d'écran. Les captures d'écran suivantes montrent un ensemble de vues qui changeant en fonction de la taille d'écran.
Tableau 1. Vues sur différentes tailles d'écran
Grand écran Petit écran
Vues dans un grand navigateur avec texte de petite taille.
Vues dans un navigateur étroit avec texte de grande taille.