< Zurück | Weiter >

Lerneinheit 6: Daten zur Seite hinzufügen

In dieser Übung fügen Sie Daten aus der in diesem Lernprogramm enthaltenen Datenbank in die Webseite ein, die Sie in der vorherigen Übung erstellt haben.
Diese Aufgabe besteht aus folgenden Abschnitten:

In dieser Lerneinheit werden Sie auch die EGL-Komponente "Inhaltshilfe"; dies ist ein Tool, das Sie verwenden können, um Programmieranweisungen zu vervollständigen, ohne dass dazu die gesamte Anweisung eingegeben werden muss.

Ein Datensatz-Array zur Sicht 'Seitendaten' und zum JSF-Handler hinzufügen

  1. Wenn die Datei allcustomers.jsp nicht geöffnet ist, öffnen Sie sie, indem Sie auf sie doppelt in der Sicht "Enterprise-Explorer" klicken.
  2. Suchen Sie die Sicht 'Seitendaten', die sich üblicherweise unten links in der Workbench befindet. Sie können die Sicht 'Seitendaten' mit Hilfe der Reiterkarten anzeigen, wenn Sie sie jedoch nicht finden können, klicken Sie auf Fenster > Sicht anzeigen > Seitendaten.
  3. Suchen Sie die Sicht 'Palette', die sich üblicherweise auf der rechten Seite der Workbench befindet. Wenn Sie die Sicht nicht finden können, klicken Sie auf Fenster > Sicht anzeigen > Basis > Palette.
  4. Klicken sie in der Sicht Palette auf das Ablagefach EGL, um es zu öffnen.
  5. Ziehen Sie das Symbol Neue Variable aus der Sicht 'Palette' auf die Seite 'allcustomers.jsp' im Editor. Das Fenster 'Neue EGL-Datenvariable erstellen' wird geöffnet.
  6. Unter Typ auswählen klicken Sie auf Datensatz.
  7. Unter Datensatztyp klicken Sie auf Kunde. Auf diese Weise wählen Sie den Record-Part aus, auf dem jedes der Array-Elemente basiert.
  8. Im Feld Namen des Feldes eingeben geben Sie diesen Text ein:
    Kunden
  9. Unter Array-Eigenschaften aktivieren Sie das Markierungsfeld Array. Lassen Sie das Feld Größe leer.
  10. Deaktivieren Sie das Markierungsfeld Steuerelemente zum Anzeigen des EGL-Elements auf der Webseite hinzufügen.

    Das Fenster 'Neue EGL-Datenvariable erstellen' sieht wie folgt aus:

    Das Fenster 'Neue EGL-Datenvariable erstellen'

  11. Klicken Sie auf OK. In der JSP erscheint an der Stelle, in der Sie die Variable mit der Maus gezogen haben, nichts. Die Ursache hierfür ist, dass EGL die Variable in einer separaten Datei erstellt hat und den JSF-Handler aufgerufen hat, der Code zum Reagieren auf Ereignisse in der JSP enthält. Ein Element, das die neue Variable darstellt, wird in der Sicht 'Seitendaten' unter JSF Handler > Daten angezeigt.
  12. Erweitern Sie JSF Handler > Daten, und erweitern Sie anschließend customers - Customer[]. Es gibt 12 Symbole unterhalb der Kunden, die die 12 Felder in diesem Datenbankdatensatz darstellen.

Die Sicht 'Seitendaten' sieht wie folgt aus:

Die Sicht 'Seitendaten' mit der sichtbaren Array-Variable 'Kunden'

Durch Hinzufügen von Einträgen zur Sicht 'Seitendaten' haben Sie auch einen Array von Datensätzen zum JSF-Handler hinzugefügt. Im nächsten Abschnitt erstellen Sie die verknüpften Felder auf der Webseite.

Die Daten auf der Webseite anzeigen

Daten, die in der Sicht 'Seitendaten' aufgeführt sind, können der Webseite hinzugefügt werden.
  1. Klicken Sie in der Sicht 'Seitendaten' auf die Array-Variable customers - Customer[] und ziehen Sie sie auf die Datei 'allcustomers.jsp' und legen sie unterhalb des Texts 'Liste aller Kunden' in den Leerzeilen ab, die Sie in der vorherigen Übung hinzugefügt haben.

    Das Fenster 'Listenfeld einfügen' wird geöffnet. In diesem Fenster werden alle Felder im Datenbanksatz aufgeführt. Sie können dieses Fenster verwenden, um auszuwählen, welche Felder auf der Seite angezeigt werden.

  2. Lassen Sie unter Zu erstellende Datensteuerung den Standardwert Mehrspaltige Datentabelle.
  3. Klicken Sie unter Steuerelemente erstellen zum auf Anzeigen eines bestehenden Datensatzes (schreibgeschützt).

    Wenn diese Option ausgewählt ist, werden die Daten auf der Seite in schreibgeschützten Ausgabefeldern angezeigt. Wenn Sie die Option Aktualisieren eines bestehenden Datensatzes auswählen, handelt es sich bei den Feldern auf der Seite um Eingabefelder, in die Werte eingegeben werden können. Unterhalb der Felder befinden sich in diesem Fall Schaltflächen zum Binden von Aktionen. Sie werden diese Art von Feldern auf einer anderen Seite erstellen. Für Ihre Zwecke ist die Option Erstellen eines neuen Datensatzes identisch mit der Option Aktualisieren eines bestehenden Datensatzes. Nur die Standardschaltflächen sind unterschiedlich.

  4. Klicken Sie unter Anzuzeigende Spalten auf die Schaltfläche Keine. Sie haben alle Felder abgewählt.
  5. Aktivieren Sie die Markierungsfelder neben diesen Feldern:
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

    Das Fenster 'Listenfeld einfügen' sieht wie folgt aus:

    Das Fenster 'Listenfeld einfügen'

  6. Klicken Sie auf Fertig stellen. Auf Ihrer Seite wird eine Datentabelle mit drei Spalten für die drei Felder, die Sie im Fenster 'Listenfeld einfügen' ausgewählt haben, erstellt.
  7. Speichern Sie die Seite.

Die Seite sieht wie das folgenden Beispiel aus:

Gegenwärtiges Aussehen der Seite

Die Spalten in der Datentabelle haben Überschriften, die auf den Namen der Felder in der Datenbank basieren. Sie können diese Überschriften ändern, indem Sie darauf klicken, die Sicht 'Eigenschaften' öffnen und das Feld Wert ändern.

Die drei Textfelder in der Datentabelle, die als {CUSTOMERID}, {FIRSTNAME} und {LASTNAME} angezeigt werden, stellen die Positionen dar, an denen die Datenbankinformationen auf der Seite angezeigt werden.

Funktion aus der EGL-Bibliothek aufrufen

Der nächste Schritt besteht darin, dieser Seite Code hinzuzufügen, der eine Funktion in der Bibliothek 'CustomerLibrary.egl' aufruft. Diese Funktion liest die Daten aus der Datenbank und stellt sie der Seite zur Verfügung.

  1. Klicken Sie mit der rechten Maustaste irgendwo in den unformatierten Bereich der Datei 'allcustomers.jsp'.
  2. Im Kontextmenü klicken Sie auf Seitencode bearbeiten.

    Die Datei 'allcustomers.egl' wird im Editor geöffnet. Diese Datei beinhaltet einen JSF-Handler-Part. In den nächsten Schritten fügen Sie diesem JSF-Handler Code hinzu, der Daten aus der Datenbank abruft und diese auf der Seite einfügt.

  3. Suchen Sie in der Datei 'allcustomers.egl' die Zeile customers Customer[0];.

    Dies ist die Codezeile, die die Datensatzvariable definiert, die Sie zur Anzeige der Seite erstellt haben. Sie müssen auch einen Datensatz definieren, um den Erfolgs- oder Fehlercode des SQL-Aufrufs zu speichern.

  4. In einer leeren Zeile unmittelbar nach der Zeile customers Customer[0]; fügen Sie den folgenden Code, exakt so geschrieben, hinzu:
    status StatusRec;
    Beachten Sie die rote Wellenlinie unter StatusRec; diese zeigt an, dass der Typ dem Handler nicht bekannt ist. Sie müssen eine import-Anweisung hinzufügen, in der der Handler Informationen darüber erhält, wo sich die Definition für den Datensatz StatusRec befindet. Dies kann automatisch erfolgen, indem Sie mit der rechten Maustaste auf den leeren Bereich im Editorfenster klicken und dann auf Importe verwalten klicken.
    Die rote Wellenlinie unter 'StatusRec' und das Dropdown-Menü mit der Option 'Importe verwalten'.

    Über die Tastenkombination Strg+Umsch+O kann diese Funktion direkt aufgerufen werden. EGL prüft alle sichtbaren Dateien, sucht die erforderlichen Informationen und fügt eine import-Anweisung am Anfang der Datei ein.

    Nun haben Sie den Datensatz, der aus der Datenbank abzurufen ist, und den SQL-Statusdatensatz. Der letzte Schritt beim Hinzufügen der Daten zu Ihrer Seite besteht darin, diese beiden Variablen an die Funktionen zu übergeben, die auf die Datenbank zugreift. Diese Funktion namens GetCustomerListAll() wurde durch den Assistenten 'Datenzugriffsanwendung' in einer vorherigen Lerneinheit erstellt.

    Beachten Sie die Zeilen mit geschweiften Klammern, die auf die handler-Deklaration folgen. Diese Zeilen ordnen Werte zu den Eigenschaften des JSF-Handlers hinzu. In EGL sind Eigenschaften Name/Wert-Paare, die das Verhalten eines Parts ändern. Die meisten Typen von EGL-Parts können mehrere Eigenschaften haben, und jede Art von Part kann verschiedene Eigenschaften haben. In diesem Fall sind für den JSF-Handler vier Eigenschaften definiert:

    onConstructionFunction = onConstruction
    Die Eigenschaft onConstructionFunction gibt eine Funktion im JSF-Handler an, die ausgeführt wird, wenn die dem JSF-Handler zugeordnete Webseite (JSP) zum ersten Mal in einem Browser angezeigt wird. In diesem Fall gibt die Eigenschaft eine Funktion mit dem Namen onConstruction an, die im JSF-Handler standardmäßig erstellt wird. In diesem Lernprogramm werden Sie nicht mit dieser Funktion arbeiten.
    onPreRenderFunction = onPreRender
    Die Eigenschaft onPreRenderFunction gibt eine Funktion im JSF-Handler an, die jedes Mal ausgeführt wird, wenn die zugeordnete JSP im Browser angezeigt wird. Sie wird auch dann ausgeführt, wenn der Benutzer die Seite aktualisiert oder nach dem Anzeigen einer anderen Seite zu dieser Seite zurückkehrt. In diesem Fall gibt die Eigenschaft eine Funktion mit dem Namen onConstruction an, die im JSF-Handler standardmäßig erstellt wird. In den nächsten Schritten werden Sie diesen Funktionen Code hinzufügen, um bei jedem Laden der Seite aktuelle Daten von der Datenbank abzurufen.
    view = "allcustomers.jsp"
    Die Eigenschaft view gibt die dem JSF-Handler zugeordnete Webseite an. Standardmäßig weisen die Webseite und der JSF-Handler denselben Namen, jeweils ohne die Dateierweiterung, auf.
    viewRootVar = viewRoot
    Sie verwenden die Variable viewRoot, um Zugriff auf den JSF-Komponentenbaum zu erhalten. In diesem Lerntext werden Sie die Variable viewRoot nicht verwenden. Weitere Informationen zu JSF-Komponenten und der Variable viewRoot finden Sie in Zugriff auf den Komponentenbaum.
  5. Fügen Sie den Code zum Aufrufen der Bibliotheksfunktion GetCustomerListAll() nach der Funktion onPreRender() ein. Diese Funktion ruft die Kundendaten aus der Datenbank ab. In diesem Fall versuchen Sie, das Tool "Inhaltshilfe" im EGL-Editor zu verwenden:
    1. Setzen Sie den Cursor auf eine leere Zeile zwischen function onPreRender() und end.
    2. Geben Sie folgenden Code ein:
      cust
    3. Drücken Sie Strg+Leertaste. Das Codefertigstellungsfenster wird geöffnet und zeigt alle verfügbaren EGL-Befehle und -Ressourcen an, die mit cust beginnen.
    4. Im Fenster "Inhaltshilfe" wählen Sie die Bibliothek CustomerLib aus, indem Sie sie entweder über die Tastatur hervorheben und die Taste Eingabe drücken oder sie mit der Maus doppelt anklicken.

      Nun liest sich die neue Codezeile CustomerLib.

    5. Geben Sie hinter CustomerLib einen Punkt ein.
    6. Drücken Sie erneut Strg+Leertaste. Das Codefertigstellungsfenster wird wieder geöffnet.
    7. Wählen Sie im Codefertigstellungsfenster die Funktion GetCustomerListAll(customerArray Customer[], status StatusRec) aus. Dazu müssen Sie sie entweder hervorheben und die Taste Eingabe drücken oder mit der Maus auf die Funktion doppelklicken. Achten Sie darauf, dass Sie nicht die Funktion GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec) auswählen.

      Die neue Codezeile lautet nun CustomerLib.GetCustomerListAll(customerArray, status), und das Argument customerArray ist hervorgehoben.

    8. Ändern Sie das standardmäßige Argument customerArray in der neuen Codezeile auf den Namen Ihrer Datensatzvariablen: customers.
    9. Beenden Sie die Codezeile mit einem Semikolon.
    Abschließend liest sich die neue Codezeile wie folgt:
    CustomerLib.GetCustomerListAll(customers, status);
    Beachten Sie auch, dass sich oben in der Datei eine neue import-Anweisung befindet, die wie folgt lautet: import eglderbydb.access.CustomerLib; Durch diese Zeile wird die Bibliothek importiert. Auf diese Weise müssen Sie in Ihrem Code nicht den vollständigen Pfad zur dieser Bibliothek ausschreiben, sondern können direkt auf sie verweisen.

    Die Inhaltshilfe hat diese import-Anweisung automatisch hinzugefügt. Wenn Sie nicht die Inhaltshilfe oder die Funktion 'Importe verwalten' zum Erstellen dieser import-Anweisung verwendet hätten, müssten Sie die explizite Position der Bibliothek angeben und den Bibliotheksnamen mit den folgenden Namen qualifizieren: eglderbydb.access.CustomerLib.

  6. Speichern Sie die Datei.
Die Datei 'allcustomers.egl' sieht nun wie im folgenden Beispiel aus:
Code für die Datei 'allcustomers.egl'

Sollten Sie Fehler sehen, die durch rote 'X'-Symbole im Editor gekennzeichnet sind, vergewissern Sie sich, dass Ihr Code mit dem Code in dieser Datei übereinstimmt: Fertige Datei 'allcustomers.egl' nach Lerneinheit 6.

Die Seite testen

Nun kann die Seite auf dem Server ausgeführt werden. Führen Sie die folgenden Schritte aus, um sie zu testen und zu sehen, wie die Datenbank auf der Seite angezeigt wird.

Bevor Sie fortfahren, achten Sie auf Folgendes:
  1. Speichern Sie gegebenenfalls die Dateien 'allcustomers.egl' und 'allcustomers.jsp' und schließen Sie anschließend beide Dateien.
  2. Stellen Sie sicher, dass Ihr Anwendungsserver gestartet und synchronisiert ist.
  1. Klicken Sie in der Sicht 'Enterprise-Explorer' mit der rechten Maustaste auf das Projekt EGLWeb, und klicken Sie dann auf Generieren.
  2. In der Sicht 'Enterprise-Explorer' klicken Sie mit der rechten Maustaste auf die Datei allcustomers.jsp, nicht auf die Datei 'allcustomers.egl'.
  3. Im Kontextmenü klicken Sie auf Ausführen als > Auf Server ausführen.

    Wie in der vorherigen Lerneinheit wird die Webseite in einem Web-Browser innerhalb der Workbench geöffnet. Dieses Mal werden die dynamischen Daten auf der Seite angezeigt. Wenn Sie die dynamischen Daten nicht sehen, klicken Sie auf das Symbol zum Aktualisieren neben der Adressleiste. Die Seite sieht folgendermaßen aus:

    Gegenwärtiges Aussehen der Seite 'allcustomers.jsp'

In der nächsten Lerneinheit erstellen Sie eine Detailseite, um alle Felder in einem bestimmten Kundendatensatz anzuzeigen.
< Zurück | Weiter >

Feedback