====== 6. Cvičení ======

===== Tvorba grafického rozhraní v JavaFX =====

==== Co je JavaFX? ====

JavaFX je softwarová platforma pro vytváření desktopových (původně i webových) aplikací s GUI. Cílem tvůrců byl nahradit Swing.
JavaFX vydal Sun Microsystems v roce 2008, jako součást JDK, od JDK 11 se stala samostatným modulem (v současnosti podporován společností https://gluonhq.com), je tedy potřeba ji uvádět mezi vnějšími závislosti („external dependencies“), např. Maven uvádí knihovny JavaFX v souboru pom.xml.

==== Filosofie návrhu GUI ====

=== Kategorie komponent GUI ===

  * **Stage**: představuje okno aplikace, obsahuje scénu. Scény je možné na Stage libovolně střídat.
  * **Scene**: hlavní kontejner pro aplikace JavaFX.
  * **Node**: základní stavební bloky uživatelského rozhraní, představují ovládací prvky jako například tlačítka nebo textová pole a kontejnery rozložení („layout containers“).
\\ 

=== Návrh rozhraní se implementuje ===

  * přímo v kódu Java 
  * v FXML (obdoba HTML) – princip oddělení grafického návrhu od aplikační logiky
  * v obou případech můžeme použít styly ve formátu CSS

===== Úkoly na cvičení =====

=== Jednoduchá aplikace typu „Hello world“ ===

V IDEA vygenerujeme prázdnou aplikaci JavaFX (inspiraci můžeme čerpat například zde: [[courses:b0b36pjv:tutorials:06:javafx|Začínáme s JavaFX]], nebo na stránkách https://openjfx.io/openjfx-docs/#maven).

Ukážeme si strukturu FXML, poté odstraníme soubor ''FXML'' a odkazy z kódu java, z ''pom.xml'' a z ''module-info.java'' a vytvoříme aplikaci podobnou jako zde: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/hello-fx. Vysvětlíme si jednotlivé komponenty GUI.

{{ :courses:b0b36pjv:tutorials:06:pjv_cv06_hello.png?300 |}}

\\ 
=== Obsluha událostí - Tlačítko ===

Aplikaci dále rozvíjíme, přidáme tlačítko a přiřadíme k němu jednoduchou událost, jako například zde: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/button-fx. Můžeme si ukázat, co se stane jestli obsluha událostí trvá neúnosně dlouho (GUI „zamrzne“).

{{ :courses:b0b36pjv:tutorials:06:pjv_cv06_buttonapp.png?300 |}}

\\ 
=== První „skutečná“ aplikace - Kalkulátor BMI ===

Na základě toho co už známe, dokážeme naprogramovat jednoduchý kalkulátor BMI (například podle https://cs.wikipedia.org/wiki/Index_t%C4%9Blesn%C3%A9_hmotnosti). Kód možného řešení najdete zde: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/bmicalc-fx

{{ :courses:b0b36pjv:tutorials:06:pjv_cv06_bmicalc.png?500 |}}

\\ 
=== Pokročilý projekt - hra Hangman ===

Všichni známe hru „Hangman”. Zkusme vytvořit variantu této hry v JavaFX!

{{ :courses:b0b36pjv:tutorials:06:pjv_cv06_hangman_fx.png?400 |}}

Grafické prvky - fáze „oběšence“ najdete zde: {{ :courses:b0b36pjv:tutorials:06:hangmangfx.zip |}} a kód možného řešení zde: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/hangman-fx.

Porovnejte kód projektu používajícím JavaFX s kódem pro Swing - původní Java GUI knihovnu: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/hangman-swing.

{{ :courses:b0b36pjv:tutorials:06:pjv_cv06_hangman.png?500 |}}

\\ 
=== Projekt ve stylu MVC - hlavolam Patnáctka ===

Patnáctka, známa též jako Loydova patnáctka, podle jejího popularizátora Sama Loyda. Je to hlavolam, ve kterém musí hráč přesouváním kamenů uvnitř malé čtvercové krabičky tyto kameny seřadit. Hlavolam sestává z krabičky, do které se vejde 4×4 čtvercových kamenů, místo jednoho kamene je však volné místo, které umožňuje kameny v krabičce posouvat. Na začátku jsou kameny zamíchány, cílem hry je seřadit je podle na nich napsaných čísel či jiného označení.

Máme naprogramovanou konzolovou verzi této hry: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/puzzle-15. Je hratelná ale není skutečné zábavná - uživatelské rozhraní v konzoli je trochu kostrbaté. Doplňme existující hru o GUI v JavaFX! Existující kód upravujme jen minimálně.

{{ :courses:b0b36pjv:tutorials:06:pjv_cv06_puzzle15_fx.png?300 |}}

Možné řešení můžeme najít zde: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/puzzle-15-fx.

Projekt hry s podobnou architekturou „Snakes and Ladders“ v rozpracované fázi najdeme zde: https://gitlab.fel.cvut.cz/seredlad-pjv-codes/snakes-ladders-fx.

===== Zdroje =====

https://jenkov.com/tutorials/javafx/overview.html

https://www3.ntu.edu.sg/home/ehchua/programming/java/Javafx1_intro.html

[[courses:b0b36pjv:tutorials:06:javafx|Začínáme s JavaFX]]

[[courses:b0b36pjv:tutorials:06:javafx_gui|GUI v JavaFX]]