Siirry pääsisältöön

Element Composite

Avaa ChatGPT:ssä
23.06
Java API

ElementComposite-luokka toimii monipuolisena perustana yhdistettyjen elementtien hallinnassa webforJ-sovelluksissa. Sen ensisijainen tarkoitus on helpottaa HTML-elementtien, joita edustaa Element-luokka, vuorovaikutusta tarjoamalla rakenteellisen tavan käsitellä ominaisuuksia, attribuutteja ja tapahtumakuuntelijoita. Se mahdollistaa elementtien toteuttamisen ja uudelleenkäytön sovelluksessa. Käytä ElementComposite-luokkaa toteuttaessasi Web-komponentteja webforJ-sovelluksissa.

Kun käytät ElementComposite-luokkaa, getElement()-menetelmä antaa sinulle pääsyn taustalla olevaan Element-komponenttiin. Samoin getNodeName()-menetelmä antaa sinulle sen solmun nimen DOM:ssa.

vihje

On mahdollista tehdä kaikki pelkästään Element-luokan avulla ilman ElementComposite-luokkaa. Kuitenkin ElementComposite:ssa tarjotut menetelmät antavat käyttäjille tavan uudelleenkäyttää tehtyä työtä.

Käymme tässä oppaassa läpi Shoelace QR-koodin web-komponentin toteuttamista ElementComposite-luokkaa käyttäen.

Näytä Koodi

Ominaisuus- ja attribuutitiedot

Ominaisuudet ja attribuutit web-komponenteissa kuvaavat komponentin tilaa. Niitä käytetään usein datan tai konfiguraation hallintaan. ElementComposite-luokka tarjoaa kätevän tavan työskennellä ominaisuuksien ja attribuuttien kanssa.

Ominaisuudet ja attribuutit voidaan määrätä ja alustaa PropertyDescriptor-jäseninä kirjoitettavassa ElementComposite-luokassa, ja niitä voidaan sitten käyttää koodissa. Määrittääksesi ominaisuuksia ja attribuutteja, käytä set()-menetelmää asettaaksesi ominaisuuden arvo. Esimerkiksi set(PropertyDescriptor<V> property, V value) asettaa ominaisuuden määritettyyn arvoon.

tiedot

Ominaisuuksia päästään käsittelemään ja muokkaamaan sisäisesti komponentin koodissa, eikä niillä ole vaikutusta DOM:ssa. Toisaalta attribuutit ovat osa komponentin ulkoista rajapintaa ja niitä voidaan käyttää tietojen siirtämiseen komponenttiin ulkopuolelta, jolloin ulkoisilla elementeillä tai skripteillä on mahdollisuus konfiguroida komponenttia.

// Esimerkki ominaisuudesta nimeltä TITLE ElementComposite-luokassa
private final PropertyDescriptor<String> TITLE = PropertyDescriptor.property("title", "");
// Esimerkki attribuutista nimeltä VALUE ElementComposite-luokassa
private final PropertyDescriptor<String> VALUE = PropertyDescriptor.attribute("value", "");
//...
set(TITLE, "Otsikkoni");
set(VALUE, "Arvoni");

Ominaisuuden asettamisen ohella voit hyödyntää get()-menetelmää ElementComposite-luokassa pääset ja luet ominaisuuksia. get()-menetelmä voidaan syöttää vaihtoehtoinen boolean-arvo, joka on oletusarvoisesti epätosi, määrittämään, tulisiko menetelmän tehdä pyyntö asiakkaalle arvon hakemiseksi. Tämä vaikuttaa suorituskykyyn, mutta voi olla tarpeellista, jos ominaisuus voidaan muuttaa pelkästään asiakkaalla.

Menetelmälle voidaan myös syöttää Type, joka määrittelee, mihin tuloksia muotoillaan.

vihje

Tämä Type ei ole välttämätön, ja se lisää ylimääräisen tason tarkennusta, kun dataa noudetaan.

// Esimerkki ominaisuudesta nimeltä TITLE ElementComposite-luokassa
private final PropertyDescriptor<String> TITLE = PropertyDescriptor.property("title", "");
//...
String title = get(TITLE, false, String);

Alla olevassa demossa ominaisuuksia on lisätty QR-koodille web-komponentin dokumentaation perusteella. Menetelmät on sitten toteutettu, jolloin käyttäjät voivat saada ja asettaa erilaisia toteutettuja ominaisuuksia.

Näytä Koodi

Tapahtumien rekisteröinti

Tapahtumat ovat olennainen osa web-komponentteja, jotka mahdollistavat viestinnän sovelluksen eri osien välillä. ElementComposite-luokka helpottaa tapahtumien rekisteröintiä ja käsittelyä. Rekisteröidäksesi tapahtumakuuntelijan, käytä addEventListener()-menetelmää rekisteröidäksesi tapahtumakuuntelijoita tietyille tapahtumatyypeille. Määritä tapahtumaluokka, kuuntelija ja valinnaiset tapahtumavalinnat.

// Esimerkki: Klikkaa tapahtumakuuntelijan lisääminen
addEventListener(ClickEvent.class, event -> {
// Käsittele klikkaustapahtuma
});
tiedot

ElementComposite-tapahtumat eroavat Element-tapahtumista siinä, että tämä ei salli mitä tahansa luokkaa, vaan vain määritettyjä Event-luokkia.

Alla olevassa esityksessä on luotu klikkaustapahtuma, joka on sitten lisätty QR-koodikomponenttiin. Tämä tapahtuma, kun se laukaistaan, näyttää komponenttia napsautettaessa hiiren "X"-koordinaatin, joka annetaan Java-tapahtumalle datana. Metodi on sitten toteutettu, jotta käyttäjä voi päästä käsiksi tähän dataan, joka on tapa, jolla se esitetään sovelluksessa.

Näytä Koodi

Vuorovaikutus slotien kanssa

Web-komponentit käyttävät usein slotteja, jotka mahdollistavat kehittäjien määrittää komponentin rakenteen ulkopuolelta. Slot on paikalla oleva tila web-komponentissa, joka voidaan täyttää sisällöllä komponentin käytön yhteydessä. ElementComposite-luokan kontekstissa slotit tarjoavat tavan mukauttaa sisältöä komponentissa. Seuraavat menetelmät on tarjottu kehittäjien vuorovaikutukseen ja slotien manipulointiin:

  1. findComponentSlot(): Tätä menetelmää käytetään etsimään tiettyä komponenttia kaikkien slotien joukosta komponenttijärjestelmässä. Se palauttaa slotin nimen, jossa komponentti sijaitsee. Jos komponenttia ei löydy mistään slotista, palautuu tyhjää merkkijonoa.

  2. getComponentsInSlot(): Tämä menetelmä noutaa luettelon komponentteista, jotka on määritetty tiettyyn slottiin komponenttijärjestelmässä. Valinnaisesti voit syöttää tietyn luokkatyypin suodattaaksesi menetelmän tuloksia.

  3. getFirstComponentInSlot(): Tätä menetelmää käytetään ensimmäisen komponentin noutamiseen, joka on määritetty slottiin. Valinnaisesti voit syöttää tietyn luokkatyypin suodattaaksesi tämän menetelmän tuloksia.

On myös mahdollista käyttää add()-menetelmää, jossa on String-parametri määrittääksesi halutun slotin, johon lisätään siirretty komponentti.

Nämä vuorovaikutukset mahdollistavat kehittäjille web-komponenttien voiman hyödyntämisen tarjoamalla selkeän ja suoraviivaisen API:n slotten, ominaisuuksien manipulointiin ja tapahtumien käsittelyyn ElementComposite-luokassa.