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“).


  • 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: 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.


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“).


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


Pokročilý projekt - hra Hangman

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

Grafické prvky - fáze „oběšence“ najdete zde: 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.


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ě.

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

courses/b0b36pjv/tutorials/06/start.txt · Last modified: 2025/02/16 17:58 by seredlad