Sommaire

Tutoriel 5: les acteurs composites - Avancé

Dans ce tutoriel, nous allons mettre un oeuvre l’acteur composite qui permet de construire de nouveaux acteurs à partir d’acteurs éxistants. Ces derniers peuvent être soit des acteurs:

  • Natifs: disponibles dans toute SynApp
  • Composites: construits avec le MAKER, ils correspondent à un usage avancé et nécessitent une bonne compréhension du fonctionnement de SynApps

Quelque soit la nature de l’acteur, son usage est identique, la distinction permet donc uniquement de les différencier dans leurs mécanismes de fabrication

Le composite est un élément fondamental de toute SynApp, car il favorise:

  • Réutisabilité: au sein d’une même SynApp et vers d’autres SynApp et utilisateurs via des mécanismes d’import/export

  • Maintenabilité: la modification d’un acteur composite est propagée automatiquement à l’ensemble des scènes qui l’utilise

  • Modularité: construction de scènes complexes par compositions d’acteurs simples et imbriqués

Ils peuvent être classés dans deux grandes catégories:

  • Standard: ils ont une fonction de représentation indépendante d’une source de donnée. Par exemple: une jauge

  • Métiers: ils ont besoin d’une source de données pour fonctionner ou ils utilisent en interne une ressource du REDY. Par exemple: l’acteur journal

Empilement Classement des acteurs par nature et catégorie

Description

L’objectif du tutoriel est la construction d’acteurs composites permettant de visualiser une ressource de type climatiseur

Prerequis

  • Le paramétrage SynApps_Tutorials.BRY installé sur le REDY. Il contient trois ressources préconfigurées nécessaires dans le dossier Tutorial5:
    1. Deux ressource Régulation ventilo-convecteur 2T VTCAtlanticEst et VTCAtlanticWest
    2. Une ressource Compteur/Décompteur Simulateur de changement temp. ambiante
  • Créer une nouvelle SynApp tuto05 avec le MAKER. Modifier le label de la première scène en sceneClims et le nom avec scène climatiseurs puis déployer.

Construction de la scène climatiseurs

  1. Dans la scène courante sceneClims définissez l’acteur principal avec un acteur toile

  2. Ajouter un acteur enfant de type image et définir le fond de plan avec l’image ci-dessous

    • Click droit sur l’image ci-dessous et Enregistrer sous dans un dossier local Empilement

    • Ouvrir le dossier local contenant l’image
    • Glisser/déplacer l’image dans la zone hachurée de la propriété Spécifiques > Image
    • Modifier la propriété Gabarit > Hauteur à la valeur par défaut
    • Modifier également la propriété Gabarit > Largeur à la valeur par défaut

Construction de l’ossature du composite

  1. Sélectionner l’onglet composites et créer un nouvel acteur composite

    Empilement

    • modifier le label du composite en compositeClim et le nom avec Climatiseur
    • modifier la description du composite en Acteur de visualisation et de contrôle d'un climatiseur Empilement

    • Récupérer l’image ci-dessous

      Empilement

    • Glisser/déplacer l’image dans la zone hachurée de la propriété Logo

      Empilement

      Remarques: le logo permet d’identifier visuellement le composite dans l’explorateur d’acteurs. Il est également possible de faire une copie d’écran du composite avec l’icone appareil photo ci-dessus: à tester mais le résultat sera toujours meilleur avec une image adaptée

    • définir la propriété Aspect > Police > Taille à 50px

    Important: les propriétés définies directement sur le composite sont des valeurs par défaut qui seront initialisées lors de l’ajout du composite dans la scène. Elles sont alors modifiables ce qui permet la personnalisation du composite. Ici, nous définissons la police par défaut à 50px directement sur le composite. Cette taille sera modifiable lors de l’ajout du composite dans la scène. Cet aspect est extrémement important: un composite peut être considéré comme une boite noir avec des propriétés publiques personnalisables. Editer le composite revient à ouvrir la boite et définir son comportement. Nous reviendrons sur cet aspect ultérieurement dans le tutoriel

  2. Définissez l’acteur principal avec un acteur Empilement

    • Renommer le Label avec stackClim
    • définir la propriété Aspect > Couleur à un bleu clair #45aadb

  3. Ajouter un acteur enfant de type html qui contiendra la température mesurée courante

    • renommer le Label avec htmlTempCurrent
    • définir la propriété Spécifiques > Contenu avec le texte 
       <span style="white-space: nowrap;"><i class="icon-temperature-thermometer"></i>{{tempCurrent}}°C</span>

      Remarques:

    • l’acteur html est identique à l’acteur text mais est adapté au contenu HTML

    • icon-temperature-thermometer permet d’utiliser une libraire d’icones embarquée dans SynApps

    • créer la propriété proposée tempCurrent de type texte Empilement
    • modifier les informations de la propriété additionnelle tempCurrent dans l’onglet Additionnelles > Gestion des propriétés additionnelles Empilement
    • modifier Nom de la propriété avec Température courante et Description avec Température mesurée par le climatiseur Empilement
    • définir la propriété Spécifiques > Température courante avec la valeur 21 Empilement
    • définir la propriété Aspect > Police > Alignement texte à Centre

  4. Sélectionner l’acteur stackClim et ajouter un acteur enfant de type boite à vue qui adaptera le visuel du climatiseur à la taille de l’écran

    • renommer le Label avec viewBoxClim
    • définir la propriété Position > Align. vertical à Etendre
    • définir la propriété Position > Align. horizontal à Etendre
    • réinitialiser la propriété Gabarit > Hauteur à [vide]

  5. Ajouter un acteur enfant de type toile qui contiendra les différents acteurs du visuel

    • renommer le Label avec canvasClim
    • définir la propriété Gabarit > Hauteur à 150px
    • définir la propriété Gabarit > Largeur à 175px

    Remarque: l’acteur enfant d’une toile doit toujours avoir une dimension fixe. Ici nous définissons la toile avec les dimensions de l’image ci-après.

  6. Ajouter un acteur enfant de type image qui contiendra l’image du climatiseur

    • renommer le Label avec imageClim

    • Récupérer l’image ci-dessous

      Empilement

    • Glisser/déplacer l’image dans la zone hachurée de la propriété Spécifiques > Image
    • Réinitialiser la propriété Gabarit > Hauteur à la valeur par défaut
    • Réinitialiser également la propriété Gabarit > Largeur à la valeur par défaut

  7. Sélectionner l’acteur toile canvasClim et ajouter un acteur enfant de type commutateur image qui affichera le mode hiver/été

    • renommer le Label avec switchImageMode
    • récupérer les 2 images Cold Hot
    • réinitialiser la propriété Gabarit > Hauteur à la valeur par défaut [vide]
    • réinitialiser également la propriété Gabarit > Largeur à la valeur par défaut [vide]
    • modifier la propriété Spécifiques > Texte On avec le texte Chaud
    • modifier la propriété Spécifiques > Texte Off avec le texte Froid
    • désactiver la propriété Spécifiques > Actif
    • glisser la première image dans la zone hachurée de la propriété Spécifiques > Image On
    • glisser la deuxième image dans la zone hachurée de la propriété Spécifiques > Image off Hot
    • modifier la propriété Position > Position gauche avec la taille 5px
    • modifier la propriété Position > Position bas avec la taille 5px

  8. Sélectionner l’acteur toile canvasClim et ajouter un second acteur enfant de type commutateur image qui affichera le mode de fonctionnement on/off

    • renommer le Label avec switchImageOnOff
    • récupérer les 2 images Hot Cold
    • réinitialiser la propriété Gabarit > Hauteur à la valeur par défaut [vide]
    • réinitialiser également la propriété Gabarit > Largeur à la valeur par défaut [vide]
    • modifier la propriété Spécifiques > Texte On avec le texte On
    • modifier la propriété Spécifiques > Texte Off avec le texte Off
    • désactiver la propriété Spécifiques > Actif
    • glisser la première image dans la zone hachurée de la propriété Spécifiques > Image On
    • glisser la deuxième image dans la zone hachurée de la propriété Spécifiques > Image off Hot
    • modifier la propriété Position > Position droite avec la taille 5px
    • modifier la propriété Position > Position haut avec la taille 5px

  9. Sélectionner l’acteur toile canvasClim et ajouter un acteur enfant de type image qui indiquera si le climatiseur est en train de fonctionner

    • renommer le Label avec imageProgress
    • récupérer l’image Hot
    • glisser l’image dans la zone hachurée de la propriété Spécifiques > Image
    • réinitialiser la propriété Gabarit > Hauteur à la valeur par défaut [vide]
    • réinitialiser également la propriété Gabarit > Largeur à la valeur par défaut [vide]
    • modifier la propriété Position > Position gauche avec la taille 70px
    • modifier la propriété Position > Position bas avec la taille 10px

  10. Sélectionner l’acteur Empilement stackClim et ajouter un acteur enfant de type html qui contiendra la température de consigne

    • renommer le Label avec htmlTempCmd
    • définir la propriété Spécifiques > Contenu avec le texte 
      <span style="white-space: nowrap;"><i class="icon-target"></i>{{tempCmd}}°C</span>

      Remarques:

    • l’acteur html est identique à l’acteur text mais est adapté au contenu HTML

    • icon-temperature-thermometer permet d’utiliser une libraire d’icones embarquée dans SynApps

    • créer la propriété proposée tempCmd de type texte
    • modifier les informations de la propriété additionnelle tempCmd dans l’onglet Additionnelles > Gestion des propriétés additionnelles
    • modifier Nom de la propriété avec Température consigne et Description avec Température de consigne
    • définir la propriété _Spécifiques > Température consigne avec la valeur 22 °C Empilement
    • définir la propriété Aspect > Police > Alignement texte à Centre

  11. Vérifier la configuration

    • la zone de prévisualisation Empilement

    • structure des acteurs du composites Empilement

Ajout du composite dans la scène

Seul l’ossature du visuel est finalisée, les propriétés personnalisées et le comportement du composite reste à configurer. Au préalable, nous allons ajouter plusieurs instances du composite dans la scène

  1. Sélectionner la scène climatiseurs Empilement

  2. Sélectionner l’acteur toile canvas1 et ajouter un acteur enfant de type Climatiseur (dans la catégrorie Autres de l’explorateur d’acteurs)

    • renommer le Label avec compositeClimEast
    • modifier la propriété Gabarit > Hauteur avec la taille 300px
    • modifier la propriété Gabarit > Largeur avec la taille 300px
    • modifier la propriété Position > Position gauche avec la taille 200px
    • modifier la propriété Position > Position haut avec la taille 240px
    • vérifier que la propriété Aspect > Police > Taille a bien la valeur de 50px que nous avons configuré au niveau du composite
    • modifier cette propriété avec la valeur 30px et constater que la taille du texte de l’acteur diminue
    • réinitialiser la propriété et constater que la taille est de nouveau 50px Empilement
    • modifier la propriété Aspect > Couleur de fond avec la couleur jaune clair #ffe583

  3. Dupliquer l’acteur Climatiseur compositeClimEast

    • renommer le Label avec compositeClimWest
    • modifier la propriété Position > Position gauche avec la taille 600px
    • modifier la propriété Aspect > Couleur de fond avec la couleur gris clair #e0e0e0 Empilement
    • constater que nous avons personnalisé les 2 instances d’un même composite

Définition des propriétés spécifiques du composite

Nous allons définir les propriétés personnalisées du composite pour pouvoir configurer notamment le mode de fonctionnement été/hiver, marche/arrêt, les températures ambiante et de consigne

  1. Sélectionner le composite Climatiseur

  2. cliquer sur Gestion des propriétés spécifiques dans l’onglet Spécifiques de l’inspecteur du composite Empilement

  3. ajouter une propriété de type Booléen qui permettra de définir si le climatiseur est en marche ou arrêt

    • définir le Label avec le texte onoff
    • définir le Nom de la propriété avec le texte Marche/Arrêt
    • définir la Description avec le texte Climatiseur en Marche/Arrêt

  4. ajouter une propriété de type Nombre qui permettra de définir la température de consigne

    • définir le Label avec le texte tempCmd
    • définir le Nom de la propriété avec le texte Température consigne
    • définir la Description avec le texte Température commandée

  5. ajouter une propriété de type Nombre qui permettra de définir la température ambiante

    • définir le Label avec le texte tempCurrent
    • définir le Nom de la propriété avec le texte Température ambiante
    • définir la Description avec le texte Température mesurée par le climatiseur

  6. ajouter une propriété de type Liste de choix qui permettra de définir le mode de fonctionnement été ou hiver

    • définir le Label avec le texte modeClim
    • définir le Nom de la propriété avec le texte Mode
    • définir la Description avec le texte Mode de fonctionnement
    • Dans la liste de choix définir les 2 éléments été et hiver avec les labels respectifs SUMMER et WINTER Empilement

  7. Vérifier la définition des 4 propriétés spécifiques et fermer le Gestionnaire de propriétés spécifiques en cliquant sur Terminé Empilement

  8. Définir les valeurs par défaut des 4 propriétés spécifiques créées

    • définir la propriété Spécifiques > Marche/Arrêt en sélectionné
    • définir la propriété Spécifiques > Température consigne avec la valeur 20
    • définir la propriété Spécifiques > Température ambiante avec la valeur 23
    • définir la propriété Spécifiques > Mode ambiante avec la sélection Eté

Liaisons des propriétés spécifiques du composite aux acteurs internes

Quatre propriétés spécifiques du composite ont été créées et doivent maintenant être liées aux acteurs internes du composite et ainsi définir le comportement du composite en fonction des valeurs définies dans ces propriétés

  1. Selectionner l’acteur switchImageOnOff

    • lier la propriété Spécifiques > Valeur en interne à la propriété Spécifiques > Marche/Arrêt du composite Empilement Empilement

  2. Selectionner l’acteur htmlTempCurrent

    • lier la propriété Spécifiques > Température courante en interne à la propriété Spécifiques > Température courante du composite (même opération que la propriété précédente)

  3. Selectionner l’acteur htmlTempCmd

    • lier la propriété Spécifiques > Température consigne en interne à la propriété Spécifiques > Température consigne du composite

  4. Selectionner l’acteur switchImageMode

    • lier la propriété Spécifiques > Valeur en interne à la propriété Spécifiques > Mode du composite

    Important: jusqu’a présent les données liéés étaient de même nature

    • Marche/Arrêt du composite et valeur de switchImageOnOff de type booléen
    • Température courante du composite et Température courante de htmlTempCurrent de type nombre

    • dans le cas de switchImageMode la propriété Valeur est de type booléen et la propriété Mode du composite est de type texte: SUMMER ou WINTER. Il faut donc procéder à une conversion ou transformation de la valeur texte en booléen

    • Définir une fonction de transformation en lecture pour transformer le Mode texte en Valeur booléen Empilement
    • Définir la fonction 
       return context.value==="SUMMER"

      Empilement

    Les scripts seront détaillés dans le Tutoriel 6: événements et javascript mais simplement savoir que dans une fonction de transformation context.value contient la valeur de la source de la liaison: ici, la valeur de la proriété Mode du composite.

    _return context.value==="SUMMER" retourne la valeur booléénne true si le mode est SUMMER, sinon false (pour WINTER)

  5. Sélectionner le composite (sans acteurs sélectionnés) et tester son fonctionnement

    • Modifier la propriété Spécifiques > Marche/Arrêt et vérifier que l’image correspondante dans la zone de prévisualisation bascule bien du rouge au clignotant vert/gris
    • Modifier la propriété Spécifiques > Température consigne et vérifier que la consigne dans la zone de prévisualisation change
    • Modifier la propriété Spécifiques > Température ambiante et vérifier qu’elle change dans la zone de prévisualisation
    • Modifier la propriété Spécifiques > Mode et vérifier que l’image correspondante dans la zone de prévisualisation bascule bien de été à hiver Empilement Empilement

Configuration des propriétés spécifiques du composite dans la scène

La définition du composite est finalisée, nous allons maintenant lier les valeurs des propriétés spécifiques de ses instances dans la scène vers une ressource du REDY de type Régulation ventilo-convecteur 2T

  1. Sélectionner la scène climatiseurs

  2. Sélectionner l’acteur compositeClimEast

    • définir la propriété Spécifiques > Température consigne avec la valeur 21
    • définir la propriété Spécifiques > Température ambiante avec la valeur 19
    • définir la propriété Spécifiques > Mode ambiante avec la sélection Eté compositeClimEast

  3. Sélectionner l’acteur compositeClimWest

    • définir la propriété Spécifiques > Marche/Arrêt non sélectionné
    • définir la propriété Spécifiques > Température consigne avec la valeur 25
    • définir la propriété Spécifiques > Température ambiante avec la valeur 19
    • définir la propriété Spécifiques > Mode avec la sélection Hiver

  4. Verifier que les 2 instances du composite, compositeClimEast, compositeClimWest représentent les valeurs définies preview

Le composite fonctionne et les valeurs définies pour les 2 instances du composite dans la scène peuvent sans difficultés être liées à une ressource de type Régulation ventilo-convecteur 2T via une source de donnée, consulter le tutoriel 2 sur les liaisons.

Cela pose cependant plusieurs problèmes:

  • A chaque fois que l’acteur Climatiseur sera ajouté dans une scène, il faudra
    1. definir sa source de donnée principale de type Régulation ventilo-convecteur 2T et
    2. lier les 4 propriétés Spécifiques Marche/Arrêt, Température consigne, Température ambiante ainsi que Mode …
  • Cela ne favorise ni la réutisabilité, ni la maintenabilité
  • L’utilisateur qui utilise le composite dans la scène n’est pas forcemment l’auteur du composite: il ne sait peut-être pas, ni comment, ni quels chemins relatifs de la ressources doivent être liées aux propriétés

C’est le principe de la boite noir, l’utilisateur veut juste ajouter un composite sur la scène, définir sa ressource et tout doit fonctionner ! Et c’est possible avec les composites que nous appelons alors Metiers

Composite Metier lié à une ressource du REDY

Nous pourrions modifier le composite standard précédement créé en composite métier, capable d’exploiter directement une ressource de type Régulation ventilo-convecteur 2T. Mais, plutôt que de modifier le composite éxistant, nous allons en créer un nouveau, métier, capable d’exploiter directement la ressource ci-dessus. Bien sur, il contiendra et exploitera dans ses acteurs internes, le composite précédemment créé

Notre objectif ici est double:

  • Montrer comment les acteurs composites peuvent s’intégrer de façon modulaire
  • Conserver l’acteur composite initial standard pour permettre sa configuration directement dans une scène, voir dans un autre composite métier, lorsque la source de donnée n’est pas une ressource de type Régulation ventilo-convecteur 2T

  1. Sélectionner l’onglet composites et créer un nouvel acteur composite

    Empilement

    • modifier le label du composite en compositeClim2 et le nom avec Climatiseur métier
    • modifier la description du composite en Acteur de visualisation et de contrôle d'un climatiseur avec ressource Régulation ventilo-convecteur 2T
    • modifier la catégorie du composite avec la sélection Métier. Cela permet de retrouver le composite dans cette catégorie dans l’explorateur d’acteurs

    • Récupérer l’image ci-dessous

      Empilement

    • Glisser/déplacer l’image dans la zone hachurée de la propriété Logo Empilement

    • définir la propriété Source de données > Source compositeDatasource

    Important: nous définissons une source de donnée sur le composite afin d’avoir une ressource de travail pour configurer les liaisons. Cette ressource pourra et devra être modifié au moment de l’ajout d’une instance de ce composite dans la scène

    • créer la source de donnée WOS createDatasource
    • parcourir le chemin vers la ressource VTCAtlanticEst dans le dossier Tutorial5 
       : / easy / RESS / R00005 / R0003

    • modifier le nom de la source de donnée par dsVTCAtlanticEst puis cliquer sur Créer defineDatasource

    • modifier la Classe de la donnée pour indiquer la classe de ressource que sait consommer le composite. Cela facilitera la configuration du composite lors de l’ajout dans une scène en indiquant à l’utilisateur le type de ressource à définir. Sélectionner Classe de la donnée pour contraindre le composite à une ressource de type ventilo-convecteur 2T

      defineDatasource defineDatasource

  2. Définir l’acteur principal avec un acteur Empilement

  3. Ajouter un acteur enfant de type Climatiseur

    • renommer le Label avec compositeClimDrived
    • réinitialiser la propriété Gabarit > Hauteur avec la valeur par défaut [Vide]
    • définir la propriété Position > Align. vertical a Etendre
    • définir la propriété Position > Align. horizontal a Etendre
    • lier la propriété Spécifiques > Marche/Arrêt en Source de données bindDatasource
    • saisir VC_Stop dans le Chemin ou utiliser l’explorateur de chemin relatif
    • sélectionner la propriété Valeur et la liaison en lecture Rafraichie et Lier bindDatasource2
    • lier la propriété Spécifiques > Température consigne en Source de données

    Remarque: la valeur du chemin de la ressource VC_Stop retourne true lorsque le climatiseur est arreté et false lorsqu’il est en marche. Hors la propriété Spécifiques > Marche/Arrêt doit avoir la valeur true pour indiquer que le climatiseur est en marche: il faut donc inverser la valeur provenant de la source de données avec un fonction de transformation

    • editer le script de transformation lecture transform2
    • écrire la fonction suivante 
        return !context.value

      Pour rappel context.value retourne la valeur de la source = valeur du noeud VC_Stop

      Le caratere ! signifie not et va donc inverser la valeur de la ressource, ce qui est le comportement souhaité

    • lier la propriété Spécifiques > Température consigne en Source de données avec le chemin VC_Sp, la propriété valeur et la liaison en lecture Rafraichie

    Remarque: la consigne est accessible en écriture mais ne sera pas commandé par l’acteur compositeClim2. C’est un choix que nous avons fait quant au périmêtre métier du composite. Nous commenderons la consigne depuis la scène, la liaison n’est donc pas autorisée en écriture.

    • lier la propriété Spécifiques > Température ambiante en Source de données avec le chemin VC_At, la propriété valeur et la liaison en lecture Rafraichie

    • lier la propriété Spécifiques > Mode en Source de données avec le chemin VC_Cold, la propriété valeur et la liaison en lecture Rafraichie

    Remarque: la valeur du chemin de la ressource VC_Cold retourne true lorsque le climatiseur est en mode hiver et false en mode été. Hors la propriété Spécifiques > Mode doit avoir la valeur WINTER ou SUMMER: il faut donc modifier la valeur provenant de la source de données avec un fonction de transformation

    • editer le script de transformation lecture de Mode avec la fonction suivante 
        return context.value ? "WINTER" : "SUMMER";

      Pour rappel context.value retourne la valeur de la source = valeur du noeud VC_Cold

      Le caratere ? est une instruction conditionnelle qui retournera WINTER lorsque context.value est true sion SUMMER

La définition du composite métier est finalisée ! Les valeurs Spécifiques Marche/Arrêt, Température consigne, Température ambiante et Mode ainsi que la représentation dans la zone de prévisualisation doivent désormains refleter les données de la ressource VTCAtlanticEst

Modifier les valeurs directement dans le paramétrage de la Ressource du REDY puis attendre (max 30 secondes ou forcer le rechargement avec F5) le rafraissement de la source de donnée pour vérifier que le composite reflète bien les modifications

compositeClim2_inspector2 preview5

Modification de la scène par remplacement du composite métier

Nous avons configuré la scène avec 2 intances de composite compositeClim. Hors nous avons désormais un composite métier compositeClim2 qui sait exploiter des ressources Régulation ventilo-convecteur 2T. Nous allons donc supprimer ces 2 instances, les remplacer par notre composite métier puis associer les 2 ressources

  1. Sélectionner la scène climatiseurs

  2. Sélectionner l’acteur compositeClimEast et le supprimer preview5

  3. Sélectionner l’acteur compositeClimWest et le supprimer également

  4. Sélectionner l’acteur toile canvas1 et ajouter un acteur enfant de type Climatiseur métier (dans la catégrorie Métiers de l’explorateur d’acteurs)

    • renommer le Label avec compositeClimEast
    • modifier la propriété Gabarit > Hauteur avec la taille 300px
    • modifier la propriété Gabarit > Largeur avec la taille 300px
    • modifier la propriété Position > Position gauche avec la taille 200px
    • modifier la propriété Position > Position haut avec la taille 240px

  5. Dupliquer l’acteur Climatiseur compositeClimEast

    • renommer le Label avec compositeClimWest
    • modifier la propriété Position > Position gauche avec la taille 600px
    • modifier la propriété Source de données > Source actorDatasource2
    • créer une nouvelle source de donnée WOS createDatasource2
    • parcourir le chemin vers la ressource VTCAtlanticWest dans le dossier Tutorial5 
       : / easy / RESS / R00005 / R0004
    • modifier le nom de la source de donnée par dsVTCAtlanticWest puis cliquer sur Créer defineDatasource2
    • vérifier que l’acteur représente bien les valeurs de la ressource du REDY VTCAtlanticWest

  6. Sélectionner l’acteur toile canvas1 et ajouter un acteur enfant de type Curseur

    • renommer le Label avec sliderEast
    • définir la propriété Gabarit > Largeur avec la taille 400px
    • définir la propriété Position > Position gauche avec la valeur 120px
    • définir la propriété Position > Position haut avec la valeur 630px
    • définir la propriété Source de données > Source avec la source de donnée dsVTCAtlanticEst
    • définir la propriété Spécifiques > Min avec la valeur 15
    • définir la propriété Spécifiques > Max avec la valeur 35
    • définir la propriété Spécifiques > Bar avec la sélection Avant curseur
    • définir la propriété Spécifiques > Couleur bar avec la couleur #ff8000
    • définir la propriété Spécifiques > Interval avec la valeur 0.5
    • lier la propriété Spécifiques > Valeur en source de donnée avec le chemin VC_Sp, la propriété valeur et la liaison en lecture Rafraichie et écriture bindDatasource3

  7. Dupliquer l’acteur sliderEast

    • renommer le Label avec sliderWest
    • définir la propriété Gabarit > Largeur avec la taille 400px
    • définir la propriété Position > Position gauche avec la valeur 600px
    • définir la propriété Source de données > Source avec la source de donnée dsVTCAtlanticWest

  8. Déployer, éxécuter et vérifier que:

    • vous pouvez commander les consignes de température des 2 ressources
    • les températures de consigne sur les 2 instances du composite Climatiseur métier changent en conséquence

Partage du composite

Nous avons réalisé 2 acteurs composites qui repondent au besoin de la SynApp. Hors, il est fort probable que nous souhaitions réutiliser le composite dans d’autre SynApps et le partager avec d’autres utilisateurs

Ultérieurement, SynApps MAKER disposera d’un mécanisme permettant d’importer et exporter tout ou partie des objets d’une SynApp et d’un composite notamment En attendant, il est tout de même possible d’exporter, et d’importer un composite en tant que fichier de paramétrage partiel .WK4 depuis la Configuration du REDY

Nous allons créer une nouvelle SynApp et importer le composite compositeClim créé dans la SynApp tuto05

  1. Lister les SynApps et créer une nouvelle SynApps que vous appelerez Test Import bindDatasource3]

  2. Naviguer dans l’interface de Configuration du REDY et l’onglet Explorateur

  3. Sélectionner le chemin du compoite 
     :easy.SynApps.tuto05.Composites.compositeClim

    bindDatasource3

  4. Cliquer sur le bouton Exporter

  5. Sélectionner le chemin du dossiers des compoite dans la nouvelle SynApp Test Import 
     :easy.SynApps.Test_Import.Composites

  6. Cliquer sur le bouton Choisir un fichier, sélectionner le fichier .WK4 exporté précédemment, et ajouter redyImport

  7. Vérifier que le composite est bien importé redyImport2

  8. Retourner dans SynApps MAKER et nettoyer le cache pour forcer le rechargement du paramétrage de la SynApp depuis le REDY

    Remarque: souvenez vous, SynApps cache les configurations des SynApps pour des questions d’optimisation du temps de chargement. Il se base notamment sur un numéro de build pour savoir si la SynApp a été mise à jour et dans ce cas forcer le rechargement de la SynApp depuis le REDY

    Ici, nous avons importé un paramétrage depuis le REDY, le numéro de build de la SynApp Test Import est donc resté inchangé, c’est pourquoi, nous nettoyons le cache des SynApps dans le navigateur

  9. Rafraichir la SynApp avec F5

  10. Sélectionner l’onglet composites et vérifier la présence du composite Climatiseur dans la SynApp Test Import

Vous pouvez alors créer une scène et utiliser le composite !

Que retenir

Vous avez mis en oeuvre un des concepts fondamentaux de SynApps: les acteurs composites

Ils permettent de construire de nouveaux acteurs à partir d’acteurs natifs ou d’autres composites et ainsi avoir une construction plus modulaire qui favorise maintenabilité et réutisabilité !

Ils permettent également d’avoir des profils utilisateurs de SynApps MAKER de niveaux différents:

  • avancés: capable de construire des acteurs composites plus ou moins évolués
  • standards: capable de d’utiliser ces acteurs composites sans avoir besoin de comprendre comment ils fonctionnent. Principe de la boite noir !

Nous avons vu comment personnaliser les propriétés par défaut de l’acteur composite, par exemple la couleur de fond. Nous avons également défini de nouvelles propriétés qui permettent de personnaliser l’instance d’acteur composite, par exemple, Mode et Températures

Nous avons vu également comment construire des acteurs métiers qui savent exploiter une source de donnée particulière, par exemple une ressource du REDY. En tant qu’utilisateur du composite, il a suffit de définir la source de données de l’acteur composite Climatiseur métier pour que ce dernier soit pleinement opérationnel !

Enfin, en attendant un mécanisme d’import/export natif depuis SynApps MAKER, nous avons importé un composite via le paramétrage partiel du REDY

Conclusion

Le tutoriel 5 sur les acteurs composites est terminé. La maitrise de la création est extrémement importante pour construire des applications ambitieuses, maintenables et réutilisables !

Il est important de bien définir le périmêtre fonctionnel de chaque composite et exposer notamment de façon intelligible ses propriétés personnalisées. La description est également importante pour donner des indications à celui qui va utiliser le composite

L’acteur composite est une fonctionnalité majeure de SynApps et permet de construire un éco-système d’acteurs métiers réutilisables et ainsi priviligier qualité et productivité !

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

Tutoriel suivant sur les événements et fonctions