Création de modèles (templates)
Les modèles sont créés de la même manière qu’un nouveau graphique, l’utilisateur ajoutera des objets au document Modèle et l’enregistrera en tant que nouvel objet. Comme expliqué dans la Présentation, les modèles peuvent avoir des balises internes, ce qui les rend génériques et réutilisables. Suivez les étapes ci-dessous pour créer un modèle simple avec des balises internes à partir de zéro, ajoutez-le à un écran graphique, exécutez l’application et vérifiez le résultat final.
1. Nouveau modèle
La première étape consiste à créer un nouveau document modèle. Cela peut être fait en cliquant avec le bouton droit sur le nœud Modèles dans le projet et en sélectionnant « Nouveau document ». Les modèles peuvent être organisés en dossiers si nécessaire.
Un nouveau modèle est créé et tous les objets graphiques sont disponibles sur le ruban graphique pour être inclus dans ce nouveau modèle. Il existe des fonctionnalités importantes dans la zone Modèle et la Grille de propriétés. La zone de modèle peut recevoir n’importe quel objet graphique disponible dans le ruban supérieur et la grille de propriétés permet de configurer les balises d’objet (similaire aux balises d’écran). La fonction de balises d’objet permet aux modèles d’être génériques puisqu’ils ne sont pas réellement des balises d’application.
2. Ajout d'objets au modèle
Maintenant que nous avons créé un modèle vide, avançons de quelques étapes pour créer l’interface du modèle. L’image ci-dessous montre l’interface utilisateur du modèle. Ce modèle est une jauge booléenne animée pour afficher si une balise est vraie ou fausse. Il affichera également une chaîne Titre qui sera définie lorsque le modèle est réellement ajouté à un écran.
Jusqu’à présent, le modèle n’a aucune animation. Il contient essentiellement des rectangles, des étiquettes, un cercle et un polygone dessinés comme une flèche. Le marqueur central de la flèche a également été déplacé au centre du cercle pour lui permettre de passer de l’étiquette ON à l’étiquette OFF tout en basculant l’angle de 0 à 180. Donnons un meilleur nom au Polygone puisqu’il sera utilisé plus tard. Cela peut être fait en sélectionnant l’objet et en changeant la propriété Name en « Aiguille ».
3. Ajout de balises d'objet
Le titre du Template sera un paramètre et l’animation que l’on souhaite réaliser se fera sur l’angle de la flèche et elle changera en fonction d’une valeur booléenne. Nous aurons besoin de 2 balises d’objet comme indiqué dans l’image ci-dessous
Lors de l’ajout de balises d’objet, un type peut être spécifié. Il peut s’agir d’un type de données, des types de base ou d’un type générique (ce qui rend le modèle plus puissant)
Deux balises d’objet configurées. title comme chaîne et val comme booléen
4. Utilisation des balises d'objet
Après avoir créé les balises d’objet, nous pouvons les utiliser dans les objets. La balise de titre sera ajoutée à l’étiquette en haut et la balise val sera utilisée pour calculer l’angle de la flèche.
Le jeton # est utilisé pour attribuer une balise d’objet. Dès qu’il est ajouté à un script ou à un champ qui accepte les balises, ADISRA SmartView affichera une saisie semi-automatique avec toutes les balises d’objet disponibles.
Ajout du #title (titre) à la propriété Text du label (étiquette)
Pour animer la jauge, nous allons changer l’angle du polygone nommé « Aiguille » de 0 à 180 à chaque fois que la balise #val change de valeur. Les balises d’objet permettent de configurer des scripts à cette fin. S’il vous plaît jeter un oeil à l’image ci-dessous.
Le script On Change mis en évidence ci-dessus sera exécuté à chaque fois que la balise change de valeur. L’étape suivante consiste à écrire un script c# pour effectuer l’animation. Dès que le bouton On Change est sélectionné, la boîte de script sera affichée
Le jeton # affiche les balises d’objet disponibles.
Le jeton # affiche les balises d’objet disponibles. Si #val est vrai, l’angle de l’aiguille est de 0, sinon il est de 180. Veuillez revoir le script ci-dessous.
if (#val)
{
Needle.Angle = 0;
}
else
{
Needle.Angle = 180;
}
Après avoir confirmé le script, le bouton On Change lié à la balise #val devient vert indiquant qu’il existe un script valide. S’il y a une erreur, il devient rouge.
