< Indietro | Avanti >

Lezione 11: Aggiunta di codice al gestore dell'indicatore di posizione della mappa

Completare il codice di background per l'interfaccia utente creata nella lezione precedente.

Completamento del codice sorgente per MapLocatorHandler.egl

  1. Verificare che il file MapLocatorHandler.egl sia aperto nell'editor Rich UI. Se è attiva la vista Progettazione, fare clic sulla scheda Origine.
  2. Aggiungere una riga vuota prima della funzione start e dichiarare una variabile basata sulla parte Interfaccia creata:
    lookupService YahooLocalService{@restbinding};

    La proprietà @restbinding indica che i dettagli relativi all'accesso al servizio sono presenti nel codice e non del descrittore di distribuzione EGL. La decisione è utile ma non flessibile. Una modifica nella posizione del servizio richiede la modifica del codice sorgente. La Lezione 14 introduce il descrittore di distribuzione EGL, dove verranno aggiunti i dettagli di accesso al servizio nella maggior parte del lavoro di sviluppo.

  3. Per risolvere un riferimento alla parte Interfaccia, premere Ctrl-Maius-O. Nei passi successivi, verranno aggiunti nuovi contrassegni di errore rossi, che verranno rimossi successivamente nella lezione.
  4. Non aggiungere contenuto alla funzione start.
  5. Completare la funzione checkForEnter come riportato di seguito:
    function checkForEnter(event Event in)
       if(event.ch == 13)
          search();
       end
    end

    Considerare il seguente dettaglio di background: il codice runtime EGL richiama la funzione checkForEnter e passa un oggetto eventi, una struttura di memoria che include dettagli relativi all'evento. In questo caso, l'evento che ha determinato il richiamo è onKeyDown e l'oggetto eventi include il carattere ASCII che rappresenta il tasto premuto dall'utente. In particolare, il numero 13 è il valore decimale per il ritorno a capo (il tasto INVIO) nella tabella ASCII, come indicato nella pagina: ASCII table and description (http://www.asciitable.com).

    La funzione checkForEnter viene richiamata solo se l'utente preme il tasto di tabulazione o il tasto INVIO quando il campo di testo è attivo. A sua volta, la funzione richiama la funzione search solo se è stato premuto il tasto INVIO. La funzione search verrà creata successivamente.

  6. Completare la funzione buttonClicked():
    function buttonClicked(event Event in)
       search();
    end

    La funzione buttonClicked e la relativa relazione con la proprietà onClick specifica del pulsante assicura che, quando l'utente fa clic sul pulsante Cerca, viene richiamata la funzione search.

  7. Per aggiungere la funzione search, inserire il codice riportato di seguito alla fine del gestore, prima dell'istruzione end finale nel file:
    function search()
       localMap.zoom = 13;
       
       // mostra un indicatore iniziale, se necessario per visualizzare la mappa
       // (l'indicatore identifica solo il codice di avviamento postale)
       localMap.addMarker(new MapMarker
          {address = zipField.text, description = "zipcode:  " + zipField.text});
    
       // Richiamare il servizio Yahoo! remoto, passando il codice di avviamento postale
       call lookupService.getSearchResults("YahooDemo", zipField.text)
          returning to showResults onException displayError;
    end
    Notare i dettagli riportati di seguito:
    • Il widget Google map EGL include la proprietà zoom, che specifica la scala della mappa. Invece di specificare la scala di grandi dimensioni utilizzata per la mappa predefinita dello stato di North Carolina, in cui il valore zoom era 8, impostare il valore zoom su 13, che crea una mappa che visualizza le singole strade cittadine.
    • Il widget Google map EGL, inoltre, include la funzione addMarker, che accetta un record di tipo MapMarker ed identifica la posizione della mappa di un indirizzo di input.

      In questa visualizzazione iniziale per un codice di avviamento postale specifico, l'unico dettaglio fornito alla funzione localMap.addMarker() è il codice di avviamento postale stesso. Successivamente, viene impostata la proprietà address per fornire ulteriori dettagli, utilizzati per visualizzare un indicatore specifico dell'indirizzo.

  8. Successivamente, aggiungere la funzione showResults che viene richiamata se l'accesso al servizio Yahoo! viene eseguito senza errori. Inserire il codice riportato di seguito dopo la funzione search, prima dell'ultima istruzione end nel file:
    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	
    La chiamata al servizio restituisce un array di dettagli delle società di prestiti ipotecari. Considerare i seguenti aspetti della funzione showResults:
    • Ciascun elemento è composto da un “title” (il nome della società) e da un indirizzo.
    • La funzione showResults crea un array di widget di collegamento ipertestuale e scorre l'array di input. Per ciascun elemento nell'array di input, la funzione crea un elemento nell'array dei widget di collegamento ipertestuale.
    • Come mostrato dalla seguente dichiarazione, ciascun widget di collegamento ipertestuale dispone di elementi di riempimento e testo visualizzabile ed include un segnaposto (#) invece di un indirizzo Web:
      newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};

      Il collegamento ipertestuale causa il richiamo di codice invece di un indirizzo Web. Tuttavia, la presenza del segnaposto garantisce che il collegamento ipertestuale visualizzi il testo in modo classico, con la sottolineatura ed a colori, come se la selezione del collegamento ipertestuale determini l'apertura di un sito Web.

    • La funzione richiama la funzione setAttribute per inserire un valore nella struttura ad albero DOM, in un'area di memoria specifica per il widget. In particolare, la funzione memorizza un titolo ed un indirizzo per il richiamo da parte di un'altra funzione.
    • In relazione a ciascun widget di collegamento ipertestuale, la funzione showResults imposta il funzionamento al runtime assegnando la funzione mapAddress all'evento onClick.
    • L'array completo di widget di collegamento ipertestuale viene assegnato come unico figlio del riquadro di elenco.
  9. Inserire la seguente funzione dopo la funzione showResults:
    function mapAddress(e Event in)
    
       // Visualizza l'indicatore quando l'utente fa clic sul collegamento
       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

    Quando l'utente fa clic sul collegamento ipertestuale al runtime, la funzione mapAddress richiama gli attributi impostati nella funzione showResults ed imposta un indicatore nella mappa visualizzata.

  10. Ora, viene aggiunto il gestore delle eccezioni che riceve i dati in caso di errore di accesso al servizio Yahoo!. Inserire il codice riportato di seguito dopo la funzione mapAddress, prima dell'ultima istruzione end nel file:
    function displayError(ex AnyException in)
       DojoDialogLib.showError("Yahoo Service", 
                               "Cannot invoke Yahoo Local Service: " 
                               + ex.message, null);
    end

    DojoDialogLib è una parte Libreria nel progetto com.ibm.egl.rui.dojo.samples aggiunto al workspace nella Lezione 2. La funzione showError in tale libreria visualizza le informazioni in una finestra di dialogo. Il richiamo della funzione include una stringa denominata message, che si trova nel record dell'eccezione passato dal codice runtime EGL alla funzione displayError.

  11. Formattare il codice premendo i tasti Ctrl-Maius-F, risolvere i riferimenti premendo Ctrl+Maius+O e salvare il file. Se vengono visualizzati errori nel file sorgente, confrontare il codice con il contenuto del file in Codice terminato per MapLocatorHandler.egl dopo la Lezione 11.

Verifica del nuovo portlet

Poiché tale portlet funziona in modo indipendente, è possibile eseguirne il test separatamente.

  1. Accertarsi di salvare il file, quindi fare clic Anteprima. EGL visualizza il modulo di immissione con la mappa predefinita dello stato di North Carolina.
  2. Immettere il seguente codice di avviamento postale:
    10001
    Tale codice fa riferimento a Manhattan.
  3. Premere il tasto Invio oppure fare clic sul pulsante Cerca. Nella parte in basso a sinistra dello schermo, viene visualizzato un elenco delle società di prestiti ipotecari. Nella parte destra, è visualizzata una mappa di New York City.
    Mappa di Manhattan.
    Nota: in alcuni casi, il servizio di ricerca locale di Yahoo! non restituisce dati; in questo caso, viene visualizzato un messaggio di errore a causa di una “eccezione null”. La mancanza di dati è più probabile alla domenica. Se il servizio non è disponibile o non restituisce dati, fare clic su Annulla e completare l'esercitazione in un momento successivo.

    I problemi relativi al servizio di ricerca locale di Yahoo! possono essere notificati nella pagina “Local API – General Questions” all'indirizzo http://developer.yahoo.net/forum.

  4. Fare clic su uno dei nomi nella colonna di sinistra. La mappa visualizza un indicatore che mostra la posizione della società. Spostando il cursore sull'indicatore, viene visualizzato il nome della società.
  5. Ripetere la stessa ricerca oppure eseguire una ricerca in base ad un codice di avviamento postale vicino, come, ad esempio, 10009. Gli indicatori posizionati sulla mappa restano presenti. Inoltre, notare che la ricerca di Yahoo! ha richiamato gli indirizzi nelle aree adiacenti a quella specificata.
  6. Se si desidera rimuovere tutti gli indicatori prima di ciascuna ricerca, fare clic sulla scheda Origine ed aggiungere la riga riportata di seguito all'inizio della funzione showResults:
    localMap.removeAllMarkers();  
  7. Verificare il proprio lavoro nella scheda Anteprima.
  8. Chiudere il file.

Riepilogo della lezione

È stato illustrato come completare le seguenti attività:
  • Creare ed utilizzare una variabile basata sul servizio di ricerca locale.
  • Rispondere in base ai tasti premuti dall'utente.
  • Utilizzare la struttura ad albero DOM per passare i valori da una funzione all'altra.
  • Iniziare ad utilizzare un widget mappa.

Nella lezione successiva, il nuovo gestore verrà integrato nell'applicazione.

< Indietro | Avanti >

Feedback