Overslaan naar hoofdinhoud

Composing Components

Openen in ChatGPT
Java API

De Composite component combineert bestaande webforJ componenten tot zelf-contained, herbruikbare componenten met aangepaste functionaliteit. Gebruik het om interne webforJ componenten te omhullen in herbruikbare business logica eenheden, hergebruik componentpatronen door je hele app en combineer meerdere componenten zonder implementatiedetails bloot te stellen.

Een Composite component heeft een sterke associatie met een onderliggend gebonden component. Dit geeft je controle over welke methoden en eigenschappen gebruikers kunnen benaderen, in tegenstelling tot traditionele overerving waarbij alles wordt blootgesteld.

Als je webcomponenten van een andere bron moet integreren, gebruik dan gespecialiseerde alternatieven:

AI skill available

The webforj-creating-components skill can wrap web components, JS libraries, or compositions as reusable webforJ components. After installing the webforJ AI plugin, ask your assistant:

  • "Wrap this Custom Element library as webforJ components."
  • "Compose these webforJ components into a reusable card."
  • "Integrate this plain JavaScript library as a webforJ component."

Gebruik​

Om een Composite component te definiëren, breid je de Composite klasse uit en specificeer je het type component dat het beheert. Dit wordt je gebonden component, dat de rootcontainer is die je interne structuur vasthoudt:

BasicComposite.java
public class BasicComposite extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public BasicComposite() {
    // Toegang tot het gebonden component om het te configureren
    self.setDirection(FlexDirection.COLUMN)
      .setSpacing("3px")
      .add(new TextField(), new Button("Verzenden"));
  }
}

De getBoundComponent() methode biedt toegang tot je onderliggende component, waarmee je zijn eigenschappen kunt configureren, kindcomponenten kunt toevoegen en zijn gedrag direct kunt beheren.

Het gebonden component kan elk webforJ component of HTML element component zijn. Voor flexibele lay-outs, overweeg om FlexLayout of Div te gebruiken als je gebonden component.

Componentuitbreiding

Breid nooit Component of DwcComponent direct uit. Gebruik altijd samenstellingpatronen met Composite om aangepaste componenten te bouwen.

Overschrijf initBoundComponent() wanneer je meer flexibiliteit nodig hebt bij het creëren en beheren van de gebonden component, zoals het gebruik van parameterized constructors in plaats van de standaard constructor zonder argumenten. Gebruik dit patroon wanneer de gebonden component vereist dat componenten aan zijn constructor worden doorgegeven in plaats van later toegevoegd.

CustomFormLayout.java
public class CustomFormLayout extends Composite<FlexLayout> {
 private TextField nameField;
 private TextField emailField;
 private Button submitButton;

 @Override
 protected FlexLayout initBoundComponent() {
   nameField = new TextField("Naam");
   emailField = new TextField("E-mail");
   submitButton = new Button("Verzenden");

   FlexLayout layout = new FlexLayout(nameField, emailField, submitButton);
   layout.setDirection(FlexDirection.COLUMN);
   layout.setSpacing("10px");

   return layout;
 }
}

Component levenscyclus​

webforJ beheert alle levenscyclusbeheer van Composite componenten automatisch. Door gebruik te maken van de getBoundComponent() methode kan het meeste aangepaste gedrag in de constructor worden afgehandeld, inclusief het toevoegen van kindcomponenten, het instellen van eigenschappen, de basis lay-outconfiguratie en het registreren van evenementen.

public class UserDashboard extends Composite<FlexLayout> {
 private final FlexLayout self = getBoundComponent();
 private TextField searchField;
 private Button searchButton;
 private Div resultsContainer;

 public UserDashboard() {
   initializeComponents();
   setupLayout();
   configureEvents();
 }

 private void initializeComponents() {
   searchField = new TextField("Zoek gebruikers...");
   searchButton = new Button("Zoeken");
   resultsContainer = new Div();
 }

 private void setupLayout() {
   FlexLayout searchRow = new FlexLayout(searchField, searchButton);
   searchRow.setAlignment(FlexAlignment.CENTER);
   searchRow.setSpacing("8px");

   getBoundComponent()
     .setDirection(FlexDirection.COLUMN)
     .add(searchRow, resultsContainer);
 }

 private void configureEvents() {
   searchButton.onClick(event -> performSearch());
 }

 private void performSearch() {
   // Zoeklogica hier
 }
}

Als je aanvullende specifieke configuratie- of opruimvereisten hebt, moet je mogelijk gebruik maken van de optionele levenscyclus hooks onDidCreate() en onDidDestroy():

public class DataVisualizationPanel extends Composite<Div> {
 private Interval refreshInterval;

 @Override
 protected void onDidCreate(Div container) {
   // Initialiseer componenten die DOM-attachment vereisen
   refreshInterval = new Interval(5.0, event -> updateData());
   refreshInterval.start();
 }

 @Override
 protected void onDidDestroy() {
   // Ruim middelen op
   if (refreshInterval != null) {
     refreshInterval.stop();
   }
 }

 private void updateData() {
   // Gegevensupdate logica
 }
}

Als je acties moet uitvoeren nadat de component aan de DOM is gehecht, gebruik dan de whenAttached() methode:

InteractiveMap.java
public class InteractiveMap extends Composite<Div> {
  public InteractiveMap() {
    setupMapContainer();

    whenAttached().thenAccept(component -> {
      initializeMapLibrary();
      loadMapData();
    });
  }
}

Voorbeeld Composite component​

Het volgende voorbeeld demonstreert een Todo-app waarin elk item een Composite component is dat bestaat uit een RadioButton gestyled als een schakelaar en een Div met tekst:

Toon Code

Voorbeeld: Componentgroepering​

Soms wil je misschien een Composite gebruiken om gerelateerde componenten samen te groeperen in een enkele eenheid, zelfs wanneer herbruikbaarheid niet de belangrijkste zorg is:

Toon Code