Componenten Samenstellen

Openen in ChatGPT

Java API

De Composite component combineert bestaande webforJ componenten tot zelf-contained, herbruikbare componenten met aangepast gedrag. Gebruik het om interne webforJ componenten te verpakken in herbruikbare business logica eenheden, component patronen in je app te hergebruiken en meerdere componenten te combineren zonder implementatiedetails bloot te stellen.

Een Composite component heeft een sterke verbinding met een onderliggende 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:

• ElementComposite: Voor webcomponenten met type-veilige eigenschapsbeheer
• ElementCompositeContainer: Voor webcomponenten die ingesloten content accepteren

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 geef je het type component op dat het beheert. Dit wordt je gebonden component, dat de hoofdomgeving is die je interne structuur vasthoudt:

BasicComposite.java

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

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

De getBoundComponent() methode geeft toegang tot je onderliggende component, zodat je de eigenschappen kunt configureren, kindcomponenten kunt toevoegen en het gedrag rechtstreeks kunt beheren.

De gebonden component kan elke webforJ component of HTML element component zijn. Voor flexibele indelingen, overweeg om FlexLayout of Div als je gebonden component te gebruiken.

Component Uitbreiding

Verleng nooit Component of DwcComponent rechtstreeks. Gebruik altijd compositiepatronen 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 geparameteriseerde constructors in plaats van de standaard constructor zonder argumenten. Gebruik dit patroon wanneer de gebonden component componenten vereist die aan zijn constructor moeten worden doorgegeven in plaats van later toegevoegd te worden.

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("Email");
   submitButton = new Button("Verzenden");

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

   return layout;
 }
}

Component levenscyclus

webforJ beheert automatisch alle levenscyclusbeheer voor Composite componenten. Door de getBoundComponent() methode te gebruiken, kunnen de meeste aangepaste gedragingen in de constructor worden afgehandeld, inclusief het toevoegen van kindcomponenten, het instellen van eigenschappen, basis indelingsinstellingen en gebeurtenisregistratie.

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 opzet- of opruimvereisten hebt, moet je mogelijk de optionele levenscyclushooks onDidCreate() en onDidDestroy() gebruiken:

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

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

 @Override
 protected void onDidDestroy() {
   // Opruimen van bronnen
   if (refreshInterval != null) {
     refreshInterval.stop();
   }
 }

 private void updateData() {
   // Logica voor gegevensupdates
 }
}

Als je acties moet uitvoeren nadat de component aan de DOM is bevestigd, 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 takenlijst waarbij elk item een Composite component is dat een RadioButton, een Div met tekst en een Button bevat.

Toon Code

CompositeView.java

composite.css

Voorbeeld: Componentgroepering

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

Toon Code

AnalyticsCardCompositeView.java

analyticscomposite.css

Keep learning

Video · YouTubeBuild Modern Buttons in Java with webforJArticleBuilding an Interactive SVG Viewer with webforJArticleYour Spring Boot app doesn't need a REST API for the UIArticleWhy Teams Keep JSP Alive, and What a Java-Native Path Forward Looks LikeArticleA Java framework like React: components, state, routingArticleThe Demo That Taught Me webforJ EventsArticleSimple Java web development: one language, no frontend stackArticleCreating a webforJ Reading Position IndicatorArticleWeb components in Java: wrap any custom element with webforJ