< Zurück | Weiter >

Lerneinheit 10: Handler für Landkartenanzeiger erstellen

Beginnen Sie mit der Erstellung eines Portlets, in das Sie eine Postleitzahl eingeben und dem Sie eine Liste mit Hypothekenadressen und eine Landkarte anzeigen können. Wenn Sie in der Liste auf eine Adresse klicken, wird auf der Landkarte eine Standortmarkierung angezeigt.

Diese Lerneinheit beruht auf Leistungsmerkmalen der beiden folgenden externen Websites:
Wenn Sie sofort oder später mehr über einige der in den Lerneinheiten 10 und 11 verwendeten Technologien erfahren wollen, können Sie dazu die folgenden Quellen nutzen:

Datensätze für die Schnittstellendatei erstellen

Erstellen Sie die folgenden EGL-Abschnitte zur Verwendung des Google Places-Service:

Sie können die Datensatzabschnitte auf unterschiedliche Weise erstellen. In dieser Lerneinheit greifen Sie jedoch auf einen REST-Service im Internet zu und binden in die Webadresse die Details ein, die zum Abrufen der Daten aus dem Service erforderlich sind. Der Assistent Neuer EGL-Datensatz erstellt die Datensatzabschnitte, die den zur Entwicklungszeit abgerufenen Daten entsprechen.

Gehen Sie wie folgt vor:

  1. Klicken Sie im Projekt MortgageServiceProject im Ordner EGLSource mit der rechten Maustaste auf das Paket services und klicken Sie auf Neu > Datensatz.
  2. Übernehmen Sie auf der ersten Seite des Assistenten Neuer EGL-Datensatz die Angaben zum Quellenordner und Paket und geben Sie folgenden Namen für die neue Quellendatei ein:
    GooglePlaceRecords
  3. Klicken Sie auf Weiter.
  4. Klicken Sie auf der Seite Schablonen auf Datensätze aus XML. Klicken Sie auf Weiter.
  5. Klicken Sie im Fenster Datensätze aus XML auf Aus URL erstellen und fügen Sie folgende URL in das Feld URL ein:
    https://maps.googleapis.com/maps/api/place/search/xml?location=-33.8670522,151.1957362
    &radius=1000&types=cafe&sensor=false&key=AIzaSyD_K9zveT6jhxgCApduywaOTuD5FiQFgpI&language=en
    Verbinden Sie die beiden Zeilen zu einer einzeiligen URL ohne Leerzeichen.
    Die URL wird im Feld 'Aus URL erstellen' angezeigt.
  6. Klicken Sie auf Weiter. Der Assistent zeigt die Seite Zusammenfassung mit einer Vorschau des Codes an, den er in der neuen Datei platzieren wird.
    Der Code wird im Fenster 'Vorschau' angezeigt.
    Anmerkung: Manchmal werden vom Google-API-Service keine Daten zurückgegeben; in diesem Fall wird nur der Datensatzabschnitt ResultSet erstellt. 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.
  7. Klicken Sie auf Fertig stellen. Dadurch wird die Datei gespeichert.
  8. Sollten in Ihrer Quellendatei Fehler angezeigt werden, vergleichen Sie Ihren Code mit dem Inhalt der Datei im Abschnitt Fertiger Code für GooglePlaceRecords.egl nach Lerneinheit 10.
  9. Schließen Sie die Datei.

Schnittstelle für lokale Suche erstellen

Bei Verwendung eines externen Web-Service erstellen Sie einen Schnittstellenabschnitt, der die Serviceoperationen angibt, auf die zugegriffen wird. Der Schnittstellenabschnitt wird von dem Anforderungscode verwendet ist selbst keine Komponente des Service.

Gehen Sie wie folgt vor:

  1. Erstellen Sie einen neuen Schnittstellenabschnitt, indem Sie mit der rechten Maustaste auf MortgageUIProject klicken und dann auf Neu > Schnittstelle klicken.
  2. Füllen Sie im Fenster Neuer EGL-Schnittstellenabschnitt folgende Felder aus:
    1. Geben Sie im Feld Paket den folgenden Namen ein:
      interfaces
    2. Geben Sie im Feld Name der EGL-Quellendatei den folgenden Namen ein:
      GooglePlaceRecords
    3. Klicken Sie auf Fertig stellen.
  3. Ersetzen Sie den Inhalt der Datei durch folgenden Code:
    package interfaces;
    
    // interface
    interface GooglePlacesService
    function getSearchResults( typeName string? in) 
    returns(PlaceSearchResponse)
          {@GetRest{uriTemplate =
    "https://maps.googleapis.com/maps/api/place/search/xml?location
    =37.47,-122.26&radius=50000&sensor=false&key=AIzaSyD_K9zveT6jhx
    gCApduywaOTuD5FiQFgpI&language=en&keyword={typeName}",
    							responseFormat = XML}}; end
    Führen Sie nach dem Einfügen des Codes folgende Schritte aus:
    1. Löschen Sie die überzähligen Zeilen, sodass sich der Wert für uriTemplate in einer einzigen Zeile befindet und keine Leerzeichen enthält.
    2. Drücken Sie Strg+Umsch+O, um die import-Anweisung einzubinden, die für die Auflösung des Verweises auf den Datensatzabschnitt PlaceSearchResponse erforderlich ist.
    3. Speichern Sie die Datei.
    Der Funktionsprototyp getSearchResults stellt sicher, dass bei einem Serviceaufruf durch den Anforderer dessen Typargument anstelle der Elemente in eckigen Klammern im Wert für uriTemplate verwendet wird. Der EGL-Laufzeitcode greift über die abgeschlossene URI auf den Service zu. Die URI gibt an, dass der Service höchstens 10 Ergebnisse zurückgeben soll:
    • Die URI enthält das Schlüsselwort “mortgage” (Hypothek), welches von dem Service für die Datensuche verwendet wird.
    • Die URI gibt an, dass der Service höchstens 10 Ergebnisse zurückgeben soll.
  4. Sollten in Ihrer Quellendatei Fehler angezeigt werden, vergleichen Sie Ihren Code mit dem Inhalt der Datei im Abschnitt Fertiger Code für GooglePlacesService.egl nach Lerneinheit 10.
  5. Schließen Sie die Datei, sofern keine Fehler vorliegen.

Handler MapLocatorHandler erstellen

So erstellen Sie den Handler MapLocatorHandler:

  1. Erstellen Sie im Ordner MortgageUIProject/EGLSource im Paket handlers einen Rich-UI-Handlerabschnitt analog zu Lerneinheit 4. Geben Sie dem Handler den folgenden Namen:
    MapLocatorHandler
    Der Handler wird im Rich-UI-Editor in der Entwurfssicht geöffnet.
  2. Klicken Sie in das Rasterlayout, klicken Sie auf die ausgewählte Zeile und klicken Sie dann auf Löschen > Zeile. Das Rasterlayout enthält drei Zeilen.
  3. Erstellen Sie eine Zeile mit einführendem Text:
    1. Ziehen Sie aus dem Ablagefach Anzeige und Eingabe der Palette ein Widget TextLabel auf die erste Zelle des Widgets GridLayout und geben Sie ihm den folgenden Namen:
      introLabel
    2. Nehmen Sie in der Sicht 'Eigenschaften' folgende Änderungen vor:
      • Ändern Sie auf der Seite 'Allgemein' die Eigenschaft text in die folgende Wortfolge:
        Search for places in San Francisco:
      • Stellen Sie auf der Seite 'Layout' die Eigenschaft horizontalSpan auf 3 ein.
      • Drücken Sie zum Speichern der Datei die Tastenkombination Strg+S.
  4. Erstellen Sie eine Bezeichnung für das Eingabefeld des Typencodes:
    1. Ziehen Sie ein Widget TextLabel auf die erste Zelle der zweiten Zeile und geben Sie ihm den folgenden Namen:
      typeLabel
    2. Stellen Sie in der Sicht 'Eigenschaften' die Eigenschaft text wie folgt ein:
      Type:
  5. Erstellen Sie ein Textfeld, in dem der Benutzer einen Typencode eingeben kann:
    1. Ziehen Sie ein Widget des Typs 'DojoCombolBox' auf die zweite Zelle der zweiten Zeile und geben Sie ihm den folgenden Namen:
      typeComboBox
    2. Stellen Sie in der Sicht 'Eigenschaften' auf der Seite 'Position' die Eigenschaft width auf 100 ein.
    3. Klicken Sie auf der Seite 'Ereignisse' auf die Zeile für das Ereignis 'onChange'. Klicken Sie auf das Pluszeichen (+), um eine Funktion für das Ereignis hinzuzufügen. Das Dialogfenster 'Neuer Ereignishandler' wird angezeigt.
    4. 4. Klicken Sie auf der Seite 'Eigenschaften' auf die Schaltfläche "..." in der Nähe der Werte und weisen Sie darunter die Optionen in Pop-up-Dialogfeldern zu. ["bar", "food", "restaurant", "cafe", "movie_theater", "mortgage", "bank", "atm"]
    5. Geben Sie für die neue Funktion den folgenden Namen ein:
      checkForEnter
    6. Klicken Sie auf OK. EGL wechselt in die Quellensicht und zeigt die Funktion checkForEnter an. Beachten Sie die beiden anderen jüngsten Zusätze:
      • In der Deklaration des Widgets 'typeComboBox' ist die Eigenschaft onChange auf checkForEnter eingestellt.
      • Mit der folgenden import-Anweisung wird der Verweis auf den Widgettyp 'DojoComboBox' aufgelöst:
        import dojo.widgets.DojoComboBox;
    7. Klicken Sie auf Entwurf, um in die Entwurfssicht zurückzukehren. Nun wird der Funktionsname checkForEnter neben dem Ereignis 'onChange' angezeigt. Das bedeutet, dass die Funktion an das Feld 'typeField' gebunden ist. In der nächsten Lerneinheit fügen Sie den Code für diese Funktion hinzu.
    8. Drücken Sie zum Speichern der Datei die Tastenkombination Strg+S.
  6. Fügen Sie eine Schaltfläche hinzu, um die Suche nach dem angegebenen Typencode zu starten:
    1. Ziehen Sie aus dem Ablagefach Anzeige und Eingabe der Palette ein Widget vom Typ Button (Dojo) auf die dritte Zelle der zweiten Zeile. Geben Sie ihm den folgenden Namen:
      typeButton
    2. Klicken Sie in der Sicht 'Eigenschaften' auf der Seite 'Ereignisse' auf die Zeile für das Ereignis onClick. Klicken Sie auf das Pluszeichen (+), um eine Funktion für das Ereignis hinzuzufügen.
    3. Geben Sie im Fenster 'Ereignishandler' für die neue Funktion den folgenden Namen ein:
      buttonClicked
    4. Klicken Sie auf OK. EGL wechselt in die Quellensicht und zeigt die Funktion buttonClicked an.
    5. Klicken Sie auf Entwurf, um in die Entwurfssicht zurückzukehren. Nun wird der Funktionsname buttonClicked neben dem Ereignis onClick angezeigt. Die Funktion wird an die Schaltfläche typeButton gebunden. In der nächsten Lerneinheit fügen Sie den Code für diese Funktion hinzu.
    6. Ändern Sie auf der Seite 'Allgemein' die Eigenschaft text der Schaltfläche in den folgenden Namen:
      Search
    7. Drücken Sie zum Speichern der Datei die Tastenkombination Strg+S.
  7. Erstellen Sie ein Feld, das die Liste der Hypothekenkreditgeber enthält.
    1. Ziehen Sie aus dem Ablagefach Layout der Palette ein Widget Box auf die erste Zelle der dritten Zeile und geben Sie ihm den folgenden Namen:
      listingBox
    2. Stellen Sie in der Sicht 'Eigenschaften' auf der Seite 'Allgemein' die Eigenschaft columns auf 1 ein.
    3. Stellen Sie auf der Seite 'Position' die Eigenschaft width auf 150 ein.
    4. Stellen Sie auf der Seite 'Layout' die Eigenschaft verticalAlignment auf TOP und die Eigenschaft horizontalSpan auf 2 ein.
    Nun sieht die Benutzerschnittstelle aus wie die folgende Abbildung:
    3x3-Raster mit einem Eingabefeld für den Typencode, einer Schaltfläche und einem leeren Feld
  8. Ziehen Sie aus dem Ablagefach Beispiele der Palette ein Widget vom Typ Google Map auf die letzte Zelle der dritten Zeile, neben dem Widget listingBox, und geben Sie ihm den folgenden Namen:
    localMap
    Aktualisieren Sie die Entwurfssicht des Rich-UI-Editors, indem Sie auf die Schaltfläche für Aktualisierung klicken, und zwar rechts oben in der Entwurfssicht, nicht in der Sicht 'Projektexplorer'. Auf der Schaltfläche für Aktualisierung befinden sich zwei gelbe Pfeile, die in entgegengesetzte Richtungen zeigen.
    Die Entwurfsoberfläche sieht wie folgt aus:
    Die Anzeige enthält eine Zeile mit einführendem Text, ein Feld für die Eingabe eines Typencodes, ein Feld für Suchergebnisse und eine Standardlandkarte.
  9. Drücken Sie zum Speichern der Datei die Tastenkombination Strg+S.
Sie haben die Arbeit in der Entwurfssicht abgeschlossen.

Wenn Sie auf die Registerkarte Quelle klicken, wird der vom EGL-Rich-UI-Editor erstellte Code angezeigt.

Prüfpunkt für die Lerneinheit

Sie haben gelernt, folgende Aufgaben durchzuführen:
  • Mit den aus einem Service abgerufenen Daten Datensatzdefinitionen erstellen
  • Schnittstellenabschnitt mit Details konfigurieren, die einen Servicezugriff ermöglichen
  • Benutzerschnittstelle erstellen, die eine Google-Landkarte enthält

In der nächsten Lerneinheit fügen Sie Quellcode hinzu, um den Handler MapLocatorHandler abzuschließen.

< Zurück | Weiter >

Feedback