< Précédent | Suivant >

Leçon 6 : Créer le gestionnaire de résultat des calculs

Le prochain gestionnaire que vous créez, CalculationResultsHandler, génère un graphique à secteurs illustrant les informations détaillées émises par la logique précédemment créée, MortgageCalculatorHandler.

Le code qui sert d'intermédiaire entre les deux gestionnaires est un InfoBus, qui est une bibliothèque EGL du projet com.ibm.egl.rui.

L'InfoBus fonctionne de la façon suivante :
  • Un gestionnaire, CalculationResultsHandler par exemple, s'abonne à un événement portant un nom donné. Au moment de l'abonnement, il indique également le nom d'une fonction qui recevra les données lorsque l'événement se produira. A la suite de cet abonnement, l'InfoBus enregistre la fonction, en conservant les informations nécessaires pour l'appeler ultérieurement.
  • A un certain moment, le même gestionnaire, ou un autre gestionnaire, publie l'événement. Il spécifie le nom de l'événement et les données qui lui sont spécifiques, et demande à l'InfoBus d'appeler la fonction enregistrée.

Dans cette leçon, vous commencez par traiter la seconde de ces deux étapes. Vous mettez à jour le gestionnaire MortgageCalculatorHandler précédemment écrit de façon qu'il appelle la fonction publish de l'InfoBus lorsqu'un nouveau calcul est renvoyé par le service distant. Ensuite, vous vous assurez que le gestionnaire CalculationResultsHandler est abonné à l'événement.

Le mécanisme publication/abonnement permet l'affichage du graphique à secteurs.

Publication des résultats du service

  1. Retrouvez la fonction displayResults() que vous avez créée à la leçon précédente. Ajoutez la ligne précédente avant l'instruction end :
    InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    Le premier argument est le nom de l'événement, et le deuxième est l'enregistrement transmis aux fonctions enregistrées pour cet événement. Souvenez-vous que la structure de cet enregistrement est la suivante :
    record MortgageCalculationResult
       // saisie de l'utilisateur
       loanAmount money;
       interestRate decimal(10, 8);
       term int;
    
       // zones calculées
       monthlyPayment money;
       interest money;
    end

    Une marque d'erreur s'affiche parce que la bibliothèque InfoBus n'est pas importée. Pour ajouter l'instruction import nécessaire, appuyez sur Ctrl+Maj+O. Pour supprimer la marque d'erreur, enregistrez le fichier.

    La fonction displayResults() se présente maintenant comme suit :
    function displayResults(retResult MortgageCalculationResult in)
       paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
       inputRec_form.publish();
       hideProcessImage();
       InfoBus.publish("mortgageApplication.mortgageCalculated", retResult);
    	end

    Ce code continue à afficher le montant des mensualités dans la zone correspondante et à utiliser le mécanisme Rich UI MVC pour publier les résultats du calcul dans l'enregistrement retResult. La nouvelle instruction met en oeuvre un type de publication différent, en rendant l'enregistrement disponible pour tous les widgets abonnés à l'événement mortgageApplication.mortgageCalculated.

    Remarque : Les noms d'événement InfoBus sont sensibles à la casse. Par exemple, "mortgageApplication" est différent de "MortgageApplication".
  2. Sauvegardez et fermez le fichier.

Création du gestionnaire CalculationResultsHandler

  1. Dans le projet MortgageUIProject, cliquez avec le bouton droit sur le package handlers, puis cliquez sur Nouveau > Gestionnaire Rich UI. Ces opérations garantissent que la page Nouveau gestionnaire EGL Rich UI référence le package.
  2. Entrez CalculationResultsHandler comme nom du fichier source, et cliquez sur Terminer. Le nouveau gestionnaire s'ouvre dans la vue Conception de l'éditeur Rich UI.
  3. Comme vous l'avez fait quand vous avez codé le calculateur, réduisez la taille du widget GridLayout initial à une seule cellule. Sur la page Général de la vue Propriétés, affectez la valeur 1 aux propriétés rows et columns.
  4. Faites glisser un widget PieChart à partir du tiroir Visualization de la palette vers la cellule unique de la grille et donnez au widget le nom suivant :
    interestPieChart
    EGL affiche un graphique à secteurs par défaut.
    Le graphique à secteurs par défaut présente des modèles de voiture.
  5. En bas de l'éditeur, cliquez sur l'onglet Source.
  6. Dans la déclaration du widget interestPieChart, remplacez la valeur de la propriété height par 250.
  7. Seuls deux secteurs sont nécessaires dans le graphique. Dans la zone data de la déclaration interestPieChart, remplacez les quatre lignes des enregistrements PieChartData. Voici le nouveau code :
    new PieChartData{ y=1, text="Capital", 	color="#99ccbb"},
    new PieChartData{ y=0, text="Intérêts", 		color="#888855"}
    Pour calculer la portion du diagramme à secteurs utilisée par un enregistrement donné, divisez la valeur y de cet enregistrement par la somme des valeurs y. Dans ce cas, la division est 1/1, et le capital du prêt hypothécaire utilise 100 % du graphique. Pendant la phase de développement, l'affichage ne constitue qu'une réservation jusqu'à ce que l'application traite le premier calcul par défaut au moment de l'exécution.
  8. Abonnez-vous à l'événement InfoBus mentionné plus tôt en ajoutant la ligne suivante à la fonction start :
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", displayChart);
    Ce code garantit que l'InfoBus appelle la fonction displayChart lorsque l'événement spécifié se produit. L'étape suivante va supprimer les marques d'erreur.
  9. Après la fonction start, ajoutez la fonction displayChart comme ci-dessous, puis organisez les instructions d'importation en appuyant sur Ctrl+Maj+O :
    function displayChart(eventName STRING in, dataObject ANY in)
       localPieData PieChartData[2];
    
       resultRecord MortgageCalculationResult = 
          dataObject as MortgageCalculationResult;
       localPieData = interestPieChart.data;
       localPieData[1].y = resultRecord.loanAmount;
       localPieData[2].y = resultRecord.interest;
       interestPieChart.data = localPieData;
    end
    Lorsque l'événement se produit, la fonction displayChart reçoit les données en entrée dans le paramètre dataObject. L'utilisation d'ANY comme type de paramètre garantit que vous pouvez utiliser le mécanisme de l'InfoBus pour transférer tous les types d'enregistrement.
    Puis la fonction agit de la manière suivante :
    • Elle crée le tableau localPieData, qui est du type PieChartData[], comme il convient pour la propriété data du diagramme à secteurs.
    • Elle affecte la valeur reçue à un enregistrement du type MortgageCalculationResult, dans une instruction qui convertit le deuxième paramètre en entrée dans le type de données adapté à votre utilisation de l'InfoBus :
      resultRecord MortgageCalculationResult = 
         dataObject as MortgageCalculationResult;
    • Elle attribue la propriété data du graphique à secteurs, notamment des informations sur la couleur, au nouveau tableau localPieData.
    • Elle affecte le montant du prêt et les intérêts à ce tableau.
    • Elle force l'actualisation du graphique à secteurs en mettant à jour sa propriété data. Plus précisément, vous affectez le tableau localPieData à cette propriété.
  10. Sauvegardez le fichier. Si vous constatez des erreurs dans votre fichier source, comparez son code au code présenté à la rubrique Code finalisé du fichier CalculationResultsHandler.egl après la leçon 6.

Test du graphique à secteurs

  1. Accédez à la vue Aperçu. EGL affiche un graphique à secteurs par défaut dont le capital représente 100 %.
    Le cercle complet est bleu et le mot "Capital" apparaît en blanc.
  2. Fermez le fichier.

Récapitulatif de la leçon

Vous avez appris à effectuer les tâches suivantes :
  • Utiliser la bibliothèque InfoBus pour transmettre les informations entre les gestionnaires.
  • Créer un graphique à secteurs.

Dans la leçon suivante, vous allez créer le gestionnaire principal, qui met en oeuvre les autres.

< Précédent | Suivant >

Retour d'informations