Siirry pääsisältöön

Navigator

Avaa ChatGPT:ssä
Varjo dwc-navigator 24.00
Java API

Navigator-komponentti lisää sivuohjausvaihtoehtoja tietoaineistojen tutkimiseen. Se voi näyttää ensimmäiset, viimeiset, seuraavat ja edelliset painikkeet yhdessä sivunumeroiden tai nopean hyppykentän kanssa, ja automaattisesti poistaa käytöstä ohjausvaihtoehdot, kun niitä ei voida käyttää. Se sitoo Paginator-instanssin hallitsemaan taustalla olevaa sivuohjauslogiikkaa.

Sidonta varastoihin​

Usein Navigator-komponentti näyttää tietoa, joka löytyy sidotusta Repository:sta. Tämä sidonta mahdollistaa Navigator:in automaattisen sivuohjauksen varaston hallinnoimasta datasta ja päivitykset muihin sidottaviin komponentteihin, kuten taulukoihin, perustuen navigoituun dataan.

Tätä varten siirrä vain haluttu Repository-objekti soveltuvan Navigator-olion konstruktoriin:

Näytä koodi

Tässä esimerkissä luodaan Navigator ja Table saman Repository-instanssin kanssa. Tämä tarkoittaa, että kun navigoidaan uuteen sivuun Navigator:in avulla, Table tunnistaa tämän muutoksen ja renderoi sen uudelleen.

Sivuohjaus​

Navigator-komponentti on tiiviisti sidottu Paginator-malliluokkaan, joka laskee sivuohjaustiedot, kuten sivujen kokonaismäärä, nykyisen sivun alkupään/päätepisteet ja taulukon sivunumeroista navigointia varten.

Vaikka se ei ole suorastaan tarpeen, Paginator:in käyttäminen mahdollistaa navigoinnin logiikan. Integroitaessa Paginator:in kanssa, navigator reagoi kaikkiin muutoksiin Paginator:issa. Navigator-objekteilla on pääsy sisäänrakennettuun Paginator:iin käyttämällä getPaginator()-metodia. Se voi myös hyväksyä Paginator-instanssin setPaginator()-metodin kautta tai hyödyntämällä yhtä soveltuvista konstruktoreista.

Tässä osiossa on käytännön koodinpätkiä, jotka havainnollistavat, miten tämä integraatio toimii käytännössä.

Kappaleet​

Termi "kappaleet" tarkoittaa yksittäisiä sivutettuja elementtejä tai datakirjoituksia. Nämä voivat olla tietueita, merkintöjä tai mitä tahansa yksittäisiä yksiköitä tietoaineistossa. Voit asettaa kappaleiden kokonaismäärän käyttämällä setTotalItems()-metodia.

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

Varastoon liitetty Paginator-instanssi hallinnoi suoraan varastoituja kappaleiden kokonaismäärää ja sitä ei voida suoraan asettaa.

Maksimimäntä​

setMax()-metodi sallii sinun määrittää maksimimäärän sivulinkkejä, jotka näytetään sivuohjausnavigoinnissa. Tämä on erityisen hyödyllistä käsiteltäessä suurta sivumäärää, koska se hallitsee näkyvien sivulinkkien määrää käyttäjälle mihin aikaan tahansa.

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

Tämä ohjelma näyttää kerralla maksimissaan viisi sivua Navigator:issa käyttämällä getPaginator()-metodia Navigator-olion mukana olevan Paginatorin hakemiseen ja sitten käyttäen setMax()-metodia määrittämään halutun maksimi sivumäärän näyttämiseksi.

Sivukoko​

setSize()-metodi sallii sinun määrittää näytettävien kappaleiden määrän jokaisella sivulla sivuohjauksessa. Kun kutsut tätä metodia ja annat uuden sivukoon, se säätää sivuohjauksen vastaavasti.

navigator.getPaginator().setSize(pageSize);

Painikkeiden, tekstin ja työkaluvihjeiden mukauttaminen​

Navigator-komponentti tarjoaa laajat mukautusmahdollisuudet painikkeiden, tekstin ja työkaluvihjeiden osalta. Muuttaaksesi näytettävää tekstiä Navigator-komponentissa, käytä setText()-metodia. Tämä metodi ottaa tekstin sekä halutun Part-osan Navigator:ista.

Seuraavassa esimerkissä setText()-metodi näyttää numeerisen arvon käyttäjälle. Painikkeiden napsauttaminen laukaisee Navigator:in onChange-metodin, jonka mukana on Direction-arvo napsautetusta painikkeesta.

Näytä koodi

Painikkeet ja komponentin teksti​

setText()-metodi arvioi tekstiparametrin JavaScript-lausekkeen avulla seuraavilla parametreilla:

  • page - nykyinen sivunumero
  • current - tällä hetkellä valitun sivun numero
  • x - alias nykyiselle sivulle
  • startIndex - nykyisen sivun alkupään indeksi.
  • endIndex - nykyisen sivun päätepiste.
  • totalItems - kappaleiden kokonaismäärä.
  • startPage - alkusivunumero.
  • endPage - päättymissivunumero.
  • component - Navigator-asiakas komponentti.

Esimerkiksi, asettaaksesi viimeisen sivupainikkeen tekstin Navigator:issa, jossa on 10 sivua, "Siirry sivulle 10", käytä seuraavaa koodinpätkää:

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

Työkaluvihjeen teksti​

Voit mukauttaa työkaluvihjeitä Navigator-komponentin eri osille käyttämällä setTooltipText()-metodia. Työkaluvihjeet antavat käyttäjille hyödyllisiä vihjeitä, kun he vievät hiiren navigointi-elementtien päälle.

tiedot

Työkaluvihjeen teksti ei arvioidu JavaScriptiksi, toisin kuin setText()-metodin käytettävä teksti

Esimerkiksi, asettaaksesi viimeisen sivupainikkeen työkaluvihjeen tekstiksi Navigator:issa "Siirry viimeiselle sivulle", käytä seuraavaa koodinpätkää:

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

Asettelu​

Navigator-komponentille on olemassa useita asettelu vaihtoehtoja, jotka tarjoavat joustavuutta sivuohjausvaihtoehtojen näyttämisessä. Näiden asettelujen käyttöön saat käyttämällä Navigator.Layout-enum:n arvoja. Vaihtoehdot ovat seuraavat:

Näytä koodi

1. Ei asettelua​

NONE-asettelu ei renderöi mitään tekstiä Navigator:issa, vaan näyttää vain navigointipainikkeet ilman oletuksena olevaa tekstinäyttöä. Aktivoi tämä asettelu käyttämällä:

navigator.setLayout(Navigator.Layout.NONE);

2. Numeroitu asettelu​

Numeroitu asettelu näyttää numeroituja chippejä, jotka vastaavat kutakin sivua Navigator:in näyttöalueella. Tämän asettelun käyttäminen on ihanteellista tilanteissa, joissa käyttäjät mieluummin navigoivat suoraan tiettyihin sivuihin. Aktivoi tämä asettelu käyttämällä:

navigator.setLayout(Navigator.Layout.PAGES);

3. Esikatselu asettelu​

Esikatselu-asettelu näyttää nykyisen sivun numeron ja sivujen kokonaismäärän, ja se on sopiva tiiviisiin sivuohjausliittymiin, joissa on rajallisesti tilaa.

tiedot

Esikatselu on oletusarvoinen Navigator-asettelu.

Aktivoi tämä asettelu käyttämällä:

navigator.setLayout(Navigator.Layout.PREVIEW);

4. Nopean hyppäämisen asettelu​

Nopean hyppäämisen asettelu tarjoaa NumberField käyttäjille, joiden avulla he voivat syöttää sivun numeron nopeaa navigointia varten. Tämä on hyödyllistä, kun käyttäjät tarvitsevat nopeasti siirtyä tiettyyn sivuun, erityisesti suurilla tietoaineistoilla. Aktivoi tämä asettelu käyttämällä:

navigator.setLayout(Navigator.Layout.QUICK_JUMP);

Tyylittely​

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ä tietoaineisto: Ennen kuin integroi Navigator-komponentin sovellukseesi, ymmärrä perusteellisesti käyttäjiesi tietohakutarpeet. Huomioi tekijät, kuten tietoaineiston koko, tyypilliset käyttäjäinteraktiot ja suositut navigointimallit.

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

  • Mukauta tekstiä ja työkaluvihjeitä: Mukauta Navigator-komponentin teksti ja työkaluvihjeet vastaamaan sovelluksessasi käytettävää kieltä ja terminologiaa. Tarjoa kuvailevia etikettejä ja hyödyllisiä vinkkejä auttaaksesi käyttäjiä navigoimaan tietoaineistossa tehokkaasti.