Zum Hauptinhalt springen

Dynamische Gestaltung 25.00

In ChatGPT öffnen

In webforJ 25 und höher ist es möglich, einzelne Zeilen und Zellen in der Tabelle mit benutzerdefinierten Teilenamen zu gestalten. Diese Namen können dynamisch basierend auf der Logik Ihrer Anwendung zugewiesen werden, was Ihnen eine feine Kontrolle über das Erscheinungsbild der Tabelle gibt.

Zeilengestaltung​

Die Methode setRowPartProvider() weist Teilnamen ganzen Zeilen zu, basierend auf dem Datenobjekt, das sie enthalten. Dies ermöglicht es Ihnen, vollständige Zeilen hervorzuheben, die bestimmte Bedingungen erfüllen—zum Beispiel abwechselnde Hintergrundfarben für gerade Zeilen.

Diese Stilnamen können mit dem Selektor ::part() in Ihrem CSS angesprochen werden.

Schattenteile

Der Selektor ::part() ist eine spezielle CSS-Funktion, die es Ihnen ermöglicht, Elemente im Schatten-DOM eines Components zu stylen—solange diese Elemente ein part-Attribut haben. Dies ist besonders nützlich, um interne Teile von webforJ-Komponenten zu stylen, wie Zeilen oder Zellen in einer Tabelle.

Für weitere Informationen dazu, wie Schattenteile funktionieren und wie man sie definiert und anspricht, siehe den Abschnitt Styling.

Code anzeigen

Zellengestaltung​

Die Methode setCellPartProvider() gestaltet einzelne Zellen basierend auf dem Datenobjekt und der Spalte, zu der sie gehören. Dies ist ideal, um spezifische Werte hervorzuheben, wie zum Beispiel Altersangaben, die einen Schwellenwert überschreiten, oder ungültige Einträge.

Wie bei Zeilenparts werden Zellparts durch einen Namen definiert und mit dem Selektor ::part() angesprochen.

Code anzeigen

Reaktion auf Datenaktualisierungen​

Wenn Ihre Anwendung Daten programmgesteuert ändert, wie zum Beispiel das Alter eines Benutzers aktualisiert, wird die Tabelle automatisch neu ausgewertet und die entsprechenden Zeilen- oder Zellstile erneut angewendet, sobald der aktualisierte Datensatz im Repository gespeichert ist.

In dieser Demo werden die Zellen in der Alterskolonne basierend auf einem Schwellenwert gestaltet: Alter über 30 erscheinen grün, während Alter von 30 und darunter rot erscheint. Das Klicken auf die Schaltfläche schaltet Alices Alter zwischen 28 und 31 um, wodurch setCellPartProvider erneut den entsprechenden Stil anwendet, wenn die Daten gespeichert werden.

Code anzeigen

Gestreifte Zeilen​

Aktivieren Sie abwechselnde Hintergrundfarben für Zeilen, um die Lesbarkeit zu verbessern:

// Gestreifte Zeilengestaltung anwenden
table.setStriped(true);

Ränder​

Konfigurieren Sie, welche Ränder um die Tabelle, Spalten und Zeilen angezeigt werden:

// Alle Ränder aktivieren
table.setBordersVisible(EnumSet.of(Table.Border.AROUND, Table.Border.COLUMNS, Table.Border.ROWS));

// Alle Ränder entfernen
table.setBordersVisible(EnumSet.noneOf(Table.Border.class));

Die folgende Demo zeigt eine einfache Möglichkeit, das visuelle Erscheinungsbild Ihrer Tabelle mit dem Rest Ihrer Anwendung mithilfe von setStriped() und setBordersVisible() abzustimmen.

Code anzeigen

Verwaltung und Abfrage von Daten

Für Informationen zur Verwendung des Repository-Musters zur Verwaltung und Abfrage von Sammlungen siehe die Repository-Artikel.