Zum Hauptinhalt springen

Dynamisches Styling 25.00

In ChatGPT öffnen

In webforJ 25 und höher ist es möglich, einzelne Reihen und Zellen in der Tabelle mit benutzerdefinierten Teilenamen zu stylen. Diese Namen können dynamisch basierend auf der Logik Ihrer App zugewiesen werden, sodass Sie eine feinkörnige Kontrolle über das Aussehen der Tabelle haben.

Reihenstyling​

Die Methode setRowPartProvider() weist gesamten Reihen basierend auf dem enthaltenen Datenobjekt Teilenamen zu. Dadurch können Sie vollständige Reihen hervorheben, die bestimmten Bedingungen entsprechen – zum Beispiel abwechselnde Hintergrundfarben für gerade Reihen.

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

Schatten Teile

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

Für weitere Informationen, wie Schatten Teile 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 Datenobjekt als auch auf der Spalte, zu der sie gehören. Dies ist ideal, um spezifische Werte hervorzuheben, wie etwa Altersangaben, die einen Schwellenwert überschreiten, oder ungültige Einträge.

Wie bei Reihen sind Zellen Teile durch einen Namen definiert und können mit dem Selektor ::part() angesprochen werden.

Code anzeigen

Reagieren auf Datenaktualisierungen​

Wenn Ihre App Daten programmgesteuert ändert, z. B. das Alter eines Benutzers aktualisiert, wird die Tabelle automatisch alle zugehörigen Reihen- oder Zellstile neu bewerten und anwenden, sobald das aktualisierte Element im Repository gespeichert wird.

Code anzeigen

Gestreifte Reihen​

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

// Gestreiftes Reihenstyling anwenden
table.setStriped(true);

Ränder​

Konfigurieren Sie, welche Ränder um die Table, Spalten und Reihen 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() 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.