Dynamische Informationen auf Webseiten mit JavaServer Faces anzeigen > Modul 2: Erweiterte Funktionen hinzufügen >
< Vorherige Lektion | Nächste Lektion >

Lerneinheit 2.2: Die Komponente zum Hochladen von Dateien verwenden

In dieser Lerneinheit erfahren Sie, wie Sie Benutzern die Möglichkeit bieten, Bilder für Kleinanzeigen hochzuladen. Diese Funktion ist besonders auf den Seiten 'new_record.jsp' und 'update_record.jsp' von Bedeutung. Die Komponente zum Hochladen von Dateien ermöglicht es Benutzern, ihr jeweiliges Dateisystem zu durchsuchen, eine Datei in die Datenbank hochzuladen und diese Datei sofort in der Datenbank anzuzeigen.

Da die Verwendung der Komponente zum Hochladen von Dateien auf der Erstellungsseite genauso funktioniert wie auf der Aktualisierungsseite, wird in dieser Übung anhand der Aktualisierungsseite gezeigt, wie das aktuelle Bild für eine Anzeige geändert wird. Wenn Sie möchten, können Sie die gleichen Änderungen auf der Seite 'Neuer Datensatz' vornehmen, wenn Sie mit der Aktualisierungsseite fertig sind.

Das aktuelle Foto zur Seite hinzufügen

Sie werden feststellen, dass das Aktualisierungsformular nichts anderes ist als eine HTML-Tabelle mit statischem Text und Eingabekomponenten, die an Spalten im relationalen Datensatz 'update_record' gebunden sind. Sie können das Formular also durch Hinzufügen von Zeilen und Spalten ebenso ändern wie jede HTML-Tabelle. Anhand der nachstehenden Schritte werden Sie eine neue Zeile hinzufügen, in der das aktuelle Foto angezeigt wird.

Das Hinzufügen von Zeilen und Spalten ist komplexer in einer Datentabelle, die eine relationale Satzliste anzeigt. Informationen dazu, wie Spalten einer Datentabelle hinzugefügt werden, finden Sie im Abschnitt Lerneinheit 1.2: Verbindung zu einer Datenbank herstellen und Daten auf einer Webseite anzeigen.

  1. Klicken Sie doppelt auf die Seite update_record.jsp in der Sicht 'Projektexplorer'.
  2. Platzieren Sie den Cursor in die erste Zelle (oben links) der Tabelle. Diese Zelle trägt die Bezeichnung 'ID'.
  3. Klicken Sie im Hauptmenü auf Tabelle > Angeben und Hinzufügen. Der Dialog 'Zeilen oder Spalten hinzufügen' wird geöffnet. Klicken Sie auf Zeilen und anschließend auf Oberhalb der ausgewählten Zelle. Hierdurch wird oben in der Tabelle eine neue Zeile erstellt, die das aktuelle Foto für den Datensatz enthält. Klicken Sie auf OK.
  4. Geben Sie in der linken Zelle dieser neuen Zeile Aktuelles Foto: als Bezeichnung ein.
  5. Ziehen Sie die Komponente Bild aus dem Ablagefach 'Faces-Komponenten' der Palette in die Zelle ganz rechts in der neuen Zeile. Im Gegensatz zur vorherigen Übung soll der Benutzer hier das Vollbild ohne Größenbeschränkungen sehen können. Ändern Sie daher in der Sicht 'Eigenschaften' nicht die Werte für Höhe und Breite.
  6. Binden Sie die Bildkomponente an die Spalte 'FOTO' von 'update_record', indem Sie die Spalte 'FOTO' aus der Sicht 'Seitendaten' auf die neue Bildkomponente ziehen. Die Bildkomponente ist nun an die Spalte 'FOTO' der Datenbank gebunden.
  7. Wechseln Sie zur Sicht 'Eigenschaften', während die Abbildung noch ausgewählt ist, und klicken Sie auf die Schaltfläche 'Seitendatenobjekt auswählen' neben dem Feld 'Typ'. Das Fenster 'Seitendatenobjekt auswählen' wird geöffnet.
  8. Klicken Sie auf update_record (Service Data Object) > update_record (ADS) > IMAGETYPE (String)(BILDTYP (Zeichenfolge) .
  9. Klicken Sie auf OK. Die Seite zeigt nun das aktuelle Foto für die Kleinanzeige an, sofern eines vorhanden ist. Ihre Seite sollte nun folgendermaßen aussehen:
    Momentanes Aussehen der Seite.

Die Komponente zum Hochladen von Dateien zur Seite hinzufügen

Als Nächstes fügen Sie unten in der Tabelle eine neue Zeile hinzu, die die Komponente zum Hochladen von Dateien enthalten soll.
  1. Platzieren Sie den Cursor in die letzte Zeile, indem Sie darauf klicken.
  2. Klicken Sie in der Menüleiste auf Tabelle > Zeile unterhalb hinzufügen .
  3. Geben Sie in die erste Zelle der neuen Zeile Neues Foto: als Bezeichnung ein.
  4. Ziehen Sie eine Komponente zum Hochladen von Dateien aus dem Ablagefach 'Erweiterte Faces-Komponenten' der Palette in die letzte Zelle der neuen Zeile.
  5. Binden Sie die Komponente zum Hochladen von Dateien in derselben Art und Weise wie die Bildkomponente an die Spalte FOTO des relationalen Datensatzes update_record. {FOTO} wird im Textfeld angezeigt, um darauf hinzuweisen, dass diese Komponente an die Spalte FOTO gebunden ist und dass die hochgeladene Datei in diese Spalte gestellt wird. Ihre Seite sollte nun folgendermaßen aussehen:
    Momentanes Aussehen der Seite.
  6. Speichern Sie die Seite, und testen Sie sie, wenn Sie möchten.

Prüfpunkt für die Lerneinheit

Sie haben Lerneinheit 2.2 abgeschlossen. In dieser Lerneinheit haben Sie gelernt, wie Sie die Tabelle auf der Aktualisierungsseite ändern, ein aktuelles Foto zur Tabelle hinzufügen und eine Komponente zum Hochladen von Dateien zur Tabelle hinzufügen können.

< Vorherige Lektion | Nächste Lektion >