Définitions de style et d'état
Définitions de style
L'ensemble des couleurs, des formats de texte et des formats de ligne sont gérés et représentés dans l'environnement de l'application composite à l'aide d'entités de définitions de style. Une définition de style est un jeu d'éléments de style HTML pouvant s'appliquer à un widget, tout comme vous appliqueriez une feuille de style CSS à une balise HTML.
Elaboration et utilisation de définitions de style
Lorsque vous créez un style, les propriétés suivantes peuvent être définies :
• Chaîne affichée : chaîne descriptive qui s'affiche pour indiquer la définition de style actuellement appliquée.
• Couleur d'arrière-plan : arrière-plan pour les graphiques, les boutons, les panneaux, etc.
• Couleur d'arrière-plan secondaire : pour les widgets prenant en charge les gradients.
• Gras (vrai/faux)
• Italique (vrai/faux)
• Souligné (vrai/faux)
• Image : si le style de votre widget prend en charge les affichages d'image, tels que les boutons, vous pouvez sélectionner une image pour représenter le style d'image.
• Couleur de trait : applicable au style de crayon dans les graphiques.
• Epaisseur de trait : applicable au style de crayon dans les graphiques.
• Style de trait : concerne généralement les bordures. ThingWorx propose les options suivantes : Continu, Tirets, Pointillés, Aucun.
• Taille du texte : choisissez une taille de police de 9 à 72 px.
Il existe de nombreuses définitions de style préinstallées. Il est conseillé de créer les vôtres afin de créer une apparence cohérente pour les composants de vos applications composites.
Définitions d'état
Une définition d'état est un jeu de définitions de style, associées à des règles régissant l'application de chaque définition de style. Conjointement, la règle et la définition de style forment un état. Une définition d'état doit avoir plusieurs états. Cela vous permet d'appliquer un formatage basé sur l'état aux cellules d'un tableau, par exemple, selon la valeur d'une colonne du service de données associé au tableau.
Lorsque vous appliquez une définition d'état à un widget, vous devez également choisir le champ du jeu de données du widget par rapport auquel vous souhaitez évaluer la règle. Vous pouvez ainsi utiliser des champs autres que la colonne visible de données afin de déterminer l'état.
Elaboration et utilisation de définitions d'état
Lorsque vous créez une définition d'état, vous devez appliquer le type d'état (Chaîne/valeur ou Numérique). La définition d'un type Chaîne/valeur applique la définition de style à une correspondance exacte. La définition d'un type Numérique applique la définition de style à n'importe quel chiffre dans une plage spécifiée.
Lorsque vous élaborez une définition d'état Chaîne/valeur, définissez les champs suivants pour chaque état :
• Chaîne/valeur : chaîne à faire correspondre.
• Nom affiché : plutôt que d'utiliser une valeur de correspondance, utilisez ce champ pour indiquer, par exemple, qu'une pompe est en fonctionnement au lieu d'être à l'arrêt. Ce nom s'affiche également lors de la liaison dynamique de valeurs d'état (voir ci-dessous).
• Style : définition de style à appliquer à une correspondance.
Lorsque vous élaborez une définition d'état Numérique, définissez les champs suivants pour chaque état :
• Opérateur : sélectionnez Inférieur ou égal à ou Inférieur à.
• Valeur : valeur numérique.
• Nom affiché : nom utilisé pour étiqueter l'état au moment de l'exécution. Ce nom s'affiche également lors de la liaison dynamique de valeurs d'état (voir ci-dessous).
• Style : définition de style à appliquer à une correspondance.
Remplacement de définitions d'état
Il est important de noter que vous pouvez élaborer une définition d'état de manière plutôt générique, et recourir à des règles spécifiques lorsque cet état est appliqué à un objet. Par exemple, vous pouvez avoir un scénario type dans lequel il existe une condition Bas-Bas, une condition Bas, une condition Normal, une condition Haut et une condition Haut-Haut. Vous souhaitez utiliser la palette de couleurs suivante chaque fois que ce concept s'applique :
• Bas-Bas : orange
• Bas : jaune
• Normal : vert
• Haut : violet
• Haut-Haut : rouge
Cependant, la plage numérique réelle peut être différente pour différents points de données, même si les cinq conditions sont identiques. Plutôt que d'élaborer une définition d'état pour chaque point de données, vous pouvez appliquer la même définition d'état, mais remplacer les plages de valeurs numériques réelles dans le cadre de cette application spécifique d'une définition d'état à un widget. Cette opération s'effectue dans la configuration de widget.
Il existe deux moyens de remplacer la définition d'état :
• Sélectionnez la définition d'état à utiliser pour un widget spécifique et entrez des valeurs spécifiques de widget dans la boîte de dialogue de configuration Rendu et état.
• Liez les valeurs d'état à un service de données. Lorsque vous choisissez une définition d'état à appliquer à un widget, des propriétés supplémentaires sont ajoutées au panneau de propriétés du widget, une pour chaque état dans une définition d'état. Les propriétés supplémentaires sont nommées ValueFormat_<Display Name>, où Display Name désigne le nom que vous avez appliqué dans la définition d'état originale. Vous pouvez ensuite lier une valeur de tout service de données à ces propriétés, ce qui vous permet de définir dynamiquement les limites d'une définition d'état, et de la rendre totalement orientée données.