Gestaltung
webforJ wird mit einem umfassenden Designsystem namens DWC ausgeliefert. Es ist mehr als nur ein Theme: Es ist ein strukturiertes, erweiterbares System, das die visuelle Sprache Ihrer App festlegt. DWC unterstützt Entwickler und Designer dabei, schnell und sicher konsistente, markengerechte Benutzeroberflächen zu erstellen.
Im Kern bietet DWC eine Reihe sorgfältig gestalteter CSS-Variablen (Design-Tokens), die wichtige visuelle Elemente wie Farben, Typografie, Rahmen und Abstände abdecken. Diese Tokens bilden die Grundlage für alle Komponentenstile und ermöglichen eine globale Anpassung mit minimalem Aufwand.
Für fortgeschrittenere Gestaltungsmöglichkeiten verwendet webforJ CSS Shadow Parts. Damit lassen sich interne Komponentenbereiche gezielt gestalten, ohne die Kapselung zu beeinträchtigen. So erhalten Teams eine detaillierte Kontrolle über das Erscheinungsbild von Komponenten, auch in größeren Anwendungen.
DWC umfasst außerdem eine anpassbare Farbpalette und verwendet standardmäßig ein klares, helles visuelles Theme. Alle Aspekte lassen sich jedoch an Ihre Marke oder den Stil Ihres Produkts anpassen.
The webforj-styling-apps skill can theme and style webforJ apps with DWC design tokens. After installing the webforJ AI plugin, ask your assistant:
- "Theme this app with a blue palette."
- "Style the dwc-button to match the brand guidelines."
- "Make this layout tighter - adjust spacing and typography."
Figma-Designkit
Das DWC Design Kit ist die offizielle Figma-Ressource für das Design von webforJ-Apps. Es umfasst alle DWC-Komponenten mit ihren Themes, Größen und Zuständen sowie die Farbpaletten, Typografie-, Abstands- und Schatten-Tokens des Designs als Figma-Variablen und -Stile im hellen und dunklen Modus. Designer und Entwickler können das Kit verwenden, um visuell konsistente und benutzerfreundliche Oberflächen mit vorhersehbarem Komponentenverhalten, präzisen Abständen und zugänglichem Farbkontrast zu erstellen.
Themen
CSS-Variablen
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow-Bereiche
CSS Shadow Parts bieten Entwicklern eine Möglichkeit, Elemente innerhalb des Shadow DOM eines Komponents von außen zu stylen, während die Kapselung erhalten bleibt.
Designs
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Farben
webforJ bietet ein Farbsystem, das auf CSS-Custom-Properties basiert. Diese Farbvariablen sorgen für einen konsistenten visuellen Stil in Ihrer Anwendung und geben Ihnen die volle Kontrolle, um Farbpaletten gemäß Ihren Designanforderungen anzupassen.
Typografie
Typografietokens werden verwendet, um einen konsistenten Satz von Schriftstilen in Ihrer Anwendung beizubehalten.
Größen und Abstände
Abstand- und Größen-Tokens werden verwendet, um konsistenten Abstand und Größen in Ihrer App bereitzustellen. Alle Größen- und Abstands-Eigenschaften sind in rem definiert.
Rahmen
Die Rand-Eigenschaften werden verwendet, um den Randstil und die Breite der Komponente zu steuern. Siehe verfügbare Randstile.
Schatten
Die Schatteneigenschaften fügen Schatteneffekte um den Rahmen eines Elements hinzu. Schatten signalisieren Elemente, die in der Benutzeroberfläche übereinander gestapelt sind.
Oberflächen
DWC definiert drei Ebenen von Flächen, die verwendet werden, um die UI-Hierarchie zu organisieren, kombiniert mit shadows. Alle palette colors sind getestet, um sicherzustellen, dass sie ausreichend Kontrast mit diesen Flächen bieten.
Zustand
State-Tokens definieren, wie Komponenten visuell auf Benutzerinteraktionen reagieren, wie beispielsweise, wenn sie deaktiviert oder fokussiert sind. Diese Variablen helfen, ein konsistentes Verhalten und Styling über alle UI-Elemente hinweg sicherzustellen und können leicht an Ihr Designsystem angepasst werden.
Übergänge und Easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling-Sprachen
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.
Weiterlernen
ArtikelA Java design system built in: webforJ DWC tokens and themes
ArtikelDark mode in a Java web app: themes, toggle, saved choice
ArtikelwebforJ Components: What Ships With the Framework
ArtikelTransform Your webforJ App with Professional Theming
ArtikelBuilding Better CSS with webforJ's Styling System