Skip to content

Commit 006808c

Browse files
VitSimonVitSimon
committed
EN,CZ : puiButtonSelect description
1 parent 069ebaf commit 006808c

File tree

8 files changed

+164
-2
lines changed

8 files changed

+164
-2
lines changed

‎cs/files.lst‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ deps.lst.md|Seznam závislostí (deps.lst)
4343
plugLocStrings.md|Lokalizace pluginů
4444
pServicePlugin.md|pServicePlugin
4545
milestones.md|Milníky
46+
puiButtonSelect.md|puiButtonSelect

‎cs/firstPlugin.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Plugins.catalogize(pMinPlugin);
5252

5353
```
5454

55-
- Volání **Plugins.catalogize(pMinPlugin);** je povinné, protože provede zavedení pluginu do katalogu načtených pluginů. Následně na základě znalosti jména pluginu je možné si vyžádat jeho instance. Na základě dat v **plugins.lst** toto udělá aplikace sama.
55+
- Volání **Plugins.catalogize(pMinPlugin);** je povinné, protože provede zavedení pluginu do katalogu načtených pluginů. Následně na základě znalosti jména pluginu je možné si vyžádat jeho instance. Na základě dat v **[plugins][plugins].lst** toto udělá aplikace sama.
5656
- Volání **super.** by mělo být první u konstruktoru a u init a deinit poslední. Zajišťují aplikaci obecné spoelčné logiky.
5757
- const T a TI jsou zkratky pro přístup k this a ke třídě. Je to napříč systémem doporučená koncepce psaní.
5858
- V případě, že máte ve funkci pouze volání super. , můžete funkci odebrat zcela. Zde v ukázce je vše uvedeno pro rychlý obecný přehled.
@@ -72,6 +72,7 @@ Plugins.catalogize(pMinPlugin);
7272
| 🖥️ [puiButton][puiButton] | 🔘 Tlačítko pro uživatelské rozhraní. Obsluha akce musí být součástí zdroje pluginu. |
7373
| 🖥️ [puiButtonTab][puiButtonTab] | 🔘🎛️ Tlačítko a karta bočního panelu. |
7474
| 🖥️ [puiButtonTabTree][puiButtonTabTree] | 🔘🎛️📂 Tlačítko a karta bočního panelu s komponentou strom. |
75+
| 🖥️ [puiButtonSelect][puiButtonSelect] | 🔘▼ Tlačítko s výběrovým seznamem. |
7576

7677
### Výpis textu kapitol
7778

@@ -92,6 +93,7 @@ Plugins.catalogize(pMinPlugin);
9293
[puiButton]: puiButton.md "puiButton"
9394
[puiButtonTab]:puiButtonTab.md "puiButtonTab"
9495
[puiButtonTabTree]: puiButtonTabTree.md "puiButtonTabTree"
96+
[puiButtonSelect]: puiButtonSelect.md "puiButtonSelect"
9597
[plugins]: plugins.lst.md "Seznam pluginů"
9698
[pServicePlugin]: pServicePlugin.md "pServicePlugin"
9799
[pPluginManagement]: :_plg:pPluginManagement.md "pPluginManagement"

‎cs/puiButtonSelect.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# 🖥️ puiButtonSelect
2+
3+
## Účel pluginu
4+
5+
Tento plugin je vhodný pro zajištění jednoduchého 🔘▼ tlačítka s výběrovým seznamem.
6+
7+
## Konfigurace
8+
9+
1. Připravte konfiguraci s hodnotami podle [puiButton][puiButton].
10+
11+
## Implementace
12+
13+
2. Nový plugin vždy bude mít [puiButtonSelect][puiButtonSelect] jako svou bázovou třídu.
14+
15+
```javascript
16+
class puiButtonSelectNew extends puiButtonSelect {
17+
constructor(aliasName, data) {
18+
super(aliasName, data);
19+
20+
this.DEFAULT_KEY_CFG_ID = 'downP-selNew';
21+
this.DEFAULT_KEY_CFG_CAPTION = '🖼️';
22+
this.DEFAULT_KEY_CFG_TARGET = UI_PLUGIN_SIDEBAR;
23+
}
24+
25+
async init() {
26+
// ... inicializace událostí aplikace vložte zde ...
27+
28+
super.init();
29+
30+
// ... inicializace dat komponenty vložte zde ...
31+
32+
const items = ['A', 'B', 'C']; // položky
33+
const selVal = 'B'; // výchozí vybraná hodnota
34+
35+
appendComboBoxItems(this.select, items, selVal);
36+
}
37+
38+
deInit() {
39+
super.deInit();
40+
}
41+
42+
_handle(e) {
43+
const newVal = e.target.options[e.target.selectedIndex].text;
44+
// ...
45+
}
46+
47+
_handleFocus(e) {
48+
// ...
49+
}
50+
51+
// ...
52+
}
53+
54+
Plugins.catalogize(puiButtonSelectNew);
55+
56+
```
57+
58+
- Řá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.
59+
60+
## Popis funkčnosti
61+
62+
- **appendComboBoxItems** připojí množinu položek do výběrového pole. Indexy jsou přiřazeny od 0
63+
- **e.target.selectedIndex** index vybrané položky
64+
- **e.target.options\[e.target.selectedIndex\].text** text vybrané položky
65+
- **this.select.options.length = 0** smaže položky výběrového pole
66+
- **_handleFocus** akce před otevřením seznamu možných voleb
67+
- **this.select** obsahuje odkaz na vytvořený výběrový seznam
68+
- **e** představuje javascript systémové události
69+
- **sendEvent('ButtonSelectIconSet', (x) => {x.payload = '🖥️'; id = '';});** změní ikonu tlačítka na 🖥️
70+
71+
## Příklady implementací
72+
73+
- 🖥️ [puiButtonSelectSkin][puiButtonSelectSkin] a další potomci třídy 🖥️ [puiButtonSelect][puiButtonSelect]
74+
75+
[puiButton]: puiButton.md#h-2-1 "puiButton"
76+
[puiButtonSelect]: :_plg:puiButtonSelect.md "puiButtonSelect"
77+
[puiButtonSelectSkin]: :_plg:puiButtonSelectSkin.md "puiButtonSelectSkin"

‎cs/tree.lst‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Implementace pluginů|Implementace pluginů||implPlug.md
1818
🖥️ puiButton|puiButton||puiButton.md
1919
🖥️ puiButtonTab|puiButtonTab||puiButtonTab.md
2020
🖥️ puiButtonTabTree|puiButtonTabTree||puiButtonTabTree.md
21+
🖥️ puiButtonSelect|puiButtonSelect||puiButtonSelect.md
2122
🔌 pConvertSysEventToEvent|pConvertSysEventToEvent||pConvertSysEventToEvent.md
2223
🖼️ pTRPhasePlugin|pTRPhasePlugin||pTRPhasePlugin.md
2324
🖼️ pTopicRenderer|pTopicRenderer||pTopicRenderer.md

‎en/files.lst‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ deps.lst.md|List of dependencies (deps.lst)
4343
plugLocStrings.md|Plugin localization
4444
pServicePlugin.md|pServicePlugin
4545
milestones.md|Milestones
46+
puiButtonSelect.md|puiButtonSelect

‎en/firstPlugin.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Plugins.catalogize(pMinPlugin);
5252

5353
```
5454

55-
- Calling **Plugins.catalogize(pMinPlugin);** is mandatory because it adds the plugin to the catalog of loaded plugins. Subsequently, based on the plugin name, it is possible to request its instance. Based on the data in **plugins.lst**, the application does this itself.
55+
- Calling **Plugins.catalogize(pMinPlugin);** is mandatory because it adds the plugin to the catalog of loaded plugins. Subsequently, based on the plugin name, it is possible to request its instance. Based on the data in **[plugins][plugins].lst**, the application does this itself.
5656
- Calling **super.** should be the first in the constructor and the last in init and deinit. They ensure the application of general common logic.
5757
- const T and TI are abbreviations for accessing this and the class. This is a recommended writing concept across the system.
5858
- If you only have a super. call in a function, you can remove the function entirely. Here in the example, everything is listed for a quick general overview.
@@ -72,6 +72,7 @@ Plugins.catalogize(pMinPlugin);
7272
| 🖥️ [puiButton][puiButton] | 🔘 Button for the user interface. The action handler must be part of the plugin source. |
7373
| 🖥️ [puiButtonTab][puiButtonTab] | 🔘🎛️ Sidebar button and tab. |
7474
| 🖥️ [puiButtonTabTree][puiButtonTabTree] | 🔘🎛️📂 Sidebar button and tab with tree component. |
75+
| 🖥️ [puiButtonSelect][puiButtonSelect] | 🔘▼ Button with a drop-down list. |
7576

7677
### Chapter text rendering
7778

@@ -92,6 +93,7 @@ Plugins.catalogize(pMinPlugin);
9293
[puiButton]: puiButton.md "puiButton"
9394
[puiButtonTab]:puiButtonTab.md "puiButtonTab"
9495
[puiButtonTabTree]: puiButtonTabTree.md "puiButtonTabTree"
96+
[puiButtonSelect]: puiButtonSelect.md "puiButtonSelect"
9597
[plugins]: plugins.lst.md "List of plugins"
9698
[pServicePlugin]: pServicePlugin.md "pServicePlugin"
9799
[pPluginManagement]: :_plg:pPluginManagement.md "pPluginManagement"

‎en/puiButtonSelect.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# 🖥️ puiButtonSelect
2+
3+
## Purpose of the plugin
4+
5+
This plugin is suitable for providing a simple 🔘▼ button with a selection list.
6+
7+
## Configuration
8+
9+
1. Prepare the configuration with values according to [puiButton][puiButton].
10+
11+
## Implementation
12+
13+
2. The new plugin will always have [puiButtonSelect][puiButtonSelect] as its base class.
14+
15+
```javascript
16+
class puiButtonSelectNew extends puiButtonSelect {
17+
constructor(aliasName, data) {
18+
super(aliasName, data);
19+
20+
this.DEFAULT_KEY_CFG_ID = 'downP-selNew';
21+
this.DEFAULT_KEY_CFG_CAPTION = '🖼️';
22+
this.DEFAULT_KEY_CFG_TARGET = UI_PLUGIN_SIDEBAR;
23+
}
24+
25+
async init() {
26+
// ... insert application event initialization here ...
27+
28+
super.init();
29+
30+
// ... insert component data initialization here ...
31+
32+
const items = ['A', 'B', 'C']; // items
33+
const selVal = 'B'; // default selected value
34+
35+
appendComboBoxItems(this.select, items, selVal);
36+
}
37+
38+
deInit() {
39+
super.deInit();
40+
}
41+
42+
_handle(e) {
43+
const newVal = e.target.options[e.target.selectedIndex].text;
44+
// ...
45+
}
46+
47+
_handleFocus(e) {
48+
// ...
49+
}
50+
51+
// ...
52+
}
53+
54+
Plugins.catalogize(puiButtonSelectNew);
55+
56+
```
57+
58+
- The **this.DEFAULT_KEY_CFG_** lines can be removed if you want to rely solely on the configuration from the file. However, considering the automatic documentation of objects in the plugin, I recommend leaving them.
59+
60+
## Functionality description
61+
62+
- **appendComboBoxItems** adds a set of items to the selection box. Indexes are assigned from 0
63+
- **e.target.selectedIndex** index of the selected item
64+
- **e.target.options\[e.target.selectedIndex\].text** text of the selected item
65+
- **this.select.options.length = 0** deletes the items in the selection box
66+
- **_handleFocus** action before opening the list of possible options
67+
- **this.select** contains a link to the created selection list
68+
- **e** represents JavaScript system events
69+
- **sendEvent('ButtonSelectIconSet', (x) => {x.payload = '🖥️'; id = '';});** changes the button icon to 🖥️
70+
71+
## Implementation examples
72+
73+
- 🖥️ [puiButtonSelectSkin][puiButtonSelectSkin] and other descendants of the class 🖥️ [puiButtonSelect][puiButtonSelect]
74+
75+
[puiButton]: puiButton.md#h-2-1 "puiButton"
76+
[puiButtonSelect]: :_plg:puiButtonSelect.md "puiButtonSelect"
77+
[puiButtonSelectSkin]: :_plg:puiButtonSelectSkin.md "puiButtonSelectSkin"

‎en/tree.lst‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Plugin implementation|Plugin implementation||implPlug.md
1818
🖥️ puiButton|puiButton||puiButton.md
1919
🖥️ puiButtonTab|puiButtonTab||puiButtonTab.md
2020
🖥️ puiButtonTabTree|puiButtonTabTree||puiButtonTabTree.md
21+
🖥️ puiButtonSelect|puiButtonSelect||puiButtonSelect.md
2122
🔌 pConvertSysEventToEvent|pConvertSysEventToEvent||pConvertSysEventToEvent.md
2223
🖼️ pTRPhasePlugin|pTRPhasePlugin||pTRPhasePlugin.md
2324
🖼️ pTopicRenderer|pTopicRenderer||pTopicRenderer.md

0 commit comments

Comments
 (0)