text generátor button (messeage type, two elements one widget)

Jednoho dne se stane, že si budeme chtít zobrazit či posílat text, protože né vše se dá vyjádřit v číslech.

myšlenka:

Pro pozdější užití, veškeré možnosti co můžeme dostat do "messeage" jsou:

let textOutput = context.inputs.add("textMsgOut","message","text sender",["string","float","boolean","integer"]);

Ale protentokrát si vystačíme jenom se string.

V tomto návodu si uděláme tlačítko, které přijme hodnotu, ukáže jí, a při kliknutí na něj pošle jeho upravenou hodnotu Založíme si nový Widget a pojmenujeme ho např text display/sender.

Úvodní řádky kódu:

Začneme se vstupem a výstupem

let textInput = context.inputs.add("textMsgIn", "message", "text input", ["string"]);
let textOutput = context.outputs.add("textMsgOut", "message", "text output", ["string"]);

Messeage type je poněkud specifická, a to tím, že je třeba jako poslední argument vypsat do pole všechny hodnoty co se budou posílat. (seznam všech možných hodnot je vypsán výše). Počet prvků v poli by měl být dostatečný pro všechny případy.

Nesmíme samozřejmě zapomenout na sizeProfiles

context.addSizeProfiles(2, 2, 10, 10);

Protože v tomto návodu chci složit Widget ze dvou elementů, kterům budu nastavovat barvu, připravím si configProperities

let bcColor = context.configProperties.add("backElementColor", "color", "color of backgrnd element", "#FFFFFF");
let bcTextColor = context.configProperties.add("backElementTextColor", "color", "color of backgrnd text", "#001F4F");

let fcColor = context.configProperties.add("frontElementColor", "color", "color of front element", "#BFBFBF");
let fcTextColor = context.configProperties.add("frontElementIconColor", "color", "color of icon", "#000000");

let fcIcon = context.configProperties.add("Icon", "fa-icon", "Icon", "fa-paper-plane");

background element a jeho stylyzace

přidáme "background" alement, na kterém budeme vykreslovat přijatý text (a později na něj dáme tlačítko)

let backPan = new WK.Label(context, "awaiting");

nastylujeme ho a přidáme

backPan.style.background = bcColor.value; //z config property
backPan.style.color = bcTextColor.value; 

backPan.style.fontSize = "22"; 
backPan.style.horizontalAlign = "center";
backPan.style.verticalAlign = "top"; //text chceme vykreslovat nad tlačítkem

backPan.style.width = "100%";
backPan.style.height = "100%";
backPan.style.radius = "5"; //zakulatíme rohy elementu, vyšší číslo = vyšší kulatost

context.root.add(backPan);

Při testu dostaneme něco takového:

tlačítko (vrchní element) a jeho stylizace:

Nyní přidáme druhý element, tlačítko. Postup je pořád stejný

let button = new WK.Button(context, "[fa]" + fcIcon.value + "[/]");

button.style.background = fcColor.value;
button.style.color = fcTextColor.value;

button.style.fontSize = "18";
button.style.horizontalAlign = "center";
button.style.lineHeight = "100vh";

button.style.originX = "0.5"; //tímto nastavíme aby se element vytvořil "uprostřed"
button.style.originY = "0.5";
button.style.x = "50%"; //tímto element posuneme tak, aby byl opravdu ve středu
button.style.y = "50%";

button.style.width = "50%"; 
button.style.height = "50%";

button.style.border = "#121212 1px"; //nastavení "ohraničení" elementu, první hodnota jest barva, druhá tloušťka

context.root.add(button);

Pokud teď klikneme na test, uzřeme něco podobného tomuto

interaktivita:

Pokud ale změníme cokoliv v configuration, nic se nestane. Proto přidáme event-listener na změny v nastavení

context.configProperties.listenEvent("valueChanged", e => {
    backPan.style.background = bcColor.value;
    backPan.style.color = bcTextColor.value;
    button.style.background = fcColor.value;
    button.style.color = fcTextColor.value;
    button.text = "[fa]" + fcIcon.value + "[/]";
});

Toto při každé změně v configu, aktualizuje všechny hodnoty. Mužeme samozřejmě poslouchat jednotlivé configy a pravovat pouze tu danou hodnotu, co se změní, např.

bcColor.listenEvent("valueChanged", e=>{
    backPan.style.background = bcColor.value;
})

změna velikosti textu apod.:

Doděláme zbytek drobností jako například dynamickou velikost textu a prostřední ikony:

backPan.listenEvent("resize", e => {
    backPan.style.fontSize = (backPan.visibleRect.size.height * 0.20) + "px";
});

U backPan měníme velikost textu na dvacet procent výšky celého backPan, kvůli tomu, že máme ještě tlačítko uprostřed, jenž by zakrylo text.

button.listenEvent("resize", e => {
    button.style.fontSize = button.visibleRect.size.height * 0.8 + "px";
});

Připomínám, že visibleRect vrací údaje v pixelech.

Výhodou Resize je že se automaticky zavolá při spuštění testu.

Tlačítko by nyní mělo být schopno měnit velikost textu a ikonky, dle naší vůle

interakce s uživatelem:

Vrhneme se na poslední část, Interaktivitu s uživatelem.

Nejprve začneme měnit text dle vstupu, samozřejmě čím jiným, než listenerem

textInput.listenEvent("messageReceived", e => {
    backPan.text = e.message.values[0];
});

S messeage pracujeme jako s polem, pořadí jsme si určili již na začátku v posledním argumentu v input/output. Protože víme, že první věc v poli je string (a pouze string), rovnou si ho vypíšeme.

Ještě přidáme to, že při kliknutí na tlačítko uprostřed pošleme poslední zprávu co nám přišla z inputu a přidáme k ní text.

button.listenEvent("mousedown", e => {
    if (button.isHover) {
        let text = "";
        text += textInput.lastMessage.values[0]; //https://youtrack.byzance.cz/youtrack/issue/GRID-25
        text += ".Byz";
    }
});

button.isHover kontroluje, zda je kurzor opravdu nad daným elementem, bez něj reaguje automaticky na mouse.down. TODO: kvůli chybě v gridu je teďka zapotřebí si v listeneru "messeageRecived" uložit bokem získaný objekt pro pozdější práci s ním

závěr:

Klikneme na test a otestujeme tlačitko na všechny způsoby.