Siirry pääsisältöön

Composite Components

Avaa ChatGPT:ssä
Java API

Composite-komponentti yhdistää olemassa olevia webforJ-komponentteja itseään sisältäviksi, uudelleenkäytettäviksi komponenteiksi, joilla on mukautettu käyttäytyminen. Käytä sitä kääriäksesi sisäisiä webforJ-komponentteja uudelleenkäytettävien liiketoimintalogiikka-yksiköiden muotoon, uudelleenkäyttääksesi komponenttipohjia sovelluksessa ja yhdistääksesi useita komponentteja paljastamatta toteutustietoja.

Composite-komponentilla on vahva yhteys taustalla olevaan sidottuun komponenttiin. Tämä antaa sinulle hallinnan siitä, mitä metodeja ja ominaisuuksia käyttäjät voivat käyttää, toisin kuin perinteisessä periytymisessä, jossa kaikki on paljastettu.

Jos tarvitset integraatiota web-komponentteihin muista lähteistä, käytä erikoistuneita vaihtoehtoja:

Käyttö​

Määritelläksesi Composite-komponentin, laajenna Composite-luokkaa ja määritä, minkä tyyppistä komponenttia se hallitsee. Tästä tulee sidottu komponentti, joka on juurikontti, joka pitää sisällään 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("Lähetä"));
  }
}

getBoundComponent()-metodi tarjoaa pääsyn taustalla olevaan komponenttiin, jolloin voit konfiguroida sen ominaisuuksia, lisätä lapsikomponentteja ja hallita sen käyttäytymistä suoraan.

Sidottu komponentti voi olla mikä tahansa webforJ-komponentti tai HTML-elementtikomponentti. Joustavien asettamisten vuoksi harkitse FlexLayout tai Div käyttämistä sidottuna komponenttina.

Komponentin laajentaminen

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

Ylikirjoita initBoundComponent() silloin, kun tarvitset enemmän joustavuutta sidotun komponentin luomisessa ja hallinnassa, esimerkiksi käyttämällä parametrisoituja konstruktoreita sen sijaan, että käytät oletus ilman argumentteja olevaa konstruktoria. Käytä tätä mallia, kun sidottu komponentti vaatii komponentteja siirrettäväksi sen konstruktorille sen sijaan, että 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("Nimi");
   emailField = new TextField("Sähköposti");
   submitButton = new Button("Lähetä");

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

   return layout;
 }
}

Komponentin elinkaari​

webforJ hallitsee kaikkia Composite-komponenttien elinkaaren hallintatehtäviä automaattisesti. Käyttämällä getBoundComponent()-metodia, useimmat mukautetut käyttäytymiset voidaan käsitellä konstruktorissa, mukaan lukien lapsikomponenttien lisääminen, ominaisuuksien asettaminen, perusasetusten luominen ja tapahtumien rekisterö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() {
   // Hakulogikka tähän
 }
}

Jos sinulla on muita erityisiä asetuksia tai puhdistustarpeita, saatat joutua käyttämään valinnaisia elinkaarikoukkua onDidCreate() ja onDidDestroy():

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

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

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

 private void updateData() {
   // Datan päivittämisen logiikka
 }
}

Jos sinun on suoritettava toimintoja, kun komponentti on liitetty DOM:iin, käytä whenAttached()-metodia:

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

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

Esimerkki Composite-komponentista​

Seuraava esimerkki esittelee Todo-sovelluksen, jossa jokainen kohde on Composite-komponentti, joka koostuu RadioButton -koodista tyyliltään kytkimenä ja Div, jossa on teksti:

Näytä koodi

Esimerkki: Komponenttien ryhmittely​

Joskus saatat haluta käyttää Composite-komponenttia ryhmitelläksesi liittyviä komponentteja yhteen yksikköön, vaikka uudelleenkäytettävyys ei olisi päähuolenaihe:

Näytä koodi