Passer au contenu principal

Composite Components

Ouvrir dans ChatGPT
Java API

Le composant Composite combine des composants existants de webforJ en composants réutilisables et autonomes avec un comportement personnalisé. Utilisez-le pour envelopper des composants internes de webforJ en unités de logique métier réutilisables, réutiliser des modèles de composants dans votre application et combiner plusieurs composants sans exposer les détails d'implémentation.

Un composant Composite a une forte association avec un composant lié sous-jacent. Cela vous donne un contrôle sur les méthodes et propriétés auxquelles les utilisateurs peuvent accéder, contrairement à un héritage traditionnel où tout est exposé.

Si vous devez intégrer des composants web d'une autre source, utilisez des alternatives spécialisées :

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

Utilisation​

Pour définir un composant Composite, étendez la classe Composite et spécifiez le type de composant qu'il gère. Cela devient votre composant lié, qui est le conteneur racine contenant votre structure interne :

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

  public BasicComposite() {
    // Accédez au composant lié pour le configurer
    self.setDirection(FlexDirection.COLUMN)
      .setSpacing("3px")
      .add(new TextField(), new Button("Soumettre"));
  }
}

La méthode getBoundComponent() fournit un accès à votre composant sous-jacent, vous permettant de configurer ses propriétés, d'ajouter des composants enfants et de gérer son comportement directement.

Le composant lié peut être n'importe quel composant webforJ ou composant d'élément HTML. Pour des mises en page flexibles, envisagez d'utiliser FlexLayout ou Div comme votre composant lié.

Extension de composant

N'étendez jamais Component ou DwcComponent directement. Utilisez toujours des modèles de composition avec Composite pour construire des composants personnalisés.

Surchargez initBoundComponent() lorsque vous avez besoin d'une plus grande flexibilité pour créer et gérer le composant lié, par exemple en utilisant des constructeurs paramétrés au lieu du constructeur par défaut sans argument. Utilisez ce modèle lorsque le composant lié nécessite que des composants soient passés à son constructeur plutôt que d'être ajoutés par la suite.

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

 @Override
 protected FlexLayout initBoundComponent() {
   nameField = new TextField("Nom");
   emailField = new TextField("Email");
   submitButton = new Button("Soumettre");

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

   return layout;
 }
}

Cycle de vie du composant​

webforJ gère automatiquement toute la gestion du cycle de vie pour les composants Composite. En utilisant la méthode getBoundComponent(), la plupart des comportements personnalisés peuvent être gérés dans le constructeur, y compris l'ajout de composants enfants, la définition des propriétés, la configuration de la mise en page de base et l'enregistrement d'événements.

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("Rechercher des utilisateurs...");
   searchButton = new Button("Rechercher");
   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() {
   // Logique de recherche ici
 }
}

Si vous avez des exigences spécifiques supplémentaires de configuration ou de nettoyage, vous devrez peut-être utiliser les hooks de cycle de vie optionnels onDidCreate() et onDidDestroy() :

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

 @Override
 protected void onDidCreate(Div container) {
   // Initialiser des composants qui nécessitent une attache DOM
   refreshInterval = new Interval(5.0, event -> updateData());
   refreshInterval.start();
 }

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

 private void updateData() {
   // Logique de mise à jour des données
 }
}

Si vous devez effectuer des actions après que le composant soit attaché au DOM, utilisez la méthode whenAttached() :

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

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

Exemple de composant Composite​

L'exemple suivant démontre une application Todo où chaque élément est un composant Composite consistant en un RadioButton stylisé en tant qu'interrupteur et un Div avec du texte :

Afficher le code

Exemple : Groupement de composants​

Parfois, vous pouvez vouloir utiliser un Composite pour regrouper des composants connexes ensemble en une seule unité, même lorsque la réutilisabilité n'est pas la principale préoccupation :

Afficher le code