Dynamisches Styling 25.00
In webforJ 25 und höher ist es möglich, einzelne Zeilen und Zellen in der Tabelle mit benutzerdefinierten Teilenamen zu stylen. Diese Namen können dynamisch basierend auf der Logik Ihrer App zugewiesen werden, was Ihnen eine feine Kontrolle über das Erscheinungsbild der Tabelle ermöglicht.
Zeilen-Styling
Die Methode setRowPartProvider() weist gesamten Zeilen basierend auf dem Datenobjekt, das sie enthalten, Teilenamen zu. Dadurch können Sie vollständige Zeilen hervorheben, die bestimmte Bedingungen erfüllen, z.B. abwechselnde Hintergrundfarben für gerade Zeilen.
Diese Stilnamen können mit dem Selektor ::part() in Ihrem CSS angesprochen werden.
Der Selektor ::part() ist eine spezielle CSS-Funktion, die es Ihnen ermöglicht, Elemente innerhalb des Schatten-DOM eines Komponents zu stylen, solange diese Elemente ein part-Attribut haben. Dies ist besonders nützlich, um interne Teile von webforJ-Komponenten, wie Zeilen oder Zellen in einer Tabelle, zu stylen.
Für weitere Informationen darüber, wie Schatten-Teile funktionieren und wie Sie sie definieren und ansprechen können, siehe den Abschnitt Styling.
Code anzeigen
- Java
Zellen-Styling
Die Methode setCellPartProvider() stylt einzelne Zellen basierend auf sowohl dem Datenobjekt als auch der Spalte, zu der sie gehören. Dies ist ideal, um bestimmte Werte hervorzuheben, wie das Heranziehen von Altersangaben, die einen Schwellenwert überschreiten oder ungültige Einträge.
Wie bei Zeilen-Teilen werden Zellen-Teile durch einen Namen definiert und mit dem Selektor ::part() angesprochen.
Code anzeigen
- Java
Reaktionen auf Datenaktualisierungen
Wenn Ihre App Daten programmgesteuert ändert, z.B. das Alter eines Benutzers aktualisiert, wird die Tabelle automatisch alle zugehörigen Zeilen- oder Zellstile erneut bewerten und erneut anwenden, sobald das aktualisierte Objekt im Repository gespeichert ist.
In dieser Demo werden die Zellen in der Alters-Spalte basierend auf einem Schwellenwert gestylt: Alter über 30 erscheint grün, während Alter 30 und darunter rot erscheinen. Ein Klick auf den Button wechselt das Alter von Alice zwischen 28 und 31, was die setCellPartProvider-Methode auslöst, um den entsprechenden Stil erneut anzuwenden, wenn die Daten gespeichert werden.
Code anzeigen
- Java
Gestreifte Zeilen
Aktivieren Sie abwechselnde Hintergrundfarben für Zeilen, um die Lesbarkeit zu verbessern:
// Gestreiftes Zeilenstyling anwenden
table.setStriped(true);
Ränder
Konfigurieren Sie, welche Ränder um die Table, 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 Table mit dem Rest Ihrer App mithilfe von setStriped() und setBordersVisible() abzugleichen.
Code anzeigen
- Java
Für Informationen zur Verwendung des Repository-Musters zur Verwaltung und Abfrage von Sammlungen siehe die Repository-Artikel.