Zum Hauptinhalt springen

Composite Components

In ChatGPT öffnen
Java API

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

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

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

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 Komponente an, die sie verwaltet. Dies wird Ihre gebundene Komponente, die der Wurzelcontainer ist, der Ihre interne Struktur enthä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("Einreichen"));
  }
}

Die Methode getBoundComponent() bietet Zugriff auf Ihre zugrunde liegende Komponente, sodass Sie deren Eigenschaften konfigurieren, untergeordnete Komponenten hinzufügen und deren 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.

Komponenten-Erweiterung

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 beim Erstellen und Verwalten der gebundenen Komponente benötigen, beispielsweise bei der Verwendung von parametrierbaren Konstruktoren anstelle des Standard-konstrukteurs ohne Argumente. Verwenden Sie dieses Muster, wenn die gebundene Komponente Komponenten benötigt, die in ihren Konstruktor übergeben werden müssen, anstatt 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("Einreichen");

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

   return layout;
 }
}

Komponentenlebenszyklus​

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 des Hinzufügens untergeordneter Komponenten, des Setzens von Eigenschaften, der grundlegenden Layout-Setup und der Ereignisregistrierung.

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 zusätzliche spezifische Einrichtungs- oder Bereinigungsanforderungen haben, müssen Sie möglicherweise die optionalen Lebenszyklus-Hooks onDidCreate() und onDidDestroy() verwenden:

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

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

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

 private void updateData() {
   // Logik zur Datenaktualisierung
 }
}

Wenn Sie Aktionen durchführen müssen, nachdem die Komponente an das DOM angehängt wurde, 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 Todo-App, in der jedes Element eine Composite-Komponente ist, die aus einem RadioButton besteht, der als Schalter gestylt ist, und einem Div mit Text:

Code anzeigen

Beispiel: Komponenten gruppieren​

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

Code anzeigen