< Précédent | Suivant >

Leçon 4 : Créer l'interface utilisateur du calculateur

Pour construire le calculateur, utilisez d'abord les assistants EGL, puis l'éditeur Rich UI.

Vous pouvez ajouter des widgets à une page Web en faisant glisser et en déposant du contenu sur la surface de conception de l'éditeur Rich UI. Cette opération et les interactions qui s'ensuivent avec l'éditeur modifient le code source du gestionnaire Rich UI en cours de développement.

Il existe deux sources pour le contenu qui peut être déposé :
  • Une palette de types de widget
  • La vue Données EGL, qui contient des définitions de types de données (composanst Enregistrement EGL, par exemple). Commencez par faire glisser le contenu de cette vue, puis choisissez un type de widget capable d'afficher le type de données sélectionné.

Par défaut, la palette de widgets est à droite de l'éditeur, et la vue des données est en bas à gauche du plan de travail.

Création d'un gestionnaire Rich UI

  1. Dans le projet MortgageUIProject, sélectionnez le dossier EGLSource, puis cliquez sur le bouton Nouveau gestionnaire Rich UI dans la barre de menus.
    L'icône du nouveau gestionnaire Rich UI est la troisième sur quatre dans le deuxième groupe d'icônes de la barre de menus.
  2. Dans la fenêtre Nouveau gestionnaire Rich UI, entrez les informations suivantes :
    1. Dans la zone Package, entrez le nom suivant :
      handlers
    2. Dans la zone Nom du fichier source EGL, entrez le nom suivant :
      MortgageCalculatorHandler
    3. Cliquez sur Terminer.
    Le nouveau gestionnaire s'ouvre dans la vue Conception de l'éditeur Rich UI. EGL crée le package handlers pour vous dans le dossier EGLSource.
    L'éditeur Rich UI s'ouvre dans la vue Conception par défaut et affiche une palette de widgets sur la droite.

Construction de l'interface utilisateur

Pour construire l'interface utilisateur du calculateur :

  1. Créez une variable d'enregistrement.
    1. La vue Données EGL, située par défaut dans le coin inférieur gauche du plan de travail, répertorie toutes les variables primitives et d'enregistrement du gestionnaire qui est actuellement ouvert dans l'éditeur. Cliquez avec le bouton droit sur l'espace vide sous l'entrée du gestionnaire MortgageCalculatorHandler. Cliquez sur Nouveau > Variable EGL.
    2. Dans l'assistant Création d'une variable de données EGL, demandez une nouvelle variable d'enregistrement basée sur le composant Enregistrement MortgageCalculationResult :
      • Vérifiez que la valeur Enregistrement est sélectionnée dans la zone Sélection d'un type.
      • Sélectionnez l'enregistrement MortgageCalculationResult. Il doit figurer en première place dans la liste.
      • Dans la section Propriétés du tableau, désélectionnez Tableau.
      • Dans la zone Entrez le nom de la zone, entrez le texte suivant :
        inputRec
      • Cliquez sur Terminer.
    L'assistant Création d'une variable de données EGL.
    Ce processus crée la déclaration d'enregistrement suivante dans le code source du gestionnaire :
    inputRec MortgageCalculationResult;
    Le processus affiche également la nouvelle variable d'enregistrement dans la vue Données EGL, afin que vous puissiez la faire glisser vers l'éditeur.
    La vue Données EGL contient la variable inputRec.
  2. EGL crée automatiquement un widget GridLayout en tant qu'interface utilisateur initiale. Par défaut, ce widget possède quatre lignes et trois colonnes. Vous pouvez utiliser les différents mécanismes ci-dessous pour faire varier le nombre de lignes et de colonnes :
    1. Cliquez avec le bouton droit sur le widget GridLayout pour mettre en évidence une cellule.
    2. Cliquez sur Supprimer > Ligne.
    3. De la même façon, cliquez avec le bouton droit sur le widget GridLayout pour mettre en évidence une cellule.
    4. Cliquez sur Supprimer > Colonne.
    5. A présent, retournez dans la vue Propriétés qui, par défaut, est l'une des pages à onglets située sous la sous-fenêtre de l'éditeur.
    6. Sur la page Général, affectez la valeur 1 aux propriétés rows et columns.
      La vue Propriétés.
    Le widget GridLayout modifié reste l'interface utilisateur initiale de la page Web, mais contient désormais une seule cellule dans laquelle vous pouvez ajouter du contenu.
  3. Cliquez sur la variable inputRec dans la vue Données EGL et faites glisser cette variable vers la cellule du widget GridLayout dans l'éditeur.
    Déplacement d'un enregistrement depuis la vue Données vers le widget GridLayout.
    EGL affiche la page Configuration des widgets de données de l'assistant Insertion de données. Cette page permet de configurer les widgets créés par EGL en fonction des zones de l'enregistrement que vous avez fait glisser vers l'éditeur.
  4. Sur la page Configuration des widgets de données, apportez les modifications suivantes :
    1. Dans la section Créer des widgets pour, cliquez sur Données modifiables. Cette option détermine les widgets par défaut affichés par EGL dans l'assistant, aucun n'étant limité à la lecture seule.
    2. Dans la colonne Type de widget, pour la zone loanAmount, cliquez sur la valeur en cours, puis sur la flèche vers le bas, et sélectionnez DojoCurrencyTextBox. Ce widget fournit le formatage et la validation des montants.
    3. Conservez le widget par défaut DojoTextField pour le widget interestRate.
    4. Dans la colonne Type de widget, pour la zone term, cliquez sur la valeur en cours, puis sur la flèche vers le bas, et sélectionnez DojoComboBox.
    5. Décochez les cases des zones monthlyPayment et interest. Vous ajouterez plus tard un widget pour la zone des mensualités ; la zone des intérêts ne fait pas partie de cette interface utilisateur.
    6. Modifiez les valeurs dans la colonne Libellé comme suit, y compris les deux-points :
      • Remplacez "loanAmount" par "Montant du prêt :"
      • Remplacez "interestRate" par "Taux d'intérêt :"
      • Remplacez "term" par "Durée :"

      Vous venez de personnaliser les invites pour chacune des premières zones d'entrée sur le formulaire en cours de génération.

    7. Vérifiez que l'option Ajouter le support de formatage et de validation est cochée. Cette option ajoute un libellé et un contrôleur pour chaque widget, avec un gestionnaire de formulaires et les fonctions associées, qui s'appliquent à la totalité du contenu de la nouvelle grille. Ne cochez pas Utiliser un libellé d'erreur pour le support de message d'erreur. Cette option fournit un libellé d'erreur pour les messages d'erreur spécifiques au contrôleur, mais ce tutoriel met en oeuvre d'autres mécanismes pour indiquer qu'une erreur s'est produite.
    8. Regardez l'image suivante. Lorsque votre page est semblable, cliquez sur Terminer.
    La page Configuration des widgets de données avec toutes les zones corrigées.
    La vue Conception s'affiche. Elle contient une nouvelle grille imbriquée à l'intérieur de la grille d'origine et contenant le nouveau contenu.
    Une grille en contient une autre.
  5. Pour enregistrer votre travail, appuyez sur Ctrl+S.
  6. Pour une apparence plus uniforme, ajustez la taille de la deuxième et de la troisième zones de saisie :
    1. Mettez en évidence la zone d'entrée du taux d'intérêt. Les pointillés ne doivent encadrer que cette zone.
      Seule la case qui suit le libellé Taux d'intérêt est mise en évidence.
    2. Dans la vue Propriétés, sur la page Position, affectez la valeur suivante à la propriété width :
      100
      Cette valeur est la même que la largeur par défaut du widget DojoCurrencyTextBox que vous avez utilisée pour le montant du prêt.
    3. Répétez les étapes a et b pour la zone Durée. Cliquez sur la surface d'affichage pour voir la modification.
  7. Définissez les valeurs admises et la valeur par défaut pour la zone de liste déroulante Dojo :
    1. Mettez en évidence la zone Durée, et cliquez sur la page Général de la vue Propriétés.
    2. A côté de la propriété values, cliquez sur les points de suspension (...) pour afficher la fenêtre des valeurs.
      La fenêtre des valeurs.
    3. Entrez le nombre suivant dans la zone Ajouter ou supprimer des chaînes dans la liste :
      5
    4. Cliquez sur Ajouter.
    5. Entrez chacun des nombres suivants, en cliquant sur Ajouter après chaque ajout :
      10
      15
      30
      La fenêtre des valeurs doit ressembler à cette image :
      Chaque nombre dans la fenêtre des valeurs s'affiche sur une nouvelle ligne.
    6. Cliquez sur OK.
  8. Pour vous assurer que l'affichage initial de la zone de liste déroulante inclut la valeur 30, procédez comme suit :
    1. Cliquez sur l'onglet Source de l'éditeur Rich UI.
    2. Définissez la valeur de la durée. Accédez à la ligne où l'enregistrement inputRec est déclaré et ajoutez à la déclaration un bloc de valeurs définies, comme illustré ici :
      inputRec MortgageCalculationResult {term = 30};
      Vous imbriquez la valeur par défaut dans la déclaration, ce qui est la solution la plus simple. Toutefois, vous auriez pu mettre à jour la fonction start() comme suit, avec le même effet :
      function start()
         inputRec.term = 30;
      end
  9. Pendant que vous regardez le code source, vérifiez la déclaration controller ci-dessous, qui associe la variable inputRec.term à la zone de liste déroulante Dojo :
    inputRec_term_controller Controller 
       { @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
    La déclaration controller garantit l'utilisation de la valeur affectée à la variable inputRec.term pour initialiser la zone de liste déroulante.
  10. Pour enregistrer votre travail, appuyez sur Ctrl+S.
  11. Cliquez sur l'onglet Aperçu de l'éditeur Rich UI. La page Web affiche l'écran d'exécution et doit ressembler à cette image :
    Les zones sont affichées, et la zone de liste déroulante contient la valeur d'initialisation.
    Si vous devez actualiser l'affichage, cliquez sur l'icône à droite de la barre d'outils Rich UI, qui est située dans le coin supérieur droit de la page Aperçu et est illustrée ici :
    La barre d'outils Rich UI
  12. Ajoutez un nouveau contenu au widget GridLayout imbriqué, qui contient les détails de l'enregistrement :
    1. Cliquez sur l'onglet Conception de l'éditeur Rich UI.
    2. Cliquez avec le bouton droit sur le widget GridLayout imbriqué, qui est nommé inputRec_ui. Ce nom est affiché en haut de la vue Propriétés.
    3. Sur la page Général de la vue Propriétés, remplacez la valeur de la propriété rows par la valeur suivante :
      6
      Une fois que vous avez cliqué sur la surface de conception, les nouvelles lignes sont affichées sous la ligne Durée.
      Le widget GridLayout imbriqué contient maintenant six lignes.
  13. Ajoutez un second widget GridLayout imbriqué destiné à contenir un bouton Soumettre.
    1. A partir du tiroir Layout de la palette, faites glisser un widget GridLayout vers la première cellule de la première ligne vide.
      Positionnement de la grille.
      Vous allez utiliser le widget GridLayout pour placer le bouton Soumettre et une image animée associée au traitement. Donnez au widget le nom suivant :
      buttonLayout
    2. Cliquez avec le bouton droit sur le nouveau widget pour afficher le menu suivant.
      Suppression d'une ligne.
    3. Sélectionnez Supprimer, puis cliquez sur Ligne. La page Général de la vue Propriétés indique maintenant que la grille contient 2 lignes.
    4. A l'aide de la vue Propriétés ou du menu que vous venez d'utiliser, modifiez la propriété buttonLayout de manière à obtenir une seule colonne. Si vous faites une erreur et souhaitez revenir à un écran précédent, appuyez sur Ctrl+Z.
    5. Lorsque la propriété buttonLayout est active, accédez à la page Présentation de la vue Propriétés. Procédez comme suit pour que la grille soit centrée dans une ligne qui, à part elle, est vide :
      • Remplacez la valeur de la propriété horizontalAlignment par CENTER.
      • Remplacez la valeur de la propriété horizontalSpan par 2.
      Le nouveau widget GridLayout est centré dans la ligne vide.
  14. Pour enregistrer votre travail, appuyez sur Ctrl+S.
  15. Créez un bouton Soumettre et associez-le à une fonction bouchon (stub) :
    1. A partir du tiroir Display and Input de la palette, faites glisser un bouton Dojo vers la cellule supérieure de buttonLayout.
      Faites glisser le bouton sur la première des deux cellules.
    2. Donnez au bouton le nom suivant :
      calculationButton
    3. Sur la page Général de la vue Propriétés, remplacez la valeur de la propriété text par le libellé suivant :
      Calculer
      Ensuite, vous devez lier le bouton à une fonction qui a été créé automatiquement lorsque vous avez fait glisser la variable inputRec vers l'éditeur.
    4. Dans l'onglet Evénements, sélectionnez la ligne contenant l'événement onClick. Cliquez sur l'espace vide dans la colonne Fonction pour afficher une flèche de défilement. Cliquez sur la flèche et sélectionnez inputRec_form_Submit. Vous finaliserez le code de cette fonction à la leçon suivante.
      Le menu contient deux fonctions disponibles.
      Notez le signe plus dans la dernière colonne de la ligne. Vous auriez pu cliquer sur ce bouton pour créer une nouvelle fonction à associer au bouton Calculer. Le plan de travail vous aurait amené à la vue Source et aurait créé automatiquement une fonction bouchon, qui est une fonction sans code, mais est prête à accueillir votre saisie.
  16. Ajoutez une image animée indiquant qu'un calcul de prêt hypothécaire est en cours.
    1. A partir du tiroir Display and Input de la palette, faites glisser un widget Image pour la cellule vide située sous le bouton Calculer.
    2. Dans la fenêtre Nouvelle variable, donnez à l'image le nom suivant :
      processImage
    3. Dans la vue Propriétés, sur la page Général, affectez une source à l'image dans la zone src :
      tools/spinner.gif

      L'image se trouve dans le dossier com.ibm.egl.rui.dojo.samples/WebContent. L'environnement de développement traite les dossiers WebContent de tous les projets de l'espace de travail comme un dossier virtuel unique.

    4. Dans la vue Propriétés, sur la page Apparence, désélectionnez la case visible. L'image reste masquée jusqu'à ce que le bouton Calculer soit sélectionné.
    5. Dans la vue Propriétés, sur la page Agencement, affectez la valeur CENTER à la propriété horizontalAlignment.
  17. Pour enregistrer votre travail, appuyez sur Ctrl+S.
  18. Ajoutez un widget pour afficher les résultats du calcul.
    1. Faites glisser un widget TextLabel depuis le tiroir Display and Input de la palette vers la première cellule de la cinquième ligne, qui se trouve sous le nouveau graphique. Donnez au widget le nom suivant :
      paymentLabel
      Vous utilisez ici un widget de type label car l'utilisateur ne modifie pas cette zone. L'application calcule et met à jour le contenu.
    2. Dans la vue Propriétés, sur la page Général, affectez la valeur suivante (y compris le signe dollar) à la propriété text :
      $0.00
    3. Sur la même page, affectez la valeur 18à la propriété fontSize.
    4. Dans la vue Propriétés, sur la page Agencement, définissez les propriétés suivantes :
      • Affectez la valeur CENTER à la propriété horizontalAlignment.
      • Affectez la valeur 2 à la propriété horizontalSpan.
      Lorsque vous cliquez sur la surface de conception, la page Web ressemble maintenant à cette image :
      Le contenu de la zone des mensualités s'affiche dans une police de grande taille.
  19. Ajouter une zone d'erreur pour les erreurs générales, telles que les problèmes de connexion au service.
    1. Faites glisser un widget TextLabel depuis le tiroir Display and Input de la palette vers la première cellule de la dernière ligne vide, et donnez-lui le nom suivant :
      errorLabel
    2. Modifiez les propriétés suivantes du widget TextLabel :
      • Sur la page Général, supprimez la valeur par défaut "TextLabel" de la propriété text.
      • Sur la page Général, cliquez sur le bouton vide à côté de la propriété color, puis cliquez sur Format nom, faites défiler la liste et sélectionnez Rouge. Cliquez sur OK. Cette opération définit la couleur des messages affichés dans le widget.
      • Sur la page Position, affectez la valeur 250à la propriété width.
      • Sur la page Agencement, remplacez la valeur de la propriété horizontalSpan par 2.
    3. Cliquez n'importe où dans la zone Conception et appuyez sur Ctrl+S pour enregistrer le gestionnaire.
L'interface terminé doit ressembler à l'image suivante :
L'interface terminée comprend trois zones de saisie, le bouton Calculer et la zone Mensualités.
Pour passer en revue le code source, cliquez sur l'onglet Source au bas de la sous-fenêtre de l'éditeur. Le code doit correspondre au contenu du fichier décrit à la rubrique Code finalisé du fichier MortgageCalculatorHandler.egl après la leçon 4.

Récapitulatif de la leçon

Vous avez appris à effectuer les tâches suivantes :
  • Créer un gestionnaire Rich UI.
  • Créer une variable dans la vue Données EGL.
  • Mettre à jour une interface utilisateur en faisant glisser une variable d'enregistrement vers l'éditeur Rich UI.
  • Utiliser l'éditeur EGL Rich UI pour modifier une interface.
  • Utiliser la vue Propriétés pour formater l'interface.

Dans la leçon suivante, vous ajouterez du code pour prendre en charge l'interface que vous venez de créer.

< Précédent | Suivant >

Retour d'informations