Composer des Composants

Ouvrir dans ChatGPT

Java API

Le composant Composite combine des composants webforJ existants en composants auto-contenus et réutilisables avec un comportement personnalisé. Utilisez-le pour envelopper des composants internes webforJ en unités logiques réutilisables, réutilisez des modèles de composants dans votre application et combinez 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 à l'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 :

• ElementComposite : Pour les composants web avec gestion de propriété typée
• ElementCompositeContainer : Pour les composants web qui acceptent le contenu en slot

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'elle gère. Cela devient votre composant lié, qui est le conteneur racine qui contient 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() permet d'accéder à 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

Ne jamais étendre 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é dans la création et la gestion du composant lié, comme l'utilisation de 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 des 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 de 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 de configuration ou de nettoyage supplémentaires, vous devrez peut-être utiliser les crochets de cycle de vie optionnels onDidCreate() et onDidDestroy() :

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

 @Override
 protected void onDidCreate(Div container) {
   // Initialiser les composants qui nécessitent une attache au 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 ait été 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 liste de tâches où chaque élément est un composant Composite contenant un RadioButton, un Div avec du texte, et un Button.

Afficher le code

CompositeView.java

composite.css

Exemple : Regroupement de composants

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

Afficher le code

AnalyticsCardCompositeView.java

analyticscomposite.css

Keep learning

Vidéo · 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