Composite Components
Le composant Composite
combine les composants webforJ existants en composants autonomes et réutilisables avec un comportement personnalisé. Utilisez-le pour encapsuler des composants webforJ internes dans des unités de logique métier réutilisables, réutiliser des modèles de composants dans toute votre application et combiner plusieurs composants sans exposer les détails d'implémentation.
Un composant Composite
a une forte association avec un composant sous-jacent lié. Cela vous donne le 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 provenant d'une autre source, utilisez des alternatives spécialisées :
- ElementComposite : Pour les composants web avec une gestion des propriétés de type sécurisé
- ElementCompositeContainer : Pour les composants web qui acceptent du contenu à emplacements
Utilisation
Pour définir un composant Composite
, prolongez 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 :
public class BasicComposite extends Composite<FlexLayout> {
public BasicComposite() {
// Accédez au composant lié pour le configurer
getBoundComponent()
.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 élément HTML. Pour des mises en page flexibles, envisagez d'utiliser FlexLayout
ou Div
comme votre composant lié.
N'étendez jamais directement Component
ou DwcComponent
. Utilisez toujours des modèles de composition avec Composite
pour créer 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.
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 des composants
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 des événements.
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("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 de configuration ou de nettoyage supplémentaires, 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 les composants nécessitant 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 l'attachement du composant au DOM, utilisez la méthode whenAttached()
:
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
composé d'un RadioButton
stylé comme un interrupteur et d'un Div avec du texte :
Afficher le code
- Java
- CSS
Exemple : Groupement de composants
Parfois, vous souhaiterez peut-être 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
- Java
- CSS