< Précédent | Suivant >

Leçon 5 : Ajouter du code au gestionnaire du calculateur de prêt hypothécaire

Ajoutez des fonctions au gestionnaire que vous avez créé dans la leçon précédente.

Dans cette leçon, vous travaillez directement dans le code source EGL, en commençant par une bibliothèque EGL que vous écrivez. Une bibliothèque peut contenir des constantes, des variables et des fonctions, qui sont toutes accessibles par les différentes unités logiques de l'application. Une caractéristique importante d'une bibliothèque est que les modifications apportées à une variable sont disponibles pour toutes les unités logiques qui accèdent à la bibliothèque. Toutefois, l'accent dans ce tutoriel est mis sur les fonctions, qui vous placez dans une bibliothèque pour éviter d'avoir à gérer plusieurs fois la même logique lorsqu'elle est largement utilisée à plusieurs endroits.

Pour traiter certains problèmes courants, vous pouvez utiliser la structure de l'architecture MVC (Model View Controller) EGL, contenue dans le projet com.ibm.egl.rui. Bien que les initiales "MVC" décrivent généralement les différents composants d'une application d'entreprise, la structure MVC de Rich UI ne concerne que les composants d'une interface utilisateur. Ici, le modèle (model) est une zone de variable ou d'enregistrement, la vue (view) est un widget, et le contrôleur (controller) est une déclaration qui gère le transfert des données entre le modèle et la vue. Ce transfert de données est parfois automatique, et parfois une réponse à l'appel d'une fonction, comme illustré par la suite.

Les actions de glisser-déposer effectuées dans la leçon précédente ont ajouté non seulement des déclarations de type contrôleur, mais aussi un gestionnaire de formulaires, qui est une déclaration permettant de traiter d'autres déclarations en tant que composants d'un seul formulaire. Un gestionnaire de formulaires comporte un ensemble de zones, dont chacune peut inclure un libellé, un contrôleur, et une zone d'erreur.

Création d'une bibliothèque EGL

Créez une bibliothèque EGL pour y placer une fonction fournissant le format monétaire des Etats-Unis pour la variable MONEY. Une version plus complexe pourrait autoriser les symboles monétaires et les séparateurs locaux, et différents types d'entrée. Cependant, pour ce tutoriel, une version simple suffira.
  1. Sélectionnez MortgageUIProject dans l'explorateur de projets.
    MortgageUIProject est sélectionné.
  2. Cliquez sur le bouton Nouveau fichier source EGL.
    Le bouton Nouveau fichier source EGL est le deuxième dans un groupe de quatre.
  3. Dans la fenêtre Nouvelle partie EGL, définissez le package comme suit :
    libraries
  4. Donnez au fichier le nom suivant :
    MortgageLib
  5. Cliquez sur Terminer. Le nouveau fichier source s'ouvre dans l'éditeur EGL.
  6. Supprimez le commentaire du fichier et ajoutez le code suivant :
    library MortgageLib 
       function formatMoney(amount STRING in) returns(STRING)
          len int = strlib.characterLen(amount);
          index int = len - 6; // 2 dec places + decimal + 3 chars before separator
          while(index > 0)
             amount = amount[1 : index] :: "," :: amount[index + 1 : len];
             index -= 3;
             len += 1;
          end
          return("$" :: amount);
       end
    end

    Vous constatez que vous définissez le nom de la bibliothèque et que vous imbriquez une nouvelle fonction, formatMoney(), qui ajoute des virgules et le symbole dollar à une chaîne en entrée. On suppose ici que la zone de saisie contient une valeur monétaire à deux décimales.

  7. Sauvegardez le fichier. La bibliothèque est automatiquement générée une fois que le fichier est sauvegardé.
La bibliothèque MortgageLib est prête à être utilisée.

Modification du code du gestionnaire

Avant d'ajouter de nouvelles fonctions, vous devez effectuer des modifications mineures :
  1. Cliquez sur l'onglet Source du gestionnaire MortgageCalculatorHandler.
  2. Définissez les valeurs par défaut pour le Montant du prêt et le Taux d'intérêt. Accédez à la ligne où l'enregistrement inputRec est déclaré et ajoutez à la déclaration les deux définitions, comme illustré ici :
    inputRec MortgageCalculationResult 
       {term = 30, loanAmount=180000, interestRate = 5.2};
    Enregistrez le fichier et cliquez sur l'onglet Aperçu. L'interface affiche maintenant les valeurs par défaut, y compris la valeur de la zone Durée définie à la leçon précédente :
    L'interface affiche maintenant le montant du prêt et le taux d'intérêt.
  3. Sur la première ligne du gestionnaire, avant la déclaration du widget d'interface utilisateur, déclarez la variable utilisable par le code pour accéder au service dédié :
    mortService MortgageCalculationService{@dedicatedService};
    La déclaration mortService vient avant la déclaration ui GridLayout.
  4. Placez votre curseur sur la croix rouge ou sur le texte souligné en rouge pour apprendre que la cause de l'erreur est la suivante : "Le type MortgageCalculationService type ne peut pas être résolu." L'erreur est surprenante, étant donné que vous avez précédemment défini le chemin de génération EGL du projet dans lequel vous travaillez afin que celui-ci puisse accéder au projet contenant le service. Le problème ici est que le fichier source n'importe pas le composant Service de cet autre projet.
  5. Pour supprimer l'erreur, entrez l'instruction import suivante après l'instruction import déjà présente dans le fichier :
    import services.MortgageCalculationService;
    Après quelques secondes, les marques d'erreur sont supprimées, même si vous n'avez pas enregistré le fichier.
  6. Dans de nombreux cas, l'environnement de développement est capable d'insérer automatiquement une instruction import manquante. Pour constater ce mécanisme, supprimez l'instruction import que vous venez d'entrer. Lorsque vous voyez de nouveau les marques d'erreur, appuyez sur Ctrl+Maj+O pour rétablir l'instruction.
  7. Sauvegardez le fichier.

Finalisation de la fonction inputRec_form_Submit

EGL a créé une fonction bouchon (stub) inputRec_form_Submit. Son objectif est de valider toutes les zones du formulaire et de les "valider". La validation fait partie intégrante de l'implémentation MVC et consiste à mettre à jour l'enregistrement inputRec avec les valeurs des widgets.

Vous allez ajouter du code pour appeler deux fonctions supplémentaires. La première fonction rend l'image processImage visible, ce qui permet à l'utilisateur de savoir que l'application fonctionne. La seconde fonction appelle le service qui calcule les mensualités hypothécaires.

Pour finaliser la fonction inputRec_form_Submit, modifiez l'instruction if pour qu'elle soit identique à ce qui suit :
if(inputRec_form.isValid())
   inputRec_form.commit();
   showProcessImage();
   calculateMortgage();
else
   errorLabel.text = "Input form validation failed.";
end
Ne vous souciez pas du format du code ; une section ultérieure traite le problème. De plus, les sections qui suivent suppriment ces marques d'erreur :
L'appel finalisé de la fonction inputRec_form_Submit().

Ajout de la fonction showProcessImage

Vous avez besoin de la fonction showProcessImage pour rendre l'image processImage visible. Pour coder la fonction dans l'éditeur Rich UI, ajoutez les lignes suivantes avant la dernière instruction end du gestionnaire :
function showProcessImage()
   processImage.visible = yes;
end
Remarque : La propriété visible fait partie de tous les widgets de type image. Vous avez modifié la valeur initiale de cette propriété dans la leçon précédente, lorsque vous avez désélectionné la case à cocher visible pour l'image processImage.

Ajout de la fonction hideProcessImage

Vous avez besoin de la fonction hideProcessImage pour masquer l'image lorsque c'est nécessaire. Ajoutez les lignes suivantes après la fonction showProcessImage :
function hideProcessImage()
   processImage.visible = no;
end

Ajout de la fonction calculateMortgage

La fonction calculateMortgage appelle un service pour effectuer un calcul de prêt hypothécaire à partir des valeurs affichées dans l'interface utilisateur. Pour coder la fonction dans l'éditeur Rich UI, ajoutez les lignes suivantes après la fonction hideProcessImage et ignorez les marques d'erreur :
function calculateMortgage()
   call mortService.amortize(inputRec) 
      returning to displayResults 
      onException handleException;
end	
Remarque :
  1. L'instruction call dans Rich UI est une variante utilisée uniquement pour accéder aux services. Dans ce cas, la communication pendant l'exécution se fait en mode asynchrone, ce qui permet à l'utilisateur de continuer à interagir avec le gestionnaire tandis que le service répond.
  2. Souvent, le demandeur de service transmet un enregistrement au service auquel un accès a été établi. Dans ce tutoriel, le gestionnaire transmet la variable globale inputRec et reçoit, dans le même enregistrement, la valeur renvoyée par le service.

Ajout de la fonction displayResults

La fonction displayResults est une fonction de rappel, qui s'exécute immédiatement après le renvoi par le service des données métier au gestionnaire Rich UI. Pour coder cette fonction, ajoutez les lignes suivantes après la fonction calculateMortgage :
function displayResults(retResult MortgageCalculationResult in)
   paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
   inputRec_form.publish();
   hideProcessImage();
end
Remarque :
  • Vous utilisez la fonction formatMoney de votre nouveau composant Bibliothèque EGL pour ajouter des virgules et le symbole dollar à la somme à payer. Comme vous avez créé la variable paymentLabel sans l'aide de la structure MVC, vous devez gérez vous-même le formatage.
  • Comme indiqué précédemment, un gestionnaire de formulaires contient des zones de formulaire, qui à leur tour peuvent inclure des contrôleurs et d'autres déclarations. La fonction publish est disponible dans tous les gestionnaires de formulaires et appelle les fonctions publish des contrôleurs, l'une après l'autre, pour effectuer les opérations suivantes :
    1. Extraire les données de la variable qui sert de modèle de contrôleur.
    2. Formater ces données.
    3. Ecrire les données formatées dans le widget qui sert de vue du contrôleur.

    Etant donné la séquence des événements, la fonction publish du formulaire est souvent appelée comme elle l'est ici : dans une fonction de rappel qui reçoit des données à partir d'un service.

Ecriture du gestionnaire d'exceptions

Si l'appel du service génère une erreur, la fonction de rappel n'est généralement pas appelée. Toutefois, si vous avez prévu l'utilisation d'un gestionnaire d'exceptions, comme dans le cas présent, cette fonction est appelée.

Procédez comme suit :

  1. Après la fonction displayResults, ajoutez le code suivant :
    	// catch-all exception handler
    	private function handleException(ae AnyException in)
    		errorLabel.text = "Error calling service: " + ae.message;
    	end
    Les fonctions contenant le modificateur private ne peuvent être appelées que par le composant EGL dans lequel réside la fonction ; dans le cas présent, par le gestionnaire imbriquant. La fonction place le texte dans le widget errorLabel que vous avez créé à la leçon précédente.
  2. Mettez à jour la fonction calculateMortgage immédiatement avant l'instruction call, de la manière suivante :
    errorLabel.text = "";
    Ainsi, vous libérez la zone errorLabel avant d'appeler le service qui effectue le calcul du prêt hypothécaire. Sans ce code, les erreurs (par exemple la perte temporaire de la connexion au service) génèrent un message, même lorsque l'appel du service a abouti.
  3. Cliquez avec le bouton droit sur un espace vide dans l'éditeur. Cliquez sur Organiser les importations. Dans la mesure du possible, EGL ajoute les instructions import pour tous les symboles non définis.
  4. 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 MortgageCalculatorHandler.egl après la leçon 5.
  5. Une fois les éventuelles erreurs résolues, reformatez votre saisie en appuyant sur Ctrl+Maj+F et ré-enregistrez le fichier.

Test du calculateur

Vous êtes maintenant prêt à tester le calculateur.

  1. Accédez à la vue Aperçu en cliquant sur l'onglet Aperçu au bas de la sous-fenêtre de l'éditeur. Vous pouvez tester complètement votre application dans la vue Aperçu, y compris l'interface utilisateur et les services, que ceux-ci soient déployés sur un serveur ou disponibles uniquement en tant que code source EGL. EGL affiche les valeurs par défaut que vous avez entrées lors de la création du gestionnaire.
  2. Cliquez sur Calculer. EGL affiche la mensualité.
    Le montant des mensualités s'affiche dans la zone correspondante.
  3. Entrez une lettre dans la première zone. Comme dans différents widgets Dojo EGL, une marque rouge apparaît dès qu'une erreur se produit. Elle est accompagnée d'un message d'erreur dans une infobulle.
    Le montant des mensualités s'affiche dans la zone correspondante.

    Lorsque le widget perd le focus, l'infobulle est masquée, et lorsque le widget reprend le focus, l'infobulle est affichée.

  4. Modifiez la valeur d'une, de deux ou des trois zones, et cliquez à nouveau sur Calculer. La zone Mensualités est modifiée en conséquence.

Récapitulatif de la leçon

Vous avez appris à effectuer les tâches suivantes :
  • Utiliser l'onglet Source de l'éditeur Rich UI
  • Créer un composant Bibliothèque EGL pour les fonctions réutilisables
  • Utiliser la structure EGL MVC (Model View Controller)
  • Appeler un service EGL à partir d'une fonction
  • Détecter et traiter les erreurs

Dans la leçon suivante, vous créez un graphique circulaire pour comparer le total du capital au total des intérêts pour un calcul donné.

< Précédent | Suivant >

Retour d'informations