Úvod do JavaFX RICHARD LIPKA

Úvod do JavaFX RICHARD LIPKA 26.2.2018

GUI a OS OS (jeho moduly) poskytuje funkce pro vytváření oken a základních GUI prvků Ve Windows Win32 / Win64 / WinCE API V OS X Cocoa, Quartz V Linuxu není v OS, X Windows, Simple DirectMedia Layer, Vysokoúrovňové knihovny s vlastními prvky GTK+ (Gnome), Qt (KDE), wxwidgets Volba technologie ovlivňuje: Rychlost GUI (nativní obvykle rychlejší) Vzhled (standardní pro daný OS nebo vlastní) JavaFX Kompletně vykreslována prostředky Javy (= platformě nezávislá) Vlastní look and feel (definovaný CSS styly lze snadno měnit) = nevypadá jako standardní Windows / MacOS aplikace 26.2.2018 UUR - ÚVOD DO JAVAFX 2

API pro GUI v Javě AWT (Abstract Window Toolkit) Starší, jednodušší, rychlejší (navázáno na volání OS API vzhled podle OS) Původní GUI v Javě Swing Novější, velmi komplexní (30 komponent) Pomalejší, vlastní vykreslování nezávislé na OS; ale bez nativního kódu, čistá Java Souběžně využívá některé věci z AWT (vychází z něj, přebírá událostní model, fonty, barvy, layouty) Velký důraz na MVC architekturu Existují nad ním vybudované knihovny (JGoodies) SWT Vytvořeno IBM, využité v Eclipse Využívá nativní kód, jednodušší než Swing JavaFX Moderní náhrada za Swing, od Java 8 má je součástí JRE/JDK Jednodušší práce s událostmi, deklarativní popis oken, využití CSS a HTML (stejná jména tříd jako u AWT) 26.2.2018 UUR - ÚVOD DO JAVAFX 3

JavaFX Oficiálně součástí Javy od verze 8 (březen 2014) První verze 2008 jako speciální skriptovací jazyk, v současné podobě od JavaFX 2.0 od r. 2011 není to úplně nová a nevyzkoušená technologie Potřebuje vlastní běhové prostředí Od Javy 8 součástí JRE / JDK, do Javy 7 se dá doinstalovat Platformě závislé (stejně jako JRE) k dispozici pro Windows, Linux, MacOS, Solaris Existuje projekt JavaFXPorts (pod GluonMobiles, trial je zdarma) pro spouštění JavaFX aplikací na Androidu JavaFX Scene builder WISYWIG návrhář aplikace Návrh rozložení prvků, layoutů, podpora pro nastavení obsluh Funguje jen pro FXML soubory (neumí generovat zdrojový text Javy) Silná podpora CSS, lokalizačních souborů, tvorby kontrolerů Oracle ukončil vlastní vývoj, momentálně pod Gluon (zdarma, poslední verze z října 2017) 26.2.2018 UUR - ÚVOD DO JAVAFX 4

Drag and drop programování vs psaní zdrojového textu ručně Existují nástroje pro naklikání GUI JavaFX Scene Builder jako samostatná aplikace jako plugin do Eclipse, Netbeans, IntelliJ Idea Tvoří jen FXML soubory (XML popis GUI), ne volání z API podporuje dobré návyky rychlejší vývoj GUI aplikací, příprava formulářů ALE? Debugování programu, zejména složitých oken?? Recyklace formulářů bez zbytečného opakování?? Tvorba automatických testů (unit testy)?? Dynamické generování GUI podle dostupných dat? 26.2.2018 UUR - ÚVOD DO JAVAFX 5

JavaFX podporované technologie API V Javě, použitelné v dalších jazycích založených na JRE (jruby, Scala) FXML deklarativní popis GUI v XML souboru ( oddělení view od zbytku programu) CSS Nastavení vzhledu oddělené od definice view i od programu HTML schopnost zobrazovat a pracovat s HTML 5 (WebKit = Safari, OS X) Swing schopnost pracovat se Swing komponentami Dotyková zařízení podpora dotykových a vícedotykových gest Rich text podpora obousměrného textu (arabské jazyky), mnoha abeced a formátování textu v komponentách Grafika podpora 2D a 3D grafiky, na některých kartách podpora akcelerace (přehled podporovaných karet v dokumentaci) Média podpora pro přehrávání videa a zvuku (včetně streamování) Nasazení aplikace podpora pro vytvoření plně spustitelného programu (balí se do něj JRE a JavaFX) 26.2.2018 UUR - ÚVOD DO JAVAFX 6

Struktura knihovny Middleware pro ostatní moduly, řízení vláken Knihovny se kterými budete pracovat Získávání zdrojů z OS (okna, časovače, plochy ke kreslení) Vykreslovací jádro SW kreslení a spojení s GPU Kodeky, práce s kontejnery Webkit Převzato z http://docs.oracle.com/javase/8/javafx/get-started-tutorial/jfx-architecture.htm#jfxst788 26.2.2018 UUR - ÚVOD DO JAVAFX 7

Základní aplikace Vstupní bod programu - třída Application Musí být děděna (abstraktní) Zahajuje vytváření GUI (metody init() a start() ) Ukončuje běh aplikace (metoda stop()) Běží ve vlastním vlákně (JavaFX Application Thread) Celá tvorba GUI Obsluhy všech událostí Ukončení: Patform.exit() preferované System.exit() funguje, ale pak se nevolá metoda stop() Vytvoření instance třídy Application Spuštení metody init() vlastní vlákno (spouštěč) Vytvoření instance scény Stage Spuštení metody start() vlastní vlákno Čeká na ukončení Volání metody stop() 26.2.2018 UUR - ÚVOD DO JAVAFX 8

Hello World okno public class HelloWorld extends Application { } public void start(stage primarystage) { Button btn = new Button(); btn.settext("say 'Hello World'"); } StackPane root = new StackPane(); root.getchildren().add(btn); Scene scene = new Scene(root, 300, 250); primarystage.settitle("hello World!"); primarystage.setscene(scene); primarystage.show(); public static void main(string[] args) { launch(args); } 26.2.2018 UUR - ÚVOD DO JAVAFX 9

FXML Hello World BorderPane border = new BorderPane(); Label toppanetext = new Label("Page Title"); border.settop(toppanetext); Label centerpanetext = new Label ("Some data here"); <BorderPane> <top> <Label text="page Title"/> </top> <center> <Label text= "Some data here"/> </center> </BorderPane> border.setcenter( centerpanetext); 26.2.2018 UUR - ÚVOD DO JAVAFX 10

Jeviště (Stage) top level container Obvykle reprezentuje 1 okno aplikace (nemusí) Aplikace funguje dokud je na obrazovce alespoň jedno okno Kontejner může obsahovat další komponenty Komponenty uloženy v Grafu scény (Scene, ve skutečnosti strom) Obsahuje uzly (Node) - společný předek pro všechny komponenty GUI Další kontejnery (panely, skupiny, menu) - root Ovládací prvky (tlačítka) Zobrazovací prvky (tabulky, grafy, stromy) Vstup od uživatele (textová pole, zaškrtávací políčka) 26.2.2018 UUR - ÚVOD DO JAVAFX 11

Prvek scény - Node Jakýkoliv element scény který vidíte Obsahuje ID (textová identifikace pro CSS), musí být unikátní, pokud je nastaveno (potřeba hlavně ve FXML) StyleClass třída (nebo několik tříd) pro CSS Parent rodič uzlu (nadřazený prvek) UserData s uzlem lze spojit jeden datový objekt + cokoliv dalšího podle konkrétní komponenty Lze na něj aplikovat Efekty (stíny, rozmazání, ) Průhlednost Transformace (pozice, natočení, zvětšení, zkosení) Může odchytávat události a reagovat na ně 26.2.2018 UUR - ÚVOD DO JAVAFX 12

Struktura scény V kořeni musí být kontejner (potomek Parent panely, toolbary, ) Každá komponenta vložena jen jednou Node má rodiče, při opětovném vložení se rodič změní (automaticky) Lze vytvářet hierarchii do sebe vnořených panelů layoutování Změny pozice a velikosti podle změny velikosti okna Struktura by měla odrážet logiku používání okna (u složitých formulářů) Řídící panel Obsahový panel OK tlačítko Storno tlačítko Zobrazovací panel Textová oblast Scene Hlavní panel Menu Sobor Menu Položka 1 Položka 2 Menu Nápověda 26.2.2018 UUR - ÚVOD DO JAVAFX 13

Reprezentace GUI v počítači SCÉNA Sada objektů k vykreslení Tlačítka, panely, tabulky, Mají určené: Pozice, rozměry, nadřazené prvky Vzhled Obslužné objekty lze detekovat události lze jimi manipulovat Zpracování Souřadnice pro detekci událostí Překreslení jen toho co je potřeba Nutné převést na obrázek (u nativního GUI to zařídí OS) VYKRESLOVANÝ OBRAZ Bitmapa 2D pole pixelů (barev) Mohou být 2 double buffering Může být přímo vykreslen na zobrazovací zařízení (existují i vektorová neobvyklé) Práce s ním hlavně ve fullscreenu Hry, 3D grafika, přehrávání videa lze získat i okno pro vykreslování (místo nativního GUI knihovna kreslí všechno sama) Zpracování Přímé změny barvy na pixelu Pravidelné překreslení (snímkovací frekvence) 26.2.2018 UUR - ÚVOD DO JAVAFX 14

Společné vlastnosti všech uzlů Souřadnice getboundsinlocal() netransformované lokální souřadnice getboundsinparent() transformované souřadnice v prostoru rodiče contains(), intersect() testuje jestli je bod / obdélník uvnitř uzlu (jen obalový obdélník) screentolocal(), LocalToScreen(), ParentToLocal(), LocalToParent() transformuje souřadnice scény, uzlu a rodiče Viditelnost a použitelnost setvisible() viditelnost uzlu (a potomků) vyřazuje z grafu setopacity() nastavení průhlednosti (1 - neviditelné) stále vykreslován setdisable() nastavení uzlu (a potomků) na vypnuto toback(), tofront() pohyb v rámci pole potomků 26.2.2018 UUR - ÚVOD DO JAVAFX 15

Specializované uzly potomci Node Shape, Shape3D Společný předek pro obecné tvary (kruhy, čáry, ) Vlastnosti jako je barva výplně a ohraničení, styl čáry, konce čar Canvas Plocha pro vlastní kreslení ( bitmapové ) ImageView Uzel pro vykreslování obrázků (Image png, jpg, gif) MediaView Uzel pro vykreslení obsahu média (MediaPlayer) Parent Společný předek pro uzly které mohou mít další potomky (grafy, panely) protected ObservableList<Node> getchildren() v panelech překryta veřejnou podobou Potomek je i Control tlačítka a další ovládací prvky SwingNode Uzel pro vložení Swing komponent zpětná kompatibilita 26.2.2018 UUR - ÚVOD DO JAVAFX 16

Vkládání komponent Node má potomky uložené v kolekci (rozhraní ObservableList<Node> - nová kolekce v JavaFX) Metoda add() a addall() pro vkládání dalších uzlů (mění i vkládaný uzel nastavuje mu předka!) Musím získat referenci na kolekci: parent.getchildren().add(newnode); Kořenový uzel se vkládá přes konstruktor: stage.setscene(new Scene(root, 300, 250)); Primární Stage získám jako parametr metody start(): public void start(stage primarystage) 26.2.2018 UUR - ÚVOD DO JAVAFX 17

Jmenné konvence Nejsou povinné, závisí na firemním prostředí ale mohou se hodit Lepší čitelnost programu Na druhé straně překladač i IDE typ reference zná a napovídá Nutné důsledně dodržovat v celém programu Pozor na míchání češtiny a angličtiny, někdy vadí více, někdy méně Pozor na kreativní mizzpelling nebo skutečné chyby (na druhé straně někdy může být záměrný - v knihovnách Javy např. Clazz) V JavaFX 2 typy jmen Jména referencí Identifikátory objektů a tříd pro CSS a FXML (vždy textové) - nepovinné Pozor, jména tříd JavaFX z package javafx, stejné jako jména z AWT Např. Button: okbutton, okbt, Menu: filemenu, filemn, Label: averagelabel, averagelb, 26.2.2018 UUR - ÚVOD DO JAVAFX 18

Dělení aplikace Objekty vždy zodpovědné za jednu věc, neměly by bát moc dlouhé rozumně dělit tvorbu GUI do metod Typické řešení: Privátní metody pro každý panel (skupinu prvků v GUI) nebo složitější komponentu (vyžaduje několik nastavení) Vrací hotový uzel (panel naplněný komponentami) Využívá volání dalších metod, pokud jsou uvnitř další panely Pro každé okno vlastní třída Vhodné konstruktory pro plnění daty? Pro složitější a znovupoužitelné komponenty (které nejsou v API) určitě vlastní třída Řídící panel Obsahový panel OK tlačítko Storno tlačítko Zobrazovací panel Textová oblast Scene Hlavní panel Menu Sobor Menu Položka 1 Položka 2 Menu Nápověda 26.2.2018 UUR - ÚVOD DO JAVAFX 19

Strukturování zdrojového textu Jen doporučení není povinné, ale zlepšuje přehlednost aplikace 1 třída 1 funkce Vstupní bod aplikace potomek Application pro každé okno vlastní třída (může a nemusí být potomek Stage) GUI by nemělo provádět funkce jádra aplikace propojit s ním přes vhodné rozhraní (= pokud aplikace ukládá do DB v obsluze se jen volá metoda jádra, ne samotné ukládání) 1 metoda 1 funkce Netvořit celé okno v jedné metodě Konvence: každý uzel stromu scény má vlastní metodu, která vrací Node a stará se o jeho vytvoření pokud je složen z dalších uzlů, volá potřebné metody Jednoduchá obsluha V obslužné metodě jen minimum kódu Ideálně 1 řádek který volá obslužnou metodu (nejspíš privátní) 26.2.2018 UUR - ÚVOD DO JAVAFX 20

Naslouchání událostem Události zachycené OS, předané do JavaFX frameworku Oznamují aplikaci že se něco stalo obvykle interakce s uživatelem Framework události většinu vytváří a posílá sám Reprezentované instancemi třídy Event Řada specializovaných potomků podle původce události a informací které nese (stisknutá klávesa, pohyb myši, ) Každá komponenta může naslouchat všem událostem, jen je třeba nastavit obsluhu Metody seton () např. setonaction(), setonmouseentered(), (zděděné z Node) 26.2.2018 UUR - ÚVOD DO JAVAFX 21

Událost Třída Event a její potomci Zdroj události (metoda getsource() ) kdo ji vyvolal rodič prvku Cíl události (metoda gettarget() ) kam událost směřuje (v grafu scény) (občas stejný objekt jako zdroj události) Typ události : umožňuje specifikovat detaily události (metoda geteventtype() ) 26.2.2018 UUR - ÚVOD DO JAVAFX 22

Propagace události Rozhraní EventTarget pokud může komponenta být cílem události (implementuje ho Window, Scene, Node) Klávesnice cílem je komponenta která má fokus Myš cílem komponenta pod kurzorem Dotyková gesta všechny body kterých se dotýkáte na začátku Pokud je komponent víc, bere se vrchní (na obrazovce list stromu) Při déletrvajícím gestu události předávány cíli ze začátku gesta Událost předávána ve stromu (scéna panely cíl) Projde skrz všechny rodiče ve scéně k cíli a zpět ke scéně Event capturing cesta dolů, filtry addeventfilter(eventtype, EventHandler) Event bubbling cesta nahoru, obsluhy addeventhandler(eventtype, EventHandler) Pohlcení události consume() 26.2.2018 UUR - ÚVOD DO JAVAFX 23

Doporučení pro obsluhu událostí Obsluha by měla být co nejkratší Běží ve stejném vlákně jako vykreslování GUI Pokud je dlouhá, provést ve vlastním vlákně Obsluha není / nemusí být součástí View vhodně ji oddělit do vlastního objektu nebo alespoň metody (alespoň kousek ji ve View vždycky zbyde) Delegovat na objekty, které mají potřebnou odpovědnost Nezapomenout na kontrolu dat Nemusí být součástí View, ale někde v obsluze se musí objevit 26.2.2018 UUR - ÚVOD DO JAVAFX 24

Obslužný objekt Jednotné rozhraní pro obsluhu všech typů událostí EventHandler Jediná metoda handle(t event), rozhraní typováno: EventHandler<T extends Event> na jakéhokoliv potomka třídy Event Podle metody seton () lze implementovat vhodný objekt MouseEvent pro události myši ActionEvent pro akce spuštěné v GUI (stisknuté tlačítko) KeyEvent pro stisknuté klávesy Základní obslužný objekt (Controller): public Class BTActionHNDL implements EventHandler<ActionEvent> { } public void handle(actionevent e) { } Button btn = new Button(); btn.setonaction( new ButtonActionHandler()); 26.2.2018 UUR - ÚVOD DO JAVAFX 25

Anonymní vnitřní třída Obsluha události je jen na jednom místě nepotřebuji celou třídu Nepřehledné pokud je obsluha delší neměla by být Button btn = new Button(); btn.setonaction(new EventHandler<ActionEvent>() { public void handle(actionevent e) { } }); Přímo ve volání metody setonaction() vytvořena nová třída jako implementace rozhraní EventHandler<ActionEvent> Typ zvolen podle metody která obsluhu registruje V metodě handle() je samotná obsluha 26.2.2018 UUR - ÚVOD DO JAVAFX 26

Malá odbočka k typům v parametrech metod EventHandler<ActionEvent> typováno na ActionEvent EventHandler<? super MouseEvent> typováno na MouseEvent (Event, InputEvent) a její předky ( spodní hranice) Typicky pro konzumenty pokud jen vkládám do kolekce (Object... MouseEvent) CssMetaData<? extends Styleable> typováno na Styleable a její potomky ( horní hranice) Typicky pro producenty pokud jen vybírám z kolekce (Styleable a potomci) Označení typů z API: E prvek (obvykle u kolekcí) K klíč V hodnota T obecně typ N číselný typ 26.2.2018 UUR - ÚVOD DO JAVAFX 27

Lambda výraz jako náhrada vnitřní třídy Anonymní vnitřní třídu lze přepsat na lambda výraz Pokud je parametrem reference na funkční rozhraní (1 metoda k implementaci, je vidět v dokumentaci k API) Button btn = new Button(); btn.setonaction(event -> { }); Typ parametru event odvodí překladač automaticky z definice metody setonaction(eventhandler<actionevent> value) 26.2.2018 UUR - ÚVOD DO JAVAFX 28

Privátní obslužné metody Ve vnitřní třídě / lambda výrazu volána jen jedna obslužná metoda Součást nadřazené třídy může být privátní nebo Z jiné třídy (Controller) Obsluha vnitřní třídy krátká a přehledná Button btn = new Button(); btn.setonaction(event -> btnactionperformed(event)); private void btnactionperformed(actionevent e) { } 26.2.2018 UUR - ÚVOD DO JAVAFX 29

Obsluha ve vlastním vlákně Dlouhá obsluha (komprese, odesílání, ukládání) celkem běžná Blokuje GUI zamrzne a nereaguje na uživatele potřebuji oddělit do vlastního vlákna Rozhraní Worker<V> pro implementaci vlákna Typováno na V typ návratové hodnoty (vlákno končí vrácením výsledku) Možnost řídit běh zvenku (na rozdíl od běžných Java vláken) musí zajistit implementující třída Lze se dotazovat na stav (isrunning(), getstate(), getprogress(), getmessage()) Implementace ve třídě Task<V> Metoda call() ve které je užitečná práce Musí se chovat hezky a podporovat řízení zvenku Běží na pozadí, dokáže informovat o stavu, neblokuje vykreslovací smyčku Explicitně určena pro použití v JavaFX Jednorázová při každé obsluze je třeba vytvořit novou instanci (existuje i znovupoužitelná Service<V>, ale to přináší některé komplikace) 26.2.2018 UUR - ÚVOD DO JAVAFX 30

Obsluha ve vlastním vlákně příklad základní smyčky Task<Integer> task = new Task<Integer>() { protected Integer call() throws Exception { int it; for (it = 0; it < 100000; it++) { if (iscancelled()) { break; } System.out.println("it " + iterations); } return it; } }; Thread th = new Thread(task); th.start(); 26.2.2018 UUR - ÚVOD DO JAVAFX 31

Obsluha ve vlastním vlákně smyčka s aktualizací stavu Task<Integer> task = new Task<Integer>() { protected Integer call() throws Exception { int it; for (it = 0; it < 100000; it++) { if (iscancelled()) { updatemessage("canceled"); break; } updatemessage("iteration " + it); updateprogress(it, 100000); } return it; } }; Thread th = new Thread(task); th.start(); 26.2.2018 UUR - ÚVOD DO JAVAFX 32

Děkuji za pozornost OTÁZKY? NÁZORY, PŘIPOMÍNKY? PŘÍŠTĚ: ZÁKLADNÍ LAYOUTY V JAVAFX