Thèmes

Un thème se compose d'un ensemble de définitions de thème, de feuilles de style dynamiques et de feuilles de style en cascade générées que vous pouvez appliquer à une automatisation de flux de travaux ou à un kit d'outils.

Une définition de thème est un ensemble de variables de thème et de leurs valeurs. Par exemple, une définition de thème peut avoir une variable background et une valeur white. Une vue peut posséder une feuille de style dynamique qui utilise les variables de la définition de thème. Lorsqu'un certain nombre de vues utilisent la même définition de thème, vous pouvez obtenir un ensemble de vues doté d'un aspect visuel cohérent. En outre, il est relativement facile d'apporter un changement visuel global à ces vues en modifiant les valeurs de la variable du thème sans toucher aux définitions de la vue. Les définitions de thèmes et les feuilles de style dynamiques prennent en charge le langage de feuille de style LESS pour vous permettre d'utiliser sa syntaxe et ses fonctionnalités pour améliorer vos vues personnalisées.

Une vue utilise la définition de thème du contexte d'exécution, qui est l' automatisation de flux de travaux ou le kit d'outils qui utilise actuellement la vue. Vous pouvez utiliser cette fonction pour avoir des vues dans une automatisation de flux de travaux stylisée d'une manière et les mêmes vues dans une automatisation de flux de travaux stylisée d'une manière différente. Les deux ensembles de vues comportent les mêmes feuilles de style dynamiques, mais les feuilles de style utilisent des définitions de thème dont les valeurs sont différentes.
Diagramme d'un thème composé d'un ensemble de définitions de thème, de feuilles de style dynamiques et de CSS généré que vous pouvez appliquer à une automatisation de processus ou à une boîte à outils

Les définitions de thèmes et les feuilles de style dynamiques sont combinées pour générer automatiquement un ensemble de fichiers .CSS. Lorsqu'une automatisation de flux de travaux affiche une page, elle utilise ces fichiers CSS pour appliquer un style aux vues contenues dans la page. La génération de la feuille de style en cascade prend un certain temps. Par conséquent, si vous visualisez l' automatisation de flux de travaux dans le concepteur, vous pouvez voir les vues dans la page utiliser les valeurs de thème par défaut ou anciennes jusqu'à ce que la nouvelle feuille de style en cascade soit disponible. Lors de l'exécution, la feuille de style en cascade est déjà générée pour les automatisations de flux de travaux déployées et aucun retard ne se produit.

Lorsque le concepteur affiche une vue, il utilise le thème de l' automatisation de flux de travaux ou du kit d'outils actuellement ouvert pour définir le style des vues dans la présentation. Cette fonction signifie que la même vue peut être différente dans le concepteur en fonction de l' automatisation de flux de travaux ou du kit d'outils que vous avez ouvert. Le thème Carbon du kit d'outils Données système est le thème par défaut pour l' automatisation de flux de travauxplus récente, qui fournit les définitions de thème pour vos vues. Le thème Carbon fournit les actifs visuels (couleurs, icônes, polices de caractères, etc.) qui alignent les interactions et l'aspect de vos automatismes de flux de travail et de vos vues sur les lignes directrices du système de conception IBM®. Pour plus d'informations, voir Carbon Design System Le lien externe ouvre une nouvelle fenêtre ou un nouvel onglet.

Vous pouvez également appliquer un thème provenant d'un kit d'outils personnalisé. Par exemple, créez un type de vue bouton dans un kit d'outils personnalisé. Dans le kit d'outils de Designer, le thème appliqué au kit d'outils représente le bouton en bleu. Une automatisation de flux de travaux a le kit d'outils comme dépendance. Toutefois, l' automatisation de flux de travaux comporte un thème qui définit le style du bouton en orange. Le contexte dans lequel vous visualisez le bouton détermine la couleur du bouton :
  • Si vous ouvrez le kit d'outils dans Designer et que vous ajoutez le bouton à une page ou à une vue, la présentation affiche le bouton en bleu.
  • Si vous ouvrez l' automatisation du flux de travaux dans le concepteur et que vous ajoutez le bouton à une page ou à une vue, la présentation affiche le bouton en orange.
  • Si vous exécutez l' automatisation de flux de travaux, le navigateur affiche le bouton en orange.
En plus du style que vous pouvez appliquer via un thème, vous pouvez également appliquer le style d'une autre manière dans le concepteur. La liste ci-dessous répertorie les différentes méthodes d'application d'un style à une vue, les premières méthodes étant prioritaires sur celles situées plus bas dans la liste :
  1. Classes et attributs ajoutés dans la page Attributs HTML des propriétés d'agencement de la vue.
  2. Style inclus dans la feuille de style CSS en ligne du comportement de la vue. Pour éviter les conflits de noms de classe, utilisez le CSS en ligne pour développer temporairement des styles CSS. Une fois les styles développés, placez-les dans un script inclus.
  3. CSS dans les scripts inclus dans le comportement de la vue.
  4. Ensemble de définitions de style dans le style dynamique du comportement de la vue.
  5. Définitions CSS définies par le thème de l' automatisation de flux de travaux ou du kit d'outils.
Il existe également un hiérarchie que vous pouvez utiliser pour appliquer un style à des vues individuelles. Les valeurs de style d'une vue dans un conteneur remplacent les valeurs définies par le conteneur. Par exemple, une automatisation de flux de travaux possède un thème qui définit le style de toutes ses vues pour utiliser la couleur principale (bleu). Toutefois, si vous appliquez un style à une instance de bouton dans une page de cette automatisation de flux de travaux pour utiliser la couleur Réussite (vert), ce bouton est vert. Les contrôles dans le kit d'outils de l'interface utilisateur permettent de styliser des instances par le biais des options de configuration.