< 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 YahooLocalService{@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 == 13)
          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 13 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 = 13;
       
       // show an initial marker, as necessary to display the map at all
       // (the marker identifies only the zip code)
       localMap.addMarker(new MapMarker
          {address = zipField.text, description = "zipcode:  " + zipField.text});
    
       // Call the remote Yahoo! service, passing the zip code
       call lookupService.getSearchResults("YahooDemo", zipField.text)
          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 13. 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 bestimmte Postleitzahl ist die einzige Information, die Sie für die Funktion localMap.addMarker() bereitstellen, die Postleitzahl selbst. Später geben Sie detailliertere Informationen an, indem Sie die Eigenschaft address festlegen, mit der eine adressspezifische Markierung angezeigt wird.

  8. Fügen Sie als nächstes die Funktion showResults hinzu, die aufgerufen wird, wenn der Zugriff auf den Yahoo!-Service erfolgreich und ohne Fehler erfolgt ist. Platzieren Sie folgenden Code nach der Funktion search vor der letzten Anweisung end in der Datei:
    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	
    Bei Ihrem Aufruf des Service wird eine Feldgruppe mit Details zu Hypothekenkreditgebern zurückgegeben. Beachten Sie folgende Aspekte der Funktion showResults:
    • Jedes Element umfasst einen “title” (Titel, d. h. einen Firmennamen des Kreditgebers) und eine Adresse.
    • 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 Titel und anschließend eine Adresse 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;
       localMap.addMarker(new MapMarker {
          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 Yahoo!-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("Yahoo Service",
                               "Cannot invoke Yahoo Local 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. Geben Sie folgende Postleitzahl ein:
    10001
    Die Postleitzahl bezeichnet Midtown Manhattan.
  3. Drücken Sie die Eingabetaste oder klicken Sie auf die Schaltfläche Suchen. Links in der Anzeige wird eine Liste mit Hypothekenkreditgebern angezeigt. Auf der rechten Seite sieht man eine Landkarte von New York City.
    Landkarte von Midtown Manhattan
    Anmerkung: Manchmal gibt der Service "Lokale Suche" von Yahoo! keine Daten zurück. In diesem Fall wird eine Fehlernachricht aufgrund einer Null-Ausnahmebedingung (“null exception”) angezeigt. Am wahrscheinlichsten ist das Fehlen von Daten sonntags. Wenn der Service nicht verfügbar ist oder keine Daten zurückgibt, müssen Sie auf Abbrechen klicken und längere Zeit mit dem Abschluss des Lernprogramms warten.

    Auf der folgenden Website können Sie über Probleme mit dem Service "Lokale Suche" von Yahoo! berichten: “Local API – General Questions” unter http://developer.yahoo.net/forum.

  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 Kreditgebers angezeigt.
  5. Wiederholen Sie dieselbe Suche oder suchen Sie mit einer nahe gelegenen Postleitzahl wie 10009. Die Markierungen, die Sie auf der Landkarte gesetzt haben, verbleiben dort. Beachten Sie außerdem, dass bei der Yahoo!-Suche Adressen in Postleitzahlbereichen abgerufen wurden, die an die angegebene Postleitzahl angrenzen.
  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