Exemple : Création d'un coach pour tablettes et téléphones intelligents

Cet exemple indique comment créer un coach qui modifie le mode d'affichage de son contenu selon que les utilisateurs visualisent le coach dans un navigateur de bureau, sur une tablette ou sur un téléphone intelligent.

Cet exemple crée un coach appelé Rapport d'inspection. Dans ce scénario, un inspecteur chargé de la santé et de la sécurité arrive sur un lieu de travail. Il utilise une tablette ou un téléphone intelligent pour créer le rapport initial. Il le sauvegarde ensuite en tant que brouillon. Plus tard, l'inspecteur rentre à son bureau et ouvre le rapport sur un ordinateur de bureau ou un ordinateur bloc-notes. Il ajoute des informations complémentaires au rapport initial. Il soumet ensuite le rapport final. Pour prendre en charge ce scénario, le coach de l'exemple utilise une présentation différente pour répondre aux besoins des tailles d'écran (téléphone intelligent, tablette et ordinateur). Le Coach contient deux vues Coach : VC Constatations et VC Inspection. La VC Constatations contient les informations saisies par l'inspecteur en vue de l'inspection tandis que la VC Inspection contient des informations qui ne changent pas. Afin de mettre l'accent sur l'interface utilisateur, l'exemple ci-dessous ne contient aucune donnée.
  • Sur l'ordinateur, l'inspecteur peut visualiser le coach Rapport d'inspection dans son intégralité :
    Coach Rapport d'inspection lors de son exécution sur un ordinateur
  • Sur la tablette, l'inspecteur peut visualiser la partie Constatations du Coach, ainsi que les boutons. La partie Inspection du Coach n'est plus visible.
    Coach Rapport d'inspection lors de son exécution dans un navigateur réduit
  • Pour un smartphone, les boutons sont étirés sur l'écran afin de faciliter la sélection :
    Coach Rapport d'inspection en phase d'exécution dans un navigateur étroit. L'espace entre les cases est réduit.
  1. Créez la vue Coach VC Constatations.
    1. Créez une vue Coach intitulée VC Constatations.
    2. Dans la page Agencement, ajoutez les contrôles suivants dans l'ordre descendant :
      • Section
      • Texte en sortie
      • Section
      • Zone de texte

      Par défaut, la disposition arrange les éléments verticalement de sorte que les contrôles soient empilés les uns sur les autres.

    3. Sélectionnez la première section et changez sa configuration d'Agencement en Horizontal. Répétez cette étape pour la deuxième section.
    4. Dans la première section, ajoutez un contrôle Sélection unique et un contrôle Texte. Renommez le contrôle de sélection en Bâtiment et celui de texte en Zone inspectée.
    5. Renommez le contrôle Texte en sortie en Constatations.
    6. Dans la deuxième section, ajoutez six contrôles Case à cocher. Renommez les cases à cocher en Surcharge, Electricité, Mobilier, Eclairage, Trajet et Autre.
    7. Renommez la zone de texte en Commentaires.

    L'agencement de la vue Coach est similaire à la capture d'écran suivante :

    Vue Coach VC Constatations

  2. Modifiez l'apparence de la vue Coach :
    1. Sélectionnez la première section. Dans les propriétés générales, définissez Visibilité du libellé sur Masquer. Répétez cette étape pour la deuxième section.
    2. Dans les propriétés de configuration de la première section, activez la case Retour à la ligne automatique. Répétez cette étape pour la deuxième section. Lors de la définition de cette propriété, s'il n'y a pas suffisamment de place pour afficher tous les contrôles côte à côte, la section en déplace certains en dessous au lieu d'utiliser une barre de défilement.
    3. Sélectionnez la section horizontale qui contient les cases à cocher. Dans les options de configuration, activez Style > Afficher la bordure.
    4. Cliquez sur Sauvegarderou sur IBM BPM version 8570, groupe de correctifs 2017.03Terminer l'édition.
  3. Créez la vue Coach VC Inspection.
    1. Créez une vue Coach intitulée VC Inspection.
    2. Dans la page Variables, ajoutez les options de configuration suivantes :
      • inspector(String)
      • inspectionDate(Date)
      Lorsque vous créez les options de configuration, assurez-vous de définir leur type sur String et Date.
      Option de configuration inspectionDate avec le type de variable défini sur Date.
    3. Dans la page de la disposition, ajoutez un contrôle Texte et un contrôle Sélecteur de date et heure. Renommez le contrôle de texte en Inspecteur et celui du sélecteur de date et heure en Date d'inspection.
    4. Sélectionnez le contrôle Inspector, puis liez-le à la variable inspector dans ses propriétés générales.
      Propriétés générales du contrôle Inspector affichant sa liaison à la variable inspector.
    5. Cliquez sur Sauvegarderou sur IBM BPM version 8570, groupe de correctifs 2017.03Terminer l'édition.
  4. Créez le service utilisateur côté client d'inspection :
    1. Créez le service utilisateur côté client intitulé Inspection.
    2. Dans le diagramme du service utilisateur côté client, renommez le coach en Rapport d'inspection.
      Connexion du noeud de début au Coach et connexion du Coach au noeud de fin
  5. Définissez la présentation du Coach Rapport d'inspection :
    1. Dans la page Coaches, sélectionnez le coach Rapport d'inspection puis choisissez de démarrer avec une grille à deux colonnes.
    2. Cliquez sur Grille puis ajoutez une grille à une seule colonne sous la grille à deux colonnes. Cliquez sur le bouton d'alignement au milieu de la cellule pour aligner sont contenu horizontalement.
      Process Designer montrant une grille avec deux cellule au-dessus d'une grille avec une seule cellule.
    3. Dans la grille à deux cellules, faites glisser la bordure entre les deux cellules afin que la cellule de gauche occupe 8 des 12 colonnes. L'éditeur affiche les colonnes lorsque vous commencez à faire glisser la bordure.
    4. Cliquez sur Contenu pour passer en mode contenu.
    5. Faites glisser une section dans la première cellule puis faites glisser une autre section dans la seconde cellule. Renommez la premier section en Constatations et la seconde en Inspection.
      Les deux cellules de la grille supérieure comportent à présent chacune une section.
    6. Ajoutez deux boutons à la grille à une seule cellule puis faites également glisser le bouton OK dans la cellule.
      La cellule unique comporte à présent trois boutons agencés horizontalement : Bouton, Bouton 2 et OK.
    7. Renommez le premier bouton en Annuler, le deuxième en Sauvegarder et le bouton OK en Soumettre le rapport.
    8. Dans la section Constatations, ajoutez la vue Coach VC Constatations. Dans la section Inspection, ajoutez la vue Coach VC Inspection.
      Les deux vues Coach que vous avez créées affichent maintenant leur contenu
    9. Cliquez sur Sauvegarderou sur IBM BPM version 8570, groupe de correctifs 2017.03Terminer l'édition.
    10. Exécutez le service utilisateur Inspection. Le navigateur s'ouvre et affiche le coach.
      Coach Rapport d'inspection lors de l'exécution.
  6. Espacez davantage les contrôles inspectés Bâtiment et Zone. Les éléments de la vue Coach Constatations doivent également être alignés les uns par rapport aux autres.
    1. Ouvrez la vue Coach VC Constatations et sélectionnez le contrôle Bâtiment.
    2. Dans les propriétés de positionnement, définissez le remplissage sur 0px 20px 0px 0px. Dans la zone Remplissage, le premier nombre correspond au remplissage supérieur, le deuxième au remplissage de droite, le troisième au remplissage inférieur et le quatrième au remplissage de gauche.
      Remplissage de droite défini sur 20 pixels dans les propriétés de positionnement du contrôle de sélection Bâtiment

      Vous pouvez également cliquer sur l'icône de position en regard de la zone Remplissage. Dans la fenêtre qui s'ouvre, tapez 20px dans la zone Droite et 0px dans les autres zones. Cliquez sur OK.

  7. Pour supprimer la section Inspection afin d'afficher le coach sur une tablette :
    1. Ouvrez le service utilisateur et passez à l'écran de taille moyenne en cliquant sur Moyen sur la palette.
    2. Cliquez sur Grille et sélectionnez la cellule Inspection. Dans les propriétés de la cellule, définissez sa Visibilité sur Masquer. La palette affiche la cellule en tant qu'élément invisible.
    3. Faites glisser la bordure de la cellule Constatations afin qu'elle occupe la totalité de la grille.
    4. Cliquez sur Sauvegarderou sur IBM BPM version 8570, groupe de correctifs 2017.03Terminer l'édition.
    5. Exécutez à nouveau le service utilisateur. Si la largeur du navigateur est supérieure à 1024 pixels, la section Inspection est visible. Si la largeur est inférieure ou égale à 1024 pixels, la section Inspection devient invisible.
      Coach Rapport d'inspection lors de son exécution dans un navigateur réduit
  8. Pour que les boutons soient plus faciles à utiliser sur un smartphone, étirez-les sur l'écran.
    1. Passez à l'écran de petite taille en cliquant sur Petit dans la palette.
    2. Sélectionnez la cellule contenant les boutons. Dans les propriétés de la cellule, définissez son Orientation sur Vertical.
    3. Cliquez sur Sauvegarderou sur IBM BPM version 8570, groupe de correctifs 2017.03Terminer l'édition.
    4. Exécutez à nouveau le service utilisateur. Si la navigateur fait moins de 640 pixels de largeur, les boutons sont empilés verticalement.
      Coach Rapport d'inspection en phase d'exécution dans un navigateur étroit
Rubrique parent : Exemples de Coach et de vue Coach
Information associée:
Options de positionnement pour les instances de vue Coach