Acteurs REDY / Partie 4

Sommaire

Tutoriel 7: les acteurs métiers natifs du REDY - Part 4: Navigation

Les 5 scènes de l’application d’exploitation sont finalisées. Nous allons les intégrer dans une nouvelle scène principale avec la navigation

Construction de l’ossature de la scène

Créer une nouvelle scène et renommer le label de la scène en sceneHome et le nom avec Scène principale puis déployer
- ajouter une propriété de scène de type texte dans Paramêtres > Gestion des propriétés paramètres
- définir label avec scene et Nom de la propriété avec Scène
- définir la propriété de scène Scène avec le texte sceneJournal
Remarque: pour rappel, les paramêtres de scène permettent de piloter les scènes et définir des raccourcis vers des scènes spécifiques. Voir tutoriel 4 sur la navigation
Modifier la scène principale de la SynApp avec la scène Scène principale
Sélectionner la scène sceneJournal pour la ranger dans un dossier
- modifier la propriété Dossier avec le dossier Scènes
Modifier également le dossier des 4 autres scènes sceneEtat, sceneGrapher, sceneAgenda et sceneDashboard
Sélectionner la scène sceneHome et définir l’acteur principal avec un acteur Empilement qui contiendra uniquement le grapheur
- renommer le Label avec stackRoot
Ajouter un acteur enfant de type Empilement qui contiendra la zone de titre avec la navigation
- renommer le Label avec stackHeader
- modifier la propriété Spécifiques > Orientation en Horizontal
- modifier la propriété Aspect > Couleur de fond avec la couleur #f3f3f3
- réinitialiser la propriété Gabarit > Hauteur avec la valeur par défaut [vide]
Ajouter un acteur enfant de type HTML qui contiendra la zone de titre avec la navigation
- renommer le Label avec htmlTitle
- Modifier la propriété Spécifiques > Contenu avec le texte suivant
```
 {{title}}
```
- compléter le contenu en créant les propriétés additionnelle icon et title de type texte
- modifier la propriété Spécifiques > icon avec le texte icon-appointment-agenda
- modifier la propriété Spécifiques > title avec le texte title
- modifier la propriété Aspect > Police > Taille avec le texte 5em
- modifier la propriété Position > Align. vertical en Centré
- modifier la propriété Position > Align. horizontal en Gauche
- modifier la propriété Gabarit > Marge > Marge ext. gauche en 20px
Sélectionner l’acteur stackRoot et ajouter un acteur enfant de type Empilement qui définira une barre de séparation en la zone en-tête et la scène courante
- renommer le Label avec stackLine
- modifier la propriété Aspect > Couleur de fond avec #4b0082
- modifier la propriété Gabarit > Hauteur avec 8px
Sélectionner l’acteur stackRoot et ajouter un acteur enfant de type Ecran qui contiendra la scène courante
- renommer le Label avec screenMain
- modifier la propriété Position > Align. vertical en Etendre
- réinitialiser la propriété Gabarit > Hauteur avec [vide]
- lier la propriété Spécifiques > Scène avec la propriété Scène de la Scène principale en lecture et écriture
  
  Remarque: signification de lecture et écriture sur les liaisons
  - lecture: lorsque la Scène de la Scène princiaple change alors celle de l’acteur screenMain change également
  - écriture: lorsque la Scène de l’acteur screenMain écran change alors la Scène de la Scène princiaple change également
  - La liaison est bidirectionnelle
Sélectionner l’acteur stackHeader et ajouter un acteur enfant de type Empilement qui contiendra les 5 boutons de navigation entre les scènes
- renommer le Label avec stackNav
- réinitialiser la propriété Gabarit > Hauteur avec [vide]
- modifier la propriété Spécifiques > Orientation en Horizontal
- modifier la propriété Aspect > Police > Alignement texte en Centre
- modifier la propriété Aspect > Police > Taille en 2em
- modifier la propriété Position > Align. horizontal en Droite
Sélectionner l’acteur stackNav et ajouter un acteur enfant de type Navigation qui permettra de naviguer sur le journal
- renommer le Label avec buttonNavJrnl
- modifier la propriété Spécifiques > Contenu avec
```
 
 {{title}}
```
- compléter le contenu en créant les propriétés additionnelle icon et title de type texte
- modifier la propriété Spécifiques > icon avec le texte icon-appointment-agenda
Remarque: icon-appointment-agenda est défini dans une librairie d’icones intégrée à SynApps provenant de WebHostingHub
- modifier la propriété Spécifiques > title avec le texte Journal
- lier en librairie le contenu en créant un nouvel élément de librairie contentButtonNav
 
 Remarque: nous ajoutons ce contenu en librairie car les 5 boutons aurons le même contenu. La maintenabilité de la SynApp sera ainsi simplifiée en cas de modification
- modifier la propriété Spécifiques > Scène avec la scène Journal avancé
- modifier la propriété Spécifiques > Acteur de visualisation avec l’acteur de visualisation screenMain
- modifier la propriété Aspect > Couleur de fond avec la couleur #4b0082
- modifier la propriété Gabarit > Largeur avec la taille 220px
- Le bouton de navigation doit resembler à ceci
Dupliquer l’acteur navigation pour configurer la navigation sur les états
- renommer le Label avec buttonNavState
- modifier la propriété Spécifiques > icon avec icon-abacus
- modifier la propriété Spécifiques > title avec Etats
- modifier la propriété Spécifiques > Scène avec la scène Etats avancé
- modifier la propriété Aspect > Couleur de fond avec la couleur #9400d3
Dupliquer l’acteur navigation pour configurer la navigation sur l’agenda
- renommer le Label avec buttonNavAgenda
- modifier la propriété Spécifiques > icon avec icon-calendarthree
- modifier la propriété Spécifiques > title avec Agenda
- modifier la propriété Spécifiques > Scène avec la scène Agenda
- modifier la propriété Aspect > Couleur de fond avec la couleur #0000ff
Dupliquer l’acteur navigation pour configurer la navigation sur le grapheur
- renommer le Label avec buttonNavGraph
- modifier la propriété Spécifiques > icon avec icon-stocks
- modifier la propriété Spécifiques > title avec Grapheur
- modifier la propriété Spécifiques > Scène avec la scène Grapheur
- modifier la propriété Aspect > Couleur de fond avec la couleur #5bc0de
Dupliquer l’acteur navigation pour configurer la navigation sur le tableau de bord énergies
- renommer le Label avec buttonNavGraph
- modifier la propriété Spécifiques > icon avec icon-speed
- modifier la propriété Spécifiques > title avec Energie
- modifier la propriété Spécifiques > Scène avec la scène Tableau de bord énergies
- modifier la propriété Aspect > Couleur de fond avec la couleur #ff8000
Déployer, éxécuter et vérifier que la navigation fonctionne correctement.

2 problèmes subsistent:
- Le titre et icône en haut à gauche ne changent pas
- La couleur de la barre horizontal de séparation (entre l’en-tête et la scène secondaire) reste également inchangée. Elle est sensée être de la même couleur que le bouton de navigation de la scène sélectionnée

Finalisation de la SynApp

Nous allons définir les comportements des titres, icônes et barre horizontal avec des liaisons à la scène sélectionnée et des fonctions de transformations

Sélectionner l’acteur htmlTitle pour définir l’icone en fonction du bouton de navigation de la scène secondaire sélectionnée
- lier en interne la propriété Spécifiques > icon à la propriété Scène de la scène Scène principale en lecture uniquement
- editer le script de transformation lecture
- copier le script suivant qui va retourner l’icone défini dans le bouton de navigation de la scène sélectionnée
```
  var currentSceneKey = context.synoStage.get('scene');
  var stackNav = context.synoStage.findByLabel('stackNav');
  var buttonNavCurrent = stackNav.get('actors').findBy('displaySceneKey', currentSceneKey);
  return buttonNavCurrent.get('icon');
```
  - Ligne: 1 recherche la scène secondaire sélectionnée
    var currentSceneKey = context.synoStage.get('scene');
  - Ligne 2: recherche l’acteur stackNav dans la scène principale
    var stackNav = context.synoStage.findByLabel('stackNav');
  - Ligne 3: retourne les acteurs enfants de stackNav, cad: les 5 acteurs navigation
    var buttonNavCurrent = stackNav.get('actors')...
  - Ligne 3 suite: recherche l’acteur navigation qui navigue sur la scène secondaire sélectionnée
    ...findBy('displaySceneKey', currentSceneKey);
  - Ligne 4: retourne la propriété icon de l’acteur de navigation
    return buttonNavCurrent.get('icon');
  Pour résumer:
  - le script identifie l’acteur de navigation correspondant à la scène courante puis
  - retourne sa propriété icon
Sélectionner l’acteur htmlTitle pour définir le titre en fonction du bouton de navigation de la scène secondaire sélectionnée
- lier en interne la propriété Spécifiques > title à la propriété Scène de la scène Scène principale en lecture uniquement (comme pour l’icone)
- définir le script de transformation en lecture
- copier le script suivant qui va retourner le titre défini dans le bouton de navigation de la scène sélectionnée (même mécanisme que pour l’icône)
```
  var currentSceneKey = context.synoStage.get('scene');
  var stackNav = context.synoStage.findByLabel('stackNav');
  var buttonNavCurrent = stackNav.get('actors').findBy('displaySceneKey', currentSceneKey);
  return buttonNavCurrent.get('title');
```
  Remarque: le script est identique à celui de l’icône à l’exception de la dernière ligne qui retourne la propriété title définie dans le bouton de navigation
Sélectionner l’acteur stackLine pour définir la couleur de fond en fonction du bouton de navigation de la scène secondaire sélectionnée
- lier en interne la propriété Aspect > Couleur de fond à la propriété Scène de la scène Scène principale en lecture uniquement (comme pour l’icone)
- définir le script de transformation en lecture
- copier le script suivant qui va retourner la couleur de fond défini dans le bouton de navigation de la scène sélectionnée (même mécanisme que pour l’icône)
```
  var currentSceneKey = context.synoStage.get('scene');
  var stackNav = context.synoStage.findByLabel('stackNav');
  var buttonNavCurrent = stackNav.get('actors').findBy('displaySceneKey', currentSceneKey);
  return buttonNavCurrent.get('backgroundColor');
```
  Remarque: le script est identique à celui de l’icône à l’exception de la dernière ligne qui retourne la propriété backgroundColor définie dans le bouton de navigation
Déployer, éxécuter et vérifier que la navigation fonctionne désormais correctement:
- Le titre et icône en haut à gauche changent
- La couleur de la barre horizontal de séparation (entre l’en-tête et la scène secondaire) est désormais de la même couleur que le bouton de navigation de la scène sélectionnée

Que retenir

Nous avons réalisé une application d’exploitation simple contenant des acteurs métiers natifs augmentés avec des filtres pour améliorer l’expérience utilisateur

Nous avons également intégré le tableau de bord multi-énergies du REDY avec un acteur IFrame intégrant l’URL d’exploitation du tableau de bord dans le REDY composé avec notamment la session utilisateur

Enfin, nous avons mis en place une navigation avancée avec des scripts de transformation permettant d’améliorer le visuel de la scène sélectionnée

Nous avons utilisé des librairies d’icones qui sont embarquées dans SynApps et qui peuvent être affichées simplement dans des acteurs avec contenu HTML avec le code ci-dessous

<span class="[icon]"></span>

Vous pouvez visualiser les icones disponibles:

Conclusion

Le principal intérêt des acteurs métiers natifs sont leur simplicité d’usage: peu ou pas de configuration pour fonctionner !

Vous pouvez également créer vos propres acteurs métiers réutilisables avec les composites et ainsi améliorer votre productivité, voir tutoriel sur les composites

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

Tutoriel suivant sur les tailles

✔️ FR IT

❔ Posez une Question 💡 Proposez une Suggestion 💬 Venez discuter

made by

Tutoriel 7: les acteurs métiers natifs du REDY - Part 4: Navigation

Construction de l’ossature de la scène

Finalisation de la SynApp

Que retenir

Conclusion