UI-Komponenten
Jeder Bereich eines Geschäftsbildschirms, Bereit in Java.
webforJ ist das Full-Stack-Java-Framework für Webanwendungen im Geschäftsbereich: Sie erstellen die gesamte Anwendung einschließlich der Ansichten in Java. Die Komponenten decken Layout, Dateneingabe, Dialoge, Datenanzeige und Feedback ab. Jede Komponente ist eine Java-Klasse, die Sie erstellen, konfigurieren und einem Layout hinzufügen.
- Komponenten in der Galerie
- 57
- Typisierte HTML-Elemente
- 29
- Integrierte Designs
- 3
- Gruppierung nach Zweck
- 5
Nach Zweck
Wählen Sie eine Gruppe und anschließend eine Komponente aus. Jede Kachel öffnet die zugehörige Dokumentationsseite.
Layout
Der Rahmen eines Bildschirms: App-Shells, Symbolleisten, Flex- und Spaltenlayouts, geteilte Bereiche und Oberflächen.
8 Komponenten
AppLayoutEin strukturiertes Layout für die übergeordnete App-Navigation und Inhalte.
FlexLayoutOrdnet seine untergeordneten Elemente mithilfe von Flexbox-Regeln responsiv an.
ColumnsLayoutOrdnet untergeordnete Elemente in Spalten an – ideal für Formulare und rasterartige Strukturen.
ToolbarEin horizontaler Container für Aktionsschaltflächen, Symbole und andere Bedienelemente.
SplitterTeilt den Platz zwischen zwei Komponenten auf, deren Größe Nutzer durch Ziehen ändern können.
AccordionEine gestapelte Sammlung einklappbarer Bereiche mit anklickbaren Überschriften.
CardEine Oberfläche mit Bereichen für Medien, Kopfzeilen, Inhalte und Fußzeilen.
DialogEin modales Fenster, das Inhalte überlagert und zur Eingabe auffordert.
Formulare und Eingabefelder
Alles, was Nutzer eingeben, auswählen oder hochladen – von Text und Zahlen bis hin zu Datumsangaben, Masken, Listen und Dateien.
20 Komponenten
TextFieldEinzeiliges Textfeld zum Eingeben und Bearbeiten von Text.
MaskedTextFieldBeschränkt die Texteingabe auf ein Muster, z. B. eine Telefonnummer.
NumberFieldNumerisches Eingabefeld mit Schaltflächen zum Erhöhen oder Verringern des Werts.
MaskedNumberFieldErzwingt ein Zahlenformat wie Währung oder Prozentangaben.
PasswordFieldEinzeiliges Eingabefeld, das Passwörter maskiert.
DateFieldEin browserbasierter Datumsauswähler in einem Eingabefeld.
MaskedDateFieldEin Datumseingabefeld, das ein festgelegtes Datumsformat erzwingt.
TimeFieldEin browserbasierter Zeitauswähler in einem Eingabefeld.
MaskedTimeFieldZeiteingabe mit festgelegtem Format.
DateTimeFieldWählt ein Datum und eine Uhrzeit in einem Eingabefeld aus.
ColorFieldEin browserbasierter Farbwähler in einem Eingabefeld.
TextAreaEin mehrzeiliges Eingabefeld für größere Textblöcke.
CheckBoxEine binäre Option, die zwischen aktiviert und deaktiviert wechselt.
RadioButtonWählt eine Option aus einer Gruppe sich gegenseitig ausschließender Optionen aus.
SwitchWechselt durch Schieben zwischen zwei Zuständen, z. B. Ein und Aus.
ChoiceBoxEine Dropdown-Liste mit vordefinierten Optionen.
ComboBoxDropdown-Liste mit bearbeitbarem Texteingabefeld.
ListBoxEine scrollbare Liste zur Auswahl eines oder mehrerer Elemente.
SliderWählt durch Ziehen eines Reglers entlang einer Leiste einen Wert aus einem Bereich aus.
UploadInline-Dateiauswahl mit Drag-and-drop, Filtern und Ereignissen pro Datei.
Daten und Inhalte
Datensätze, Hierarchien, Diagramme und gestreamten Text anzeigen und beim Scrollen weitere Elemente laden.
8 Komponenten
GoogleChartsDiagramme und visuelle Datendarstellungen mit Google Charts.
TreeHierarchische Daten, die Nutzer auf- und zuklappen und mit denen sie interagieren.
InfiniteScrollLädt beim Scrollen weitere Elemente und erkennt, wann alle Inhalte geladen sind.
RefresherEine Pull-to-Refresh-Interaktion in scrollbaren Containern.
MarkdownViewerGibt Markdown schrittweise aus, ideal für KI-Chats und Streaming-Text.
TerminalEine Befehlszeilenschnittstelle in der App für textbasierte Befehle.
AvatarProfilbilder oder Initialen in verschiedenen Größen, Formen und Designs.
BadgeEin kleines Label für Zählwerte, Statusangaben oder kurze Metadaten.
Navigation und Aktionen
Zwischen Ansichten und Bereichen wechseln, Daten durchblättern und Folgeaktionen auslösen.
6 Komponenten
AppNavEin Navigationsmenü zum Wechseln zwischen Bereichen und Ansichten.
DrawerEin seitlich einblendbares Panel für die Navigation oder zusätzliche Inhalte.
TabbedPaneOrganisiert Inhalte in Tabs, zwischen denen Nutzer wechseln können.
NavigatorSeitennavigation mit Schaltflächen für erste, letzte, nächste und vorherige Seite sowie Schnellsprung.
ButtonEine anklickbare Komponente, die beim Drücken eine Aktion auslöst.
IconEin grafisches Symbol für eine Aktion, einen Status oder eine Kategorie.
Feedback und Dialoge
Informieren Sie Nutzer darüber, was gerade passiert, bitten Sie sie um Bestätigung und erfassen Sie einen Wert, eine Datei oder Anmeldedaten.
12 Komponenten
ToastEine nicht blockierende Benachrichtigung, die automatisch verschwindet.
AlertWichtige Meldungen oder Warnungen in einem auffälligen Format.
DesktopNotificationBenutzerdefinierte Desktop-Benachrichtigungen über die Browser Notification API.
ProgressBarEin Balken, der sich mit dem Fortschritt einer Aufgabe füllt.
BusyIndicatorEin anwendungsweiter Indikator dafür, dass ein globaler Prozess läuft.
LoadingEin auf eine übergeordnete Komponente beschränkter Ladeindikator.
SpinnerEine rotierende Animation, die anzeigt, dass eine Aktion ausgeführt wird.
MessageDialogEine Informationsmeldung, die der Benutzer mit „OK“ bestätigt.
ConfirmDialogFordert den Benutzer auf, eine Aktion zu bestätigen oder abzubrechen.
InputDialogFordert den Benutzer mit „OK“ und „Abbrechen“ zur Eingabe eines Werts auf.
FileUploadDialogLädt Dateien aus dem lokalen Dateisystem in die App hoch.
LoginEine vorgefertigte Anmeldemaske mit Benutzername, Passwort und Anmeldebutton.
Komposition
Ihre eigenen Komponenten, Auf unserem aufgebaut.
webforJ setzt auf Komposition statt Vererbung. Sie erweitern keinen Button. Sie schreiben eine Klasse, die Composite erweitert, Komponenten darin kombiniert und festlegt, welche Methoden der Rest Ihrer Anwendung sehen kann.
public class SearchBar extends Composite<FlexLayout> {
private final FlexLayout self = getBoundComponent();
private TextField searchField;
private Button searchButton;
public SearchBar() {
searchField = new TextField("Search");
searchButton = new Button("Go");
self.setDirection(FlexDirection.ROW)
.add(searchField, searchButton);
}
}
Eine Klasse, eine Einheit.
Ein
Compositekapselt eine einzelne gebundene Komponente und enthält die interne Struktur. So wird eine Suchleiste, ein Adressformular oder eine ganze Dashboard-Karte zu einer wiederverwendbaren Klasse.Sie wählen die API.
Aufrufer sehen nur die Methoden, die Sie freigeben – anders als bei der Vererbung, bei der alles sichtbar ist.
Integrierte Komponenten bleiben unverändert.
Die integrierten Komponenten sind final, sodass die zugrunde liegende Webkomponente konsistent und vorhersehbar bleibt. Dein Verhalten wird darum herum umgesetzt, nicht darin.
Über die Menge hinaus
Nicht im Set? Verwenden Sie eine beliebige Komponente im Web.
Die Geschäftskomponenten sind der Ausgangspunkt, nicht das Ziel. Jedes HTML-Element ist eine Java-Klasse, und jede Webkomponente kann dazu werden.
- 29 HTML-Elemente
Die Seite selbst, eingegeben
webforJ stellt Komponenten mit einer typisierten Java-API bereit, die direkt standardmäßigen HTML-Elementen wie Div, Paragraph, Überschriften, Listen, Img und Anchor entsprechen.
HTML-Komponenten - Web Components
Beliebige Webkomponente, gekapselt
ElementComposite umschließt ein benutzerdefiniertes HTML-Element oder eine Webkomponente eines Drittanbieters und stellt deren Eigenschaften, Attribute und Ereignisse über die Java-API bereit.
Elementverbund - npm-Pakete
Die npm-Registry, von Java
Der Frontend-Bundler wandelt Annotationen einer Klasse in kompilierte Frontend-Assets um, sodass eine Komponente das benötigte npm-Paket mitbringen kann.
Frontend-Bundler
Dein Designsystem
Haben Sie ein eigenes Designsystem? Nimm es mit.
Die webforJ-Komponenten sind ein Angebot, keine Voraussetzung. Wenn Ihr Designsystem als Web Components bereitgestellt wird, binden Sie es einmal ein und erstellen damit die gesamte App in Java.
- 01
Komponenten umschließen
ElementCompositewandelt jedes benutzerdefinierte Element in eine Java-Klasse um und stellt dessen Eigenschaften, Attribute und Ereignisse über die Java-API bereit. - 02
Als ein Modul ausliefern
Der Frontend-Bundler ermöglicht es einer Klasse, die benötigten npm-Pakete anzugeben, sodass die Wrapper ihr Designsystem mitbringen. Eine Anwendung muss lediglich die Abhängigkeit hinzufügen.
- 03
App wie gewohnt erstellen
Routing, Sicherheit und Datenbindung funktionieren genauso. Eine umhüllte Komponente, die
ValueAwareimplementiert, wird wie jedes integrierte Feld an Ihr Modell gebunden.
Ihre Benutzeroberflächen behalten das von Ihrem Unternehmen bereits entwickelte Design. Das zugrunde liegende Framework bleibt webforJ.
Von Java aus verwendet
Eine Komponente ist ein Objekt. Sie erstellen mit new.
Du legst seinen Zustand mit typisierten Methoden fest, hörst mit Lambdas auf seine Ereignisse und fügst ihn einem Container hinzu. Der Bildschirm besteht aus Java-Code – ohne Vorlage, die synchron gehalten werden muss.
FlexLayout container = new FlexLayout();
container.add(new Button("Click Me"));
TextField nameField = new TextField("Name");
TextField emailField = new TextField("Email");
Button submitButton = new Button("Submit");
container.add(nameField, emailField, submitButton);
// Reveal an additional field when a checkbox is checked
TextField advancedField = new TextField("Advanced setting");
advancedField.setVisible(false);
CheckBox enableAdvanced = new CheckBox("Show advanced settings");
enableAdvanced.addValueChangeListener(e -> advancedField.setVisible(e.getValue()));
// Enable a button only when the required field has a value
Button submitButton = new Button("Submit");
submitButton.setEnabled(false);
TextField nameField = new TextField("Name");
nameField.addValueChangeListener(e -> submitButton.setEnabled(!e.getValue().isBlank()));
Design
Ein Designsystem hinter jeder Komponente.
webforJ wird mit einem Designsystem namens DWC ausgeliefert. Seine CSS-Variablen, die Design-Tokens, umfassen Farben, Typografie, Rahmen und Abstände – und jede Komponente verwendet sie. Änderst du ein Token, passen sich alle Komponenten an, die es verwenden.
Dasselbe Feld, dieselben Schaltflächen, derselbe Schalter, dasselbe Badge und derselbe Fortschrittsbalken im hellen Design.
lightDer Standard. Heller Hintergrund, dezente Tönung in der Primärfarbe.Dasselbe Feld, dieselben Schaltflächen, derselbe Schalter, dasselbe Badge und dieselbe Fortschrittsleiste im dunklen Design.
darkDunkler Hintergrund mit dezenter Primärfarbnuance.Drei integrierte Themes
light, dark und dark-pure, das den Primärfarbton zugunsten reiner neutraler Grautöne weglässt. Wechsle mit App.setTheme() zur Laufzeit – ohne Neuaufbau.
Folgt dem Betriebssystem
Registrieren Sie ein helles und ein dunkles Theme und übergeben Sie "system". webforJ wählt das Theme passend zur Nutzerpräferenz und wechselt, wenn sie sich ändert.
@AppTheme("system")
@AppLightTheme("light")
@AppDarkTheme("dark")
class MyApp extends App {
// app code
}
Mit wenigen Tokens neu gestalten
Überschreiben Sie die Seed-Tokens der integrierten Themes, und alle Komponenten erhalten ein neues Erscheinungsbild. Shadow Parts ermöglichen Eingriffe in eine Komponente, wenn ein Token nicht ausreicht.
:root {
--dwc-color-primary-seed: #6366f1;
--dwc-font-size: var(--dwc-font-size-l);
}
Die Galerie
Galerie öffnen und alle 57 anzeigen.
Die Galerie in der Dokumentation listet alle Komponenten mit Vorschau und Kurzbeschreibung in denselben vier Abschnitten wie die Dokumentation auf.