TabbedPane

Avaa ChatGPT:ssä

Varjo dwc-tabbed-pane 23.06

Java API

Useamman sisällön osion voi organisoida yhden TabbedPane alle, missä jokainen osio liittyy klikkattavaan Tab:iin. Vain yksi osio on näkyvissä kerrallaan, ja välilehdet voivat näyttää tekstiä, kuvakkeita tai molempia auttaakseen käyttäjiä navigoimaan niiden välillä.

Käyttöesimerkit

TabbedPane-luokka tarjoaa kehittäjille tehokkaan työkalun useiden välilehtien tai osioiden järjestämiseen ja esittämiseen käyttöliittymässä. Tässä on joitain tyypillisiä skenaarioita, joissa saatat hyödyntää TabbedPane:a sovelluksessasi:

1. Asiakirjan katselu: Asiakirjakatselun toteuttaminen, jossa jokainen välilehti edustaa eri asiakirjaa tai tiedostoa. Käyttäjät voivat helposti siirtyä avoimien asiakirjojen välillä tehokasta moniajokykyä varten.

2. Datan hallinta: Hyödynnä TabbedPane-elementtiä järjestääksesi datan hallintatehtäviä, kuten:

   • Eri datasetit, jotka näytetään sovelluksessa
   • Erilaisia käyttäjäprofiileja voidaan näyttää erillisissä välilehdissä
   • Eri profiilat käyttäjähallintajärjestelmässä

3. Moduulivalinta: TabbedPane voi edustaa eri moduuleja tai osioita. Jokainen välilehti voi kapseloida tietyn moduulin toiminnallisuudet, jolloin käyttäjät voivat keskittyä yhteen sovelluksen osa-alueeseen kerrallaan.

4. Tehtävien hallinta: Tehtävienhallintasovellukset voivat käyttää TabbedPane-elementtiä edustamaan erilaisia projekteja tai tehtäviä. Jokainen välilehti voisi vastata tietyille projektille, jolloin käyttäjät voivat hallita ja seurata tehtäviä erikseen.

5. Sovelluksen navigointi: Sovelluksessa, joka tarvitsee ajaa erilaisia ohjelmia, TabbedPane voisi:

   • Toimia sivupalkkina, joka mahdollistaa eri sovellusten tai ohjelmien käynnistämisen yhdessä sovelluksessa, kuten mitä esitetään AppLayout mallissa
   • Luoda yläpalkin, joka voi palvella samankaltaista tarkoitusta tai edustaa ali-sovelluksia jo valitussa sovelluksessa.

Välilehdet

Välilehdet ovat käyttöliittymäelementtejä, jotka voidaan lisätä välilehtipaneeleihin erilaisten sisältönäyttöjen järjestämiseksi ja vaihtamiseksi.

important

Välilehtiä ei ole tarkoitettu käytettäväksi itsenäisinä komponentteina. Niitä tulee käyttää yhdessä välilehtipaneelien kanssa. Tämä luokka ei ole Component eikä sitä tule käyttää sellaisena.

Ominaisuudet

Välilehdet koostuvat seuraavista ominaisuuksista, joita käytetään niiden lisäämiseen TabbedPane-elementtiin. Näillä ominaisuuksilla on hakijat ja asettajat, jotka helpottavat mukauttamista TabbedPane-elementissä.

1. Avain(Object): Edustaa välilehden ainutlaatuista tunnistetta.

2. Teksti(String): Teksti, joka näkyy välilehden otsikkona TabbedPane-elementissä. Tätä kutsutaan myös nimellä otsikko getTitle() ja setTitle(String title) menetelmien kautta.

3. Työkaluvihje(String): Työkaluvihjeteksti, joka liittyy välilehteen ja näkyy, kun kursori liikkuu välilehden päälle.

4. Otetaan käyttöön(boolean): Edustaa, onko välilehti tällä hetkellä käytössä vai ei. Voidaan muuttaa setEnabled(boolean enabled) menetelmällä.

5. Suljettava(boolean): Edustaa, voiko välilehden sulkea. Voidaan muuttaa setCloseable(boolean enabled) menetelmällä. Tämä lisää sulkupainikkeen välilehteen, jota käyttäjä voi klikata, ja laukaisee poistotapahtuman. TabbedPane-komponentti määrää, kuinka poistaminen käsitellään.

6. Slot(Component): Slotit tarjoavat joustavia vaihtoehtoja Tab:in kyvykkyyden parantamiseksi. Voit lisätä kuvakkeita, etikettejä, lataussiruja, tyhjennys/nollausmahdollisuuksia, avatar/profiilikuvaa ja muita hyödyllisiä komponentteja sisäkkäin Tab:issa käyttäjien tarkoitetun merkityksen selvittämiseksi. Voit lisätä komponentin prefix-paikkaan Tab:in rakentamisen yhteydessä. Vaihtoehtoisesti voit käyttää setPrefixComponent() ja setSuffixComponent() menetelmiä lisätäksesi erilaisia komponentteja ennen ja jälkeen näkyvän vaihtoehdon Tab:issa.

   TabbedPane pane = new TabbedPane();
   pane.addTab(new Tab("Documents", TablerIcon.create("files")));

Tab manipulointi

Eri menetelmiä on olemassa, jotta kehittäjät voivat lisätä, lisätä, poistaa ja manipuloida eri ominaisuuksia Tab-elementeistä TabbedPane-elementissä.

Tab:n lisääminen

addTab() ja add() menetelmät ovat olemassa eri ylikuormitettuna kapasiteettina antaakseen kehittäjille joustavuutta lisätä uusia välilehtiä TabbedPane:en. Välilehden lisääminen sijoittaa sen aiemmin olemassa olevien välilehtien jälkeen.

1. addTab(String text) - Lisää Tab:in TabbedPane:en määritellyllä String:lla, joka on puolestaan välilehden teksti.
2. addTab(Tab tab) - Lisää annettu Tab parametrina TabbedPane:en.
3. addTab(String text, Component component) - Lisää Tab:in, jossa annettu String on välilehden teksti, ja annettu Component näytetään TabbedPane-elementin sisällössä.
4. addTab(Tab tab, Component component) - Lisää annettu Tab, ja esittää annetun Component-elementin TabbedPane-elementin sisällössä.
5. add(Component... component) - Lisää yksi tai useampi Component-instanssi TabbedPane:en, luoden erillisen Tab:in jokaiselle, ja tekstin asettaminen Component-nimen mukaan.

tiedot

add(Component... component) määrittää siirretyn Component-nimen kutsumalla component.getName() siirretylle argumentille.

Tab:in lisääminen tiettyyn kohtaan

Välilehden lisäämisen lisäksi olemassa olevien välilehtien päähän on myös mahdollista luoda uusi tiettyyn kohtaan. Tätä varten on saatavilla useita ylikuormitettuja versioita insertTab()-menetelmälle.

1. insertTab(int index, String text) - Lisää Tab:in TabbedPane:en annetussa indeksissä määritellyllä String:lla.
2. insertTab(int index, Tab tab) - Lisää annettu Tab parametrina TabbedPane:en määritellyssä indeksissä.
3. insertTab(int index, String text, Component component) - Lisää Tab:in, jossa annettu String on välilehden teksti, ja annettu Component näytetään TabbedPane-elementin sisällössä.
4. insertTab(int index, Tab tab, Component component) - Lisää annettu Tab ja esittää annetun Component-elementin TabbedPane-elementin sisällössä.

Tab:in poistaminen

Poistaaksesi yhden Tab:in TabbedPane:sta, käytä jotakin seuraavista menetelmistä:

1. removeTab(Tab tab) - Poistaa Tab:in TabbedPane:sta välilehti-instanin välityksellä.
2. removeTab(int index) - Poistaa Tab:in TabbedPane:sta määrittelemällä poistettavan välilehden indeksin.

Yksittäisen Tab:in poistamiseksi edellä mainittujen kahden menetelmän lisäksi käytä removeAllTabs()-menetelmää tyhjentääksesi TabbedPane:n kaikista välilehdistä.

tiedot

remove() ja removeAll() menetelmät eivät poista välilehtiä komponentin sisällä.

Tab/Component-yhdistämisen hallinta

Muuta näytettävä Component tietylle Tab:ille kutsumalla setComponentFor()-menetelmää ja antaen joko Tab-instanssin tai kyseisen Tabin indeksin TabbedPane:ssa.

tiedot

Jos tätä menetelmää käytetään Tab:illa, joka on jo yhdistetty Component:iin, aiemmin yhdistetty Component tuhotaan.

Asetus ja asettelu

TabbedPane-luokalla on kaksi osaa: Tab, joka näytetään määritellyssä sijainnissa, ja näytettävä komponentti. Tämä voi olla yksi komponentti tai Composite komponentti, joka mahdollistaa monimutkaisempien komponenttien näyttämisen välilehden sisältöosiossa.

Pyyhkäisy

TabbedPane tukee navigointia eri välilehtien välillä pyyhkäisemällä. Tämä on ihanteellinen mobiilisovelluksessa, mutta se voidaan myös konfiguroida sisäänrakennetun menetelmän kautta tukemaan hiiren pyyhkäisyä. Sekä pyyhkäisy että hiiren pyyhkäisy ovat poissa käytöstä oletuksena, mutta ne voidaan aktivoida setSwipable(boolean) ja setSwipableWithMouse(boolean) menetelmillä, vastaavasti.

Välilehtien sijoittelu

Tabs-elementit TabbedPane:ssa voidaan sijoittaa eri sijainteihin komponentin sisällä sovelluskehittäjän mieltymyksen mukaan. Tarjotut vaihtoehdot asetetaan annetun enum-arvon avulla, joka sisältää arvot TOP, BOTTOM, LEFT, RIGHT tai HIDDEN. Oletusasetuksena on TOP.

Näytä koodi

TabbedPanePlacementView.java

Kohdistus

Väliavien muuttamisen lisäksi on myös mahdollista konfiguroida se, kuinka välilehdet kohdistuvat komponentin sisällä TabbedPane:ssa. Oletuksena AUTO-asetus on käytössä, mikä antaa välilehtien sijoituksen määrätä niiden kohdistuksen.

Muut vaihtoehdot ovat START, END, CENTER ja STRETCH. Ensimmäiset kolme kuvaavat sijaintia suhteessa komponenttiin, kun taas STRETCH saa välilehdet täyttämään käytettävissä olevan tilan.

Näytä koodi

TabbedPaneAlignmentView.java

Raja ja aktiviteetti-indikaattori

TabbedPane:lla on oletuksena rajaus, joka näytetään sen sisällä oleville välilehdille, sijoitettuna sen mukaan, mikä Placement on asetettu. Tämä raja auttaa visualisoimaan tilan, jonka eri välilehdet paneelissa vievät.

Kun Tab:ia klikataan, oletuksena aktiviteetti-indikaattori näkyy kyseisen Tab:in lähellä, mikä auttaa korostamaan, mikä on tällä hetkellä käytetty Tab.

Molempia näitä vaihtoehtoja voidaan muokata kehittäjän toimesta muuttamalla totuusarvoja käyttäen asianmukaisia asettamismenetelmiä. Jos haluat muuttaa, näytetäänkö raja vai ei, voit käyttää setBorderless(boolean) -menetelmää, jolloin true piilottaa rajan ja false, oletusasetuksena, näyttää rajauksen.

tiedot

Tämä raja ei vaikuta koko TabbedPane-komponenttiin, vaan toimii vain erottimena välilehden ja komponentin sisällön välillä.

Aktiviteetti-indikaattorin näkyvyyden asettamiseksi voit käyttää setHideActiveIndicator(boolean) -menetelmää. Täsmällisesti, jos kutsut true tätä menetelmää, se piilottaa aktiivisen indikaattorin aktiivisen Tab:in alla, kun taas false, oletusasetuksena, pitää indikaattorin näkyvissä.

Näytä koodi

TabbedPaneBorderView.java

Aktivointitilat

Kehittäjät voivat saada enemmän tarkkuutta siihen, kuinka TabbedPane käyttäytyy, kun sitä navigoidaan näppäimistöllä, aktivointitila voidaan asettaa määrittämään, kuinka komponentin pitäisi käyttäytyä.

• Auto: Kun asetetaan automaattiseksi, välilehteä navigoitaessa nuoli-näppäimillä vastaava välilehti komponentti näkyy heti.

• Manual: Kun asetetaan manuaaliseksi, välilehti saa fokuksen, mutta ei näy ennen kuin käyttäjä painaa välilyöntiä tai enteriä.

Näytä koodi

TabbedPaneActivationView.java

Poisto-ominaisuudet

Yksittäiset Tab elementit voidaan asettaa suljettaviksi. Suljettavat välilehdet saavat sulkupainikkeen lisättäväksi välilehdelle, joka laukaisee sulkeutumis tapahtuman, kun sitä klikataan. TabbedPane määrää, kuinka tämä toiminta käsitellään.

• Manual: Oletuksena poisto on asetettu MANUAL-tilaan, mikä tarkoittaa, että tapahtuma laukaistaan, mutta kehittäjän on käsiteltävä tämä tapahtuma haluamallaan tavalla.

• Auto: Vaihtoehtoisesti AUTO voidaan käyttää, mikä laukaisee tapahtuman ja poistaa Tab:in komponentista kehittäjälle, poistaen tarpeen kehittäjän itse toteuttaa tätä toimintoa.

Segmenttivalinta 26.00

TabbedPane voidaan renderoida segmenttivalinnaksi aktivoimalla segment-ominaisuus setSegment(true). Tässä tilassa välilehdet näytetään liukuvalla pillindikaattorilla, joka korostaa aktiivista valintaa, tarjoten kompaktin vaihtoehdon tavanomaiselle välilehti käyttöliittymälle.

Näytä koodi

TabbedPaneSegmentView.java

Tyylit

Laajuus ja teema

TabbedPane sisältää sisäänrakennetut Expanse ja Theme vaihtoehdot, jotka ovat samanlaisia kuin muut webforJ komponentit. Näitä voidaan käyttää nopeasti tyylittämään, joka välittää eri merkityksiä loppukäyttäjälle ilman tarvetta tyylittää komponenttia CSS:llä.

Näytä koodi

TabbedPaneExpanseThemeView.java

Loading...

Parhaat käytännöt

Seuraavia käytäntöjä suositellaan käytettäväksi TabbedPane -elementissä sovelluksissa:

• Looginen ryhmittely: Käytä välilehtiä loogisesti ryhmittämään liittyvää sisältöä

  • Jokaisen välilehden tulisi edustaa erillistä kategoriaa tai toiminnallisuutta sovelluksessasi
  • Ryhmittele samankaltaisia tai loogisia välilehtiä lähelle toisiaan

• Rajoitettu määrä välilehtiä: Vältä käyttäjien ylivoimaamista liian monilla välilehdillä. Ota huomioon hierarkkinen rakenne tai muut navigointimallit, joissa soveltuu siisti käyttöliittymä

• Selkeät etiketit: Merkitse välilehdet selkeästi intuitiivista käyttöä varten

  • Tarjoa selkeät ja tiiviit etiketit jokaiselle välilehdelle
  • Etiketit tulisi kuvastaa sisältöä tai tarkoitusta, jotta käyttäjien on helppo ymmärtää
  • Hyödynnä kuvakkeita ja erottuvia värejä, kun soveltuu

• Näppäimistön navigointi: Hyödynnä webforJ:n TabbedPane näppäimistön navigointitukea varmistaaksesi, että vuorovaikutus TabbedPane:n kanssa on sujuvampaa ja intuitiivisempaa loppukäyttäjälle

• Oletusvälilehti: Jos oletusvälilehti ei ole asetettu TabbedPane:n alkuun, harkitse tämän välilehden asettamista oletukseksi välttämättömän tai usein käytetyn tiedon esittämiseksi.