Návrh prvků uživatelského rozhraní ve vývojovém prostředí Processing
Bakalářská práce
Studijní program: B2646 – Informační technologie Studijní obor: 1802R007 – Informační technologie Autor práce: Václav Dub
Vedoucí práce: Ing. Tomáš Martinec, Ph.D.
Grafic user interface in Processing development environment
Bachelor thesis
Study programme: B2646 – Information Technology Study branch: 1802R007 – Information Technology
Author: Václav Dub
Supervisor: Ing. Tomáš Martinec, Ph.D.
Poděkování
Rád bych poděkoval vedoucímu bakalářské práce Ing. Tomáši Martincovi, Ph.D.
za odborné vedení, ochotu a cenné připomínky, které přispěly ke zpracování této bakalářské práce. Dále mé poděkování patří přítelkyni a celé rodině za pomoc, podporu a trpělivost během celého mého studia.
Abstrakt
Cílem této práce je seznámit se s multiplatformním vývojovým prostředím Processing, volně dostupnými knihovnami a příklady standardních grafických prvků uživatelského rozhraní pro OS Windows a Android. Prostudovat strukturu zvolených knihoven a navrhnout vlastní multiplatformní knihovnu. Poté vytvořit jeden vlastní pokročilý grafický prvek fungující na OS Windows i Android. Výsledkem je vlastní návrh knihovny, její naprogramování, dokumentace k vytvořené knihovně a sada příkladů základního použití.
Klíčová slova
Processing, grafické prvky, Java, Android, VCL, multiplatformní, knihovna
Abstract
The aim of this paper is to introduce the multi-platform development environment Processing, freely available libraries and examples of standard graphic elements of theuser interface for Windows OS and Android. Study the structure of selected libraries and design my own multiplatform library. Then create a custom advanced graphic element that works on both Windows and Android. The result is a design of library, the programming code, documentation to the library and a set of examples.
Key words
Processing, graphic elements, Java, Android, VCL, multiplatform, library
Obsah
Úvod...9
1 Vývojové prostředí Procesing...10
1.1 Popis prostředí...10
1.2 Základní program a funkce...12
2 Knihovny grafických prvků uživatelského rozhraní...13
2.1 Přehled volně dostupných knihoven...13
2.2 Grafická knihovna Guido...13
2.3 Grafická knihovna G4P...14
2.4 Grafická knihovna ControlP5...20
3 Grafické nástroje pro Windows a Android...26
3.1 Grafické prvky Turbo Vision...26
3.2 Grafické prvky prostředí Delphi...27
3.3 Knihovna grafických komponent pro Android...29
4 Návrh knihovny grafických prvků...31
4.1 Uspořádání tříd...31
4.2 Vytváření a zpracovávání událostí...33
5 Příklady grafických prvků vytvořené knihovny...34
5.1 Label...34
5.2 Button...34
5.3 Graph...36
6 Závěr...37
Použitá literatura...38
Příloha – obsah přiloženého CD...39
Seznam ilustrací
Ilustrace 1: Vývojové prostředí Processing - Sketchbook...10
Ilustrace 2: Contribution Manager - Doinstalován Android Mode...11
Ilustrace 3: Contribution Manager - přehled GUI knihoven...13
Ilustrace 4: Grafická knihovna Guido - příklad použití prvku Button...14
Ilustrace 5: G4P - struktura tříd v knihovně...15
Ilustrace 6: G4P knihovna - ukázka použití několika textových prvků...20
Ilustrace 7: ControlP5 - struktura tříd knihovny...21
Ilustrace 8: ControlP5 - příklad použití prvků z knihovny...24
Ilustrace 9: Turbo Vision - struktura tříd...26
Ilustrace 10: VCL v Delphi - základní struktura tříd [4]...28
Ilustrace 11: Android View základní struktura [5]...29
Ilustrace 12: Android - ukázka aplikace...30
Ilustrace 13: Základní struktura tříd vytvořené knihovny...32
Ilustrace 14: Ukázka aplikace s objekty třídy Label...34
Ilustrace 15: Ukázka aplikace tvořící tlačítka...35
Ilustrace 16: Aplikace zobrazující dva grafy...36
Úvod
V dnešní době, kdy většina lidí vlastní osobní počítač, notebook, tablet nebo mobilní telefon s operačním systémem Windows Phone nebo Android, programování stále více proniká i mezi obyčejné uživatele a vytvořit jednoduchý program zvládne v krátké době téměř každý.
Existuje velké množství programovacích jazyků, mezi nejrozšířenější patří např. Java, C, C#, použitých ve většině zařízení okolo nás. Stejně jako je na výběr z velkého množství programovacích jazyků, existuje i velké množství vývojových prostředí.
Trendem současné doby jsou nástroje na vývoj prototypů požadovaných aplikací v co nejkratším čase, nástroje pro výuku programování a pro domácí kutily.
Kvůli významnému časovému zrychlení a zjednodušení vývoje se používají ve velké míře knihovny dostupné s vývojovým kitem a volně stažitelné na internetu. Proto nemá smysl znovu vytvářet to, co již udělal někdo jiný. Programátor tedy nepíše pracně a zbytečně celý svůj program, ale sestavuje jej z již hotových dostupných bloků a k psaní složitého kódu se uchyluje pouze, pokud potřebná knihovna není k dispozici.
Mým cílem je takovéto zjednodušení práce všem programátorům ve vývojovém prostředí Processing, kteří budou chtít ve své multiplatformní aplikaci použít již hotové grafické prvky uživatelského rozhraní.
V první části mé bakalářské práce je krátce popsáno vývojové prostředí Processing a dostupné knihovny prvků, dále zde představuji strukturu standardních uživatelských prvků v Turbo Vision pro DOS, Delphi a systému Andriod. Druhá část práce je zaměřena na vlastní návrh multiplatformní struktury prvků uživatelského rozhraní vhodného pro OS Windows i Android a popis konkrétní implementace ve vývojovém prostředí Processing.
1 Vývojové prostředí Procesing
1.1 Popis prostředí
Multiplatformní vývojové prostředí vzniklo v roce 2001 jako snaha zlepšit výuku programování, udělat z programování aplikací přímočařejší proces, bez nutnosti programovat velké množství kódu, a jednodušší proces vytvořením balíčku metod napsaných v jazyce Java.
Vývojová prostředí jako Visual Studio a Eclipse jsou pro cílovou skupinu, do které patří desítky tisíc studentů, umělců, designerů, výzkumných pracovníků a domácích kutilů zbytečně složitá a matoucí a k vytvoření programu je nepotřebují. Vznikl tedy nový editor, který autoři nazývají sketchbook, Ilustrace 1.
V levé horní části jsou k dispozici dvě kulatá tlačítka. První je určeno pro zkompilování a následnému spuštění programu a druhé k zastavení spuštěné aplikace.
Ilustrace 1: Vývojové prostředí Processing - Sketchbook
Po kliknutí na tlačítko v pravém horním rohu se objeví nabídka, Ilustrace 2, s možností přepínat režimy programování Java Mode, Android Mode, Python Mode for Processing 3. Po nainstalování a prvním spuštění prostředí Processing je k dispozici pouze Java Mode a ostatní je možné pomocí pár kliknutí stáhnout a doinstalovat.
Kód programu se píše do bílé části ve středu okna a výstup konzole, případně chybové hlášení najdeme ve spodní části. Za zmínku stojí také kulaté tlačítko v pravém horním rohu, které slouží k zapínání a vypínání debugovacího režimu, které se poprvé objevilo až v aktuální verzi, tedy ve verzi 3. Po stisknutí tlačítka se ukáže „watcher“, okno, do kterého je možné přidávat proměnné programu, a v hlavním okně se objeví další dvě tlačítka, jejichž pomocí je možné program krokovat.
Ilustrace 2: Contribution Manager - Doinstalován Android Mode
1.2 Základní program a funkce
Každý program napsaný a spuštěný ve vývojovém prostředí Processing může obsahovat dvě hlavní funkce. Obě jsou typu void. První funkce void setup() je zavolána pouze jednou po spuštění programu a slouží i k inicializaci proměnných, nastavení velikosti okna, pozadí aplikace, načtení obrázků a podobně. Druhá funkce void draw() je volána opakovaně hned po void setup(), a je určena pro kód programu, který se ve smyčce neustále opakuje, dokud není program zastaven nebo není zavoláno noLoop(). Obě funkce se mohou vyskytovat v programu pouze jednou, spouští se automaticky a v programu by neměly být volány.
Program je možné psát přímo v jazyce Java nebo lze využít velké množství funkcí vytvořených komunitou vývojářů ke zjednodušení programování. Obsáhlý seznam těchto funkcí nalezneme na stránce vývojového prostředí Processing pod označením Reference [1].
2 Knihovny grafických prvků uživatelského rozhraní
2.1 Přehled volně dostupných knihoven
Vývojové prostředí Processing obsahuje již jednou zmíněný Contribution Manager, Ilustrace 3, ve kterém je možné pod záložkou Libraries vyhledávat dostupné knihovny a rovnou je uložit na lokální disk a importovat do projektu. Po zadání hesla „gui“, vyhledávač najde několik knihoven, mezi kterými je možné vybírat.
2.2 Grafická knihovna Guido
Nejjednodušší a nejméně obsáhlá knihovna, z dostupných ke stažení, je knihovna Guido, jenž obsahuje pouze malé množství prvků, mezi které patří Button, CheckBox, List a Slider.
Ilustrace 3: Contribution Manager - přehled GUI knihoven
Prvky jsou použitelné pouze v OS Windows. Na mobilním telefonu s operačním systémem Android dostupné příklady nefungují. Důvodem je implementace nepřenositelných knihoven při tvorbě Guido knihovny. K dispozici není žádná dokumentace a informace je nutné získat z několika příkladů, které se nainstalují spolu s knihovnou.
Na obrázku, Ilustrace 4, je zobrazen příklad použití prvku Button v šachovnici 10x10 tlačítek. Po stisku určitého tlačítka se přepne jeho barva.
2.3 Grafická knihovna G4P
Tato knihovna obsahuje bohatou kolekci grafických prvků, mezi které patří Label, Button, Image Button, Checkbox, Droplist, Slider, TextField, TextArea, Panel, Timer a mnoho dalších.
Knihovna je použitelná na OS Windows a nepodporuje mobilní platformu Android.
Ilustrace 4: Grafická knihovna Guido - příklad použití prvku Button
Na oficiálních stránkách knihovny G4P [2] je k dispozici rozsáhlá dokumentace a možnost stažení GUI Builder Tool. Jedná se o grafické prostředí určené pro rychlé vytvoření a editaci uživatelských rozhraní pomocí prvků z G4P knihovny. Do hlavního okna se stylem drag and drop vkládají grafické prvky, ke kterým je dále možné nastavit základní atributy. GUI Builder Tool následně vygeneruje metody pro zachytávání událostí každého prvku.
Následuje schéma struktury tříd grafické knihovny G4P, Ilustrace 5, doprovázené krátkým popisem nejzákladnějších tříd a jejich metod.
Společným předkem všech grafických prvků je v této knihovně třída GabstractControl. Jsou v ní definovány základní konstruktory a tyto metody:
Ilustrace 5: G4P - struktura tříd v knihovně
• addControl(), metoda pro přidání prvku
• addEventHandler(), u komponenty zaregistruje základní odchycení události
• getPApplet(), vrátí Papplet, který spravuje komponentu
• dispose(), zruší všechny odkazy na prvek v knihovně
• getParent(), vrátí rodičovský prvek
• getCX(), getCY(), getX(), getY(), vrátí pozici středu a horního levého rohu prvku
• metody na získání výšky a šířky prvku, nastavení viditelnosti, průhlednosti, posunu prvku a další
Třída určená k seskupování grafických prvků do skupin je třída GGroup. Prvky zařazené do GGroup jsou dále obsluhovány jako samostatná jednotka. Pomocí jediné metody zavolané na objekt třídy GGroup lze nastavit enable status, viditelnost, průhlednost a další parametry všech prvků v objektu přiřazených. Má definovány tři konstruktory a skupinu metod:
• addControl(), přidá G4P ovládací prvek do skupiny
• removeControl(), odebere prvek ze skupiny
• setEnabled(), setVisible(), nastaví enable a visible parametr
• fadeIn(), fadeOut(), fadeTo(), mění alpha hodnotu prvku
Tlačítko vytvořené z třídy GImageButton používá k reprezentaci stavu až tři obrázky, ke každé události stisknuto, uvolněno a kliknuto jeden. Třída tlačítka obsahuje konstruktory a tyto metody:
• draw(), slouží na vykreslení tlačítka
• fireAllEvents(), zapíná generování všech tří událostí u tlačítka, ve výchozím stavu tlačítko generuje pouze událost kliknutí
• mouseEvent(), po kliknutí na tlačítko generuje událost kliknutí
• setEnabled(), nastavuje schopnost tlačítka generovat událost
Prvek vytvořený z třídy GPassword slouží k zadávání skrytých hodnot. Znaky jsou nahrazovány „#” a není podporováno kopírování ani vkládání textu. Prvek vyvolá událost při změně a vložení obsahu nebo pokud dostane a ztratí focus. Mimo jiné obsahuje tyto metody:
• draw(), vykreslení pole
• getPassword(), vrátí aktuální heslo v poli
• getWordLength(), vrátí aktuální délku zadaného hesla
• keyEvent(), mouseEvent(), generují události popsané v odstavci výše
• setFont(), nastaví písmo použité v prvku
• setMaxWordLength(), nastaví maximální délku hesla
GSketchPad slouží jako zobrazovací plocha pro uživatelem vytvořenou grafiku. Třída obsahuje pouze jeden konstruktor a dvě metody:
• draw(), použitá na vykreslení prvku
• setGraphic(), přiřadí grafiku k prvku
Jedna ze zajímavých tříd je GStick. Prvek slouží jako simulace digitálního joysticku.
Lze nastavit na rozeznávání čtyři nebo osm směrů. Jako každý vykreslitelný prvek obsahuje metodu draw() a metody:
• getPosition(), vrací aktuální pozici joysticku číslem od 1 do 7 nebo -1 pro střed
• getStickX(), getStickY(), vrátí X a Y souřadnici
• mouseEvent(), generuje události prvku
• setMode(), nastavuje joystick na 4 nebo 8 směrů
GTextBase je základní třídou pro grafické prvky používající text. Definuje metody pro práci s textem:
• getText(), vrátí text prvku
• loadText(), saveText(), načte a uloží text do souboru
• setFont(), setText(), nastaví písmo a text prvku
• setTextBold(), nastaví tučné písmo
• setTextItalic(), nastaví kurzívu
GDropList slouží jako vyskakovací list. Počet řádků není omezen, ale programátor má právo nastavit maximální velikost. Mimo konstruktor jsou definovány metody:
• addItem(), přidá položku na konec listu
• getSelectedIndex(), getSelectedText(), vrátí index a text vybraného prvku
• insertItem(), vloží položku na určenou pozici
• removeItem(), odstraní položku v listu
• setSelected(), nastaví aktuálně vybranou položku v GDropListu pomocí indexu GTextArea a GTextField dovolují uživateli zadat a editovat text. V prvním případě slouží prvek na víceřádkový text, zatímco GTextField je pouze pro jednotlivý řádek textu. Prvky umí vyvolat události při výběru textu, změně textu, vložení textu, a získání a ztrátě fokusu. Třídy obsahují velké množství metod na práci s textem.
GButton prvek je velice podobný prvku GimageButton. Volá stejné události a obsahuje stejné metody. Rozdíl je v zobrazení tlačítka, kdy GButton tlačítko obsahuje text, obrázek nebo obojí.
GLabel zobrazí text a může obsahovat ikonu. Třída obsahuje konstruktor a jedinou metodu draw() k vykreslení prvku.
GToggleButton je základní třídou pro všechny dvoustavové prvky. Stavy prvků jsou
„selected“ a „not selected“. Třída obsahuje tyto metody:
• isSelected(), vrací true/false podle stavu prvku
• setSelected(), nastaví stav prvku
GCheckbox a GOption prvky jsou dvoustavové přepínače, jejichž stavy jsou nezávislé na ostatních přepínačích. Po přidání do GToggleGroup prvku se z GOption stane skupina na sobě závislých přepínačů.
GValueControl je základní třída pro všechny posuvníky.
• setLimits(), nastaví rozsah vracených hodnot
• setNbrTicks(), nastaví počet stavů mezi limity
• setNumberFormat(), k určení formátu čísla, přesnosti a jednotek
• setValue(), nastaví hodnotu posuvníku
• ke všem těmto metodám také existují metody na získání parametru, getEndLimit(), getNbrTicks(), getPrecision(), getValueF(), getValueI()
GSlider je jednoduchý posuvník. Lze posouvat tažením nebo kliknutím na dráhu posuvníku.
GCustomSlider je posuvník s upravitelnou grafikou. Knihovna obsahuje několik přednastavených vzhledů a třída obsahuje jednu metodu:
• setStyle(), změní vzhled na zvolený dostupný v knihovně, pokud se nepovede načtení, zobrazí se defaultní vzhled, stejný jako v případě GSlideru
GTabManager umožňuje přepínání mezi prvky pomocí TAB klávesy. Toto lze použít jen u prvků tříd GTextField a GTextArea. Jedno z možných použití je při tvorbě formulářů, kdy lze jednoduše přepínat mezi poli na zadávání textu. Třída obsahuje metody:
• addControl(), přidá textový prvek do tab manageru
• removeControl(), odebere prvek
GTimer prvek slouží ke spouštění události v časech definovaných uživatelem.
• start(), stop(), spustí a zastaví časovač
• setInterval(), getInterval(), nastavuje a vrací časové rozmezí mezi dvěma událostmi
• isValid(), isRunning(), slouží k potvrzení úspěšného vytvoření časovače a zjištění, zda časovač běží nebo je zastaven
Na obrázku, Ilustrace 6, je ukázka použití knihovny G4P. V levé horní části se nachází prvek GTextField, pod ním je GLabel a GPassword. Ve spodním rohu leží GTextArea.
Na pravé straně je k vidění také GTextField a GTextArea, ale jsou obohaceny posuvníky. Všech pět prvků, do kterých lze zadat text, je propojeno pomocí GTabManageru a pořadí, v jakém v nich můžeme přepínat pomocí klávesy TAB je zobrazeno černou čárou.
2.4 Grafická knihovna ControlP5
Třetí zmíněná knihovna ControlP5, Ilustrace 7, obsahuje největší počet dostupných grafických prvků. Vyskytuje se zde minimální dědičnost mezi třídami a většina tříd je potomkem třídy java.lang.Object.
Ilustrace 6: G4P knihovna - ukázka použití několika textových prvků
Controller je hlavní třída, jejímž zděděním vznikla naprostá většina prvků dostupných v této knihovně. Patří sem tlačítko, lišta tlačítek, graf, barevný tvar, vysunovací list, ikona, listbox, matice, posuvník, textové pole a mhono dalších.
Každá událost vyvolaná grafickým prvkem je předáná hlavnímu programu, a pokud je dostupná metoda controlEvent() s parametrem event, je hned zavolána.
Třída obsahuje konstruktor a definuje všechny metody, které mohou použít grafické prvky. V současné době jich je v třídě implementováno přes 160 a proto zde zmíním jen ty nejdůležitější nebo nejzajímavější.
• addCallback(), přidá CallbackListener
• addListener(), přidá objekt ControlListener
• getAbsolutePosition(), getPosition(), vrátí pole obsahující pozici prvku Ilustrace 7: ControlP5 - struktura tříd knihovny
• getParent(), vrátí rodiče prvku
• isMouseOver(), isMousePressed(), zjistí, zda je myš na prvku nebo má stlačené tlačítko
• seznam událostí, které mohou být vyvolány:
◦ onChange(), po změně prvku
◦ onClick(), při kliknutí
◦ onDoublePress(), při dvojkliknutí
◦ onDrag(), při táhnutí
◦ onDraw(), při vykreslení
◦ onEndDrag(), po ukončení posunu
◦ onEnter(), při najetí na prvek
◦ onLeave(), zavoláno po opuštění prvku kurzorem
◦ onMove(), při pohybu
◦ onPress(), po stisknutí
◦ onRelease(), po uvolnění
◦ onReleaseOutside(), při uvolnění mimo prvek
◦ onStartDrag(), začátek táhnutí prvku
◦ onWheel(), zavoláno po provedení akce kolečkem myši
• remove(), odebere prvek
• removeCallback(), removeListener(), slouží k odebrání CallbackListeneru a ControlListeneru
• metody na nastavení barev:
◦ setColor()
◦ setColorBackground()
◦ setColorForeground()
• unplugFrom(), odpojí Controller od objektu zadaného v parametru
Prvek třídy Bang volá událost po zmáčknutí a může být přiřazen pouze funkci v programu. Obsahuje metodu setTriggerEvent(), která nastaví událost, při níž je aktivován prvek. V základu je nastavena na stisknutí myši.
Button slouží k vytvoření tlačítka a volá jednu ze dvou událostí. K nastavení volané události slouží metoda activateBy() a podle parametru reaguje tlačítko na stisknutí nebo uvolnění. Tlačítko může sloužit i jako přepínač. Pro tento případ jsou k dispozici metody:
• setSwitch()
• setOff(), změní stav tlačítka na vypnuto
• setOn(), přepne stav na zapnuto
Objekt třídy Chart je čárový graf. Obsahuje metody k práci s daty a několik metod na nastavení grafiky prvku:
• addData(), addFirst(), addLast(), slouží na přidání dat na určité místo v grafu
• setData(), nastaví data na určitém místě
• removeData(), removeFirst(), removeLast(), odstraní data
• onEnter(), onLeave(), vyvolá událost při pohybu kurzoru
Třída Icon je velice podobná třídě Button s jediným rozdílem, že obsahuje několik metod k nastavení a práci s textem prvku.
Knob je kruhový posuvník, který lze ovládat jak myší, tak kolečkem. Obsahuje metody k nastavení tvaru a funkčnosti:
• setAngleRange(), nastavení rozsahu hodnot, mezi kterými se posuvník pohybuje
• setNumberOfTickMarks()
• setScrollSensitivity(), nastavení citlivosti rolování myší
• setTickMarkLength(), setTickMarkWeight(), nastavení značek jednotlivých skoků u posuvníku
ListBox je seznam vertikálně zarovnaných položek, kterými lze rolovat. Třída obsahuje metody na přidání a odebrání položek, nastavení viditelnosti, citlivosti rolování a další.
ScrollableList je obdoba ListBoxu s tím rozdílem, že všechny prvky jsou vidět až po rozkliknutí listu.
Objekt třídy Slider je vertikální nebo horizontální posuvník. Typ posuvníku se určuje podle rozměru. Je-li větším rozměrem výška prvku, vytvoří se vertikální posuvník, v opačném případě horizontální posuvník.
Na následujícím obrázku, Ilustrace 8, je příklad jednoduchého programu vytvořeného pomocí grafických prvků z knihovny ControlP5.
Pod barevným kruhem jsou vloženy do programu dva prvky Slider. V levém dolním rohu se nachází dvě tlačítka B1 a B2 a ve spodní pravé části je prvek třídy
Ilustrace 8: ControlP5 - příklad použití prvků z knihovny
ScrollableList. Pomocí metody ControlP5.isMouseOver() lze zjistit, zda se myš nachází na některém prvku zobrazeném v hlavním okně a jestli můžeme následně provést libovolnou akci.
3 Grafické nástroje pro Windows a Android
Není vhodné vynechat knihovny, které nejsou tvořeny pro vývojové prostředí Processing. Mají za sebou dlouhý vývoj a mohou být dobrou inspirací při vlastním návrhu. V následující části si stručně přiblížíme strukturu standardních grafických prvků uživatelského rozhraní v Turbo Vision, Delphi a prostředí Android.
3.1 Grafické prvky Turbo Vision
Turbo Vision je objektově orientovaná nadstavba jazyka Turbo Pascal 6.0. Umožňuje vytvářet grafické programy, které komunikují s uživatelem pomocí oken a prvků v nich, namísto příkazového řádku [3].
V předchozím obrázku, Ilustrace 9, nejsou zobrazeny dva primitivní objektové typy doplňující TObjekt. Jsou to TPoint a TRect. Nejsou zobrazitelné a všechny viditelné prvky je používají k uložení souřadnic.
TPoint obsahuje dvě datová pole X a Y, která slouží k uložení pozice na obrazovce.
Třída TRect je složena ze dvou datových polí TPoint. První pole definuje horní levý bod a druhé pole spodní pravý bod vzniklého obdélníka.
Ilustrace 9: Turbo Vision - struktura tříd
Základním abstraktním objektem je TObjekt, který je předkem všech ostatních.
Všechny zobrazitelné objekty jsou potomky třídy TView.
Z třídy TGoup vychází objekty, určené pro práci s více prvky. Třída TProgram je vzorem programu, od kterého by náš program měl být odvozen.
Z TView jsou přímo odvozené také objekty následujících tříd:
• TBackground, je objekt reprezentující barevný obdélník určený k nastavení pozadí
• TButton, slouží k vytvoření tlačítka volajícího událost kliknutí
• TCluster, abstraktní objekt umožňující spolupráci objektů TCheckBoxes a TRaddioButtons
• TFrame, objekt tvořící rám okna pro oddělení prvků na obraze
• TInputLine, prvek pro zadávání dat uživatelem
• TMenuView, je abstraktní objekt sloužící k vytvoření vodorovného (TMenuBar) a nebo svislého (TMenuBox) menu
• TScrollBar, objekt k vytvoření vodorovného nebo svislého posuvníku
• TStaticText, objekt, který má potomky TLabel a TParamText
3.2 Grafické prvky prostředí Delphi
Grafické vývojové prostředí Delphi, Ilustrace 10, firmy Borland je určené k vývoji aplikací pro OS Windows v jazyce Object Pascal, který je objektovou nástavbou jazyka Pascal.
Obsahuje nepřeberné množství komponent. Některé jsou součástí vývojového prostředí, jiné jsou volně ke stažení. Další možností je koupě od softwarových firem, které ve svých knihovnách nabízí stovky prvků uživatelského rozhraní.
Základním objektem je TObject. Z něj je odvozen objekt TPersistent, který obsahuje metody pro vytvoření streamovatelných objektů. To jsou objekty, jenž mohou být uloženy v paměti nebo na disku počítače.
Z TPersistent pochází potomek TComponent, který je společný všem komponentám.
Jeho přímý potomek TTimer nemůže být vizualizován. V třídě TControl je implementován kód pro zobrazení komponent.
Kvůli velkému množství dostupných komponent, bude na následujících řádcích uveden zlomek počtu prvků a jejich struktura.
TButton : TWinControl - TButtonControl - TCustomButton - TButton Ilustrace 10: VCL v Delphi - základní struktura tříd [4]
TStaticText : TWinControl - TCustomStaticText - TStaticText
TCheckBox : TWinControl - TButtonControl - TCustomCheckBox - TCheckBox TListBox : TWinCntrol - TCustomListControl - TCustomMultiSelectListControl - TCustomListBox - TListBox
3.3 Knihovna grafických komponent pro Android
Všechny grafické prvky mají za předchůdce třídu View, z níž jsou odvozeny ViewGroup, TextView, AnalogClock, ProgressBar, ImageView, SurfaceView a pár dalších, Ilustrace 11.
Mezi nejpoužívanější prvky patří Button a EditText, které jsou potomky TextView.
CheckBox a RadioButton vznikly rozšířením třídy CompoundButton a Button.
Úplně nové prvky mohou být vytvořeny rozšířením třídy View, přesněji android.view.View [6].
Na obrázku, Ilustrace 12, je jednoduchá aplikace na výpočet BMI indexu. V hlavním okně je vložen vertikální layout, který do něj vložené prvky zobrazí pod sebou na řádcích. V každém řádku je následně vložen horizontální layout, do něhož se vloží vždy jeden Label a EditText prvek. Pod nimi je umístěno tlačítko generující událost OnClick.
Ilustrace 12: Android - ukázka aplikace
4 Návrh knihovny grafických prvků
Hlavní důvod pro vývoj knihovny grafických prvků uživatelského rozhraní je požadavek na multiplatformní knihovnu. Grafické knihovny, dostupné ve vývojovém prostředí Porcessing, jsou tvořeny s použitím knihovny java.awt a javax.swing. To je důvod, proč je nelze použít při vývoji aplikací pro platformu Android.
Tato část mé bakalářské práce je zaměřena na vytvoření základní struktury knihovny použitelné na operačním systému Windows i Android.
4.1 Uspořádání tříd
Při návrhu jsem se inspiroval strukturou volně stažitelných knihoven G4P a ControlP5 a uzpůsobil je k jednoduššímu a intuitivnějšímu použití pro cílovou skupinu uživatelů vývojového prostředí Processing.
K návrhu abstraktních tříd mé knihovny, jsem použil podobnou strukturu, jakou má knihovna Delphi. Základním objektem je Component, který se dělí na objekty zobrazitelných komponent a ostatní komponenty. Nebylo nutné implementovat konkrétní prvky s tak hlubokou strukturou tříd. Z tohoto důvodu jsem použil jednoduché uspořádání podobné prvkům Android.
Za zmínku stojí i zajímavé a praktické uspořádání skupinových prvků do jednoho celku, jak je to navrženo v třídě TCluster jazyka Turbo Vision.
Na obrázku, Ilustrace 13, je zobrazena struktura tříd vytvořené knihovny.
Component je hlavní třída, ze které dědí všechny ostatní třídy sloužící k tvorbě komponent aplikace. Ty se dělí na zobrazitelné komponenty odvozené z třídy Control a ostatní, mezi které patří i třída Timer a další nezobrazitelné prvky.
Třída Control je rodičem všem objektům, které jsou zobrazitelné, mají určenou svou pozici v okně aplikace a také velikost. Třída obsahuje konstruktor pro zděděné objekty a základní metody:
• cursorOver(), používá proměnné mouseX a mouseY, dostupné z balíčku processing.core, v kterých je uložena aktuální pozice myši. Rozhodne, zda je myš uvnitř obdélníku, který ohraničuje prvek.
• drawBorder(), v případě, že je hodnota proměnné displayBorder true, vykreslí obdélník ohraničující prvek
• draw(), abstraktní metoda pro vykreslení prvku
• gettery a settery proměnných
◦ positionX, positionY, pozice levého horního rohu prvku
◦ sizeX, sizeY, velikost prvku
◦ text, text, který může být zobrazen u prvku
Ilustrace 13: Základní struktura tříd vytvořené knihovny
◦ color, objekt třídy RGB(int R, int G, int B), kde R, G a B mají rozsah 0-255
◦ textSize, velikost textu v pixelech
◦ displayBorder, boolean hodnota
4.2 Vytváření a zpracovávání událostí
Poté, co uživatel provede určitou akci, musí dojít k jejímu odchycení a uskutečnění odpovídající reakce. Toto je možné řešit více způsoby.
V mém návrhu jsem zvolil následující řešení. Využil jsem přenositelného balíčku processing.core a dostupných proměnných. Pro obsluhu myši jsou důležité proměnné mouseX, mouseY a mousePressed. V prvních dvou proměnných jsou uloženy aktuální souřadnice myši a proměnná mousePressed nás informuje o stavu tlačítka myši.
V hlavní smyčce programu, tedy metodě draw(), je stále dokola volána metoda objektu EventHandler.run(). V této metodě je implementováno odchytávání událostí. V závislosti na odchycené události je vytvořen objekt ActEvent, jeden z parametrů je objekt Event. Objekt Event v sobě uchovává souřadnice kurzoru myši při provedení akce a textový řetězec, popisující událost, například MOVED, PRESSED, CLICKED.
Objekt ActEvent je následně předán všem objektům typu Component, které jsou v EventHandleru zaregistrovány. To je provedeno zavoláním metody doAction(ActEvent e), kterou implementují všechny objekty odvozené z třídy Component.
Každá komponenta rozhodne podle dostupných souřadnic v předávaném objektu, zda byla akce provedena na její pozici. Pokud se shoduje dostupný textový řetězec s jednou z implementovaných reakcí tlačítka, reakce je provedena.
Příkladem je akce PRESSED provedená nad tlačítkem. To ověří polohu a poté provede reakci, kterou má nastavenou, při události PRESSED. Dojde ke změně proměnné pressed typu boolean na true. Uživatel k ní přistupuje v hlavní smyčce programu pomocí metody Button.clicked(). Po provedení akce je nutné zavolat metodu Button.actionDone(), která připraví tlačítko na další kliknutí.
5 Příklady grafických prvků vytvořené knihovny
5.1 Label
Jedná se o jednoduchý objekt třídy Label, který využívá metod dostupných v balíčku processing.core a slouží k zobrazení jednořádkového textu s nastavitelnou barvou a velikostí.
Na obrázku, Ilustrace 14, je zobrazena ukázková aplikace využívající tři objekty třídy Label. Hodnoty proměnných mouseX a mouseY jsou použity k nastavení parametrů objektů. Souřadnice prvního textového prvku zobrazeného jako „Pohyb“, jsou v každé smyčce metody draw() nastaveny na aktuální pozici kurzoru myši. Prvek s popisem
„Velikost písma“ má přiřazenou hodnotu mouseX do proměnné textSize. Poslední z objektů mění svou barvu v závislosti na hodnotách mouseX a mouseY.
5.2 Button
Vykreslení tvaru tlačítka je provedeno zavoláním metody rect() z balíčku processing.core.PApplet.
Ilustrace 14: Ukázka aplikace s objekty třídy Label
Po kliknutí na libovolné místo v okně aplikace, Ilustrace 15, je vytvořen objekt tlačítka. Novému tlačítku je nastavena libovolná barva a souřadnice polohy podle polohy myši. Poté je tlačítko vykresleno metodou draw().
Druhým příkladem je aplikace využívající čtyři tlačítka s náhodnou barvou. Všechna jsou přiřazena objektu třídy Group, který je předán třídě EventHandler. Po kliknutí na libovolné tlačítko dojde ke změně jeho barvy.
Ilustrace 15: Ukázka aplikace tvořící tlačítka
5.3 Graph
Graph je prvek, který zobrazí hodnoty typu float v přehledném formátu. Vpravo od zobrazených hodnot je možné vytvořit svislou množinu objektů třídy Label.
Ta slouží jako legenda grafu.
Na obrázku, Ilustrace 16, je zobrazena aplikace využívající hned několik objektů z vytvořené knihovny. Aplikace je tvořena z objektu Group, dvou objektů Button, jednoho objektu Label a dvou objektů Graph.
Všechny objekty jsou přidány do skupiny pomocí metody addControl(), zavolané na objekt Group. Pro zobrazení všech prvků stačí zavolat metodu draw() jen jednou.
Uživatel může vybrat typ zobrazeného grafu. Na výběr má z čárového nebo sloupcového grafu. Pro volbu typu grafu lze použít metodu setBarGraph(), kde hodnota parametru nastavena na true znamená sloupcový graf.
Ilustrace 16: Aplikace zobrazující dva grafy
6 Závěr
Multiplatformní vývojové prostředí processing se těší velkému zájmu uživatelů, což s sebou přináší i množství dostupných programů, příkladů a knihoven od uživatelů.
V teoretické části mé bakalářské práce jsem se zaměřil na knihovny grafických prvků uživatelského rozhraní G4P a ControlP5. Obě zmíněné knihovny obsahují velké množství grafických prvků. Jejich hlavní nevýhodou je použití knihovny java.awt a javax.swing, které nejsou použitelné na platformě Android.
Z tohoto důvodu jsem navrhl vlastní multiplatformní strukturu grafických prvků uživatelského rozhraní. Hlavním předpokladem bylo použití pouze vlastních nebo multiplatformních knihoven a balíčků třetích stran.
Kvůli ověření funkčnosti jsem implementoval jednoduchý prvek jednořádkového textu a tlačítka, a jeden pokročilý prvek, za který jsem zvolil graf. Uživatel si může vybrat, zda zobrazí čárový nebo sloupcový graf. K dispozici je množství metod k nastavení legendy a veškerých rozměrů grafu.
Jako vhodné pokračování bakalářské práce navrhuji rozšíření struktury tříd knihovny grafických prvků a realizaci vlastního grafického editoru. Jeho hlavní výhodou by byla možnost jednoduchého a rychlého vytvoření a editace grafického rozhraní aplikace.
Použitá literatura
1. Processing - Language Reference (API) [online]. [cit. 2016-05-29].
Dostupné z: https://processing.org/reference/
2. Quarks place [online]. [cit. 2016-05-29]. Dostupné z: http://www.lagers.org.uk/g4p/
3. BENYOVSZKY, Štěpán. Turbo Vision: výklad a programování. Praha: Grada, 1992.
ISBN 80-854-2478-9.
4. PLÍVA, Z., J. DRÁBKOVÁ, J. KOPRNICKÝ a L. PETRŽÍLKA. Metodika zpracování bakalářských a diplomových prací. 2. upravené vydání. Liberec:
Technická univerzita v Liberci, FM, 2014. ISBN 978-80-7494-049-1.
Dostupné z: doi:10.15240/tul/002/2014-11-002
5. Android Tutorial (4) – Procedural vs. Declarative Design of User Interfaces.
In: IT&C Solutions [online]. 2011 [cit. 2016-05-29].
Dostupné z: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs- declarative-design-of-user-interfaces/
6. Android Developers [online]. [cit. 2016-05-29].
Dostupné z: https://developer.android.com/reference/android/view/package- summary.html
7. INTERSIMONE, David. Introduction to Component Building by Ray Konopka.
In: Embarcadero [online]. 2000 [cit. 2016-05-29].
Dostupné z: http://edn.embarcadero.com/article/20569
8. Lesson: Writing Event Listeners. ORACLE Java Documentation [online]. [cit. 2016- 05-29].
Dostupné z: https://docs.oracle.com/javase/tutorial/uiswing/events/index.html 9. SINTES, Tony. Events and listeners. How do you create a custom event?
In: JavaWorld [online]. 2000 [cit. 2016-05-29].
Dostupné z: http://www.javaworld.com/article/2077351/java-se/events-and- listeners.html
Příloha – obsah přiloženého CD
• Text bakalářské práce
◦ bakalarska_prace_2016_Vaclav_Dub.pdf
◦ kopie_zadani_bakalarske_prace_2016_Vaclav_Dub.pdf
• Vlastní knihovna
◦ knihovna ve formátu .jar
◦ Eclipse adresář projektu (workspace)
◦ dokumentace knihovny
◦ jednoduché příklady
