< Zurück | Weiter >

Lerneinheit 8: Eine Aktualisierungsseite erstellen

In dieser Übung erstellen Sie die Webseite, die es Benutzern ermöglicht, die Tabelle 'CUSTOMER' (Kunde) zu aktualisieren. Diese Seite empfängt den Parameter, der von der anderen Seite übergeben wurde, zeigt nur den Datensatz an, der von diesem Parameter angegeben wird, und akzeptiert aktualisierte Informationen für den Datensatz.

Die Datei 'updatecustomer.jsp' erstellen

  1. In der Sicht 'Enterprise-Explorer' klicken Sie mit der rechten Maustaste auf den Ordner WebContent des Projekts 'EGLWeb'.
  2. Klicken Sie auf Neu > Webseite.
  3. Im Feld Dateiname geben Sie diesen Text als Namen der neuen Datei ein:
    updatecustomer.jsp
  4. Vergewissern Sie sich, dass im Feld Ordner der Ordner /EGLWeb/WebContent aufgeführt wird.
  5. In der Liste Schablone klicken Sie auf Meine Schablonen.
  6. Im Fenster Vorschau klicken Sie auf die Schablone A_gray.htpl.
  7. Klicken Sie auf Fertig stellen. Die neue Seite wird erstellt und im Editor geöffnet.
  8. Ersetzen Sie den Standardtext durch diesen Text:
    Kundeninformationen aktualisieren
  9. Drücken Sie die Eingabetaste drei Mal, um drei Leerzeilen einzufügen.
  10. Speichern Sie die Seite.
Die neue Seite 'updatecustomer.jsp' sieht wie folgt aus:

Aussehen der Seite 'updatecustomer.jsp'

Einen EGL-Datensatz hinzufügen und auf der Seite anzeigen

Der nächste Schritt besteht darin, dieser Seite EGL-Daten hinzuzufügen. Als Sie die Datei 'allcustomers.jsp' erstellt haben, haben Sie der Seite die Daten in einem Schritt hinzugefügt und die Daten auf der Seite angezeigt, indem Sie sie in einem zweiten Schritt aus der Sicht 'Seitendaten' gezogen haben. Dieses Mal aktivieren Sie das Markierungsfeld Steuerelemente zum Anzeigen des EGL-Elements auf der Webseite hinzufügen, um der Seite die Daten hinzuzufügen und sie auf der Seite in einem Schritt anzuzeigen.
  1. Öffnen Sie das Ablagefach EGL in der Sicht 'Palette'.
  2. Ziehen Sie das Symbol Neue Variable auf die Seite unterhalb des Texts "Kundeninformationen aktualisieren". Das Fenster 'Neue EGL-Datenvariable erstellen' wird geöffnet.
  3. Unter Typ auswählen klicken Sie auf Datensatz.
  4. Unter Datensatztyp klicken Sie auf Kunde.
  5. Geben Sie im Feld Namen des Feldes eingeben den folgenden Text ein:
    customer
  6. Unter Array-Eigenschaften deaktivieren Sie das Markierungsfeld Array.
  7. Aktivieren Sie das Markierungsfeld Steuerelemente zum Anzeigen des EGL-Elements auf der Webseite hinzufügen.
  8. Klicken Sie auf OK. Der neue Datensatz wird in der Sicht 'Seitendaten' angezeigt und das Fenster 'Steuerelement einfügen' wird geöffnet.
  9. Im Fenster 'Steuerelement einfügen' klicken Sie auf Aktualisieren eines bestehenden Datensatzes.
  10. Klicken Sie auf Optionen. Das Fenster 'Optionen' wird geöffnet.
  11. Aktivieren Sie das Markierungsfeld Schaltfläche 'Übergeben'.
  12. Deaktivieren Sie das Markierungsfeld Schaltfläche 'Löschen'.
  13. Als Bezeichnung der Schaltfläche 'Übergeben' geben Sie diesen Text ein:
    Diesen Datensatz aktualisieren
  14. Klicken Sie auf OK.
  15. Klicken Sie auf Fertig stellen.
  16. Speichern Sie die Seite.

Die Datensteuerungselemente für die Aktualisierung des Datensatzes werden auf der Webseite eingefügt. Beachten Sie, dass es auf der Seite ein Steuerelement {Error Messages} gibt. Dieses Steuerelement bedeutet nicht, dass Ihre Seite Fehler enthält; das Steuerelement {Error Messages} markiert die Position, an der Laufzeitfehlernachrichten angezeigt werden.

Die Seite sieht wie folgt aus:

Aussehen der Seite 'updatecustomer.jsp'

Daten abrufen

Nun, da es Felder für die Daten auf der Seite gibt, müssen Sie den Code hinzufügen, der die Daten aus der Datenbank abruft. Zur Erinnerung: Sie haben in der vorherigen Lerneinheit einen Link zur Übergabe der Kunden-ID-Nummer in einem Parameter namens CID hinzugefügt. In diesen Schritten werden Sie den Handler der neuen Webseite so konfigurieren, dass er diesen Parameter akzeptiert und den entsprechenden, auf der Webseite anzuzeigenden Datensatz aus der Datenbank abruft.
  1. Klicken Sie mit der rechten Maustaste irgendwo in den unformatierten Bereich der Datei 'updatecustomer.jsp'.
  2. Im Kontextmenü klicken Sie auf Seitencode bearbeiten. Die Datei 'updatecustomer.egl' wird im Editor geöffnet.
  3. Wie in dem zuvor von Ihnen bearbeiteten JSF-Handler müssen Sie einen Datensatz hinzufügen, um den Erfolgs- oder Fehlercode des SQL-Aufrufs zu speichern. Unmittelbar nach der Zeile customer Customer; fügen Sie den folgenden Code, exakt so geschrieben, hinzu:
    status StatusRec;
    Der nächste Schritt beim Hinzufügen der Daten zur Seite besteht darin, den JSF-Handler so zu konfigurieren, dass er den Parameter CID, den der Link an ihn übergibt, akzeptiert.
  4. Ändern Sie die Zeile function onPreRender() in den folgenden Code. Dabei ist die Schreibweise genau einzuhalten:
    function onPreRender(CID INT)
    Nun ist der JSF-Handler so konfiguriert, dass er einen ganzzahligen Parameter namens CID akzeptiert.
  5. Fügen Sie in einer leeren Zeile unmittelbar nach function onPreRender(CID INT) diesen, exakt so geschriebenen Code hinzu:
    customer.customerId = CID;
    Nun haben Sie die ID-Nummer dem Kundendatensatz zugeordnet. Der nächste Schritt besteht darin, den Datensatz mit dieser ID-Nummer aus der Datenbank abzurufen.
  6. In der nächsten Zeile fügen Sie diesen, exakt so geschriebenen, Code hinzu. Vielleicht möchten Sie die Codefertigstellungsfunktion nutzen, die Sie in Lerneinheit 6: Daten zur Seite hinzufügen kennen gelernt haben.
    CustomerLib.GetCustomer(customer, status);
    Die Funktion GetCustomer arbeitet genau wie die von Ihnen zuvor verwendete Funktion GetCustomerAll. Die Funktion GetCustomer ruft allerdings einen Datensatz ab, während die Funktion GetCustomerAll einen Array von Datensätzen abruft. Nun enthält der Kundendatensatz den Datensatz mit der an diesen JSF-Handler übergebenen ID.
    Die neue Funktion sieht folgendermaßen aus:
    	function onPreRender(CID INT)
    		customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. Optimieren Sie Importe und speichern Sie die Datei.
Der JSF-Handler sieht wie folgt aus:
Aussehen der Datei 'updatecustomer.egl'

Wenn Sie jetzt auf einen Link auf der Seite 'allcustomers.jsp' klicken, wird die Seite 'updatecustomer.jsp' mit Details über den Datensatz des Kunden geladen. Jetzt können Sie die Informationen in den Feldern auf der Webseite ändern, aber es gibt keine Funktion, um diese Aktualisierungen an die Datenbank zu senden. Im nächsten Abschnitt werden Sie die Funktion UpdateCustomer verwenden, um diese Aktualisierungen an der Datenbank vorzunehmen.

Den Datensatz in der Datenbank aktualisieren

In diesem Abschnitt fügen Sie eine neue EGL-Funktion in dem JSF-Handler namens updateRecord hinzu. Dann verbinden Sie diese Funktion mit der Schaltfläche, die Sie auf der Webseite erstellt haben. Auf diese Weise wird, wenn Sie auf die Schaltfläche auf der Webseite klicken, die Funktion updateRecord ausgeführt, die die Funktion UpdateCustomer aufruft, um den Datenbankdatensatz zu aktualisieren. Abschließend wird die Funktion updateRecord den Browser wieder zurück zur Seite 'allcustomers.jsp' leiten, so dass Sie die Änderungen, die Sie an dem Datensatz vorgenommen haben, sehen können.
  1. In der Datei 'updatecustomer.egl' fügen Sie unmittelbar vor der letzten End-Anweisung, die folgende, exakt so geschriebene, Funktion ein. Vielleicht möchten Sie die Codefertigstellung verwenden oder die Funktion von dieser Seite kopieren, um sicherzugehen, dass sie korrekt ist.
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. Speichern und schließen Sie die Datei.

    Der nächste Schritt besteht darin, diese Funktion mit der Schaltfläche, die Sie auf der Webseite erstellt haben, zu verbinden.

  3. Öffnen Sie die Seite 'updatecustomer.jsp' im Editor. Eventuell ist die Seite noch in der Editorregisterkarte geöffnet. Wenn Sie sie dort nicht finden können, doppelklicken Sie auf die Datei 'updatecustomer.jsp' in der Sicht 'Projektexplorer' im Ordner EGLWeb/WebContent.
  4. In der Sicht 'Seitendaten' erweitern Sie JSF Handler > Actions. In diesem Ordner werden alle Funktionen im JSF-Handler, mit Ausnahme der Funktionen onPreRender() und onConstruction(), aufgelistet. In diesem Fall zeigt der Ordner die Funktion updateRecord() an, die Sie soeben erstellt haben.
  5. Ziehen Sie die Funktion updateRecord() und legen Sie sie auf der Webseite direkt auf der Schaltfläche mit der Bezeichnung 'Diesen Datensatz aktualisieren' ab. Das Aussehen der Seite ändert sich nicht, aber jetzt ist diese Funktion mit der Schaltfläche verbunden, so dass sie ausgeführt wird, wenn die Schaltfläche betätigt wird.
  6. Speichern Sie die Seite.

Hier ist der vollständige Code der Datei 'updatecustomer.egl'. Sollten Sie in der Datei Fehler sehen, die durch rote 'X'-Symbole gekennzeichnet sind, vergewissern Sie sich, dass Ihr Code mit dem Code in dieser Datei übereinstimmt:Fertige Datei 'updatecustomer.egl' nach Lerneinheit 8

Aussehen der Datei updatecustomer.egl

Die fertige Seite testen

Nun ist die Seite bereit zum Testen. Sie können nun alle Datensätze in der Tabelle 'Customer' (Kunden) der Datenbank aktualisieren und anzeigen.
  1. In der Sicht 'Enterprise-Explorer' klicken Sie mit der rechten Maustaste auf die Datei 'allcustomers.jsp' und klicken dann auf Ausführen als > Auf Server ausführen. Die zugehörige Seite wird im Web-Browser geöffnet. Nun ist der Familienname eines jeden Kunden ein Hyperlink zu der Webseite, die durch 'updatecustomer.jsp' angezeigt wird.
  2. Klicken Sie auf den Familiennamen eines Kunden. Sie werden an die Webseite weitergeleitet, die durch 'updatecustomer.jsp angezeigt wird und diese Webseite zeigt zeilenspezifische Informationen an.
  3. Geben Sie einen neuen FIRST_NAME (Vornamen) für den Datensatz ein.
  4. Geben Sie neue Informationen für einige der anderen Felder auf dieser Seite ein. Ändern Sie nicht das Feld KUNDEN-ID.
  5. Wenn Sie die Eingabe der neuen Informationen beendet haben, klicken Sie auf die Schaltfläche Diesen Datensatz aktualisieren.
Wenn Sie auf die Schaltfläche Diesen Datensatz aktualisieren klicken, werden Sie zur Seite 'allcustomers.jsp' zurückgeleitet. Beachten Sie, dass sich der Datensatz geändert hat und nun den neuen FIRST_NAME (Vornamen) anzeigt, den Sie eingegeben haben. Sie können erneut auf den Familiennamen für diesen Datensatz klicken, um die neuen Informationen anzuzeigen, die in der Datenbank gespeichert wurden.

Sie haben das Lernprogramm abgeschlossen

In diesem Lernprogramm haben Sie mithilfe einer Beispiel-Derby-Datenbank ein funktionsfähiges Dateiverwaltungsdienstprogramm für eine Kundendatei erstellt. Nun können Sie auf diesen Kenntnissen aufbauen, wenn Sie das Lernprogramm Eine JSF-Suchseite mit EGL erstellen durcharbeiten.
< Zurück | Weiter >

Feedback