< Précédent | Suivant >

Leçon 10 : Créer un gestionnaire de carte de localisation

Commencez à créer un portlet dans lequel vous pouvez entrer un code postal et afficher une liste de sociétés de crédit hypothécaire et une carte. Lorsque vous cliquez sur le nom d'une société de la liste, un marqueur indique son emplacement sur la carte.
Cette leçon s'appuie sur les fonctions de deux sites Web externes :
Si maintenant ou plus tard, vous souhaitez en savoir plus sur certaines technologies utilisées dans les leçons 10 et 11, reportez-vous aux sources suivantes :

Création d'enregistrements pour le fichier d'interface

Pour utiliser Yahoo! Local Search Service, vous allez créer les composants EGL suivants :

Vous pouvez créer les composants Enregistrement de différentes manières, mais au cours de cette leçon, vous allez accéder à un service REST sur le Web et inclure, dans l'adresse Web, les détails nécessaires pour extraire des données à partir de ce service. L'assistant Nouvel enregistrement EGL va créer les composants Enregistrement qui correspondent aux données extraites au moment du développement.

Procédez comme suit :

  1. Dans le dossier EGLSource du projet MortgageServiceProject, cliquez avec le bouton droit sur le package services et cliquez sur Nouveau > Enregistrement.
  2. Sur la première page de l'assistant Nouvel enregistrement EGL, acceptez les caractéristiques du dossier source et du package, et entrez le nom suivant pour le nouveau fichier source :
    YahooRecords
  3. Cliquez sur Suivant.
  4. Sur la page Modèles, cliquez sur Enregistrements à partir de XML. Cliquez sur Suivant.
  5. Dans la fenêtre Enregistrements à partir de XML, cliquez sur Créer à partir d'une URL et collez l'URL suivante dans la zone URL :
    http://local.yahooapis.com/LocalSearchService/V3/localSearch?
    appid=YahooDemo&query=pizza&zip=94306&results=2
    Combinez ces deux lignes en une seule ligne pour former une URL ne comportant pas d'espace.
    L'URL s'affiche dans la zone Créer à partir d'une URL.
  6. Cliquez sur Suivant. L'assistant affiche une page Récapitulatif qui fournit un aperçu du code qu'il va placer dans le nouveau fichier.
    Le code s'affiche dans une fenêtre d'aperçu.
    Remarque : Il arrive que Yahoo! Local Search Service ne renvoie pas de données, auquel cas seul le composant Enregistrement ResultSet est créé. Le manque de données est plus probable le dimanche. Si le service est indisponible ou ne renvoie pas de données, cliquez sur Annuler et attendez un autre moment pour continuer le tutoriel.

    Les problèmes rencontrés avec Yahoo! Local Search Service peuvent être signalés ici : "Local API – General Questions à l'adresse http://developer.yahoo.net/forum.

  7. Cliquez sur Terminer, ce qui enregistre le fichier.
  8. Si vous constatez des erreurs dans votre fichier source, comparez son code au code présenté à la rubrique Code finalisé du fichier YahooRecords.egl après la leçon 10.
  9. Fermez le fichier.

Création de l'interface Local Search

Lorsque vous utilisez un service Web externe, vous créez un composant Interface qui identifie les opérations du service auxquelles il sera accédé. Le composant Interface est utilisé par le code demandeur et n'est pas un composant du service lui-même.

Procédez comme suit :

  1. Créez un nouveau composant Interface en cliquant avec le bouton droit sur MortgageUIProject, puis en cliquant sur Nouveau > Interface.
  2. Dans la fenêtre Nouvelle partie interface EGL, remplissez les zones suivantes :
    1. Dans la zone Package, entrez le nom suivant :
      interfaces
    2. Dans la zone Nom du fichier source EGL, entrez le nom suivant :
      IYahooLocalService
    3. Cliquez sur Terminer.
  3. Remplacez le contenu du fichier par le code suivant :
    package interfaces;
    
    interface YahooLocalService
       function getSearchResults(appId string in, zipCode string in) returns(ResultSet)
          {@GetRest{uriTemplate = "http://local.yahooapis.com/LocalSearchService/V3/
                    localSearch?appid={appId}&query=mortgage&zip={zipcode}&results=10",
                    responseFormat = XML}};
    end
    Lorsque vous avez copié ce code, procédez comme suit :
    1. Supprimez les lignes supplémentaires pour que la valeur uriTemplate soit sur une seule ligne, sans espace.
    2. Appuyez sur Ctrl+Maj+O pour inclure l'instruction import nécessaire à la résolution de la référence au composant Enregistrement ResultSet.
    3. Sauvegardez le fichier.
    Le prototype de la fonction getSearchResults garantit que lorsque le demandeur appelle le service, les arguments appId et zipCode du demandeur sont utilisés à la place des éléments entre crochets dans la valeur uriTemplate. Le code d'exécution EGL utilise l'URI complète pour accéder au service, et dans ce cas, les caractéristiques suivantes sont toujours vraies pour cette URI :
    • L'URI contient le mot clé "hypothèque", utilisé par le service pour rechercher les données.
    • L'URI spécifie que le service doit renvoyer 10 résultats au maximum.
  4. Si vous constatez des erreurs dans votre fichier source, comparez son code au code présenté à la rubrique Code du fichier IYahooLocalService.egl après la leçon 10.
  5. En l'absence d'erreur, fermez le fichier.

Création du gestionnaire MapLocatorHandler

Pour créer le gestionnaire MapLocatorHandler :

  1. Dans le package handlers du dossier MortgageUIProject/EGLSource, créez un composant Gestionnaire Rich UI comme vous l'avez fait au cours de la leçon 4. Donnez au gestionnaire le nom suivant :
    MapLocatorHandler
    Le nouveau gestionnaire s'ouvre dans la vue Conception de l'éditeur Rich UI.
  2. Cliquez à l'intérieur de la grille, cliquez avec le bouton droit sur la cellule sélectionnée, et cliquez sur Supprimer > Ligne. La grille comporte trois lignes.
  3. Créez une ligne de texte d'introduction :
    1. A partir du tiroir Display and Input de la palette, faites glisser un widget TextLabel vers la première cellule du widget GridLayout et donnez-lui le nom suivant :
      introLabel
    2. Dans la vue Propriétés, effectuez les modifications suivantes :
      • Sur la page Général, remplacez la valeur de la propriété text par le libellé suivant :
        Recherche de sociétés de crédit hypothécaire
      • Sur la page Agencement, remplacez la valeur de la propriété horizontalSpan par 3.
      • Pour enregistrer le fichier, appuyez sur Ctrl+S.
  4. Créez un libellé pour la zone de saisie du code postal :
    1. Faites glisser un widget TextLabel vers la première cellule de la deuxième ligne et affectez-lui le nom suivant :
      zipLabel
    2. Dans la vue Propriétés, définissez la propriété text comme suit :
      Code postal :
  5. Créez une zone de texte dans laquelle l'utilisateur peut entrer un code postal :
    1. Faites glisser un widget TextLabel vers la deuxième cellule de la deuxième ligne et affectez-lui le nom suivant :
      zipField
    2. Dans la vue Propriétés, sur la page Position, affectez la valeur 100à la propriété width.
    3. Sur la page Evénements, cliquez sur la ligne correspondant à l'événement onKeyDown. Cliquez sur le signe plus (+) pour ajouter une fonction à l'événement. La boîte de dialogue Nouveau gestionnaire d'événements s'affiche.
    4. Entrez le nom suivant pour la nouvelle fonction :
      checkForEnter
    5. Cliquez sur OK. EGL passe à la vue Source et affiche la fonction checkForEnter. Remarquez deux autres ajouts récents :
      • Dans la déclaration du widget zipField, la propriété onKeyDown a la valeur checkForEnter.
      • L'instruction import suivante résout la référence au type de widget TextField :
        import com.ibm.egl.rui.widgets.TextField;
    6. Cliquez sur Conception pour revenir à la vue Conception. Le nom de la fonction checkForEnter s'affiche maintenant en regard de l'événement onKeyDown. La fonction est dite liée à la zone zipField. Vous ajouterez le code de cette fonction à la leçon suivante.
    7. Pour enregistrer le fichier, appuyez sur Ctrl+S.
  6. Ajoutez un bouton pour lancer la recherche pour le code postal indiqué :
    1. Faites glisser un widget (Dojo) de type bouton depuis le tiroir Display and Input de la palette vers la troisième cellule de la deuxième ligne. Donnez-lui le nom suivant :
      zipButton
    2. Dans la vue Propriétés, sur la page Evénements, cliquez sur la ligne correspondant à l'événement onClick. Cliquez sur le signe plus (+) pour ajouter une fonction à l'événement.
    3. Dans la fenêtre Nouveau gestionnaire d'événements, entrez le nom suivant pour la nouvelle fonction :
      buttonClicked
    4. Cliquez sur OK. EGL passe à la vue Source et affiche la fonction buttonClicked.
    5. Cliquez sur Conception pour revenir à la vue Conception. Le nom de la fonction buttonClicked s'affiche maintenant en regard de l'événement onClick. La fonction est liée au bouton zipButton. Vous ajouterez le code de cette fonction à la leçon suivante.
    6. Sur la page Général, remplacez la valeur de la propriété text du bouton par le nom suivant :
      Rechercher
    7. Pour enregistrer le fichier, appuyez sur Ctrl+S.
  7. Créez une boîte destinée à contenir la liste des sociétés de prêt hypothécaire.
    1. A partir du tiroir Layout de la palette, faites glisser un widget Box vers la première cellule de la troisième ligne et donnez-lui le nom suivant :
      listingBox
    2. Dans la vue Propriétés, sur la page Général, affectez la valeur 1à la propriété columns.
    3. Sur la page Position, affectez la valeur 150à la propriété width.
    4. Sur la page Agencement, affectez la valeur TOP à la propriété verticalAlignment et la valeur 2 à la propriété horizontalSpan.
    A ce stade, l'interface utilisateur se présente comme dans l'image suivante :
    Une grille trois par trois contenant une zone de saisie pour le code postal, un bouton et une zone vide
  8. A partir du tiroir Samples de la palette, faites glisser un widget de carte Google vers la dernière cellule de la troisième ligne, à côté du widget listingBox, et donnez-lui le nom suivant :
    localMap
    Actualisez la vue Conception de l'éditeur Rich UI en cliquant sur le bouton d'actualisation situé dans la partie supérieure droite de la vue Conception, et non dans celle de l'explorateur de projets. Le bouton d'actualisation contient deux flèches jaunes qui pointent dans des directions opposées.
    La surface de conception ressemble à ceci :
    L'écran affiche une ligne d'introduction, une zone pour la soumission d'un code postal, une zone pour les résultats de la recherche, et une carte par défaut.
  9. Pour enregistrer le fichier, appuyez sur Ctrl+S.
Le travail dans la vue Conception est terminé.

Si vous cliquez sur l'onglet Source, vous pouvez voir le code créé par l'éditeur EGL Rich UI. Ce code correspond à celui de la rubrique Code du fichier MapLocatorHandler.egl après la leçon 10.

Récapitulatif de la leçon

Vous avez appris à effectuer les tâches suivantes :
  • Créer des définitions d'enregistrement à partir des données extraites d'un service.
  • Configurer un composant Interface avec les caractéristiques permettant d'accéder à un service.
  • Créer une interface utilisateur intégrant une carte Google.

Dans la leçon suivante, vous ajouterez du code source pour finaliser le gestionnaire MapLocatorHandler.

< Précédent | Suivant >

Retour d'informations