Lerneinheit 2.1: Datentabelle formatieren

1. Klicken Sie doppelt auf die Seite all_records.jsp in der Sicht 'Projektexplorer'
2. Klicken Sie auf den Spaltenheader Hauptkategorie in der Datentabelle.
3. Klicken Sie in der Sicht 'Eigenschaften' auf die Registerkarte h:outputText, und ändern Sie den Text im Feld Wert von 'Hauptkategorie' zu Kategorie.
4. Wenn Sie möchten, können Sie auch die anderen Spalten umbenennen.
5. Speichern Sie die Seite.

1. Klicken Sie auf die Ausgabekomponente {PREIS} auf der Seite.
2. Suchen Sie in der Sicht 'Eigenschaften' die Dropdown-Liste Typ, und wählen Sie Währung aus. Jetzt wird der Preis jedes Artikels nicht wie eine gewöhnliche Zahl, sondern wie ein Geldbetrag dargestellt. Für andere Datentypen wie beispielsweise Prozentsätze, Datums- und Zeitangaben stehen weitere Darstellungen und Formate zur Verfügung. Sie können das Format einer Ausgabekomponente auch anpassen, um einen Datentyp anzuzeigen, der in der Sicht 'Eigenschaften' nicht aufgeführt ist, wie beispielsweise Telefonnummern.
3. Speichern Sie die Seite.

1. Klicken Sie mit der rechten Maustaste auf all_recordlist (ADS) in der Sicht 'Seitendaten' (Fenster > Sicht anzeigen > Seitendaten), und klicken Sie im Kontextmenü auf Konfigurieren. Das Fenster Relationale Satzliste konfigurieren wird geöffnet. Wenn eine Warnmeldung angezeigt wird, in der Sie darauf hingewiesen werden, dass keine Verbindung zur Datenbank hergestellt werden konnte, haben Sie nach dem Testen der Website den Server nicht gestoppt. Sollte dies der Fall sein, klicken Sie in jedem Dialog auf 'Abbrechen', und stoppen Sie den Server, wie im Abschnitt 'Den Server stoppen' in Website testen beschrieben wird.
2. Wählen Sie Vorhandenen Datensatz oder Satzliste aus Bereich abrufen und Metadatendefinition aus einem vorhandenen Datensatz oder Satzliste wiederverwenden aus, und klicken Sie anschließend auf Weiter.
3. Klicken Sie im nächsten Fenster, um ADS auszuwählen, und klicken Sie anschließend auf Weiter.
4. Klicken Sie auf der rechten Seite des nächsten Fensters auf Ergebnisse sortieren. Hierdurch wird das Fenster 'Reihenfolge' geöffnet.
5. Klicken Sie im Teilfenster 'Verfügbare Spalten' auf 'HAUPTKATEGORIE'.
6. Klicken Sie auf die Schaltfläche >, um die Spalte 'HAUPTKATEGORIE' in das Teilfenster 'Sortieren nach' zu versetzen. Das Fenster sollte wie folgt aussehen:
   
7. Klicken Sie auf Schließen, um das Fenster 'Reihenfolge' zu schließen.
8. Klicken Sie auf Fertig stellen, um die Änderungen anzuwenden. Die Daten werden jetzt nach Kategorien sortiert. Sie können die Sortierung nach einer beliebigen Spalte in der Datenbank vornehmen.

1. Klicken Sie auf eine beliebige Stelle in der Datentabelle.
2. Klicken Sie in der Sicht 'Eigenschaften' in der Liste der HTML-Tags auf der linken Seite der Sicht auf h:dataTableEx.
3. Klicken Sie auf die Registerkarte Anzeigeoptionen unter h:dataTableEx.
4. Geben Sie in das Feld Zeilen pro Seite den Wert 5 ein.
5. Klicken Sie auf die Schaltfläche neben Web-Darstellungs-Pager hinzufügen. Unten in der Datentabelle wird ein Bild angezeigt, das demonstriert, wie der Pager aussehen wird. Die Darstellung des Pagers in Page Designer ist ein Platzhalterbild und gibt nicht genau wieder, wie viele Seiten tatsächlich angezeigt werden, da dies nur ermittelt werden kann, wenn die Seite in einem Browser geladen wird.
6. Speichern Sie die Seite. Wenn Sie möchten, können Sie mit den verschiedenen Darstellungen von Pagern und der Seitenstatistikkomponente experimentieren, um die Seite optimal anzupassen.

1. Klicken Sie in der Palette auf das Ablagefach 'Erweiterte Faces-Komponenten', um dieses zu öffnen. Ziehen Sie die Komponente Anzeige - Gruppenfeld in die Spalte 'TITEL' der Datentabelle. Das Fenster 'Typ auswählen' wird geöffnet.
2. Wählen Sie im Fenster 'Typ auswählen' Fenster als Gruppenfeldtyp aus, und klicken Sie auf OK. In diesem Gruppenfeld werden die dorthin gestellten Komponenten in einer einzelnen Spalte oder Zeile angeordnet und können entweder vertikal oder horizontal ausgerichtet werden.
3. Klicken Sie das Gruppenfeld an, um es auszuwählen.
4. Ändern Sie in der Sicht 'Eigenschaften' den Wert für Ausrichtung in Vertikal.
5. Ziehen Sie die Komponente {TITEL} in das Listengruppenfeld. Der Anweisungstext im Gruppenfeld wird nicht mehr angezeigt, sobald Sie dem Feld eine Komponente hinzufügen.
6. Ziehen Sie die Komponente Bild aus dem Ablagefach 'Erweiterte Faces-Komponenten' der Palette in das Listengruppenfeld. Es ist sinnvoll, das Bild am unteren Rand des Gruppenfelds zu übergeben, um sicherzustellen, dass das Bild unter dem Titel angeordnet wird.
7. Klicken Sie auf die soeben hinzugefügte Bildkomponente.
8. Stellen Sie im Bereich Größe in der Sicht 'Eigenschaften' die Breite auf 60 Pixel und die Höhe auf 50 Pixel ein. Dadurch wird sichergestellt, dass die Bilder auf der Seite stets in der Größe 60x50 angezeigt werden, unabhängig davon, wie groß sie in der Datenbank sind.
9. Binden Sie die Bildkomponente an die Spalte 'FOTO' von 'all_recordlist', indem Sie die Spalte 'FOTO' aus der Sicht 'Seitendaten' auf die Bildkomponente ziehen. Dadurch werden in der Bildkomponente die Bilddaten angezeigt, die sich in der Spalte 'FOTO' des jeweiligen Datensatzes befinden. Wenn die Spalte 'FOTO (ByteArray)' nicht aufgeführt ist, klicken Sie in der Sicht 'Seitendaten' mit der rechten Maustaste auf all_recordlist (ADS), und wählen Sie im Menü Konfigurieren aus. Klicken Sie auf OK, um das URL-Fenster zu schließen, wenn sich dieses öffnet. Klicken Sie im Fenster 'Relationale Satzliste konfigurieren' auf Weiter. Wählen Sie ADS aus, und klicken Sie auf Weiter. Klicken Sie, um das Feld neben FOTO (ByteArray) zu markieren, und klicken Sie anschließend auf Fertig stellen.
10. Klicken Sie auf die Grafik, die Sie eingefügt haben. Klicken Sie auf der Registerkarte hx:graphicImageEx der Sicht 'Eigenschaften' auf die Schaltfläche Seitendatenobjekt auswählen neben dem Feld Typ. Das Fenster 'Seitendatenobjekt auswählen' wird geöffnet.
11. Klicken Sie, um all_recordlist (Service Data Object) > all_recordlist (ADS) zu erweitern.
12. Klicken Sie auf IMAGETYPE (String) (BILDTYP (Zeichenfolge)).
13. Klicken Sie auf OK, und speichern Sie anschließend die Seite.

Ihre Seite sollte nun folgendermaßen aussehen:

1. Ziehen Sie eine Komponente Anzeige - Gruppenfeld aus dem Ablagefach 'Erweiterte Faces-Komponenten' der Palette in die Spalte 'BESCHREIBUNG' der Datentabelle. Das Fenster 'Typ auswählen' wird geöffnet.
2. Klicken Sie auf Raster als Typ der hinzuzufügenden Komponente, und klicken Sie auf OK.
3. Klicken Sie auf das neue Rastergruppenfeld.
4. Stellen Sie in der Sicht 'Eigenschaften' für die Anzahl der Spalten in diesem Gruppenfeld den Wert 2 ein.
5. Ziehen Sie die Komponente Ausgabe aus dem Drawer 'Faces-Komponenten' der Palette in das Rastergruppenfeld. Diese Ausgabekomponente wird als Bezeichnung für die Beschreibung des zum Verkauf angebotenen Artikels dienen. Jede Ausgabekomponente weist in der linken Zelle der Tabelle eine solche Bezeichnung auf.
6. Klicken Sie auf die Ausgabekomponente (sie wird in Page Designer als outputText angezeigt), und ordnen Sie ihr über die Sicht 'Eigenschaften' den Wert Beschreibung: zu.
7. Ziehen Sie die bereits vorhandene Komponente '{BESCHREIBUNG}' zum unteren Rand des Rastergruppenfelds. Wenn Sie Schwierigkeiten haben, die Komponenten an die richtige Stelle im Gruppenfeld zu ziehen, versuchen Sie, die Maustaste gedrückt zu halten und den Cursor zu beobachten. Die Position des Cursors im Gruppenfeld zeigt an, wo die Komponente angezeigt wird, wenn Sie die Maustaste loslassen. Zum Zwecke dieser Übung sollten Sie die Maustaste loslassen, wenn sich der Cursor rechts neben der vorherigen Komponente befindet.
8. Ziehen Sie eine weitere Ausgabekomponente aus der Palette und übergeben Sie sie rechts vom Gruppenfeld.
9. Ordnen Sie ihr über die Sicht 'Eigenschaften' den Wert Preis: zu.
10. Ziehen Sie die bereits vorhandene Ausgabekomponente '{PREIS}' rechts neben den Ausgabetext 'Preis'.
11. Ziehen Sie in gleicher Weise eine neue Ausgabekomponente für die Bezeichnung der Komponente {TELEFONNUMMER} aus der Palette und geben Sie ihr die Bezeichnung Telefonnummer:.
12. Ziehen Sie die bereits vorhandene Komponente '{TELEFONNUMMER}' in das Rastergruppenfeld rechts neben den Ausgabetext 'Telefonnummer'. Ihre Seite sollte nun folgendermaßen aussehen:
    
13. Löschen Sie die leeren Spalten PREIS und TELEFONNUMMER aus der Datentabelle. Um eine Spalte zu löschen, klicken Sie auf die betreffende Spalte, und öffnen Sie die Sicht 'Eigenschaften'. Klicken Sie anschließend in der Liste der HTML-Tags im linken Bereich der Sicht auf h:dataTable, wählen Sie die jeweils zu löschende Spalte in der Liste im rechten Bereich der Sicht aus, und klicken Sie dann auf 'Entfernen'.
14. Klicken Sie auf den Header der Spalte 'Beschreibung', und ändern Sie über die Sicht 'Eigenschaften' das Feld Wert in Details. Die Seite sollte nun folgendermaßen aussehen:
    
15. Speichern Sie die Seite und testen Sie sie. Wenn Sie mit der Ausführung von Anwendungen auf dem Server nicht vertraut sind, finden Sie unter Lerneinheit 1.3: Website testen weiterführende Informationen.

Wenn Sie die Seite testen, sollte Sie folgendermaßen aussehen:

Anzeigen, denen keine Grafik zugeordnet ist, zeigen einen defekten Link an. In der nächsten Lerneinheit lernen Sie, wie Sie eine Komponente zum Hochladen einer Datei zur Seite hinzufügen, um die Grafik einer Anzeige hinzuzufügen oder zu ändern.

Sie haben Lerneinheit 2.1 abgeschlossen. In dieser Lerneinheit haben Sie gelernt, wie Sie Ihre Datentabelle auf verschiedene Arten formatieren können.