Siirry pääsisältöön

Composite Components

Avaa ChatGPT:ssä
Java API

Composite-komponentti yhdistää olemassa olevia webforJ-komponentteja itseään sisältäviin, uudelleenkäytettäviin komponentteihin, joilla on mukautettua käyttäytymistä. Käytä sitä kääriäksesi sisäisiä webforJ-komponentteja uudelleenkäytettäviin liiketoimintalogikan yksiköihin, uudelleenkäyttääksesi komponenttimalleja sovelluksessasi ja yhdistääksesi useita komponentteja paljastamatta toteutustietoja.

Composite-komponentilla on vahva yhteys taustalla olevaan sidottuun komponenttiin. Tämä antaa sinulle hallinnan siitä, mihin menetelmiin ja ominaisuuksiin käyttäjät voivat päästä käsiksi, toisin kuin perinteisessä perinnössä, jossa kaikki on paljastettu.

Jos sinun täytyy integroida web-komponentteja muista lähteistä, käytä erikoistuneita vaihtoehtoja:

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

Käyttö​

Määrittääksesi Composite-komponentin, laajenna Composite-luokkaa ja määritä, minkä tyyppistä komponenttia se hallitsee. Tämä tulee olemaan sidottu komponenttisi, joka on juurikontti, joka pitää sisäisen rakenteesi:

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

  public BasicComposite() {
    // Pääsy sidottuun komponenttiin sen konfiguroimiseksi
    self.setDirection(FlexDirection.COLUMN)
      .setSpacing("3px")
      .add(new TextField(), new Button("Submit"));
  }
}

getBoundComponent()-menetelmä tarjoaa pääsyn taustalla olevaan komponenttiin, mikä mahdollistaa sen ominaisuuksien määrittämisen, lapsikomponenttien lisäämisen ja käytöksen hallinnan suoraan.

Sidottu komponentti voi olla mikä tahansa webforJ-komponentti tai HTML-elementtikomponentti. Joustavia asetteluja varten harkitse FlexLayout tai Div käyttämistä sidottuna komponenttinasi.

Komponentin laajentaminen

Älä koskaan laajenna Component tai DwcComponent suoraan. Käytä aina koostumuspatterneja Composite-komponenttien rakentamiseen.

Ylikirjoita initBoundComponent() kun tarvitset enemmän joustavuutta sidotun komponentin luomisessa ja hallinnassa, kuten käyttämällä parametrisoituja konstruktoreita oletusarvoisen ilman argumentteja rakennetta. Käytä tätä mallia, kun sidottu komponentti vaatii komponenttien siirtämistä sen konstruktorille sen sijaan, että ne lisätään jälkikäteen.

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("Email");
   submitButton = new Button("Submit");

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

   return layout;
 }
}

Komponentin elinkaari​

webforJ hallitsee kaikki Composite-komponenttien elinkaaren hallinnan automaattisesti. Käyttämällä getBoundComponent()-menetelmää suurin osa mukautetusta käytöksestä voidaan käsitellä konstruktiossa, mukaan lukien lapsikomponenttien lisääminen, ominaisuuksien asettaminen, perustason layoutin asettaminen ja tapahtumarekisteröinti.

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("Etsi käyttäjiä...");
   searchButton = new Button("Etsi");
   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() {
   // Haku logiikka täällä
 }
}

Jos sinulla on lisäisiä erityisiä asetuksia tai puhdistustarpeita, saatat tarvita valinnaisia elinkaaren kytkimiä onDidCreate() ja onDidDestroy():

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

 @Override
 protected void onDidCreate(Div container) {
   // Alusta komponentit, jotka vaativat DOM-liittämistä
   refreshInterval = new Interval(5.0, event -> updateData());
   refreshInterval.start();
 }

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

 private void updateData() {
   // Datan päivityslogiikka
 }
}

Jos sinun tarvitsee suorittaa toimintoja komponentin liittämisen jälkeen DOM:iin, käytä whenAttached()-menetelmää:

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

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

Esimerkki Composite-komponentista​

Seuraava esimerkki havainnollistaa Todo-sovellusta, jossa jokainen kohde on Composite-komponentti, joka koostuu RadioButton -painikkeesta, joka on tyylitelty kytkimeksi, ja Div:stä, jossa on teksti:

Näytä koodi

Esimerkki: Komponenttien ryhmittely​

Joskus saatat haluta käyttää Composite-komponenttia ryhmittämään liittyviä komponentteja yhdeksi yksiköksi, vaikka uudelleenkäytettävyys ei olisi päähuolenaihe:

Näytä koodi