< Zurück | Weiter >

Lerneinheit 6: Daten zur Seite hinzufügen

In dieser Übung fügen Sie Daten aus der in diesem Lernprogramm enthaltenen Datenbank der Webseite hinzu, die Sie in der vorhergehenden Übung erstellt haben.

Informationen zu diesem Vorgang

Diese Aufgabe besteht aus folgenden Abschnitten:

In dieser Lerneinheit verwenden Sie auch die EGL-Inhaltshilfe, ein Tool, mit dem Sie Programmieranweisungen ausführen können, ohne die ganze Anweisung eingeben zu müssen.

Eine Datensatzfeldgruppe zur Sicht 'Seitendaten' und zum JSF-Handler hinzufügen

Informationen zu diesem Vorgang

So geht's

Vorgehensweise

  1. Öffnen Sie die Datei allcustomers.jsp, falls sie noch nicht geöffnet ist, indem Sie in der Sicht 'Enterprise-Explorer' doppelt darauf klicken.
  2. Suchen Sie die Sicht 'Seitendaten', die sich üblicherweise unten links in der Workbench befindet. Sie können die Sicht 'Seitendaten' mithilfe 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. In der Sicht Palette klicken Sie auf das Ablagefach EGL, um dieses 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-Abschnitt aus, auf dem jedes der Feldgruppenelemente basiert.
  8. Im Feld Namen des Feldes eingeben geben Sie diesen Text ein:
    Kunden
  9. Unter Feldgruppeneigenschaften aktivieren Sie das Kontrollkästchen Feldgruppe. Lassen Sie das Feld Größe leer.
  10. Deaktivieren Sie das Kontrollkästchen 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. Auf der JSP, auf die Sie die Variable gezogen haben, wird nichts angezeigt. Das liegt daran, dass EGL die Variable in einer separaten Datei namens 'JSF Handler' erstellt hat, die Code für die Antwort 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 von 'customers', die die 12 Felder in diesem Datenbankdatensatz darstellen.

Ergebnisse

Die Sicht 'Seitendaten' sieht wie folgt aus:

Die Sicht 'Seitendaten' mit der sichtbaren Feldgruppenvariable 'Kunden'

Durch Hinzufügen von Einträgen zur Sicht 'Seitendaten' haben Sie auch eine Feldgruppe von Datensätzen zum JSF-Handler hinzugefügt. Im nächsten Abschnitt werden Sie die zugehörigen Felder auf der Webseite erstellen.

Die Daten auf der Webseite anzeigen

Informationen zu diesem Vorgang

Daten, die in der Sicht 'Seitendaten' aufgeführt sind, können der Webseite hinzugefügt werden.

Vorgehensweise

  1. Ziehen Sie die Feldgruppenvariable customers - Customer[] aus der Sicht 'Seitendaten' auf die Datei 'allcustomers.jsp' und legen Sie sie unterhalb des Texts 'Liste aller Kunden' in den Leerzeilen ab, die Sie in der vorherigen Übung erstellt 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 sollen.

  2. Behalten Sie im Bereich Zu erstellende Datensteuerung den Standardwert Mehrspaltige Datentabelle bei.
  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 Kontrollkästchener 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.

Ergebnisse

Die Seite sieht wie im 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 über die EGL-Bibliothek aufrufen

Informationen zu diesem Vorgang

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

So geht's

Vorgehensweise

  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-Abschnitt. 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 wellenförmige rote Linie unter StatusRec. Sie zeigt an, dass der Typ dem Handler nicht bekannt ist. Sie müssen eine import-Anweisung hinzufügen, die dem Handler sagt, wo sich die Definition des Datensatzes StatusRec befindet. Sie können dies automatisch tun, indem Sie im Editorfenster mit der rechten Maustaste auf die leere Fläche klicken und dann auf Importe verwalten klicken.
    Wellenförmige rote Linie unter StatusRec und Dropdown-Menü mit Option 'Importe verwalten'

    Der Direktaufruf über die Tastatur für diese Funktion ist Strg+Umsch+O. EGL prüft alle angezeigten Dateien, sucht die erforderlichen Informationen und fügt oben in der Datei eine import-Anweisung 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 in geschweiften Klammern nach der Deklaration von handler. Mit diesen Zeilen werden den Eigenschaften des JSF-Handlers Werte zugewiesen. In EGL sind Eigenschaften Name/Wert-Paare, die das Verhalten eines Abschnitts ändern. Die meisten Typen von EGL-Abschnitten können mehrere Eigenschaften besitzen und jede Art von Abschnitt kann verschiedene Eigenschaften besitzen. 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 Webseite (JSP), die dem JSF-Handler zugeordnet ist, 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 zugehörige 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 zu dieser Funktion 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
    Mithilfe der Variablen viewRoot erhalten Sie Zugriff auf die JSF-Komponentenbaumstruktur. In diesem Lernprogramm verwenden Sie die Variable viewRoot nicht. Weitere Informationen zu JSF-Komponenten und der Variablen viewRoot finden Sie im Abschnitt .
  5. Fügen Sie Code hinzu, um einen Aufruf von der Bibliotheksfunktion GetCustomerListAll() zur Funktion onPreRender() auszuführen. Diese Funktion ruft die Kundendaten aus der Datenbank ab. Versuchen Sie in diesem Fall, das Inhaltshilfetool 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. Wählen Sie im Inhaltshilfefenster die Bibliothek CustomerLib aus, indem Sie sie entweder über die Tastatur hervorheben und die Taste Eingabe drücken oder mit der Maus auf die Bibliothek doppelklicken.

      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.

    Diese import-Anweisung wurde automatisch von der Inhaltshilfe hinzugefügt. Wenn Sie diese import-Anweisung nicht mit der Inhaltshilfe oder der Funktion 'Importe verwalten' erstellt hätten, müssten Sie die explizite Position der Bibliothek angeben und dabei den Bibliotheksnamen mit folgenden Namen qualifizieren: eglderbydb.access.CustomerLib.

  6. Speichern Sie die Datei.

Ergebnisse

Die Datei 'allcustomers.egl' sieht nun aus, wie im folgenden Beispiel gezeigt:
Code der Datei 'allcustomers.egl'

Sollten Sie im Editor Fehler sehen, die durch rote 'X'-Symbole 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

Informationen zu diesem Vorgang

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.

Treffen Sie folgende Vorkehrungen, bevor Sie fortfahren:
  1. Speichern Sie sowohl die Datei 'allcustomers.egl' als auch 'allcustomers.jsp', sofern noch nicht geschehen, und schließen Sie beide Dateien.
  2. Stellen Sie sicher, dass der Anwendungsserver gestartet und synchronisiert wird.

Vorgehensweise

  1. Klicken Sie in der Sicht 'Enterprise-Explorer' mit der rechten Maustaste auf das Projekt EGLWeb, und klicken Sie dann auf Generieren.
  2. Klicken Sie in der Sicht 'Enterprise-Explorer' 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 die dynamischen Daten nicht angezeigt werden, klicken Sie neben der Adressleiste auf das Aktualisierungssymbol. Die Seite sieht folgendermaßen aus:

    Gegenwärtiges Aussehen der Seite 'allcustomers.jsp'

Ergebnisse

In der nächsten Lerneinheit erstellen Sie eine Detailseite, auf der alle Felder in einem einzelnen Kundendatensatz angezeigt werden.
< Zurück | Weiter >

Feedback