Komponenten Zusammenstellen

In ChatGPT öffnen

Java API

Die Composite-Komponente kombiniert vorhandene webforJ-Komponenten in eigenständige, wiederverwendbare Komponenten mit benutzerdefiniertem Verhalten. Verwenden Sie sie, um interne webforJ-Komponenten in wiederverwendbare Geschäftsanlogeeinheiten zu kapseln, Komponentenmuster in Ihrer Anwendung wiederzuverwenden und mehrere Komponenten zu kombinieren, ohne Implementierungsdetails offenzulegen.

Eine Composite-Komponente hat eine starke Zuordnung zu einer zugrunde liegenden gebundenen Komponente. Dies gibt Ihnen die Kontrolle darüber, auf welche Methoden und Eigenschaften Benutzer zugreifen können, im Gegensatz zur traditionellen Vererbung, bei der alles offengelegt ist.

Wenn Sie web-Komponenten aus einer anderen Quelle integrieren müssen, verwenden Sie spezialisierte Alternativen:

• ElementComposite: Für web-Komponenten mit typsicherer Eigenschaftenverwaltung
• ElementCompositeContainer: Für web-Komponenten, die slotfähigen Inhalt akzeptieren

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."

Verwendung

Um eine Composite-Komponente zu definieren, erweitern Sie die Composite-Klasse und geben Sie den Typ der zu verwaltenden Komponente an. Dies wird Ihre gebundene Komponente, die der Wurzelcontainer ist, der Ihre interne Struktur hält:

BasicComposite.java

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

  public BasicComposite() {
    // Zugriff auf die gebundene Komponente zur Konfiguration
    self.setDirection(FlexDirection.COLUMN)
      .setSpacing("3px")
      .add(new TextField(), new Button("Absenden"));
  }
}

Die Methode getBoundComponent() bietet Zugriff auf Ihre zugrunde liegende Komponente, sodass Sie deren Eigenschaften konfigurieren, untergeordnete Komponenten hinzufügen und ihr Verhalten direkt verwalten können.

Die gebundene Komponente kann jede webforJ-Komponente oder HTML-Elementkomponente sein. Für flexible Layouts sollten Sie FlexLayout oder Div als Ihre gebundene Komponente in Betracht ziehen.

Komponentenerweiterung

Erweitern Sie niemals Component oder DwcComponent direkt. Verwenden Sie immer Kompositionsmuster mit Composite, um benutzerdefinierte Komponenten zu erstellen.

Überschreiben Sie initBoundComponent(), wenn Sie mehr Flexibilität bei der Erstellung und Verwaltung der gebundenen Komponente benötigen, z. B. bei der Verwendung von parametrisierten Konstruktoren anstelle des Standardkonstruktors ohne Argumente. Verwenden Sie dieses Muster, wenn die gebundene Komponente Komponenten benötigt, die an ihren Konstruktor übergeben werden, statt später hinzugefügt zu werden.

CustomFormLayout.java

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

 @Override
 protected FlexLayout initBoundComponent() {
   nameField = new TextField("Name");
   emailField = new TextField("E-Mail");
   submitButton = new Button("Absenden");

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

   return layout;
 }
}

Lebenszyklus der Komponente

webforJ verwaltet das gesamte Lebenszyklusmanagement für Composite-Komponenten automatisch. Durch die Verwendung der Methode getBoundComponent() kann das meiste benutzerdefinierte Verhalten im Konstruktor behandelt werden, einschließlich Hinzufügen von untergeordneten Komponenten, Festlegen von Eigenschaften, grundlegende Layout-Einrichtung und Ereignisanmeldung.

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("Benutzer suchen...");
   searchButton = new Button("Suchen");
   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() {
   // Suchlogik hier
 }
}

Wenn Sie spezifische Einrichtungs- oder Bereinigungsanforderungen haben, müssen Sie möglicherweise die optionalen Lebenszyklus-Haken onDidCreate() und onDidDestroy() verwenden:

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

 @Override
 protected void onDidCreate(Div container) {
   // Initialisieren von Komponenten, die eine DOM-Anbindung erfordern
   refreshInterval = new Interval(5.0, event -> updateData());
   refreshInterval.start();
 }

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

 private void updateData() {
   // Datenaktualisierungslogik
 }
}

Wenn Sie nach dem Anfügen der Komponente an das DOM Aktionen ausführen müssen, verwenden Sie die Methode whenAttached():

InteractiveMap.java

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

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

Beispiel Composite-Komponente

Das folgende Beispiel zeigt eine To-do-Liste, bei der jedes Element eine Composite-Komponente ist, die einen RadioButton, einen Div mit Text und einen Button enthält.

Code anzeigen

CompositeView.java

composite.css

Beispiel: Gruppierung von Komponenten

Manchmal möchten Sie möglicherweise eine Composite verwenden, um verwandte Komponenten zu einer einzigen Einheit zusammenzufassen, auch wenn Wiederverwendbarkeit nicht das Hauptanliegen ist:

Code anzeigen

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