Tree
Tree-komponentti järjestää tiedot solmujen hierarkiana. Jokaisella solmulla on ainutlaatuinen avain ja etiketti. Solmut yhdistyvät muodostaen vanhempi-lapsi-suhteita. Voit laajentaa tai kutistaa solmuja näyttääkseen tai piilottaakseen niiden lapsia. Kuvakkeet selkeyttävät, minkä tyyppisestä solmusta on kyse ja onko se valittu. Valinta tukee yhden tai useamman solmun valitsemista kerralla.
Solmumalli ja puurakenne
TreeNode-komponentin rooli
Jokainen puun tiedonpalanen on kiedottu TreeNode-objektiin. Tämä objekti sisältää avaimen, tekstietiketin sekä linkit sen vanhempaan ja lapsisolmuihin. Juurisolmu on erityinen: se esiintyy jokaisessa puussa, mutta ei ole näkyvissä. Se toimii säilönä kaikille ylimmille solmuille, mikä helpottaa puurakenteen hallintaa sisäisesti.
Koska solmut säilyttävät viittauksia vanhempiinsa ja lapsiinsa, puussa liikkuminen on suoraviivaista. Riippumatta siitä, haluatko siirtyä ylös, alas vai löytää tietyn solmun avaimen mukaan, yhteydet ovat aina käytettävissä.
Solmujen luominen ja hallinta
Solmuja luodaan yksinkertaisilla tehdasmenetelmillä, joko antamalla avain ja teksti tai pelkästään teksti (joka toimii myös avaimena). Tämä takaa, että jokainen solmu on voimassa oleva ja ainutlaatuisesti tunnistettava.
Solmujen lisääminen puuhun tapahtuu kutsumalla add() tai insert() vanhempasolmulle. Nämä menetelmät käsittelevät vanhemman viittauksen määrittämistä ja ilmoittavat puulle, että sen UI:tä on päivitettävä.
Esimerkki:
TreeNode parent = Tree.node("Parent");
TreeNode child = Tree.node("Child");
parent.add(child);
tree.add(parent);
Yrittäminen määrittää sama solmu useammalle vanhemmalle johtaa poikkeuksen heittämiseen. Tämä turvatoimi varmistaa, että puu pitää yllä oikeaa hierarkiaa estämällä solmuja saamasta useita vanhempia, mikä rikkoisi rakenteen eheyttä ja aiheuttaisi odottamattomia käyttäytymisiä.
Näytä koodi
- TreeView.java
Solmujen muokkaaminen
Voit päivittää solmun etiketin kutsumalla setText(String text). Tämä menetelmä muuttaa puussa näkyvän solmun tekstiä.
Poistaaksesi tietyn lapsisolmun, käytä remove(TreeNode child). Tämä irrottaa lapsen sen vanhemmasta ja poistaa sen puurakenteesta. Se myös tyhjentää vanhemman viittauksen.
Jos haluat tyhjentää kaikki lapset solmusta, kutsu removeAll(). Tämä poistaa jokaisen lapsisolmun, tyhjentää niiden vanhemman viittaukset ja tyhjentää lasten listan.
Jokainen solmu tukee lisätiedon tallentamista palvelinpuolella käyttäen setUserData(Object key, Object data). Tämä antaa sinun liittää satunnaista metadataa tai viittauksia solmuun ilman, että tätä tietoa paljastetaan asiakkaalle tai käyttöliittymälle.
Demossa kaksoisklikkaa solmua avataksesi muokkausikkunan sen tekstille. Syötä uusi teksti ja tallenna se päivittääksesi solmun etiketin puussa.
Näytä koodi
- TreeModifyView.java
- tree-modify-view.css
Kuvakkeet
Kuvakkeet tarjoavat visuaalisia vihjeitä siitä, mitä solmut edustavat ja mikä niiden tila on. Ne parantavat luettavuutta erottamalla solmutyypit ja valintatilan yhdellä silmäyksellä. Tree-komponentti tukee oletuskuvakkeiden asettamista globaalisti, kuvakkeiden mukauttamista solmukohtaisesti ja kuvakkeiden näkyvyyden kytkemistä.
Globaalit kuvakkeet
Puu antaa sinun asettaa oletuskuvakkeet kutistuvalle ryhmälle, laajentuville ryhmille, lehtisolmuille ja valituille lehdille.
Esimerkki:
tree.setCollapsedIcon(TablerIcon.create("folder"));
tree.setExpandedIcon(TablerIcon.create("folder-opened"));
tree.setLeafIcon(TablerIcon.create("file"));
tree.setLeafSelectedIcon(TablerIcon.create("file-checked"));
Kuvake voi olla mikä tahansa voimassa oleva webforJ ikoni -määrittely tai resurssitiedosto, joka on ladattu webforJ tuetun resurssin protokollan kautta.
Solmukohtaiset kuvakkeet
Voit korvata globaalit oletukset määrittämällä kuvakkeet yksittäisille solmuille. Tämä on hyödyllistä, kun tietyt solmut edustavat eri käsitteitä, kuten "projekti" kansioita tai erityisiä tiedostoja.
Esimerkki:
node.setIcon(TablerIcon.create("project"));
node.setSelectedIcon(TablerIcon.create("project-selected"));
Kuvakkeiden näkyvyys
Joskus saatat haluta piilottaa kuvakkeet ryhmille tai lehdille vähentääksesi häiriötekijöitä. Komponentti antaa sinun kytkeä näkyvyyden globaaleissa kategorioissa, mikä helpottaa puun ulkoasun yksinkertaistamista ilman, että rakennetta menettää.
Esimerkki:
tree.setGroupIconsVisible(false);
tree.setLeafIconsVisible(false);
Näytä koodi
- TreeIconsView.java
Solmujen laajentaminen ja supistaminen
Solmuja voidaan laajentaa tai supistaa, jotta voidaan hallita, mitkä osat puusta ovat näkyvissä. Tämä mahdollistaa keskittymisen relevantiin osaan ja tukee tällaisia skenaarioita kuin laiska lataaminen tai dynaamiset tietopäivitykset.
Laajentamis- ja supistamistoiminnot
Puu tukee yksittäisten solmujen laajentamista ja supistamista joko niiden avaimen tai suoran viittauksen mukaan. Voit myös laajentaa tai supistaa kaikki solmun jälkeläiset yhdellä kertaa.
Nämä toiminnot antavat sinulle hallita, kuinka paljon puusta on näkyvissä ja tukevat tietojen laiskaa lataamista tai keskittymistä kiinnostaviin alueisiin.
Esimerkki:
tree.expand(node);
tree.collapse(key);
// supista alapuut
tree.expandFrom(node);
tree.collapseFrom(node);
Juurisolmu ankkuroi puun, mutta pysyy piilotettuna. Juuren supistaminen piilottaisi normaalisti kaiken, jolloin puu näyttäisi tyhjältä. Tämän välttämiseksi juuren supistaminen supistaa kaikki sen lapset, mutta pitää juuren laajennettuna sisäisesti, varmistaen, että puu näyttää edelleen sisällön oikein.
Laiska lataaminen solmuista
Puu tukee solmun lasten laiskaa lataamista reagoimalla laajentamistapahtumiin. Kun käyttäjä laajentaa solmua, sovelluksesi voi ladata tai luoda kyseisen solmun lapsia dynaamisesti. Tämä parantaa suorituskykyä lataamalla vain puun näkyvät osat tarpeen mukaan.
Käytä onExpand-tapahtumaa havaitaksesi, kun solmu laajennetaan. Käsittelijässä tarkista, ovatko solmun lapset paikkamerkkejä (esimerkiksi latauspyörä tai tyhjät solmut) ja korvata ne varsinaisilla tiedoilla, kun ne on ladattu.
Näytä koodi
- TreeLazyLoadView.java
Valinta
Valinta ohjaa, mitkä solmut käyttäjä valitsee. Tree-komponentti tukee joustavia tiloja ja API:ita solmujen valitsemiseen, poissulkemiseen ja kyselyyn.
Valintatilat
Voit valita, salliiko puu yhden solmun valinnan kerrallaan vai useita solmuja samanaikaisesti. Siirtyminen useasta valinnasta yhteen valintaan poistaa automaattisesti kaikki valinnat paitsi ensimmäisen valitun solmun.
Esimerkki:
tree.setSelectionMode(Tree.SelectionMode.SINGLE);
Kun puu on asetettu monivalintatilaan, käyttäjät voivat valita useampia solmuja kerralla. Tämä toimii laitteesta riippuen:
- Työpöytä (hiiri ja näppäimistö): Käyttäjät pitävät Ctrl-näppäintä (tai Cmd-näppäintä macOS:ssa) ja napsauttavat solmuja lisätäkseen tai poistaakseen ne nykyisestä valinnasta. Tämä mahdollistaa useiden yksittäisten solmujen valitsemisen ilman, että muita poistetaan valinnasta.
- Mobiili- ja kosketuslaitteet: Koska muokkausnäppäimiä ei ole saatavilla, käyttäjät vain napauttavat solmuja valitakseen tai poistaakseen ne valinnasta. Jokainen kosketus vaihtaa kyseisen solmun valintatilaa, mahdollistaen helpon monivalinnan yksinkertaisilla napautuksilla.
Valitseminen ja poistaminen valinnasta
Solmuja voidaan valita tai poistaa valinnasta viittauksen, avaimen, yksilöllisesti tai erissä. Voit myös valita tai poistaa kaikilta solmun lapsilta kerralla.
Esimerkki:
// valitse solmu viittauksen tai avaimen perusteella
tree.select(node);
tree.selectKey(key);
// poista valinta solmulta viittauksen tai avaimen perusteella
tree.deselect(node);
tree.deselectAll();
// valitse tai poista valinta solmujen lapsilta
tree.selectChildren(parentNode);
tree.deselectChildren(parentNode);
Valinnan tilan hakeminen
Voit saada nykyisen valinnan hyödyntämällä alla olevaa koodia:
// hae valitun solmun viittaus
TreeNode selected = tree.getSelected();
List<TreeNode> selectedItems = tree.getSelectedItems();
// hae valitun solmun avain
Object selectedKey = tree.getSelectedKey();
List<Object> selectedKeys = tree.getSelectedKeys();
Näytä koodi
- TreeSelectionView.java