Overslaan naar hoofdinhoud

UI-componenten

Elk onderdeel van een bedrijfsscherm, Klaar in Java.

webforJ is het full-stack Java-framework voor zakelijke webapps: je bouwt de volledige app, inclusief schermen, in Java. De componenten omvatten lay-out, gegevensinvoer, dialogen, gegevensweergave en feedback. Elk onderdeel is een Java-klasse die je maakt, configureert en aan een lay-out toevoegt.

Open de componentengalerijBladeren op doel
Componenten in de galerij
57
Getypeerde HTML-elementen
29
Ingebouwde thema's
3
Groepen per doel
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

Op doel

Kies een groep en daarna een component. Elke tegel opent de eigen pagina van die component in de documentatie.

02

Formulieren en invoervelden

Alles wat een gebruiker invoert, selecteert of uploadt: van tekst en cijfers tot datums, invoermaskers, lijsten en bestanden.

20 componenten

Samenstelling

Je eigen componenten, gebouwd met die van ons.

webforJ gebruikt compositie boven overerving. Je breidt een Button niet uit. Je schrijft een klasse die Composite uitbreidt, componenten erin combineert en bepaalt welke methoden de rest van je app kan zien.

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);
  }
}

  • Eén klasse, één eenheid.

    Een Composite omvat één gebonden component en bevat je interne structuur, zodat een zoekbalk, adresformulier of volledige dashboardkaart één herbruikbare klasse wordt.

  • Jij kiest de API.

    Aanroepers zien alleen de methoden die u beschikbaar stelt, in tegenstelling tot overerving, waarbij alles zichtbaar is.

  • Ingebouwde componenten blijven intact.

    De ingebouwde componenten zijn final, waardoor de onderliggende webcomponent consistent en voorspelbaar blijft. Je gedrag voeg je eromheen toe, niet erin.

Componenten samenstellenComponenten begrijpen

Buiten de verzameling

Niet in de set? Gebruik een component naar keuze op het web.

De bedrijfscomponenten zijn het begin, niet het eindpunt. Elk HTML-element is een Java-klasse en elk webcomponent kan dat ook worden.

  • 29 HTML-elementen

    De pagina zelf, getypt

    webforJ levert componenten die rechtstreeks overeenkomen met standaard HTML-elementen, zoals Div, Paragraph, de koppen, lijsten, Img en Anchor, met een getypeerde Java-API.

    HTML-componenten
  • Webcomponenten

    Elke webcomponent, verpakt

    ElementComposite omhult een aangepast HTML-element of een webcomponent van derden en stelt de eigenschappen, attributen en gebeurtenissen beschikbaar via de Java-API.

    Samengesteld element
  • npm-pakketten

    Het npm-register, vanuit Java

    De frontendbundler zet annotaties op een klasse om in gecompileerde frontend-assets, zodat een component het npm-pakket kan meeleveren waarvan het afhankelijk is.

    Frontend-bundler

Je ontwerpsysteem

Heb je een eigen designsysteem? Neem het mee.

De webforJ-componenten zijn optioneel, geen vereiste. Als je designsysteem als webcomponenten wordt geleverd, hoef je er maar één keer een wrapper omheen te bouwen en kun je de hele app ermee bouwen in Java.

  1. 01

    Componenten omhullen

    ElementComposite zet elk aangepast element om in een Java-klasse en stelt de eigenschappen, attributen en gebeurtenissen ervan beschikbaar via de Java-API.

  2. 02

    Lever ze als één module

    Met de frontendbundler kan een klasse de benodigde npm-pakketten declareren, zodat wrappers hun designsysteem meenemen. Een app hoeft alleen de dependency toe te voegen.

  3. 03

    Bouw de app zoals gebruikelijk

    Routing, beveiliging en databinding werken op dezelfde manier. Een ingepakte component die ValueAware implementeert, wordt net als elk ingebouwd veld aan je model gekoppeld.

Je schermen behouden de uitstraling die je bedrijf al heeft ontworpen. Het framework eronder is nog steeds webforJ.

Samengesteld elementFrontend-bundler

Gebruikt vanuit Java

Een component is een object je maakt met new.

Je stelt de status in met getypeerde methoden, luistert met lambda’s naar gebeurtenissen en voegt het toe aan een container. Het scherm bestaat uit Java-code, zonder sjabloon dat synchroon moet blijven.

Componenten gebruikenComponenten samenstellen
Componenten aan een container toevoegen
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);
Status wijzigen via gebeurtenissen
// 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()));

Thema's

Eén ontwerpsysteem achter elk component.

webforJ wordt geleverd met een designsysteem genaamd DWC. De CSS-variabelen, de designtokens, bevatten kleuren, typografie, randen en tussenruimte, en elk component leest ze uit. Pas een token aan en elk component dat het gebruikt volgt die wijziging.

Hetzelfde veld, dezelfde knoppen, schakelaar, badge en voortgangsbalk in het lichte thema.

lightDe standaard. Lichte achtergrond, subtiele tint in de primaire kleur.

Hetzelfde veld, dezelfde knoppen, schakelaar, badge en voortgangsbalk in het donkere thema.

darkDonkere achtergrond, subtiele tint van de primaire kleur.

Drie ingebouwde thema's

light, dark en dark-pure, waarbij de primaire tint wordt weggelaten voor puur neutrale grijstinten. Schakel tijdens runtime met App.setTheme(), zonder opnieuw te bouwen.

Volgt het besturingssysteem

Registreer een licht en donker thema en geef "system" door. webforJ kiest het thema dat past bij de voorkeur van de gebruiker en schakelt over wanneer die verandert.

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

Geef je merk een nieuwe look met een paar tokens

Overschrijf de seed-tokens van de ingebouwde thema’s, zodat elk component de nieuwe uitstraling krijgt. Shadow parts bieden toegang tot een component wanneer een token niet volstaat.

:root {
  --dwc-color-primary-seed: #6366f1;
  --dwc-font-size: var(--dwc-font-size-l);
}
Thema'sCSS-variabelenShadow partsOverzicht van de styling

De galerij

De galerij in de documentatie toont elk component met een voorbeeld en een korte beschrijving, in dezelfde vier secties als de documentatie.

Open de componentengalerijTerug naar de startpagina van de documentatie