Siirry pääsisältöön

Navigator

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

Komponentti Navigator lisää sivutuksen hallintakontrolleja tietojoukoissa navigointia varten. Se voi näyttää ensimmäiset, viimeiset, seuraavat ja edelliset painikkeet sekä sivunumerot tai nopean hyppykentän, ja se poistaa automaattisesti hallintalaitteiden käytön, kun ne eivät ole soveltuvia. Se sitoo Paginator-instanssiin hallitakseen taustalla olevaa sivutuksen logiikkaa.

Sidonta säilytyksiin

Usein Navigator-komponentti näyttää tietoa, joka löytyy sidotusta Repository-objekti. Tämä sitominen mahdollistaa Navigator-komponentin automaattisen sivutuksen tietojoukoista, joita säilytys hallitsee, ja muiden sidottavien komponenttien, kuten taulukoiden, päivittämisen navigoituja tietoja perusteella.

Tämä onnistuu yksinkertaisesti syöttämällä haluttu Repository-objekti soveltuvan Navigator-objektin konstruktorille:

Näytä koodi

Tässä esimerkissä luodaan Navigator ja Table samalla Repository-instanssilla. Tämä tarkoittaa, että kun navigoit uuteen sivuun Navigatorin avulla, Table tunnistaa tämän muutoksen ja piirretään uudelleen.

Sivutus

Navigator-komponentti on läheisesti yhteydessä Paginator-malliluokkaan, joka laskee sivutuksen metadataa, kuten sivujen kokonaismäärää, alkupään/päätteen indeksejä nykyisellä sivulla ja taulukkoa sivunumeroista navigointia varten.

Vaikka se ei ole ilmeisen tarpeellista, Paginatorin käyttäminen mahdollistaa navigointilogiikan taustalla. Kun integroidaan Paginator-komponentin kanssa, navigaattori reagoi muutoksiin Paginatorissa. Navigator-objekteilla on pääsy sisäiseen Paginator-komponenttiin käyttämällä getPaginator()-metodia. Se voi myös hyväksyä Paginator-instanssin setPaginator()-metodin kautta tai käyttämällä yhtä soveltuvista konstruktoreista.

Tässä osassa on käytännön koodinpätkiä havainnollistamaan, miten tämä integraatio toimii käytännössä.

Kohteet

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

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

Säilytykselle, joka on liitetty Paginator-instanssiin, on suoraan hallittavakseen kohteiden kokonaismäärä, jota ei voi suoraan asettaa.

Suurin määrä sivuja

setMax()-metodi sallii sinun määrittää suurimman määrän sivulinkkejä, jotka näytetään sivutuksen navigoinnissa. Tämä on erityisen hyödyllistä, kun käsitellään 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ässä ohjelmassa näytetään enintään viisi sivua Navigatorissa kerrallaan käyttämällä getPaginator()-metodia saadaksesi Paginator-komponentin, joka liittyy Navigator-objektiin, ja sitten käyttämällä setMax()-metodia määrittääksesi halutun suurimman sivujen määrän, joka näytetään.

Sivukoko

setSize()-metodi sallii sinun määrittää kohteiden määrän, joka näytetään sivulla sivutuksessa. Kun kutsut tätä metodia ja annat uuden sivukoon, se säätää sivutuksen sen mukaisesti.

navigator.getPaginator().setSize(pageSize);

Painikkeiden, tekstin ja työkaluvihjeiden mukauttaminen

Navigator-komponentti tarjoaa laajat mukautusmahdollisuudet painikkeille, tekstille ja työkaluvihjeille. Muuttaaksesi näytettävää tekstiä Navigator-komponentissa, käytä setText()-metodia. Tämä metodi ottaa tekstin sekä halutun Part-osan Navigatorista.

Seuraavassa esimerkissä setText()-metodi näyttää käyttäjälle numeerisen arvon. Painikkeiden klikkaaminen käynnistää Navigatorin onChange-metodin, joka tulee yhdessä painettua painiketta osoittavan Direction-arvon kanssa.

Näytä koodi

Painikkeet ja komponentin teksti

setText()-metodi arvioi tekstiparametrin JavaScript-lausekkeena, käyttäen seuraavia parametreja:

  • page - nykyinen sivunumero
  • current - tällä hetkellä valittu sivunumero
  • x - alias nykyiselle sivulle
  • startIndex - Nykyisen sivun aloitusindeksi.
  • endIndex - Nykyisen sivun päättymisindeksi.
  • totalItems - Kohteiden kokonaismäärä.
  • startPage - Aloitussivun numero.
  • endPage - Päätysivun numero.
  • component - Navigator-asiakaskomponentti.

Esimerkiksi, määrittääksesi viimeisen sivun painikkeen tekstiksi Navigatorissa, jossa on 10 sivua, käytä seuraavaa koodinpätkää:

navigator.setText("'Go to page ' + endPage", Navigator.Part.LAST_BUTTON);

Työkaluvihjeteksti

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

tiedot

Työkaluvihjeteksti ei arvioi JavaScriptiksi, toisin kuin setText()-metodin käyttämä teksti.

Esimerkiksi, määrittääksesi viimeisen sivun painikkeen työkaluvihjetekstiksi Navigatorissa "Go to the last page", käytä seuraavaa koodinpätkää:

navigator.setTooltipText("Go to the last page", Navigator.Part.LAST_BUTTON);

Asettelu

Eri asettelu- vaihtoehtoja on olemassa Navigator-komponentille, jotta voidaan tarjota joustavuutta sivutuksen kontrollien näyttämisessä. Käytä Navigator.Layout-enum:in arvoja päästäksesi näihin asetteluihin. Vaihtoehdot ovat seuraavat:

Näytä koodi

1. Ei-asettelu

NONE-asettelu ei renderöi tekstiä Navigatorissa, vaan näyttää vain navigointipainikkeet ilman oletustekstistä nä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 Navigatorin näyttöalueella. Tämän asettelun käyttäminen on ihanteellista tilanteissa, joissa käyttäjät suosivat suoraa navigointia 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 kompakteille sivutustyökaluille rajoitetussa tilassa.

tiedot

Esikatselu on oletusarvoinen Navigator-asettelu.

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

navigator.setLayout(Navigator.Layout.PREVIEW);

4. Nopean hyppäyksen asettelu

Nopean hyppäyksen asettelu tarjoaa NumberField käyttäjille, joilla on mahdollisuus syöttää sivunumero nopeaa navigointia varten. Tämä on hyödyllistä, kun käyttäjät tarvitsevat päästä nopeasti tiettyyn sivuun, erityisesti suurissa tietojoukoissa. Aktivoi tämä asettelu käyttämällä:

navigator.setLayout(Navigator.Layout.QUICK_JUMP);

Tyylit

Loading...

Parhaat käytännöt

Jotta Navigator-komponentin käyttö takaisi optimaalisen käyttäjäkokemuksen, harkitse seuraavia parhaita käytäntöjä:

  • Ymmärrä tietojoukko: Ennen kuin integroit Navigator-komponentin sovellukseesi, ymmärrä perusteellisesti käyttäjiesi tietoselausvaatimukset. Ota huomioon tekijät, kuten tietojoukon koko, tyypilliset käyttäjäinteraktiot ja suosikkinautiopatternit.

  • Valitse sopiva asettelu: Valitse Navigator-komponentille sellainen asettelu, joka vastaa käyttäjäkokemus tavoitteita ja käytettävissä olevaa näyttötilaa.

  • Mukauta tekstiä ja työkaluvihjeitä: Mukauta Navigator-komponentin teksti ja työkaluvihjeet vastaamaan sovelluksesi käytettävää kieltä ja terminologiaa. Tarjoa kuvailevia etikettejä ja hyödyllisiä vihjeitä käyttäjien avustamiseksi tietojoukon navigoinnissa tehokkaasti.