Siirry pääsisältöön

Navigator

Avaa ChatGPT:ssa
Shadow dwc-navigator 24.00
Java API

Navigator-komponentti on mukautettava sivutuskomponentti, joka on suunniteltu navigoimaan tietojoukoissa ja tukee useita asetteluja. Voit konfiguroida sen näyttämään erilaisia navigointikontrolleja, kuten ensimmäiset, viimeiset, seuraavat ja edelliset painikkeet, sekä sivunumeroita tai nopeaa hyppyaluetta asetteluasetuksen mukaan.

Se tukee navigointipainikkeiden automaattista poistamista käytöstä nykyisen sivun ja kokonaismäärän mukaan sekä tarjoaa mukauttamisasetuksia tekstille ja työkaluvihjeille eri osille navigaattoria. Lisäksi voit sitoa sen Paginator-instanssiin hallitsemaan datan sivutuslogiikkaa ja heijastamaan muutoksia navigointikontrolleissa.

Sitoen tietovarastoihin​

Usein Navigator-komponentti näyttää tietoa, joka löytyy sidotusta Repository:stä. Tämä sitominen mahdollistaa Navigator:in automaattisen sivutuksen rekisteröidystä datasta ja muiden sidottavien komponenttien, kuten taulukoiden, päivittämisen navigoidun datan perusteella.

Voit tehdä tämän yksinkertaisesti välittämällä halutun Repository-objektin soveltuvan Navigator-objektin konstruktorille:

Näytä Koodi

Tässä esimerkissä luodaan Navigator ja Table samalla Repository-instanssilla. Tämä tarkoittaa, että kun navigoit uudelle sivulle Navigatorilla, Table tunnistaa tämän muutoksen ja renderöi sen uudelleen.

Sivutus​

Navigator-komponentti on tiiviisti sidoksissa Paginator-malliluokkaan, joka laskee sivutuksen metatietoja, kuten sivujen kokonaismäärän, alkupään/loppupään indeksit nykyisellä sivulla ja matriisin sivunumeroista navigointiin.

Vaikka se ei ole välttämätöntä, Paginatorin käyttö mahdollistaa navigoinnin taustalla olevan logiikan. Kun integroituu Paginatorin kanssa, navigaattori reagoi kaikkiin muutoksiin Paginatorissa. Navigator-objekteilla on pääsy sisäänrakennettuun Paginatoriin käyttämällä getPaginator()-menetelmää. Se voi myös hyväksyä Paginator-instanssin setPaginator()-menetelmän kautta tai käyttämällä jotakin soveltuvaa konstruktoria.

Tässä osiossa on käytännön koodinäytteitä havainnollistamaan, kuinka tämä integraatio toimii käytännössä.

Elementit​

Termi "elementit" tarkoittaa yksittäisiä sivutettuja yksiköitä tai tietoehdokkaita. Nämä voivat olla tietueita, merkintöjä tai mitä tahansa erillisiä yksiköitä tietojoukossa. Voit asettaa elementtien kokonaismäärän setTotalItems()-menetelmällä.

navigator.getPaginator().setTotalItems(totalItems);
tiedot

Repository, joka liittyy Paginator-instanssiin, hallitsee suoraan yksiköiden kokonaismäärää, eikä sitä voida asettaa suoraan.

Maksimimäärä sivuja​

setMax()-menetelmän avulla voit määrittää maksimaalisen sivulinkkien määrän, joka näytetään sivutuksen navigoinnissa. Tämä on erityisen hyödyllistä käsiteltäessä suurta määrää sivuja, sillä se hallitsee näkyvien sivulinkkien määrää käyttäjälle mihin tahansa aikaan.

navigator.getPaginator().setMax(maxPages);
Näytä Koodi

Tämä ohjelma näyttää enintään viisi sivua Navigatorissa kerrallaan käyttämällä getPaginator()-menetelmää noutamaan Paginator-instanssi, joka liittyy Navigator-objektiin, ja käyttämällä sitten setMax()-menetelmää määrittämään halutun enimmäismäärän näkyvissä olevia sivuja.

Sivukoko​

setSize()-menetelmän avulla voit määrittää esitettävien elementtien määrän kullakin sivulla sivutuksessa. Kun kutsut tätä menetelmää ja annat uuden sivukoon, se säätelee sivutusta vastaavasti.

navigator.getPaginator().setSize(pageSize);

Painikkeiden, tekstin ja työkaluvihjeiden mukauttaminen​

Navigator-komponentti tarjoaa laajat mukautusvaihtoehdot painikkeille, teksteille ja työkaluvihjeille. Vaihtaaksesi näytettävää tekstiä Navigator-komponentissa, käytä setText()-menetelmää. Tämä menetelmä ottaa tekstin sekä halutun osan Navigator:ista.

Seuraavassa esimerkissä setText()-menetelmä näyttää käyttäjälle numeerisen arvon. Painikkeeseen napsauttaessasi laukaisee Navigatorin onChange-menetelmän, joka tulee napsautetun painikkeen Direction-arvosta.

Näytä Koodi

Painikkeet ja komponentin teksti​

setText()-menetelmä arvioi tekstiparametrin JavaScript-lausekkeena käyttämällä seuraavia parametrejä:

  • page - nykyinen sivunumero
  • current - tällä hetkellä valittu sivunumero
  • x - aliaksena nykyiselle sivulle
  • startIndex - nykyisen sivun alkupään indeksi.
  • endIndex - nykyisen sivun loppupään indeksi.
  • totalItems - elementtien kokonaismäärä.
  • startPage - alkusivun numero.
  • endPage - loppusivun numero.
  • component - Navigator-asiakaskomponentti.

Esimerkiksi asettaaksesi viimeisen sivun painikkeen tekstiksi Navigatorissa, jossa on 10 sivua, "Siirry sivulle 10", käytä seuraavaa koodinäytettä:

navigator.setText("'Siirry sivulle ' + endPage", Navigator.Part.LAST_BUTTON);

Työkaluvihjeen teksti​

Voit mukauttaa työkaluvihjeitä erilaisille osille Navigator-komponentissa käyttämällä setTooltipText()-menetelmää. Työkaluvihjeet tarjoavat hyödyllisiä vinkkejä käyttäjille, kun he viettävät hiirtään navigointielementtien päällä.

tiedot

Työkaluvihjetekstiä ei arvioida JavaScriptiksi, toisin kuin setText()-menetelmän käyttämä teksti.

Esimerkiksi asettaaksesi viimeisen sivun painikkeen työkaluvihjetekstiksi Navigatorissa "Siirry viimeiselle sivulle", käytä seuraavaa koodinäytettä:

navigator.setTooltipText("Siirry viimeiselle sivulle", Navigator.Part.LAST_BUTTON);

Asettelu​

Navigator-komponentille on olemassa erilaisia asetteluvalintoja, jotka tarjoavat joustavuutta sivutuskontrollien esittämisessä. Voit käyttää näitä asetteluja käyttämällä Navigator.Layout-enum'n arvoja. Vaihtoehdot ovat seuraavat:

Näytä Koodi

1. Ei asettelua​

NONE-asettelu ei renderöi tekstiä Navigatorissa, vaan näyttää vain navigointipainikkeet ilman oletuksellista tekstiesitystä. Aktivoidaksesi tämän asettelun, käytä:

navigator.setLayout(Navigator.Layout.NONE);

2. Numeroitu asettelu​

Numeroitu asettelu näyttää numeroituja siruja, jotka vastaavat jokaista sivua Navigatorin näyttöalueella. Tämän asettelun käyttö on ihanteellista tilanteissa, joissa käyttäjät haluavat siirtyä suoraan tiettyihin sivuihin. Aktivoidaksesi tämän asettelun, käytä:

navigator.setLayout(Navigator.Layout.PAGES);

3. Esikatselu asettelu​

Esikatselu asettelu näyttää nykyisen sivun numeron ja kokonaismäärän, ja se on soveltuva tiiviisiin sivutusliittymiin, joissa on rajallisesti tilaa.

tiedot

Esikatselu on oletusarvoinen Navigator-asettelu.

Aktivoidaksesi tämän asettelun, käytä:

navigator.setLayout(Navigator.Layout.PREVIEW);

4. Nopean hypyn asettelu​

Nopean hypyn asettelu tarjoaa NumberField, johon käyttäjät voivat syöttää sivun numeron nopeaa navigointia varten. Tämä on hyödyllistä, kun käyttäjät tarvitsevat siirtyä nopeasti tiettyyn sivuun, erityisesti suurilla tietojoukoilla. Aktivoidaksesi tämän asettelun, käytä:

navigator.setLayout(Navigator.Layout.QUICK_JUMP);

Tyylittäminen​

Loading...

Parhaat käytännöt​

Optimaalisen käyttäjäkokemuksen varmistamiseksi Navigator-komponentin käytössä harkitse seuraavia parhaita käytäntöjä:

  • Ymmärrä tietojoukko: Ennen kuin integroidaan Navigator-komponentti sovellukseesi, ymmärrä perusteellisesti käyttäjiesi tietojenkatselutarpeet. Harkitse tekijöitä, kuten tietojoukon kokoa, tyypillisiä käyttäjävuorovaikutuksia ja suosittuja navigointimalleja.

  • Valitse sopiva asettelu: Valitse Navigator-komponentille asettelu, joka vastaa käyttäjäkokemustavoitteita ja saatavilla olevaa ruututilaa.

  • Mukauta teksti ja työkaluvihjeet: Mukauta Navigator-komponenteista teksti ja työkaluvihjeet vastaamaan sovelluksesi kieltä ja terminologiaa. Tarjoa kuvailevia etikettejä ja hyödyllisiä vinkkejä käyttäjille, jotta he voivat navigoida tietojoukon läpi tehokkaasti.