跳至主要内容

UI components

Every part of a business screen, ready in Java.

webforJ is the full-stack Java framework for business web apps: you build the whole app, screens included, in Java. Its components cover layout, data entry, dialogs, data display and feedback, and each one is a Java class you create, configure and add to a layout.

Open the component galleryBrowse by purpose
Components in the gallery
57
Typed HTML elements
29
Built-in themes
3
Groups by purpose
5
  • AppLayout componentAppLayout component
  • Button componentButton component
  • ChoiceBox componentChoiceBox component
  • Badge componentBadge component
  • Avatar componentAvatar component
  • Login componentLogin component
  • Slider componentSlider component
  • ProgressBar componentProgressBar component
  • Switch componentSwitch component
  • MaskedDateField componentMaskedDateField component
  • GoogleCharts componentGoogleCharts component
  • Navigator componentNavigator component
  • Tree componentTree component
  • AppNav componentAppNav component
  • CheckBox componentCheckBox component
  • Upload componentUpload component
  • Toast componentToast component
  • Icon componentIcon component
  • Accordion componentAccordion component
  • Alert componentAlert component

By purpose

Pick a group, then a component. Every tile opens that component's own page in the docs.

Composition

Your own components, built from ours.

webforJ uses composition over inheritance. You do not extend a Button. You write a class that extends Composite, combine components inside it, and decide which methods the rest of your app can see.

SearchBar.java
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);
  }
}

  • One class, one unit.

    A Composite wraps a single bound component and holds your internal structure, so a search bar, an address form or a whole dashboard card becomes one reusable class.

  • You choose the API.

    Callers see only the methods you expose, unlike inheritance, where everything is exposed.

  • Built-in components stay intact.

    The built-in components are final, which keeps the web component underneath consistent and predictable. Your behaviour goes around them, not into them.

Composing componentsUnderstanding components

Beyond the set

Not in the set? Use any component on the web.

The business components are where you start, not where you stop. Every HTML element is a Java class, and any web component can become one.

  • 29 HTML elements

    The page itself, typed

    webforJ ships components that map directly to standard HTML elements, such as Div, Paragraph, the headings, lists, Img and Anchor, with a typed Java API.

    HTML components
  • Web components

    Any web component, wrapped

    ElementComposite wraps a custom HTML element or a third-party web component and exposes its properties, attributes and events through the Java API.

    Element Composite
  • npm packages

    The npm registry, from Java

    The frontend bundler turns annotations on a class into compiled frontend assets, so a component can bring the npm package it depends on.

    Frontend bundler

Your design system

Have your own design system? Bring it along.

The webforJ components are an offer, not a requirement. If your design system ships as web components, you wrap it once and build the whole app with it, in Java.

  1. 01

    Wrap the components

    ElementComposite turns each custom element into a Java class and exposes its properties, attributes and events through the Java API.

  2. 02

    Ship them as one module

    The frontend bundler lets a class declare the npm packages it needs, so the wrappers carry their design system with them. An app only adds the dependency.

  3. 03

    Build the app as usual

    Routing, security and data binding work the same. A wrapped component that implements ValueAware binds to your model like any built-in field.

Your screens keep the look your company already designed. The framework underneath is still webforJ.

Element CompositeFrontend bundler

Used from Java

A component is an object you create with new.

You set its state with typed methods, listen to its events with lambdas and add it to a container. The screen is Java code, with no template to keep in sync.

Using componentsComposing components
Add components to a container
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);
Change state from events
// 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()));

Theming

One design system behind every component.

webforJ ships with a design system named DWC. Its CSS variables, the design tokens, cover colors, typography, borders and spacing, and every component reads them. Change a token and every component that uses it follows.

The same field, buttons, switch, badge and progress bar in the light theme.

lightThe default. Light background, subtle primary-color tint.

The same field, buttons, switch, badge and progress bar in the dark theme.

darkDark background, subtle primary-color tint.

Three themes built in

light, dark and dark-pure, which drops the primary tint for pure neutral grays. Switch at runtime with App.setTheme(), with no rebuild.

Follows the operating system

Register a light and a dark theme and pass "system". webforJ picks the one that matches the user's preference and switches again when it changes.

@AppTheme("system")
@AppLightTheme("light")
@AppDarkTheme("dark")
class MyApp extends App {
  // app code
}

Rebrand with a few tokens

Override the seed tokens of the built-in themes and every component picks up the new look. Shadow parts reach inside a component when a token is not enough.

:root {
  --dwc-color-primary-seed: #6366f1;
  --dwc-font-size: var(--dwc-font-size-l);
}
ThemesCSS variablesShadow partsStyling overview

The gallery

The gallery in the docs lists every component with its preview and a short description, in the same four sections the docs use.

Open the component galleryBack to the docs home