Zum Hauptinhalt springen

Composite Components

In ChatGPT öffnen
23.06
Java API

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

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

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

Nutzung​

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 das Wurzelcontainer ist, das Ihre interne Struktur hält:

BasicComposite.java
public class BasicComposite extends Composite<FlexLayout> {

  public BasicComposite() {
    // Zugriff auf die gebundene Komponente zur Konfiguration
    getBoundComponent()
      .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 ziehen Sie in Betracht, FlexLayout oder Div als Ihre gebundene Komponente zu verwenden.

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 bei der Erstellung und Verwaltung der gebundenen Komponente benötigen, z. B. durch die Verwendung von parametrierten Konstruktoren anstelle des Standard-Konstruktors ohne Argumente. Verwenden Sie dieses Muster, wenn die gebundene Komponente erfordert, dass Komponenten an ihren Konstruktor übergeben werden, anstatt nachträglich 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;
 }
}

Lebenszyklus der Komponente​

webforJ übernimmt automatisch die gesamte Lebenszyklusverwaltung für Composite-Komponenten. 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-Einrichtung und der Ereignisregistrierung.

public class UserDashboard extends Composite<FlexLayout> {
 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 Anforderungen für die Einrichtung oder Bereinigung 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) {
   // Initialisieren Sie Komponenten, die eine DOM-Anhängigkeit erfordern
   refreshInterval = new Interval(5.0, event -> updateData());
   refreshInterval.start();
 }

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

 private void updateData() {
   // Datenaktualisierungslogik
 }
}

Wenn Sie nach dem Anfügen der Komponente an das DOM weitere 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 Todo-App, bei 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 Gruppierung​

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

Code anzeigen