Siirry pääsisältöön

Navigator

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

Navigator-komponentti lisää sivutuksen hallintapainikkeet tietojoukoissa navigointia varten. Se voi näyttää ensimmäiset, viimeiset, seuraavat ja edelliset painikkeet yhdessä sivunumeroiden tai pikasiirtymiskentän kanssa, ja se poistaa automaattisesti hallintapainikkeet käytöstä, kun niitä ei ole saatavilla. Se sitoo Paginator-instanssin hallitakseen taustalla olevaa sivutusta.

Siteille sitoutuminen​

Usein Navigator-komponentti näyttää tietoja, jotka löytyvät sidotusta Repository:sta. Tämä sitoutuminen mahdollistaa Navigatorin automaattisen sivutuksen repositorion hallitsemalle datalle ja muiden sidottavien komponenttien, kuten taulukoiden, päivittämisen, perustuen navigoituun dataan.

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

Näytä koodi

Tässä esimerkissä luodaan Navigator ja Table samalla Repository-instanssilla. Tämä tarkoittaa, että kun navigoidaan uuteen sivuun Navigator:in avulla, Table tunnistaa tämän muutoksen ja uudelleenrenderöi.

Sivutus​

Navigator-komponentti on tiiviisti sidoksissa Paginator-malliluokkaan, joka laskee sivutuksen metatiedot, kuten sivujen kokonaismäärän, nykyisellä sivulla olevien kohteiden aloitus-/lopetusindeksit, sekä taulukon sivunumeroita navigointia varten.

Vaikka se ei ole välttämätöntä, Paginator:n käyttäminen mahdollistaa navigointilogiikan taustalla. Kun yhdistetään Paginator:in kanssa, navigator reagoi kaikkiin muutoksiin Paginator:in sisällä. Navigator-oliot voivat käyttää sisäänrakennettua Paginator:ia getPaginator()-metodin kautta. Se voi myös hyväksyä Paginator-instanssin setPaginator()-metodilla tai käyttää yhtä soveltuvista konstruktoreista.

Tässä osiossa on käytännön koodinpätkiä havainnollistamaan, kuinka tämä integrointi toimii käytännössä.

Kohteet​

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

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

Repositio, joka on sidottu Paginator-instanssiin, hallitsee suoraan repositioon liittyvää kohteiden kokonaismäärää ja sitä ei voida suoraan asettaa.

Maksimi sivut​

setMax()-metodi sallii sinun määrittää maksimimäärän sivulinkkejä, jotka näytetään sivutuksen navigoinnissa. Tämä on erityisen hyödyllistä suurten sivumäärien kanssa, koska se ohjaa näkyvien sivulinkkien määrää käyttäjälle minkä tahansa ajan.

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

Tämä ohjelma näyttää maksimissaan viisi sivua Navigator:issa kerrallaan käyttämällä getPaginator()-metodia saadakseen Paginator:in, joka liittyy Navigator-olioon, ja sitten käyttämällä setMax()-metodia määritelläkseen halutun maksimisivujen määrän, joka näytetään.

Sivukoko​

setSize()-metodi sallii sinun määrittää, kuinka monta kohdetta näytetään jokaisella sivulla sivutuksessa. Kun kutsut tätä metodia ja annat uuden sivukoon, se säätää sivutusta vastaavasti.

navigator.getPaginator().setSize(pageSize);

Painikkeiden, tekstin ja työkaluvihjeiden mukauttaminen​

Navigator-komponentti tarjoaa laajasti mukauttamisen mahdollisuuksia painikkeille, tekstille ja työkaluvihjeille. Vaihtaaksesi 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ää numerollisen arvon käyttäjälle. Painikkeiden napsauttaminen laukaisee Navigator:in onChange-metodin, johon tulee Direction-arvo napsautetusta painikkeesta.

Näytä koodi

Painikkeet ja komponentti-teksti​

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

  • page - nykyinen sivunumero
  • current - tällä hetkellä valittu sivunumero
  • x - nykyisen sivun jäljennös
  • startIndex - nykyisen sivun aloitusindeksi.
  • endIndex - nykyisen sivun lopetusindeksi.
  • totalItems - kohteiden kokonaismäärä.
  • startPage - aloitussivun numero.
  • endPage - lopetussivun numero.
  • component - Navigator-asiakasjäsen.

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

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

Työkaluvihje-teksti​

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

tiedot

Työkaluvihje-tekstiä ei arvioida Javascriptiksi, toisin kuin setText()-metodin käyttämä teksti

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

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

Asettelu​

Navigator-komponentille on olemassa erilaisia asettelu vaihtoehtoja, jotka tarjoavat joustavuutta sivutusohjainten näyttämisessä. Päästäksesi näihin asetteluihin, käytä Navigator.Layout-enumeration arvoja. Vaihtoehdot ovat seuraavat:

Näytä koodi

1. Ei asetusta​

NONE-asettelu ei renderöi tekstiä Navigator-komponenttiin, vaan näyttää vain navigointipainikkeet ilman oletustekstinäyttöä. Tämä asettelu aktivoituu käyttämällä:

navigator.setLayout(Navigator.Layout.NONE);

2. Numerointi-asettelu​

Numerointi-asettelu näyttää numeroituja chippejä, jotka vastaavat jokaista sivua Navigator-komponentin näyttöalueella. Tämän asettelun käyttäminen on ihanteellista tilanteissa, joissa käyttäjät mieluummin navigoivat suoraan tietyille sivuille. Tämä asettelu aktivoituu 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 tiiviille sivutusohteluille rajoitetussa tilassa.

tiedot

Esikatselu on oletusarvoinen Navigator-asettelu.

Aktivoimiseen käytä:

navigator.setLayout(Navigator.Layout.PREVIEW);

4. Pikasiirtymä-asettelu​

Pikasiirtymä-asettelu tarjoaa NumberField-kentän, johon käyttäjät voivat syöttää sivunumeron nopeaa navigointia varten. Tämä on hyödyllistä, kun käyttäjien täytyy nopeasti navigoida tietylle sivulle, erityisesti suuria tietojoukkoja käsiteltäessä. Aktivoimiseen käytä:

navigator.setLayout(Navigator.Layout.QUICK_JUMP);

Tyylittely​

Loading...

Parhaat käytännöt​

Varmistaaksesi optimaalisen käyttäjäkokemuksen Navigator-komponentin käytössä, ota huomioon seuraavat parhaat käytännöt:

  • Ymmärrä tietojoukko: Ennen kuin integroi Navigator-komponentin sovellukseesi, ymmärrä perusteellisesti käyttäjiesi datan selausvaatimukset. Ota huomioon sellaiset tekijät kuin tietojoukon koko, tyypilliset käyttäjävuorovaikutukset ja suosituimmat navigointimallit.

  • Valitse sopiva asettelu: Valitse Navigator-komponentille asettelu, joka on linjassa käyttäjäkokemustavoitteiden ja käytettävissä olevan näytön real estate -tilan kanssa.

  • Mukauta teksti ja työkaluvihjeet: Mukauta Navigator-komponentin teksti ja työkaluvihjeet vastaamaan sovelluksesi käyttämää kieltä ja terminologiaa. Tarjoa kuvaavia etikettejä ja hyödyllisiä vinkkejä, jotka auttavat käyttäjiä navigoimaan tietojoukossa tehokkaasti.