Promotic
WikipediaLinkedInYoutubeTwitterFacebook

Vytváření vizuální části aplikace

Aplikaci, kterou jste doposud vytvořili, již lze spustit. Spuštěná aplikace obsahuje objektové proměnné "Temperature", "Power" a Status kotle, ale uživatel žádnou z těchto informací nemůže vidět, což je samozřejmě u vizualizační aplikace vážný nedostatek. Dále tedy vytvoříte grafický panel kotle, který bude vizuálně zobrazovat zvolené informace a ovládací objekty.
 
Vytvoření grafického obrazu:
 
Do složky "Boiler1" přidejte již známým postupem nový objekt typu "PmaPanel – Uživatelská grafika" a nazvěte ho "Panel". Objekt tohoto typu bude ve stromu Pma objektů "zastupovat" grafickou podobu obrazu. Text zadaný v konfigurátoru "Titul obrazu" uvidí uživatel v seznamu obrazů aplikace. Do titulu obrazu proto zadejte například text: Panel of boiler no. 1. Text zadaný v konfigurátoru "Identifikátor Web komponenty" určuje jedinečný název webowé stránky obrazu v rámci celé aplikace. Do identifikátoru Web komponenty zadejte například text: boiler1panel. Další konfigurátory ponechejte beze změny.
 
 
Vytvoření grafické podoby obrazu:
 
Již jste definovali, jak se obraz bude jmenovat, nyní však musíte určit, jak bude obraz skutečně vypadat, tzn. jaké bude zobrazovat texty, data nebo obrázky, jaké budou barvy, velikosti, atd.

Toto se provádí v kartě "Grafika", která slouží jako editor grafiky obrazu PmaPanel. Do tohoto obrazu (který je na začátku prázdný) budete nyní umisťovat Pmg objekty.

 
 
Vytvoření prvního Pmg objektu pro číselné zobrazování výkonu:
 
Dvojklikem myší do prázdné plochy obrazu nebo po stisku tlačítka zobrazíte okno nabízející paletu Pmg objektů. Toto okno se skládá z levé a pravé části.
 
 
Vlevo vidíte seznam skupin Pmg objektů, vpravo je seznam konkrétních konfigurací Pmg objektu daného typu.

Vyberte "Reálné číslo s pozadím" a v konfigurátoru "Název objektu" napište temperature.

 
Po zvolení Pmg objektu v konfiguračním okně nastavte jeho základní parametry a následně umístěte pomocí navigačního kříže.

Pohybem myši zvolíte umístění Pmg objektu do plochy obrazu. Stiskněte a držte levé tlačítko myši a následným tažením zvolte jeho velikost. Poté uvolněte tlačítko myši.

 
 
 
 
Zároveň se objekt "vybere", tzn. na jeho hranách a rozích je 8 malých modrých čtverců. Pomocí těchto čtverců můžete objekt dále libovolně natahovat (měnit velikost), případně můžete celý objekt přesouvat.
 
Poznámka: Pokud chcete objekt smazat, pak vyberte aktivní Pmg objekt a stiskněte klávesu Delete.
 
Pmg objekt je umístěn, je však potřeba nastavit některé jeho další vlastnosti, zejména pak data, která má zobrazovat. Implicitně tento objekt zobrazuje statickou hodnotu "50.5", my však potřebujeme aby zobrazoval číslo, které představuje teplotu kotle.
 
Editování vlastností vytvořeného Pmg objektu:
 
Dvojklikem myší na zvolený objekt zobrazíte editor grafiky obrazu PmaPanel.
 
 
Vlevo se nachází strom objektů daného obrazu, vpravo konfigurátory aktivního objektu.
 
Mnoho konfigurátorů má v řádku vedle svého názvu tlačítko "dynamické" datové vazby a za ním (vpravo) je zadavatel statické hodnoty.
 
Poznámka: Pro názornost je do obrázku přidána červená linie oddělující levou (dynamickou) a pravou (statickou) část konfigurátorů.
 
Pomocí statických konfigurátorů je možné trvale definovat vybrané hodnoty nebo vlastnosti, například barva, text, atd. Dynamické datové vazby umožňují navázání hodnoty/vlastnosti na konkrétní proměnné v aplikaci.
 
Abychom zajistili zobrazení hodnoty teploty kotle, je nutno navázat obsah pole text na proměnnou obsahující tuto hodnotu. Proto v konfigurátoru "Hodnota" použijete tlačítko datové vazby.
 
Vytvořením datové vazby zajistíte, že se určitá vlastnost Pmg objektu mění v závislosti na hodnotě napojené proměnné. Implicitně se každý grafický obraz (a tím i Pmg objekt) překresluje 2x za sekundu (lze změnit v objektu PmaRoot v kartě "Aplikace" v konfigurátoru "Perioda časovače obrazů"). Pmg objekt při svém překreslování vždy z datové vazby zjistí novou hodnotu vlastnosti a přizpůsobí se jí.
 
Zvolte datovou vazbu PP - Datová vazba na vlastnost Pma objektu. V konfigurátoru "Objekt" vyberte proměnnou (objekt) s názvem "Temperature". Zatrhněte konfigurátor "Relativní cesta vzhledem k:".
 
Poznámka: Cestu k objektu "Temperature" je možné zadat absolutně nebo relativně. V našem případě je lepší zadat relativní cestu. Díky tomu bude možné složku Boiler1 například zkopírovat a datová vazba vazba bude stále navázána na správná data. V případě absolutní cesty by zůstal odkaz vždy na proměnnou Temperature v "Boiler1".
 
Tímto jste vytvořili datovou vazbu mezi konfigurátorem objektu PmgNumber a vlastností Value (hodnotou) proměnné "Temperature". V tlačítku datové vazby je nyní napsáno "PP", což indikuje, že daný konfigurátor je napojen na vlastnost Pma objektu. Vše potvrďte tlačítkem OK.
 
 
Vytvoření Pmg objektů pro zobrazení hodnoty proměnné:
 
Hodnotu proměnné můžete zobrazit nejen textově, ale také graficky. Vytvořte nový objekt složený typu Sloupec (PmgBarPane). V konfigurátoru "Název objektu" napište temperature1 a v konfigurátoru "Nadpis" napište Temperature.
 
 
Složené Pmg objekty je možné editovat dvěmi způsoby:
1. Stikněte tlačítko v nástrojové liště a následně vyberte požadovaný podobjekt.
2. Dvojklikem myší na zvolený objekt zobrazíte Editor Pmg objektů. V jeho stromu "rozbalte" složený Pmg objekt a následně vyberte konkrétní podobjekt.
 
Datovou vazbu pro změnu výšky sloupce vytvoříte podobně jako vazbu pro textové pole.
 
 
Vytvoření Pmg objektů pro zadávání hodnoty proměnné:
 
Ve stejném obraze nyní vytvoříte Pmg objekt, pomocí kterého lze zadat hodnotu výkonu. Pmg objekt pro zadání hodnoty nyní vytvoříte kopírováním již existujícího Pmg objektu:
 
- kliknutím myši vyberte objekt PmgNumber, který chcete kopírovat
- Stiskněte klávesu Ctrl (tzn. operace kopírování), kurzor myši nastavte na vybraný objekt, stiskněte levé tlačítko myši a táhněte myší na místo, kam chcete umístit nový objekt. Kopírovaný objekt je umístěn po uvolnění stisku tlačítka myši.
- V kartě "Objekt", v konfigurátoru "Název objektu" napište power.
- Tento objekt nyní nastavte pro možnost vkládání hodnot. Typ editace: Editace na místě hodnoty.
 
 
Datovou vazbu vytvořte podobně jako u předchozích Pmg objektů a napojte tento objekt na proměnnou "Power".
 
V okně výběru Pmg objektů nyní ve skupině "Táhlo (PmgSlider)" vyberte položku Táhlo se stupnicí" (objekt typu PmgSliderPane). V konfigurátoru "Název objektu" napište power1 a nazvěte ho "Power".
 
 
Datovou vazbu vytvořte stejně jako u předchozích Pmg objektů a napojte tento objekt (v konfigurátoru "PmgSlider > Slider > Hodnota") na proměnnou "Power".
 
 
Veškeré změny v editoru grafiky potvrďte tlačítkem
© MICROSYS, spol. s r. o.Tavičská 845/21 703 00 Ostrava-Vítkovice