ComboBox

Avaa ChatGPT:ssä

Varjo dwc-combobox 23.05

Java API

ComboBox -komponentti yhdistää pudotuslistan ja tekstikentän, joten käyttäjät voivat valita joko valmiista vaihtoehdoista tai kirjoittaa mukautetun arvon. Kun mukautetut merkinnät on sallittava yhdessä ehdotettujen vaihtoehtojen kanssa, se täyttää aukon, jota ChoiceBox ei kata.

Käyttötapaukset

Inheritance

This class is a List component, and inherits its features and behaviors. For an overview of List properties, events, and other important information, please refer to the List documentation.

ComboBox-komponentti on monipuolinen syötteenväline, joka yhdistää pudotuslistan ja tekstikentän ominaisuudet. Se mahdollistaa käyttäjien valita kohteita valmiista luettelosta tai syöttää mukautettuja arvoja tarpeen mukaan. Tässä osiossa tarkastellaan ComboBox-komponentin yleisiä käyttötapoja eri skenaarioissa:

1. Tuotteen haku ja syöttö: Käytä ComboBoxia toteuttaaksesi tuotteen hakemisen ja syöttämisen ominaisuuden. Käyttäjät voivat joko valita tuotteen valmiista luettelosta tai kirjoittaa mukautetun tuotteen nimen. Tämä on hyödyllistä sovelluksissa, kuten verkkokaupoissa, joissa tuotteet ovat laajoja ja monipuolisia.

2. Tägien valinta ja syöttö: Sisältöjen taggaamiseen liittyvissä sovelluksissa ComboBox voi olla erinomainen valinta. Käyttäjät voivat valita olemassa olevista tageista tai lisätä mukautettuja tageja kirjoittamalla ne. Tämä on hyödyllistä sisällön järjestämisessä ja luokittelussa. Esimerkkejä tällaisista tageista ovat:

   • Projektitunnisteet: Projektinhallintatyökalussa käyttäjät voivat valita tunnisteita tai tageja (esim. "Kiireellinen," "Käynnissä," "Valmis") luokitellakseen tehtäviä tai projekteja, ja he voivat luoda mukautettuja tunnisteita tarpeen mukaan.
   • Reseptiaineet: Ruokaa tai reseptejä käsittelevässä sovelluksessa käyttäjät voivat valita aineksia luettelosta (esim. "Tomaatit," "Sipulit," "Kana") tai lisätä omia aineksiaan mukautettuihin resepteihin.
   • Sijaintitagit: Kartta- tai geotaggingsovelluksessa käyttäjät voivat valita ennalta määritettyjä sijaintitagsia (esim. "Ranta," "Kaupunki," "Puisto") tai luoda mukautettuja tageja merkitäkseen erityisiä paikkoja kartalle.

3. Tietojen syöttö ehdotetuilla arvoilla: Tietojen syöttömuodoissa ComboBoxia voidaan käyttää syötteiden nopeuttamiseksi tarjoamalla luettelo ehdotetuista arvoista käyttäjän syötteen perusteella. Tämä auttaa käyttäjiä syöttämään tietoja tarkasti ja tehokkaasti.

   vinkki

   ComboBox-komponenttia tulisi käyttää, kun käyttäjille sallitaan mukautettujen arvojen syöttäminen. Jos ainoastaan esiasetettuja arvoja halutaan, käytä ChoiceBox -komponenttia sen sijaan.

Mukautettu arvo

Mukautetun arvon ominaisuuden muuttaminen mahdollistaa hallinnan siitä, voiko käyttäjä muuttaa arvoa ComboBox-komponentin syöttökentässä. Jos true, joka on oletusarvo, käyttäjä voi muuttaa arvoa. Jos se asetetaan false:ksi, käyttäjä ei voi muuttaa arvoa. Tämä voidaan asettaa käyttämällä setAllowCustomValue() -menetelmää.

Näytä koodi

ComboBoxCustomValueView.java

Paikkamerkki

ComboBox-komponentille voidaan asettaa paikkamerkki, joka näkyy komponentin tekstikentässä, kun se on tyhjillään, jotta käyttäjät saavat kehotteen toivottuun syötteeseen kentässä. Tämä voidaan tehdä käyttämällä setPlaceholder() -menetelmää.

Näytä koodi

ComboBoxPlaceholderView.java

Pudotuslistan tyyppi

Käyttämällä setDropdownType() -menetelmää määritetään arvo type-attribuutille ComboBox-komponentissa ja vastaava arvo data-dropdown-for -attribuutille ComboBox-komponentin pudotuslistassa. Tämä on hyödyllistä tyylittelyn kannalta, sillä pudotuslista poistetaan nykyisestä sijainnistaan DOM:ista ja siirretään sivun ruumiin loppuun, kun se avataan.

Tämä irrottaminen luo tilanteen, jossa suoran CSS- tai shadow part -valitsimien käyttäminen pudotuslistan kohdistamiseen emokomponentista tulee haastavaksi, ellei käytännössä hyödynnetä pudotuslistan tyyppi -attribuuttia.

Alla olevassa demon kohdassa pudotuslistan tyyppi on asetettu ja sitä käytetään CSS-tiedostossa kasvattamaan vaihtoehtoa, kun hiiri on sen päällä.

Näytä koodi

ComboBoxDropdownTypeView.java

comboBoxDropDownType.css

Max rivimäärä

Oletusarvoisesti pudotuslistassa näkyvien rivien määrä ComboBox-komponentissa kasvaa sisällön mukaan. Kuitenkin käyttämällä setMaxRowCount() -menetelmää voidaan hallita, kuinka monta kohdetta näytetään.

varoitus

Jos käytetään numeroa, joka on pienempi tai yhtäsuuri kuin 0, tämän ominaisuuden käyttö poistuu.

Näytä koodi

ComboBoxMaxRowView.java

Avaaminen ja sulkeminen

ComboBox-komponentin vaihtoehtojen näkyvyyttä voidaan hallita ohjelmallisesti open() ja close() -menetelmien avulla. Nämä menetelmät antavat mahdollisuuden näyttää vaihtoehtoluettelo valittavaksi tai piilottaa se tarpeen mukaan, jolloin hallinta ComboBox-komponentin käyttäytymiselle on joustavampaa.

Lisäksi webforJ:llä on tapahtumakuuntelijoita, jotka rekisteröityvät siihen, kun ComboBox suljetaan, ja kun se avataan, mikä antaa lisää hallintamahdollisuuksia erityisten toimintojen käynnistämiseen.

//Keskeytä tai avaa seuraava komponentti lomakkeessa
ComboBox yliopisto = new ComboBox("Yliopisto");
ComboBox pääaine = new ComboBox("Pääaine");
Button lähetä = new Button("Lähetä");

//... Lisää yliopistojen ja pääaineiden luettelot

yliopisto.onClose( e ->{
  pääaine.open();
});

pääaine.onClose( e ->{
  lähetä.focus();
});

Avaamisen mitat

ComboBox-komponentilla on menetelmiä, jotka mahdollistavat pudotuslistan mittojen muokkaamisen. Pudotuslistan maksimikeveys ja minimileveys voidaan asettaa käyttämällä setOpenHeight() ja setOpenWidth() -menetelmiä vastaavasti.

vinkki

Antamalla String-arvon jompaankumpaan näistä menetelmistä sallitaan mikä tahansa voimassa oleva CSS-yksikkö sovellettavaksi, kuten pikselit, näkymämitat tai muut voimassa olevat säännöt. int-arvon antaminen asettaa annettavan arvon pikseleinä.

Korostaminen

Kun työskentelet ComboBox-komponentin kanssa, voit mukauttaa, milloin teksti korostuu riippuen siitä, miten komponentti saa fokus. Tämä ominaisuus voi vähentää syöttövirheitä käyttäjien täyttäessä lomakkeita ja voi parantaa yleistä navigointikokemusta. Muuta korostuskäyttäytymistä käyttämällä setHighlightOnFocus() -menetelmää yhdisytekunnolla HasHighlightOnFocus.Behavior enums:

• ALL Komponentin sisältö korostuu aina automaattisesti, kun komponentti saa fokus.
• FOCUS Komponentin sisältö korostuu automaattisesti, kun komponentti saa fokus ohjelmallisen ohjauksen alaisena.
• FOCUS_OR_KEY Komponentin sisältö korostuu automaattisesti, kun komponentti saa fokus joko ohjelmallisesti tai tabuloimalla siihen.
• FOCUS_OR_MOUSE Komponentin sisältö korostuu automaattisesti, kun komponentti saa fokus joko ohjelmallisesti tai klikkaamalla sitä hiirellä.
• KEY Komponentin sisältö korostuu automaattisesti, kun komponentti saa fokus tabuloimalla siihen.
• KEY_MOUSE Komponentin sisältö korostuu automaattisesti, kun komponentti saa fokus joko tabuloimalla siihen tai klikkaamalla sitä hiirellä.
• MOUSE Komponentin sisältö korostuu automaattisesti, kun komponentti saa fokus klikkaamalla siihen hiirellä.
• NONE Komponentin sisältöä ei koskaan automaattisesti korosteta, kun komponentti saa fokus.

huomio

Jos sisältö oli korostettuna menettäessään fokuksen, se korostuu jälleen, kun se saa fokuksen uudelleen, riippumatta asetetusta käyttäytymisestä.

Etuliite ja jälkiliite

Slots tarjoavat joustavia vaihtoehtoja ComboBoxin kyvykkyyksien parantamiseen. Voit lisätä kuvakkeita, etikettejä, latauspyörityksiä, tyhjennys/nollausominaisuuksia, avatar/profiilikuvia ja muita hyödyllisiä komponentteja ComboBoxiin, jotta käyttäjät ymmärtävät aiotun merkityksen paremmin. ComboBox-komponentilla on kaksi slotia: prefix ja suffix. Käytä setPrefixComponent() ja setSuffixComponent() -menetelmiä lisätäksesi erilaisia komponentteja ennen ja jälkeen vaihtoehtojen ComboBoxissa.

ComboBox comboBox = new ComboBox());
  comboBox.setPrefixComponent(TablerIcon.create("box"));
  comboBox.setSuffixComponent(TablerIcon.create("box"));

Tyylittely

Loading...

Parhaat käytännöt

Varmistaaksesi optimaalisen käyttäjäkokemuksen ComboBox-komponenttia käytettäessä, harkitse seuraavia parhaita käytäntöjä:

1. Yleisimpien arvojen esilataaminen: Jos on yleisiä tai usein käytettyjä kohteita, lataa ne etukäteen ComboBox-listaan. Tämä nopeuttaa valintaa usein valituista kohteista ja kannustaa johdonmukaisuuteen.

2. Käyttäjäystävälliset etiketit: Varmista, että jokaisen vaihtoehdon näytetyt etiketit ovat käyttäjäystävällisiä ja itsestään selviä. Varmista, että käyttäjät voivat helposti ymmärtää jokaisen valinnan tarkoituksen.

3. Validointi: Toteuta syötevalidointi mukautettujen merkintöjen käsittelemiseksi. Tarkista tietojen tarkkuus ja johdonmukaisuus. Saatat haluta ehdottaa korjauksia tai vahvistuksia epäselville merkinnöille.

4. Oletusvalinta: Aseta oletusvalinta, erityisesti jos on yleinen tai suositeltu vaihtoehto. Tämä parantaa käyttäjäkokemusta vähentämällä ylimääräisten napsautusten tarvetta.

5. ComboBox vs. muut luettelokomponentit: ComboBox on paras valinta, kun tarvitset käyttäjältä yksittäisen syötteen ja haluat tarjota heille ennalta määritettyjä vaihtoehtoja sekä mahdollisuuden mukauttaa syötteet. Toinen luettelokomponentti voi olla parempi, jos tarvitset seuraavia toimintoja:

   • Monivalinta ja kaikkien kohteiden näyttäminen kerrallaan: ListBox
   • Mukautetun syötteen estäminen: ChoiceBox