Dynamisches Styling 25.00

In ChatGPT öffnen

Ab webforJ 25 ist es möglich, einzelne Zeilen und Zellen in der Table mithilfe benutzerdefinierter Part-Namen zu formatieren. Diese Namen können dynamisch anhand der Logik Ihrer App zugewiesen werden und ermöglichen so eine präzise Kontrolle über das Erscheinungsbild der Tabelle.

Zeilen formatieren

Mit der Methode setRowPartProvider() werden ganzen Zeilen anhand des darin enthaltenen Datenelements Part-Namen zugewiesen. So können Sie vollständige Zeilen hervorheben, die bestimmten Bedingungen entsprechen – beispielsweise mit abwechselnden Hintergrundfarben für gerade Zeilen.

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

Shadow Parts

Der Selektor ::part() ist ein spezielles CSS-Feature, mit dem Sie Elemente innerhalb des Shadow DOM einer Komponente formatieren können – sofern diese Elemente ein part-Attribut bereitstellen. Das ist besonders nützlich, um interne Teile von webforJ-Komponenten wie Zeilen oder Zellen in einer Tabelle zu formatieren.

Weitere Informationen zur Funktionsweise von Shadow Parts und dazu, wie sie definiert und angesprochen werden, finden Sie im Abschnitt Styling.

Zellen formatieren

Mit der Methode setCellPartProvider() werden einzelne Zellen anhand des Datenelements und der Spalte formatiert, zu der sie gehören. Damit eignet sie sich ideal, um bestimmte Werte hervorzuheben – etwa Altersangaben über einem Grenzwert oder ungültige Einträge.

Wie bei Zeilen-Parts wird auch bei Zellen-Parts ein Name definiert und der Part mit dem Selektor ::part() angesprochen.

Auf Datenaktualisierungen reagieren

Wenn Ihre App Daten programmgesteuert ändert, beispielsweise das Alter eines Benutzers aktualisiert, wertet die Tabelle alle zugehörigen Zeilen- oder Zellenformatierungen automatisch neu aus und wendet sie erneut an, sobald das aktualisierte Element im Repository gespeichert wurde.

In dieser Demo werden Zellen in der Spalte „Alter“ anhand eines Grenzwerts formatiert: Alter über 30 erscheinen grün, Alter von 30 oder darunter rot. Durch Klicken auf die Schaltfläche wird Alices Alter zwischen 28 und 31 umgeschaltet. Dadurch wird setCellPartProvider ausgelöst, um die entsprechende Formatierung nach dem Speichern der Daten erneut anzuwenden.

Gestreifte Zeilen

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

// Gestreifte Zeilen formatieren
table.setStriped(true);

Rahmen

Legen Sie fest, welche Rahmen um die Table, 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, wie Sie das Erscheinungsbild Ihrer Table mit setStriped() und setBordersVisible() an den Rest Ihrer App anpassen können.

Daten verwalten und abfragen

Informationen zur Verwendung des Repository-Musters zum Verwalten und Abfragen von Sammlungen finden Sie in den Repository-Artikeln.

Weiterlernen

ArtikelSpring Data JPA grid: sort, filter, and page in JavaArtikelJava Data Grid: Build Fast, Sortable Tables with webforJArtikelA Java design system built in: webforJ DWC tokens and themesArtikelJava web front end for a database: browse and editArtikelMaking Data Display Less Boring in webforJArtikelBuilding Better CSS with webforJ's Styling System