|
| 1 | +# 🖥️ puiButtonTabTree |
| 2 | + |
| 3 | +## Účel pluginu |
| 4 | + |
| 5 | +Tento plugin je vhodný pro zajištění 🔘🎛️📂 tlačítka a karty bočního panelu s komponentou strom. |
| 6 | + |
| 7 | +## Konfigurace |
| 8 | + |
| 9 | +1. Připravte konfiguraci s hodnotami stejně jako pro komponentu 🖥️ [puiButton][puiButtonC]. |
| 10 | +2. Přidejte klíč **TREEID**, ve kterém bude jméno nového stromu |
| 11 | + |
| 12 | +## Implementace |
| 13 | + |
| 14 | +3. Nový plugin vždy bude mít [puiButtonTabTree][puiButtonTabTree] jako svou bázovou třídu. |
| 15 | + |
| 16 | +```javascript |
| 17 | +class puiNewButtonWithTree extends puiButtonTabTree { |
| 18 | + constructor(aliasName, data) { |
| 19 | + super(aliasName, data); |
| 20 | + |
| 21 | + this.DEFAULT_KEY_CFG_ID = 'downP-NewTree'; |
| 22 | + this.DEFAULT_KEY_CFG_CAPTION = '📂'; |
| 23 | + this.DEFAULT_KEY_CFG_TARGET = UI_PLUGIN_SIDEBAR; |
| 24 | + |
| 25 | + this.DEFAULT_KEY_CFG_TREEID = newtree'; |
| 26 | + //setTreeData(data, this.aliasName, append); |
| 27 | + } |
| 28 | + |
| 29 | + //_buttonAction(evt) { |
| 30 | + //} |
| 31 | +
|
| 32 | + _preShowAction(evt) { |
| 33 | + } |
| 34 | +
|
| 35 | + _preStandardInit() { |
| 36 | + } |
| 37 | +
|
| 38 | + _treeClick(e) { |
| 39 | + } |
| 40 | +} |
| 41 | +
|
| 42 | +Plugins.catalogize(puiNewButtonWithTree); |
| 43 | +``` |
| 44 | +
|
| 45 | +- Řádky **this.DEFAULT_KEY_CFG_** mohou být odebrány, pokud chcete spoléhat pouze na konfiguraci ze souboru. S ohledem na automatickou dokumentaci objektů v pluginu však doporučuji je ponechat. |
| 46 | +
|
| 47 | +| Objekt | Popis | |
| 48 | +|---|---| |
| 49 | +| this.tab | Odkaz na HTML element karty. Je možno do ní připojit další objekty | |
| 50 | +| this.button | Odkaz na HTML element tlačítka | |
| 51 | +| this.tree | Odkaz na HTML element stromu (**ul** element) | |
| 52 | +| parametr evt | Událost aplikace, ⚡ [ClickedEvent][ClickedEvent] | |
| 53 | +| _preStandardInit | Je spouštěna před vytvořením komponenty strom na kartě. Je určena pro založení dalších komponent v případě potřeby. | |
| 54 | +| _preShowAction(evt) | Je spouštěna před zobrazením karty uživateli. Je ideální k odloženému načtení dat pluginu, která jsou zobrazována uživateli na dané kartě, případně k přípravě konfiguračního formuláře pro další akci. V potomkovi by měla být přepsána i prázdnou funkcí. Pokud funkce vrátí **false**, tak se karta uživateli nezobrazí. | |
| 55 | +| _buttonAction(evt) | Akce tlačítka. Obvykle není třeba ji přepisovat, pokud postačuje pouhé zobrazení karty uživateli | |
| 56 | +| _treeClick(e) | Akce kliknutí na položku stromu, ⚡ [ClickedEventTree][ClickedEventTree]. Pokud není přepsána, převezme sdílenou obsluhu **processAClick** z **appmainBaseLogic.js** (tato obsluha je již na hranici obecného řešení a konkrétní implementace). | |
| 57 | +| setTreeData(data, this.aliasName, append); | Provede nastavení [dat stromu][treedata] z řetězce data. Pro identifikaci se použije aliasName pluginu. Append může být neuveden a nebo **true**, pokud chcete připojit nějaká data na konec stromu. | |
| 58 | +
|
| 59 | +Pokud Vám nevyhovuje funkce **setTreeData**, můžete použít funkci nižší úrovně, kterou tato funkce zapouzdřuje - **linesToHtmlTree**(data, alias) - data je opět řetězec [dat stromu][treedata] a alias zde je hodnota konfigurace **TREEID**. |
| 60 | +
|
| 61 | +## Popis funkčnosti |
| 62 | +
|
| 63 | +- Funkce **_preStandardInit**() je spuštěna automaticky při vytvoření instance pluginu. |
| 64 | +- Funkce **_buttonAction**(evt) představuje handler pro obsluhu kliknutí na tlačítko. Výchozí obsluha je zajištěna z předka. Přepsání se nepředpokládá, ale je možné. |
| 65 | +- Ve výchozím chování funkce provolá **_preShowAction**(evt) a |
| 66 | +zobrazí kartu komponenty na panelu. |
| 67 | +- **_preShowAction**(evt) může vrátit false, aby zablokovala zobrazení karty uživateli. Pokud vrátí undefined (výchozí chování) nebo true, kartu plugin v pořádku zobrazí. |
| 68 | +
|
| 69 | +## Příklady implementací |
| 70 | +
|
| 71 | +- 🖥️ [puiButtonObjectExplorer][puiButtonObjectExplorer] a další potomci 🖥️ [puiButtonTabTree][puiButtonTabTree] |
| 72 | +
|
| 73 | +### Scénář: Tlačítko s akcí otevři/zavři vše |
| 74 | +
|
| 75 | +Pokud funkci _buttonAction nadefinujete tímto způsobem: |
| 76 | +
|
| 77 | +```javascript |
| 78 | + _buttonAction(evt) { |
| 79 | + this._buttonActionClickOpenCloseAll(evt?.event?.isTrusted); |
| 80 | + } |
| 81 | +``` |
| 82 | +
|
| 83 | +získáte přepínač, který v případě kliknutí na tlačítko provede 3 stavy: |
| 84 | +
|
| 85 | +- Karta není viditelná -> zobrazí kartu se stromem. |
| 86 | +- Karta je viditelná, existuje alespoň jedna neotevřená položka -> všechny položky stromu se otevřou. |
| 87 | +- Karta je viditelná, všechny položky jsou otevřené -> všechny položky stromu se zavřou. |
| 88 | +
|
| 89 | +Ukázka: 🖥️ [puiButtonTOC][cpuiButtonTOC] |
| 90 | +
|
| 91 | +[ClickedEvent]: :_evt:ClickedEvent.md "ClickedEvent" |
| 92 | +[ClickedEventTree]: :_evt:ClickedEventTree.md "ClickedEventTree" |
| 93 | +[puiButtonTabTree]: :_plg:puiButtonTabTree.md "puiButtonTabTree" |
| 94 | +[puiButtonC]: puiButton.md#h-2-1 "puiButton" |
| 95 | +[cpuiButtonTOC]: :_cpp:puiButtonTOC.md "puiButtonTOC" |
| 96 | +[puiButtonObjectExplorer]: :_plg:puiButtonObjectExplorer.md "puiButtonObjectExplorer" |
| 97 | +[treedata]: ?d=hlp-aguide/Help-__.zip&p=mdata%2Ftree.lst.md "tree input data format" |
0 commit comments