Komponenttien Koostaminen

Avaa ChatGPT:ssä

Java API

Composite-komponentti yhdistää olemassa olevat webforJ-komponentit itsenäisiksi, uudelleenkäytettäviksi komponenteiksi, joilla on mukautettua käyttäytymistä. Käytä sitä sisäisten webforJ-komponenttien kääreenä uudelleenkäytettävien liiketoimintalogiikkayksiköiden luomiseksi, komponenttimallien uudelleenkäytöksi sovelluksessasi ja useiden komponenttien yhdistämiseksi ilman toteutustietojen paljastamista.

Composite-komponentilla on vahva yhteys taustalla olevaan sidottuun komponenttiin. Tämä antaa sinulle hallinnan siitä, mitkä menetelmät ja ominaisuudet käyttäjät voivat käyttää, toisin kuin perinteisessä perinnössä, jossa kaikki on paljastettu.

Jos sinun tarvitsee integroida web-komponentteja toisesta lähteestä, käytä erikoistuneita vaihtoehtoja:

• ElementComposite: Web-komponentteihin, joissa on tyyppiturvallinen ominaisuusjohtaminen
• ElementCompositeContainer: Web-komponentteihin, jotka hyväksyvät slottit sisältöä

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ääritelläksesi Composite-komponentin, laajenna Composite-luokkaa ja määritä sen hallitseman komponentin tyyppi. Tämä tulee olemaan sidottu komponenttisi, joka on juuripurkkisi, 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("Lähetä"));
  }
}

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

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

Komponentin laajentaminen

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

Ylikirjoita initBoundComponent(), kun tarvitset enemmän joustavuutta sidotun komponentin luomisessa ja hallinnassa, esimerkiksi kun käytät parametrisoituja konstruktoreita oletus ilman argumentteja konstruktorin sijaan. Käytä tätä mallia, kun sidottu komponentti vaatii komponentteja annettavaksi sen konstruktorille sen jälkeen, kun ne on lisätty.

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 hoitaa kaikkien Composite-komponenttien elinkaarihallinnan automaattisesti. Käyttämällä getBoundComponent()-metodia, suurin osa erityisestä käyttäytymisestä voidaan käsitellä konstruktorissa, mukaan lukien lapsikomponenttien lisääminen, ominaisuuksien asettaminen, perusasetelun 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() {
   // Hakulogiikka tähän
 }
}

Jos sinulla on erityisiä asetus- tai puhdistusvaatimuksia, saatat joutua käyttämään valinnaisia elinkaarihakuja 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() {
   // Siivoa resurssit
   if (refreshInterval != null) {
     refreshInterval.stop();
   }
 }

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

Jos sinun on suoritettava toimenpiteitä komponentin liittämisen jälkeen DOMiin, 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 havainnollistaa tehtävälistaa, jossa jokainen kohde on Composite-komponentti, joka sisältää RadioButton, Div:n tekstillä ja Button.

Näytä koodi

CompositeView.java

composite.css

Esimerkki: Komponenttien ryhmittely

Joskus saatat haluta käyttää Composite-komponenttia ryhmittämään liittyviä komponentteja yhteen yksikköön, vaikka uudelleenkäytettävyys ei olisikaan pääasia:

Näytä koodi

AnalyticsCardCompositeView.java

analyticscomposite.css

Keep learning

Video · 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