Übung 2.3: Die Komponente zum Hochladen von Dateien verwenden

Bevor Sie beginnen, müssen Sie Übung 2.2: Eine Datentabelle formatieren vollständig bearbeitet haben.

Nachdem nun die Spalte PHOTO angezeigt wird, sollten Sie den Benutzern die Möglichkeit geben, Bilder für die 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 Photo der Seite hinzufügen

Anzeige

Sie werden feststellen, dass das Aktualisierungsformular nichts anderes ist als eine HTML-Tabelle mit statischem Text und einigen 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 Photo 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 Die Standarddatentabelle optimieren in Übung 1.2: Mit der relationalen Satzliste und Datentabellenkomponenten arbeiten.

  1. Klicken Sie doppelt auf die Seite update_record.jsp in der Ansicht 'Projekt-Explorer'.
  2. Platzieren Sie den Cursor in die erste Zelle (oben links) der Tabelle. Diese Zelle trägt die Bezeichnung ID.
  3. Klicken Sie in der Menüleiste auf Tabelle > Zeile hinzufügen > Oberhalb hinzufügen, um oben in der Tabelle eine neue Zeile zu erstellen, die das aktuelle Photo für den Datensatz enthalten soll.
  4. Geben Sie in der Zelle ganz links in dieser neuen Zeile Aktuelles Photo: als Bezeichnung ein.
  5. Ziehen Sie die Komponente Bild aus dem Drawer '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 Ansicht 'Eigenschaften' nicht die Werte für Höhe und Breite.

  6. Binden Sie die Bildkomponente an die Spalte PHOTO von update_record, indem Sie die Spalte PHOTO aus der Ansicht 'Seitendaten' auf die neue Bildkomponente ziehen. Die Bildkomponente ist nun an die Spalte PHOTO der Datenbank gebunden.
  7. Klicken Sie in der Ansicht 'Eigenschaften' auf die Schaltfläche Seitendatenobjekt auswählen neben dem Feld Typ. Das Fenster "Seitendatenobjekt auswählen" wird geöffnet.
  8. Klicken Sie auf das Symbol +, um den relationalen Datensatz 'update_record' zu erweitern.
  9. Klicken Sie auf IMAGETYPE (String) (BILDTYP (Zeichenfolge)).
  10. Klicken Sie auf OK.

    Die Seite zeigt nun das aktuelle Photo für die Kleinanzeige an, sofern eines vorhanden ist. Ihre Seite sollte folgendermaßen aussehen:

    Darstellung der aktuellen Seite

Die Komponente zum Hochladen von Dateien der Seite hinzufügen

Anzeige

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 in die Zelle mit dem Text 'Telefonnummer:' klicken.
  2. Klicken Sie in der Menüleiste auf Tabelle > Zeile hinzufügen > Unterhalb hinzufügen.
  3. Geben Sie in die erste Zelle der neuen Zeile Neues Photo: als Bezeichnung ein.
  4. Ziehen Sie eine Komponente zum Hochladen von Dateien aus dem Drawer '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 PHOTO des relationalen Datensatzes update_record. {PHOTO} wird im Textfeld angezeigt, um darauf hinzuweisen, dass diese Komponente an die Spalte PHOTO gebunden ist und dass die hochgeladene Datei in diese Spalte gestellt wird.

    Ihre Seite sollte folgendermaßen aussehen:

    Darstellung der aktuellen Seite

  6. Speichern Sie die Seite und testen Sie sie, wenn Sie möchten.

Sie können nun mit Übung 2.4: Navigationsregeln verwenden beginnen.

Nutzungsbedingungen | Feedback
(C) Copyright IBM Corporation 2000, 2004. Alle Rechte vorbehalten.