Zum Hauptinhalt springen

Dynamisches Styling 25.00

In ChatGPT öffnen

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

Zeilenstyling​

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

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

Schattenteile

Der ::part()-Selektor ist ein spezielles CSS-Feature, das es Ihnen ermöglicht, Elemente im Schatten-DOM eines Komponents zu stylen—solange diese Elemente ein part-Attribut exponieren. Dies ist besonders nützlich für das Styling interner Teile von webforJ-Komponenten, wie Zeilen oder Zellen in einer Tabelle.

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

Code anzeigen

Zellenstyling​

Die Methode setCellPartProvider() stylt einzelne Zellen basierend sowohl auf dem Datenelement als auch auf der Spalte, zu der sie gehören. Dies macht es ideal, um spezifische Werte hervorzuheben, wie zum Beispiel Alter, die einen Schwellenwert überschreiten oder ungültige Einträge.

Wie bei Zeilenpartien sind Zellteile durch einen Namen definiert und werden mit dem ::part()-Selektor angesprochen.

Code anzeigen

Reagieren auf Datenaktualisierungen​

Wenn Ihre Anwendung Daten programmgesteuert ändert, wie zum Beispiel das Alter eines Benutzers aktualisiert, wird die Tabelle automatisch neu bewertet und alle zugehörigen Zeilen- oder Zellstile erneut angewendet, sobald das aktualisierte Element 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. Durch Klicken auf die Schaltfläche wird Alices Alter zwischen 28 und 31 umgeschaltet, wodurch setCellPartProvider aufgefordert wird, den entsprechenden Stil erneut anzuwenden, wenn die Daten gespeichert werden.

Code anzeigen

Gestreifte Zeilen​

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

// Gestreifte Zeilen-Darstellung anwenden
table.setStriped(true);

Rahmen​

Konfigurieren Sie, welche Rahmen um die Tabelle, Spalten und Zeilen angezeigt werden:

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

// Alle Rahmen 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() abzugleichen.

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.