< Zurück | Weiter >

Lerneinheit 11: Code zum Handler für Landkartenanzeiger hinzufügen

Füllen Sie den Hintergrundcode für die Benutzerschnittstelle aus, die Sie in der vorherigen Lerneinheit erstellt haben.

Quellcode für MapLocatorHandler.egl fertigstellen

  1. Stellen Sie sicher, dass die Datei MapLocatorHandler.egl im Rich-UI-Editor geöffnet ist. Wenn Sie sich in der Entwurfssicht befinden, klicken Sie auf die Registerkarte Quelle.
  2. Fügen Sie direkt vor der Funktion start eine leere Zeile ein und deklarieren Sie eine Variable, die auf dem von Ihnen erstellten Schnittstellenabschnitt basiert.
    lookupService GooglePlacesService{@restbinding};

    Die Eigenschaft @restbinding gibt an, dass sich die Details für den Servicezugriff in Ihrem Code befinden, nicht im EGL-Implementierungsdeskriptor. Die Entscheidung ist bequem, aber unflexibel. Um die Serviceposition zu ändern, müssen Sie den Quellcode ändern. In Lerneinheit 14 wird der EGL-Implementierungsdeskriptor eingeführt. Dadurch verlagern Sie wahrscheinlich die Details für den Serverzugriff hauptsächlich in Ihre Entwicklungsarbeit.

  3. Drücken Sie Strg+Umsch+O, um einen Verweis auf den Schnittstellenabschnitt aufzulösen. Mit den nächsten Schritten fügen Sie neue rote Fehlermarkierungen hinzu, die Sie erst gegen Ende der Lerneinheit entfernen.
  4. Fügen Sie keinen Inhalt zur Funktion start hinzu.
  5. Schließen Sie die Funktion checkForEnter wie folgt ab:
    function checkForEnter(event Event in)
       if(event.ch == 10)
          search();
       end
    end

    Beachten Sie die folgende Hintergrundinformation: Der EGL-Laufzeitcode ruft die Funktion checkForEnter auf und übergibt ein Ereignisobjekt. Dies ist eine Speicherstruktur, die Details zu einem Ereignis enthält. In diesem Fall wurde der Aufruf durch das Ereignis onKeyDown verursacht und das Ereignisobjekt enthält das ASCII-Zeichen, das den Tastenanschlag des Benutzers darstellt. Konkret ist die Zahl 10 der Dezimalwert für den Wagenrücklauf (die Eingabetaste) in der ASCII-Tabelle, wie auf der folgenden Website beschrieben: ASCII Table and Description (http://www.asciitable.com).

    Die Funktion checkForEnter wird nur aufgerufen, wenn der Benutzer eine Taste wie die Tabulator- oder die Eingabetaste drückt, sobald das Textfeld aktiviert ist. Die Funktion ihrerseits ruft nur die Funktion search auf, wenn die Eingabetaste gedrückt wurde. Sie werden die Funktion search bald erstellen.

  6. Schließen Sie die Funktion buttonClicked() ab:
    function buttonClicked(event Event in)
       search();
    end

    Mit der Funktion buttonClicked und deren Beziehung zu der schaltflächenspezifischen Eigenschaft onClick wird sichergestellt, dass beim Klicken des Benutzers auf die Schaltfläche Suchen die Funktion search aufgerufen wird.

  7. Platzieren Sie zum Hinzufügen der Funktion search folgenden Code am Ende des Handlers, vor der letzten Anweisung end in der Datei:
    function search()
       localMap.zoom = 10;
       	localMap.removeAllMarkers(); 
       // show an initial marker, as necessary to display the map at all
       localMap.addMarker(new MapMarker{ latitude = "37.47", longitude = "-122.26", 
    		address = "I am here!", description = "San Francisco"});
    
       // Call the remote Google service, passing the type value
       call lookupService.getSearchResults( typeComboBox.value ) returning to showResults
          onException displayError;
    end
    Beachten Sie folgende Details:
    • Das EGL-Widget für Google-Landkarten enthält die Eigenschaft zoom, die den Maßstab der Landkarte angibt. Geben Sie nicht den großen, für die Standardlandkarte von North Carolina verwendeten Maßstab an, der den Wert 8 für zoom hatte, sondern stellen Sie den Wert für zoom auf 10. Dadurch erhalten Sie eine Landkarte, auf der einzelne Straßen in einer Stadt angezeigt werden.
    • Das EGL-Widget für Google-Landkarten enthält auch die Funktion addMarker, die einen Datensatz vom Typ MapMarker annimmt und die Position einer Eingabeadresse auf der Landkarte angibt.

      In dieser Eingangsanzeige für eine Suchergebnismenge ist die einzige Information, die Sie für die Funktion localMap.addMarker() bereitstellen, die Markierung für den Standort in der Stadt.

  8. Fügen Sie als nächstes die Funktion showResults hinzu, die aufgerufen wird, wenn der Zugriff auf den Google Places-Service erfolgreich und ohne Fehler erfolgt ist. Platzieren Sie folgenden Code nach der Funktion search vor der letzten Anweisung end in der Datei:
    linkListing HyperLink[0];
    
    for(i int from 1 to retResult.result.getSize() by 1)
    		newLink HyperLink{padding = 4, text = retResult.result[i].name, href = "#"};
    		newLink.setAttribute("title", retResult.result[i].vicinity );
    		newLink.setAttribute("lat",
    		retResult.result[i].geometry.location.lat);
    		newLink.setAttribute("lng",
    		retResult.result[i].geometry.location.lng);
    		newLink.onClick ::= mapAddress;
    		linkListing.appendElement(newLink);
    	end
    	listingBox.setChildren(linkListing);
    end
    Bei Ihrem Aufruf des Service wird eine Feldgruppe mit Details zu den Adressen zurückgegeben. Beachten Sie folgende Aspekte der Funktion showResults:
    • Jedes Element umfasst einen "title" (d. h. einen Adressnamen).
    • Die Funktion showResults erstellt eine Feldgruppe von Hyperlink-Widgets und liest durch die Eingabefeldgruppe. Für jedes Element in der Eingabefeldgruppe erstellt die Funktion ein Element in der Feldgruppe der Hyperlink-Widgets.
    • Wie in der folgenden Deklaration gezeigt, verfügt jedes Hyperlink-Widget über anzeigbaren Text und Füllung und enthält einen Platzhalter (#) anstelle einer Webadresse:
      newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};

      Der Hyperlink bewirkt, dass Code aufgerufen wird, keine Webadresse. Dennoch wird durch den Platzhalter sichergestellt, dass der Hyperlink Text in ähnlicher Weise anzeigt, nämlich mit Unterstreichungszeichen und in Farbe, wie wenn der Benutzer auf den Hyperlink klickt und dadadurch eine Website öffnet.

    • Die Funktion ruft die Funktion setAttribute auf, mit der ein Wert in der DOM-Baumstruktur platziert wird, in einem Speicherbereich, der speziell für das Widget vorgesehen ist. Die Funktion speichert insbesondere einen Breitengrad und einen Längengrad für den Abruf durch eine andere Funktion.
    • In Bezug auf die einzelnen Hyperlink-Widgets richtet die Funktion showResults ein Laufzeitverhalten ein, indem sie dem Ereignis onClick die Funktion mapAddress zuweist.
    • Die gesamte Feldgruppe der Hyperlink-Widgets wird als einziges untergeordnetes Element des Listenfensters zugewiesen.
  9. Fügen Sie nach der Funktion showResults die folgende Funktion ein:
    function mapAddress(e Event in)
    
    	// Show the marker when the user clicks the link
       businessAddress string = e.widget.getAttribute("address") as string;
       businessName string = e.widget.getAttribute("title") as string;
       lat string = e.widget.getAttribute("lat") as string;
       lng string = e.widget.getAttribute("lng") as string;
       localMap.addMarker( new MapMarker{ latitude = lat, 
       		longitude = lng, address = businessAddress, description = businessName});
    End

    Wenn der Benutzer während der Ausführung auf den Hyperlink klickt, ruft die Funktion mapAddress die Attribute ab, die in der Funktion showResults festgelegt wurden, und setzt eine Markierung auf die angezeigte Landkarte.

  10. Nun können Sie den Ausnahmebehandlungshandler hinzufügen, der Daten empfängt, wenn der Zugriff auf den Google Places-Service fehlschlägt. Platzieren Sie folgenden Code nach der Funktion mapAddress vor der letzten Anweisung end in der Datei:
    function displayError(ex AnyException in)
       DojoDialogLib.showError("Google Service", 
                               "Cannot invoke Google Places service: " + ex.message, null);
    end

    DojoDialogLib ist ein Bibliotheksabschnitt im Projekt com.ibm.egl.rui.dojo.samples, das Sie in Lerneinheit 2 zu Ihrem Arbeitsbereich hinzugefügt hatten. Die Funktion showError in dieser Bibliothek zeigt in einem Dialogfenster Informationen an. Der Funktionsaufruf umfasst eine Zeichenfolge namens message. Dies ist der Ausnahmedatensatz, den der EGL-Laufzeitcode an die Funktion displayError übergibt.

  11. Formatieren Sie den Code durch Drücken von Strg+Umsch+F, lösen Sie die Verweise durch Drücken von Strg+Umsch+O auf und speichern Sie die Datei. Sollten in Ihrer Quellendatei Fehler angezeigt werden, vergleichen Sie Ihren Code mit dem Inhalt der Datei im Abschnitt Fertiger Code für MapLocatorHandler.egl nach Lerneinheit 11.

Neues Portlet testen

Da dieses Portlet unabhängig funktioniert, können Sie es separat testen.

  1. Stellen Sie sicher, dass die Datei gespeichert wurde, und klicken Sie auf Vorschau. EGL zeigt das Eingabeformular mit der Standardlandkarte von North Carolina an.
  2. Wählen Sie die Hypothek in der Auswahlliste für den Typ aus.
  3. Drücken Sie die Eingabetaste oder klicken Sie auf die Schaltfläche Suchen. Links in der Anzeige wird eine Liste der Hypothekenadressen angezeigt. Auf der rechten Seite wird eine Landkarte von San Francisco angezeigt.
    Landkarte von Midtown Manhattan
    Anmerkung: Anmerkung: Manchmal gibt die Google Places-Suche keine Daten zurück; in diesem Fall wird eine Fehlernachricht aufgrund einer Null-Ausnahmebedingung (“null exception”) angezeigt. Wenn der Service nicht verfügbar ist oder keine Daten zurückgibt, müssen Sie auf 'Abbrechen' klicken und längere Zeit auf den Abschluss des Lernprogramms warten.
  4. Klicken Sie auf einen der Namen in der linken Spalte. Auf der Landkarte wird eine Markierung angezeigt, die den Standort des Kreditgebers angibt. Wenn Sie den Cursor über die Markierung bewegen, wird der Name des Unternehmnes angezeigt.
  5. Wiederholen Sie dieselbe Suche oder suchen Sie ein nahe gelegenes Café. Die Markierungen, die Sie auf der Landkarte gesetzt haben, verbleiben dort.
  6. Wenn Sie vor jeder Suche alle Markierungen entfernen wollen, müssen Sie auf die Registerkarte Quelle klicken und oben in der Funktion showResults folgende Zeile hinzufügen:
    localMap.removeAllMarkers();  
  7. Testen Sie Ihre Arbeit auf der Registerkarte Vorschau.
  8. Schließen Sie die Datei.

Prüfpunkt für die Lerneinheit

Sie haben gelernt, folgende Aufgaben durchzuführen:
  • Variable erstellen und verwenden, die auf dem Service "Lokale Suche" basiert
  • Auf Tastatureingaben des Benutzers antworten
  • Mithilfe der DOM-Baumstruktur Werte von einer Funktion an eine andere übergeben
  • Verwendung eines Widgets für Landkarten starten

In der nächsten Lerneinheit betten Sie den neuen Handler in die Anwendung ein.

< Zurück | Weiter >

Feedback