< Précédent | Suivant >

Leçon 11 : Ajouter du code au gestionnaire de carte de localisation

Finalisez le code d'arrière-plan de l'interface utilisateur créée à la leçon précédente.

Finalisation du code source de MapLocatorHandler.egl

  1. Vérifiez que le fichier MapLocatorHandler.egl est ouvert dans l'éditeur Rich UI. Si vous êtes dans la vue Conception, cliquez sur l'onglet Source.
  2. Ajoutez une ligne vide juste avant la fonction start et déclarez une variable basée sur le composant Interface que vous avez créé :
    lookupService YahooLocalService{@restbinding};

    La propriété @restbinding indique que les caractéristiques d'accès au service sont dans votre code plutôt que dans le descripteur de déploiement EGL. La décision est pratique mais sans souplesse. Une modification de l'emplacement du service nécessite la modification du code source. La leçon 14 présente le descripteur de déploiement EGL, dans lequel vous insérerez probablement les caractéristiques d'accès au service pour la plupart de vos développements.

  3. Pour résoudre une référence au composant Interface, appuyez sur Ctrl+Maj+O. Les étapes suivantes consistent à ajouter de nouvelles marques d'erreur de couleur rouge, que vous ne supprimerez pas avant la fin de la leçon.
  4. N'ajoutez pas de contenu à la fonction start.
  5. Finalisez la fonction checkForEnter comme suit :
    function checkForEnter(event Event in)
       if(event.ch == 13)
          search();
       end
    end

    Considérons les caractéristiques d'arrière-plan suivantes : le code d'exécution EGL appelle la fonction checkForEnter et transmet un objet événement, qui est une structure de mémoire comportant les caractéristiques de l'événement. Dans ce cas, l'événement à l'origine de l'appel est onKeyDown, et l'objet événement inclut le caractère ASCII qui représente la frappe de l'utilisateur. Plus précisément, le nombre 13 est la valeur décimale du retour chariot (la touche Entrée) dans la table ASCII, comme indiqué ici : ASCII table and description (http://www.asciitable.com).

    La fonction checkForEnter est appelé uniquement si l'utilisateur appuie sur une touche comme touche Tabulation ou la touche Entrée lorsque la zone de texte dispose du focus. S'il s'agit de la touche Entrée, la fonction appelle à son tour la fonction search. Vous allez bientôt créer la fonction search.

  6. Finalisez la fonction buttonClicked :
    function buttonClicked(event Event in)
       search();
    end

    La fonction buttonClicked et sa relation avec la propriété onClick du bouton garantit que l'utilisateur appelle bien la fonction search lorsqu'il clique sur le bouton Rechercher.

  7. Pour ajouter la fonction search, insérez le code suivant à la fin du gestionnaire, avant la dernière instruction end du fichier :
    function search()
       localMap.zoom = 13;
       
       // affichage d'un marquer initial, indispensable pour afficher la carte
       // (le marqueur identifie uniquement le code postal)
       localMap.addMarker(new MapMarker
          {address = zipField.text, description = "zipcode:  " + zipField.text});
    
       // Appel du service distant Yahoo!, transmission du code postal
       call lookupService.getSearchResults("YahooDemo", zipField.text)
          returning to showResults onException displayError;
    end
    Notez les détails suivants :
    • Le widget EGL de carte Google comporte la propriété zoom, qui définit l'échelle de la carte. A la place de la petite échelle (avec une valeur de zoom de 8) utilisée par défaut pour la carte de Caroline du Nord, définissez une valeur de zoom de 13, ce qui produit une carte sur laquelle les rues sont identifiables.
    • Le widget EGL de carte Google inclut également la fonction addMarker, qui accepte un enregistrement de type MapMarker type et identifie sur la carte l'emplacement d'une adresse.

      Dans cet écran initial pour un code postal spécifique, la seule information à fournir à la fonction localMap.addMarker() est le code postal lui-même. Ensuite, vous définirez plus d'informations dans la propriété address, qui est utilisée pour afficher un marqueur spécifique à l'adresse.

  8. Puis, ajoutez la fonction showResults qui est appelée si l'accès au service Yahoo! a abouti sans erreur. Insérez le code suivant après la fonction search, avant la dernière instruction end du fichier :
    function showResults(retResult ResultSet in)
       linkListing HyperLink[0];
       for(i INT from 1 to retResult.result.getSize() by 1)
          newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};
          newLink.setAttribute("address", retResult.result[i].Address + ", "
             + retResult.result[i].city + ", " + retResult.result[i].state);
          newLink.setAttribute("title", retResult.result[i].Title);
          newLink.onClick ::= mapAddress;
          linkListing.appendElement(newLink);
       end
       listingBox.setChildren(linkListing);
    end	
    Votre appel au service renvoie un tableau contenant les informations sur la société de crédit hypothécaire. Prenez en compte les aspects suivants de la fonction showResults :
    • Chaque élément se compose d'un "titre" (c'est-à-dire, d'un nom de société) et d'une adresse.
    • La fonction showResults crée un tableau de widgets hyperlien et lit le tableau en entrée. Pour chaque élément du tableau en entrée, la fonction crée un élément dans le tableau de widgets hyperlien.
    • Comme le montre la déclaration suivante, chaque widget hyperlien contient du texte affichable et du remplissage et inclut une réservation (#) à la place d'une adresse Web :
      newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};

      L'hyperlien entraîne l'appel de code au lieu d'une adresse Web. Cependant, la présence de la réservation garantit que l'hyperlien affiche le texte d'une manière familière, avec un trait de soulignement et en couleur, comme si l'utilisateur ouvrait un site Web en cliquant sur l'hyperlien.

    • Cette fonction demande à la fonction setAttribute d'insérer une valeur dans l'arborescence DOM, dans une zone de mémoire spécifique au widget. En particulier, la fonction stocke un titre, puis une adresse, en vue de son extraction par une autre fonction.
    • Pour chaque widget hyperlien, la fonction showResults configure un comportement d'exécution en affectant la fonction mapAddress à l'événement onClick.
    • Le tableau complet des widgets hyperlien est désigné enfant unique de la zone de liste.
  9. Insérez la fonction suivante après la fonction showResults :
    function mapAddress(e Event in)
    
       // Affichage du marqueur lorsque l'utilisateur clique sur le lien
       businessAddress STRING = e.widget.getAttribute("address") as STRING;
       businessName STRING = e.widget.getAttribute("title") as STRING;
       localMap.addMarker(new MapMarker { 
          address = businessAddress, 
          description = businessName} );
    end

    Lorsque l'utilisateur clique sur un lien hypertexte, la fonction mapAddress extrait les attributs qui ont été définis dans la fonction showResults et positionne un marqueur sur la carte.

  10. Ajoutez maintenant le gestionnaire d'exceptions qui reçoit les données en cas d'échec du service Yahoo!. Insérez le code suivant après la fonction mapAddress, avant la dernière instruction end du fichier :
    function displayError(ex AnyException in)
       DojoDialogLib.showError("Yahoo Service", 
                               "Cannot invoke Yahoo Local Service: " 
                               + ex.message, null);
    end

    DojoDialogLib est un composant Bibliothèque du projet com.ibm.egl.rui.dojo.samples que vous avez ajouté à votre espace de travail à la leçon 2. La fonction showError fournie par cette bibliothèque affiche des informations dans une boîte de dialogue. L'appel de la fonction contient une chaîne nommée message, qui se trouve dans l'enregistrement de l'exception que le code d'exécution d'EGL transmet à la fonction displayError.

  11. Appuyez sur Ctrl+Maj+F pour formater le code, puis sur Ctrl+Maj+O pour résoudre les références, enfin 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 MapLocatorHandler.egl après la leçon 11.

Test du nouveau portlet

Ce portlet fonctionnant de manière indépendante, vous pouvez le tester séparément.

  1. Sauvegardez le fichier, puis cliquez sur Aperçu. EGL affiche le formulaire d'entrée avec la carte par défaut de la Caroline du Nord.
  2. Entrez le code postal suivant :
    10001
    Ce code postal est celui du centre de Manhattan.
  3. Appuyez sur la touche Entrée ou cliquez sur le bouton Rechercher. Une liste des sociétés de prêt hypothécaires s'affiche sur le côté gauche de l'écran. Sur la droite se trouve une carte de la ville de New York.
    Une carte du centre de Manhattan.
    Remarque : Il arrive que Yahoo! Local Search Service ne renvoie pas de données, auquel cas un message d'erreur est engendré par une exception de type null. 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.

  4. Cliquez sur l'un des noms de la colonne de gauche. Un marqueur indique l'emplacement de la société sur la carte. Si vous survolez le marqueur, le nom de la société s'affiche.
  5. Répétez la même recherche, ou lancez une recherche sur un code postal voisin, 10009 par exemple. Les marqueurs qui sont positionnés sur la carte y restent. Remarquez aussi que Yahoo! recherche également dans les codes postaux correspondant aux emplacements situés à proximité de celui qui a été saisi.
  6. Pour supprimer tous les marqueurs avant chaque recherche, cliquez sur l'onglet Source et ajoutez la ligne suivante au-dessus de la fonction showResults :
    localMap.removeAllMarkers();  
  7. Testez vos modifications dans l'onglet Aperçu.
  8. Fermez le fichier.

Récapitulatif de la leçon

Vous avez appris à effectuer les tâches suivantes :
  • Créer et utiliser une variable basée sur le service Local Search.
  • Répondre aux saisies de l'utilisateur.
  • Utiliser l'arborescence DOM pour transmettre des valeurs d'une fonction à une autre.
  • Commencer à utiliser un widget de carte.

Dans la leçon suivante, vous allez intégrer le nouveau gestionnaire dans l'application.

< Précédent | Suivant >

Retour d'informations