Tutoriel 7: les acteurs métiers natifs du REDY - Part 2: Etats

L’acteur état fonctionne également sans la moindre configuration. Plusieurs propriétés spécifiques permettent de personnaliser et filtrer son rendu. Ces propriétés sont explicites et comme pour le journal nous ne rentrerons pas dans le détail de chacune d’entre elles ! etats_properties

Nous allons intégrer l’acteur états dans une adaptation de la scène évoluée du journal précédente avec le même type de barre de commande permettant de configurer le comportement et les filtres des états

Configuration de la scène

Plutot que de configurer une nouvelle scène, nous allons dupliquer la scène du journal précédente et l’adapter à l’acteur états

Cloner la scène sceneJournal et renommer le label de la scène en sceneEtat et le nom avec Etats avancés puis déployer
Sélectionner l’acteur journal et supprimer le

Remarque: une erreur de script apparait car une fonction de transformation en lecture essaye de localiser le journal
Déployer et appuyer sur F5 pour rafraichir la scène: des erreurs de validation apparaissent sur la scène concernant les liaisons intenes, vers le journal, désormais invalides
- Par exemple sur l’acteur buttonFilters les propriétés Sépcifiques > Ensemble et Période
  
  Remarque: ces erreurs sont normales car consécutivent à la suppression du journal et vont être corrigées
Sélectionner l’acteur stackRoot et ajouter un acteur enfant de type Etat
- renommer le Label avec etats
- modifier la propriété Spécifiques > Align. vertical en Etendre
Sélectionner l’acteur htmlInfo
- modifier la propriété Spécifiques > Contenu avec le code HTML
```
Etats <span class="badge" style="font-size:1em">{{nbEtats}}</span> ressources
```
- compléter le contenu en créant la propriété additionnelle nbEtats de type nombre
- éditer les propriétés additionnelles dans Additionnelles > Gestion des propriétés additionnelles. Supprimer nbEvents et définir nom et description de nbEtats
- Lier en interne la propriété Spécifiques > Nombre d’états à la propriété Spécifiques > Nombre filtré de l’acteur etats en lecture uniquement
Sélectionner l’acteur switchButtonMode qui permettra désormais le passage du mode tableau au mode vignette de l’acteur etats
- modifier la propriété Spécifiques > Text On avec le texte Tableau
- modifier la propriété Spécifiques > Text Off avec le texte Vignette
- modifier la propriété Spécifiques > Style Off avec la sélection Info
Sélectionner l’acteur periodFilter et supprimer le car il n’est pas utile dans le contexte de l’acteur etats
Sélectionner l’acteur stackCmd et ajouter un acteur enfant de type Boite de texte qui permettra de définir une zone de recherche dans les états
- renommer le Label avec textboxSearch
- remonter la position de l’acteur entre switchButtonMode et buttonFilters
- modifier la propriété Position > Align. horizontal en centré
- réinitialiser la propriété Spécifiques > Valeur avec [vide]
- définir la propriété Spécifiques > Texte d’aide avec Recherche
- définir la propriété Spécifiques > Type d’input avec Recherche
- modifier la propriété Spécifiques > Taille avec 50px
Sélectionner l’acteur buttonFilters et corriger les 2 liaisons
- Lier en interne la propriété Spécifiques > selSet (ou nom personnalisé que vous avez défini) à la propriété Spécifiques > Ensemble de l’acteur états
- Editer le Script de lecture de la propriété avec le javascript
```
 const etats = context.synoStage.findByLabel('etats');
 return etats.get('setName');
```
  Remarque: on récupère le nom de l’ensemble sélectionné comme pour le journal
- Lier en interne la propriété Spécifiques > period (ou nom personnalisé que vous avez défini) à la propriété Spécifiques > Période de l’acteur états
Sélectionner l’acteur htmlPeriod et corriger la liaison
- Lier en interne la propriété Spécifiques > period (ou nom personnalisé que vous avez défini) à la propriété Spécifiques > Période de l’acteur états
Sélectionner l’acteur etats et définir les liaisons
- Lier en interne la propriété Spécifiques > Filtre du nom avec la propriété Spécifiques > Valeur de textboxSearch
- Lier en interne la propriété Spécifiques > Mode à la propriété Spécifiques > Valeur de l’acteur switchButtonMode en lecture uniquement
- Editer le Script de lecture de la propriété Spécifiques > Mode avec le javascript le javascript
```
  return context.value ? 'GRID' : 'THUMBNAILS';
```
  Remarque: la propriété Mode de l’acteur état attend une valeur de type texte avec les valeurs GRID ou THUMBNAILS pour afficher respectivement les états sous la forme d’un tableau ou de vignettes. Actuellent, rien ne permet de savoir que ces valeurs sont attendues ! nous proposerons rapidement une mécanisme pour connaître les valeurs possibles sur les listes fermées
- Lier en interne la propriété Spécifiques > Période à la propriété Spécifiques > Valeur de l’acteur sliderPeriod en lecture uniquement
- Editer le Script de lecture de la propriété Spécifiques > Période pour arrondir à un entier la valeur du curseur avec le javascript
```
  return Math.round(context.value);
```
- Lier en interne la propriété Spécifiques > Ensemble à la propriété Spécifiques > Ensemble de l’acteur setFilter en lecture uniquement

Les liaisons sont configurées, la scène états avancés est terminé

Test et éxécution

Déployer, éxécuter et vérifier que tout fonctionne correctement

Basculement entre mode de représentation tableau et vignettes
Nombre de ressources
Zone de recherche
Sélection/déselection de l’ensemble
Nombre d’ensembles
Période de rafraichissement actuelle

execute2

Que retenir

Nous avons mis en oeuvre l’acteur états qui fonctionne sans aucune configuration en adaptant la scène journal. Il est parfois plus rapide de partir d’une scène éxistante et l’adapter au besoin plutot que de partir d’une scène vide !

Comme pour le journal, vous pourrez faire évoluer la scène pour répondre précisemment à vos besoins. Par exemple: ajouter de nouveaux filtres dans la fenêtre modale:

Groupes, Zones et Equipements: propriété Spécifiques > Equipements, Zones et Groupes de l’acteur états
Nombre maximum d’événements affichés dans la page: propriété Spécifiques > nombre d’événements du journal
etc

Conclusion

La deuxième partie du tutoriel 7 portant sur l’ acteur métier natif états est terminée. Nous avons construit 2 scènes avancées avec le journal et les états. Ils manquent encore quelques acteurs métiers natifs pour réaliser une application d’exploitation simple: les acteurs agenda et grapheurs

Vous pouvez remonter les bugs & remarques concernant ce tutoriel, SynApps RUNTIME & MAKER sur GitHub

Tutoriel suivant

✔️ FR IT

❔ Posez une Question 💡 Proposez une Suggestion 💬 Venez discuter

made by