< Indietro | Avanti >

Lezione 10: Creazione del gestore dell'indicatore di posizione della mappa

Iniziare a creare un portlet in cui è possibile immettere un codice di avviamento postale e visualizzare un elenco di società di prestiti ipotecari ed una mappa. Fare clic sul nome di una società nell'elenco e la mappa visualizza un indicatore di posizione.
Questa lezione si basa sulle funzionalità di due siti Web esterni:
Se ora o successivamente si desiderano ulteriori informazioni relative ad alcune tecnologie utilizzate nelle lezioni 10 e 11, consultare le fonti riportate di seguito:

Creazione di record per il file dell'interfaccia

Per utilizzare il servizio di ricerca locale di Yahoo!, verranno create le seguenti parti EGL:

È possibile creare le parti Record in diversi modi, ma in questa lezione verrà eseguito l'accesso ad un servizio REST su Web e, nell'indirizzo Web, verranno inclusi i dettagli necessari per richiamare i dati dal servizio. La procedura guidata Nuovo record EGL consentirà di creare le parti Record che corrispondono ai dati richiamati al momento dello sviluppo.

Effettuare le operazioni riportate di seguito:

  1. Nel progetto MortgageServiceProject, nella cartella EGLSource, fare clic con il tasto destro del mouse sul package services e fare clic su Nuovo > Record.
  2. Nella prima pagina della procedura guidata Nuovo record EGL, accettare i dettagli relativi al package ed alla cartella di origine ed immettere il nome riportato di seguito per il nuovo file sorgente:
    YahooRecords
  3. Fare clic su Avanti.
  4. Nella pagina Template, fare clic su Record da XML. Fare clic su Avanti.
  5. Nella finestra Record da XML, fare clic su Crea da un URL ed incollare il seguente URL nel campo URL:
    http://local.yahooapis.com/LocalSearchService/V3/localSearch?
    appid=YahooDemo&query=pizza&zip=94306&results=2
    Unire le due righe in modo da formare un URL composto da una sola riga senza spazi.
    L'URL è visualizzato nel campo Crea da un URL.
  6. Fare clic su Avanti. La procedura guidata visualizza una pagina Riepilogo che contiene un'anteprima del codice che verrà inserito nel nuovo file.
    Il codice è visualizzato in una finestra Anteprima.
    Nota: In alcuni casi, il servizio di ricerca locale di Yahoo! non restituisce dati; in questo caso viene creata solo la parte Record ResultSet. 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.

  7. Fare clic su Fine; questa operazione salva il file.
  8. Se vengono visualizzati errori nel file sorgente, confrontare il codice con il contenuto del file in Codice terminato per YahooRecords.egl dopo la Lezione 10.
  9. Chiudere il file.

Creazione dell'interfaccia di ricerca locale

Quando viene utilizzato un servizio Web esterno, viene creata una parte Interfaccia che identifica le operazioni del servizio a cui verrà eseguito l'accesso. La parte Interfaccia viene utilizzata dal codice richiedente e non è un componente del servizio stesso.

Effettuare le operazioni riportate di seguito:

  1. Creare una nuova parte Interfaccia facendo clic con il tasto destro del mouse su MortgageUIProject e facendo clic su Nuovo > Interfaccia.
  2. Nella finestra Nuova parte interfaccia EGL, completare i campi riportati di seguito:
    1. Nel campo Package, immettere il seguente nome:
      interfaces
    2. Nel campo Nome file sorgente EGL, immettere il seguente nome:
      IYahooLocalService
    3. Fare clic su Fine.
  3. Sostituire il contenuto del file con il codice riportato di seguito:
    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
    Un volta incollato il codice, effettuare le operazioni riportate di seguito:
    1. Rimuovere le righe supplementari, in modo che il valore uriTemplate sia su una singola riga, senza spazi.
    2. Premere Ctrl-Maius-O per includere l'istruzione import necessaria per risolvere il riferimento alla parte Record ResultSet.
    3. Salvare il file.
    Il prototipo di funzione getSearchResults assicura che, quando il richiedente richiama il servizio, vengano utilizzati gli argomenti appId e zipCode del richiedente al posto degli elementi racchiusi tra parentesi nel valore uriTemplate. Il codice runtime EGL utilizza l'URI completato per accedere al servizio e, in questo caso, i dettagli riportati di seguito relativi a tale URI sono sempre veri:
    • L'URI include la parola chiave “mortgage,” utilizzata dal servizio per ricercare i dati.
    • L'URI specifica che il servizio deve restituire al massimo 10 risultati.
  4. Se vengono visualizzati errori nel file sorgente, confrontare il codice con il contenuto del file in Codice terminato per IYahooLocalService.egl dopo la Lezione 10.
  5. In assenza di errori, chiudere il file.

Creazione del gestore MapLocatorHandler

Per creare il gestore MapLocatorHandler:

  1. Nella cartella MortgageUIProject/EGLSource, nel package handlers, creare una parte Gestore Rich UI come nella lezione 4. Assegnare al gestore il nome riportato di seguito:
    MapLocatorHandler
    Il gestore viene visualizzato nella vista Progettazione dell'editor Rich UI.
  2. Fare clic all'interno del layout di griglia, fare clic con il tasto destro del mouse sulla cella selezionata e fare clic su Elimina > Riga. Il layout di griglia dispone di tre righe.
  3. Creare una riga di testo introduttivo:
    1. Dal drawer Visualizzazione ed input della tavolozza, trascinare un widget TextLabel nella prima cella del widget GridLayout ed assegnare il seguente nome:
      introLabel
    2. Nella vista Proprietà, apportare le modifiche riportate di seguito:
      • Nella pagina Generale, impostare la proprietà text sulla seguente frase:
        Ricerca di aziende di prestiti ipotecari locali
      • Nella pagina Layout, impostare la proprietà horizontalSpan su 3.
      • Per salvare il file, premere Ctrl-S.
  4. Creare un'etichetta per il campo di input del codice di avviamento postale:
    1. Trascinare un widget TextLabel nella prima cella della seconda riga ed assegnare il nome riportato di seguito:
      zipLabel
    2. Nella vista Proprietà, impostare la proprietà text nel modo riportato di seguito:
      Codice avviamento postale:
  5. Creare un campo di testo in cui è possibile immettere un codice di avviamento postale:
    1. Trascinare un widget TextField nella seconda cella della seconda riga ed assegnare il nome riportato di seguito:
      zipField
    2. Nella vista Proprietà, nella pagina Posizione, impostare la proprietà width su 100.
    3. Nella pagina Eventi, fare clic sulla riga per l'evento onKeyDown. Fare clic sul simbolo di addizione (+) per aggiungere una funzione per l'evento. Viene visualizzata la finestra di dialogo Nuovo gestore eventi.
    4. Immettere il nome riportato di seguito per la nuova funzione:
      checkForEnter
    5. Fare clic su OK. EGL passa alla vista Origine e visualizza la funzione checkForEnter. Notare due ulteriori aggiunte recenti:
      • Nella dichiarazione del widget zipField, la proprietà onKeyDown è impostata su checkForEnter.
      • La seguente istruzione import risolve il riferimento al tipo di widget TextField:
        import com.ibm.egl.rui.widgets.TextField;
    6. Fare clic su Progettazione per tornare alla vista Progettazione. Il nome della funzione checkForEnter è ora visualizzato accanto all'evento onKeyDown. La funzione è collegata al campo zipField. Il codice per questa funzione verrà aggiunto nella lezione successiva.
    7. Per salvare il file, premere Ctrl-S.
  6. Aggiungere un pulsante per avviare la ricerca del codice di avviamento postale specificato:
    1. Trascinare un widget Button (Dojo) dal drawer Visualizzazione ed input della tavolozza alla terza cella nella seconda riga. Assegnare il nome riportato di seguito:
      zipButton
    2. Nella vista Proprietà, nella pagina Eventi, fare clic sulla riga per l'evento onClick. Fare clic sul simbolo di addizione (+) per aggiungere una funzione per l'evento.
    3. Nella finestra Nuovo gestore eventi, immettere il seguente nome per la nuova funzione:
      buttonClicked
    4. Fare clic su OK. EGL passa alla vista Origine e visualizza la funzione buttonClicked.
    5. Fare clic su Progettazione per tornare alla vista Progettazione. Il nome della funzione buttonClicked è ora visualizzato accanto all'evento onClick. La funzione è collegata al pulsante zipButton. Il codice per questa funzione verrà aggiunto nella lezione successiva.
    6. Nella pagina Generale, impostare la proprietà text per il pulsante sul nome riportato di seguito:
      Cerca
    7. Per salvare il file, premere Ctrl-S.
  7. Creare un riquadro in cui visualizzare l'elenco delle società di prestiti ipotecari.
    1. Dal drawer Layout della tavolozza, trascinare un widget Box nella prima cella della terza riga ed assegnare il nome riportato di seguito:
      listingBox
    2. Nella vista Proprietà, nella pagina Generale, impostare la proprietà columns su 1.
    3. Nella pagina Posizione, impostare la proprietà width su 150.
    4. Nella pagina Layout, impostare la proprietà verticalAlignment su TOP e la proprietà horizontalSpan su 2.
    A questo punto, l'interfaccia utente è simile a quella riportata nella seguente figura:
    Una griglia tre per tre che contiene un campo di immissione per il codice di avviamento postale, un pulsante ed un riquadro vuoto
  8. Dal drawer Esempi della tavolozza, trascinare un widget Google Map nell'ultima cella della terza riga, accanto al widget listingBox, ed assegnare il seguente nome:
    localMap
    Aggiornare la vista Progettazione dell'editor Rich UI facendo clic sul pulsante Aggiorna in alto a destra nella vista Progettazione, non in Esplora progetti. Il pulsante Aggiorna mostra due frecce gialle puntate in direzioni opposte.
    L'area Progettazione è simile a quella riportata di seguito:
    L'immagine mostra una riga introduttiva, un campo per l'immissione di un codice di avviamento postale, un riquadro per i risultati della ricerca ed una mappa predefinita.
  9. Per salvare il file, premere Ctrl-S.
Le operazioni nella vista Progettazione sono state terminate.

Facendo clic sulla scheda Origine, è possibile visualizzare il codice creato dall'editor EGL Rich UI. Tale codice è fornito anche in Codice terminato per MapLocatorHandler.egl dopo la Lezione 10.

Riepilogo della lezione

È stato illustrato come completare le seguenti attività:
  • Creare definizioni Record dai dati richiamati da un servizio.
  • Configurare una parte Interfaccia con i dettagli che consentono l'accesso al servizio.
  • Creare un'interfaccia utente che contiene una mappa di Google.

Nella lezione successiva, verrà aggiunto il codice sorgente per completare il gestore MapLocatorHandler.

< Indietro | Avanti >

Feedback