< Précédent | Suivant >

Leçon 8 : Créer le gestionnaire d'historique des calculs

Créez un tableau dans lequel vous pouvez cliquer sur une ligne pour afficher un calcul précédent.

Dans cette leçon, vous utilisez le widget DataGrid pour créer un tableau. Le widget DataGrid est doté de fonctions d'interaction et de présentation visuelle avancées qui le rendent préférable au widget GridLayout pour l'affichage d'un tableau d'enregistrements.

A la leçon 4, vous aves fait glisser une variable d'enregistrement vers l'éditeur pour créer un widget GridLayout. Dans cette leçon, vous faites glisser un tableau d'enregistrements vers l'éditeur, ce qui crée par défaut un widget DataGrid.

Création du gestionnaire

  1. Dans le package handlers, créez un gestionnaire Rich UI nommé CalculationHistoryHandler. Le gestionnaire s'ouvre dans la vue Conception de l'éditeur Rich UI.
  2. Supprimez le widget GridLayout par défaut.
  3. Créez une variable pour contenir un tableau d'enregistrements MortgageCalculationResult.
    1. Cliquez avec le bouton droit sur l'arrière-plan de la vue Données EGL, puis cliquez sur Nouveau > Variable EGL.
    2. Dans l'assistant Création d'une variable de données EGL, à la section Création de type, sélectionnez l'enregistrement MortgageCalculationResult, comme vous l'avez fait à la leçon 4.
    3. Dans la zone Entrez le nom de la zone, entrez le nom suivant :
      historyResults
    4. Sous Propriétés du tableau, cochez la case Tableau. N'entrez pas taille.
      L'assistant est configuré pour créer un tableau d'enregistrements.
    5. Cliquez sur Terminer.
  4. Faites glisser la nouvelle variable vers la surface d'affichage de l'éditeur Rich UI. EGL affiche l'assistant Insertion de données. Cet assistant est le même que celui de la leçon 4, mais avec des valeurs par défaut différentes car la variable que vous avez fait glisser vers l'éditeur est un tableau dynamique.
  5. Apportez les modifications suivantes dans l'assistant Insertion de données :
    1. Sous Créer des widgets pour, conservez la valeur par défaut Données en lecture seule.
    2. Désélectionnez la case interest.
    3. Modifiez le libellé des zones restantes :
      • Remplacez loanAmount par Capital.
      • Remplacez interestRate par Taux.
      • Remplacez term par Années.
      • Remplacez monthlyPayment par Mensualités.
      L'assistant utilise ces libellés comme en-têtes de colonne pour la grille.
    4. Désélectionnez la case Ajouter le support de formatage et de validation. L'assistant doit ressembler à l'image suivante :
      La page de l'assistant affiche les données que vous avez choisi d'afficher dans la grille.
    5. Cliquez sur Terminer. La page Web est semblable à ce qui suit.
      La grille vide comporte un en-tête et quatre colonnes.
    Vous allez coder le reste du gestionnaire d'historique des calculs dans la vue Source.
  6. En bas de l'éditeur, cliquez sur l'onglet Source.
  7. Dans la déclaration du widget DataGrid historyResults_ui, ajoutez le contenu suivant avant la propriété columns :
    selectionMode = DataGridLib.SINGLE_SELECTION,
    La valeur indiquée garantit que l'utilisateur ne peut sélectionner qu'une seule ligne de la grille, et non plusieurs.
  8. Sur la ligne, après avoir défini selectionMode, entrez le code suivant :
    selectionListeners ::= cellClicked,

    Vous venez de mettre à jour une propriété d'écoute, qui utilise un tableau de fonctions dont les fonctions s'exécutent dans l'ordre du tableau. Plus précisément, vous avez ajouté une fonction au tableau de fonctions associé à la propriété selectionListeners. Vous allez coder la nouvelle fonction ultérieurement dans cette leçon.

    Les fonctions d'écoute s'exécutent en réponse à une action utilisateur, telle qu'un clic ou, dans certains cas, en réponse à un appel de fonction qui sélectionne ou désélectionne un ligne ou qui met à jour une case à cocher.

  9. Modifiez la largeur par défaut des colonnes de sorte qu'elles tiennent dans la fenêtre du plus petit portlet :
    • Affectez la largeur 80 à la colonne Capital.
    • Affectez la largeur 80 à la colonne Taux.
    • Affectez la largeur 50 à la colonne Années.
    • Affectez la largeur 70 à la colonne Mensualités.
  10. Après chacune de ces largeurs, dans le même bloc de valeurs définies (la zone avec les accolades), définissez une propriété alignment pour aligner à droite les chiffres dans les colonnes :
    , alignment = DataGridLib.ALIGN_RIGHT
    Par exemple, le code de la déclaration de la colonne Capital se présente de la manière suivante :
    new DataGridColumn {name = "loanAmount", displayName = "Capital", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. Ajoutez la propriété formatter pour trois des déclarations de colonne, comme suit :
    1. Pour la colonne Capital, référencez la fonction personnalisée formatDollars, que vous allez écrire plus tard dans cette leçon :
      , formatters = [ formatDollars ]
      Le code complet de la déclaration se présente maintenant comme suit :
      new DataGridColumn {name = "loanAmount", displayName = "Capital", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. Ajoutez le code suivant pour la colonne Taux :
      , formatters = [ DataGridFormatters.percentage ]
    3. la colonne Années ne nécessite pas de mise en forme particulière.
    4. Ajoutez le code suivant pour la colonne Mensualités :
      , formatters = [ formatDollars ]
      Le contenu du code est désormais le suivant :
      Image du code d'historyResults_ui

      En règle générale, la propriété formatters nécessite un tableau de noms de fonction. Il peut s'agir de fonctions prédéfinies ou personnalisées. Par exemple, la fonction percentage est fournie dans la bibliothèque DataGridFormatters qui est incluse dans le projet com.ibm.egl.rui.widgets.

  12. Ajoutez le code suivant à la fonction start :
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
    Comme précédemment, vous utilisez l'InfoBus pour appeler une fonction lorsque le service renvoie un nouveau calcul.
  13. Ajoutez la fonction addResultRecord après la fonction start() :
    // Mise à jour de la grille pour inclure le dernier calcul de prêt hypothécaire
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    Ici, vous transtypez une valeur entrante en enregistrement MortgageCalculationResult. Puis, vous ajoutez les nouveaux résultats à un tableau de résultats et vous mettez à jour la propriété data. Cette mise à jour entraîne l'actualisation du widget.
  14. Ajoutez la fonction d'écoute suivante :
    // Publication d'un événement à destination de l'InfoBus à chaque fois que l'utilisateur sélectionne un ancien calcul
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
    end
    La fonction extrait de la grille de données la ligne sélectionnée par l'utilisateur et la transmet à l'InfoBus. L'InfoBus à son tour appelle une fonction dans tous les gestionnaires abonnés à l'événement "mortgageApplication.mortgageResultSelected".
  15. Ajoutez la fonction suivante pour formater les valeurs monétaires :
    function formatDollars(class string, value string, rowData any in)
       value = mortgageLib.formatMoney(value);
    end
    La valeur du second paramètre est disponible pour le code d'exécution EGL car le modificateur de paramètre est InOut par défaut.

    Remarquez que vous réutilisez la fonction formatMoney de la bibliothèque mortgageLib.

  16. Reformatez le fichier en appuyant sur Ctrl+Maj+F. Ensuite, supprimez les marques d'erreur en appuyant sur Ctrl+Maj+O, puis enregistrez le fichier. Si vous constatez des erreurs dans votre fichier source, comparez son code au code présenté à la rubrique Code finalisé du fichier CalculationHistoryHandler.egl après la leçon 8.
  17. Fermez le fichier.

Récapitulatif de la leçon

Vous avez appris à effectuer les tâches suivantes :
  • Faire glisser et déposer un tableau d'enregistrements pour créer une grille de données.
  • Déclencher un événement lorsqu'un clic est effectué sur une cellule de la grille de données.
  • Formater les colonnes de la grille de données.

Dans la leçon suivante, vous intégrerez ce gestionnaire au reste de l'application.

< Précédent | Suivant >

Retour d'informations