< Précédent | Suivant >

Leçon 7 : Créer le gestionnaire Rich UI principal

La page principale utilise le widget du portail EGL pour gérer la communication entre les différents gestionnaires.
Comme il a été vu au cours d'une leçon précédente, Rich UI donne un nouveau sens à l'ancienne notion d'architecture MVC (Model View Controller) en la redéfinissant spécifiquement pour une logique d'exécution dans le navigateur. De la même façon, Rich UI donne un nouveau sens aux termes portail et portlet.

En règle générale, un portail est une page Web qui contrôle des composants indépendants d'interface utilisateur appelés portlets. Dans l'utilisation traditionnelle de ces termes, un portail est constitué par du code sur un serveur. Les portlets intégrés par le portail sont des fragments de page Web, chacun pouvant être stocké dans un emplacement distant distinct. La page Web est construite sur le serveur sur lequel le code du portail réside, et la page Web reconstituée est transférée du serveur vers le navigateur.

En revanche, un portail Rich UI est un widget qui s'exécute dans le navigateur et qui référence un ensemble de widgets de portlet, chacun référençant à son tour un gestionnaire Rich UI. Les sections qui suivent montrent comment coder un portail et des portlets dans Rich UI.

Création du gestionnaire MainHandler

  1. Créez un nouveau gestionnaire Rich UI dans le package handlers du projet MortgageUIProject, comme vous l'avez fait au cours de la leçon précédente. Le nom du gestionnaire dans ce cas est MainHandler. Le gestionnaire s'ouvre dans la vue Conception de l'éditeur Rich UI.
  2. Si vous ne voyez pas le tiroir Samples dans la vue Palette, cliquez sur le bouton Actualiser la palette à gauche de la vue.
    Le bouton Actualiser la palette
  3. Sélectionnez le widget GridLayout initial qui a été créé pour le gestionnaire. Assurez-vous que la totalité du widget est entourée par la ligne en pointillés.
    Le widget GridLayout initial est sélectionné.
  4. Appuyez sur la touche Suppr pour supprimer le widget.
  5. A partir du tiroir Samples de la palette, faites glisser un widget de portail vers l'éditeur et donnez-lui le nom suivant :
    mortgagePortal
  6. En bas de l'éditeur, cliquez sur l'onglet Source.
  7. Dans la déclaration mortgagePortal, faites passer le nombre de colonnes à 2, et définissez les valeurs 350 et 650 pour la largeur des colonnes. Le contenu du fichier est le suivant :
  8. Après la déclaration mortgagePortal, sautez une ligne et ajoutez les déclarations suivantes :
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    Ces instructions déclarent deux variables, chacune basée sur un composant Gestionnaire - dans notre cas, un composant Gestionnaire développé dans ce tutoriel.
  9. Sautez une ligne et ajoutez le code suivant :
    calculatorPortlet Portlet{children =[calculatorHandler.ui ],
       title = "Calculateur"};
    resultsPortlet Portlet{children =[resultsHandler.ui ],
       title = "Résultats", canMove = TRUE, canMinimize = TRUE};
    Chaque nouvelle variable de portlet est déclarée avec une référence à l'interface utilisateur initiale du gestionnaire intégré.
  10. Pour supprimer les marques d'erreur, appuyez sur Ctrl+Maj+O.
  11. Codez la fonction start comme suit :
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Abonnement aux événements de calcul 
       InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);
    
       // L'état initial est réduit
       resultsPortlet.minimize();
    end	
    Le code agit de la façon suivante :
    • Il ajoute au portail les portlets déjà déclarés : un pour afficher le calculateur, et un autre pour afficher le graphique à secteurs.
    • Il vérifie que le gestionnaire principal est bien abonné au même événement que CalculationResultsHandler, dans ce cas pour garantir l'exécution de la fonction restorePortlets lorsque le service distant renvoie un calcul de prêt hypothécaire.
    • Il réduit le second portlet pour que le graphique à secteurs ne soit pas visible d'emblée lors de l'exécution.
  12. Après la fonction start, ajoutez la fonction qui sera appelée lorsque le service renvoie un calcul :
    function restorePortlets(eventName STRING in, dataObject ANY in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    La fonction de portlet restore entraîne l'affichage du portlet de graphique à secteurs.
  13. Pour supprimer les marques d'erreur, appuyez sur Ctrl+Maj+O et 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 MainHandler.egl après la leçon 7.

Test du portail

Testez le portail principal pour vous assurer que le portlet de résultat reçoit bien les modifications du portlet de calcul.
  1. En bas de l'éditeur, cliquez sur l'onglet Aperçu. EGL affiche le gestionnaire principal, dans lequel le portail est déclaré. Le gestionnaire affiche les deux portlets subordonnés.
    Le portlet Calculateur contient les valeurs par défaut, et le portlet Résultats est réduit.
  2. Cliquez sur Calculer. L'image animée indique que le traitement est en cours. Lorsque le calcul terminé, le diagramme à secteurs s'affiche.
    Le portlet Résultats restauré contient le graphique à secteurs.
  3. Déplacez le curseur sur l'un des secteurs du graphique pour agrandir sa vue.
  4. Modifiez l'une des valeurs (ou toutes les valeurs) du calcul et cliquez à nouveau sur Calculer. Le graphique à secteurs reflète les modifications de la part du capital et des intérêts.
  5. Fermez le fichier.

Récapitulatif de la leçon

Vous avez appris à effectuer les tâches suivantes :
  • Créer un widget de portail.
  • Ajouter des portlets au portail et ainsi, mettre à disposition les gestionnaires créés dans les leçons précédentes.

Dans la leçon suivante, vous allez ajouter un portlet pour conserver la liste de vos calculs de prêt hypothécaire.

< Précédent | Suivant >

Retour d'informations