Lekce 4 - Upomínač narozenin v JavaFX - Návrh formuláře

V předešlém cvičení, Řešené úlohy k 1.-3. lekci JavaFX, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

V dnešním tutoriálu započneme tvorbu složitější JavaFX aplikace, která bude sloužit k upomínání narozenin přátel.

Návrh formuláře

Začneme tradičně s návrhem formuláře. Pořádně si u toho zaklikáme, a proto jsem se snažil do článku vložit co nejvíce obrázků, abyste si mohli kontrolovat, že postupujete správně. Vysvětleme si však nejprve absolutní a relativní pozicování.

Absolutní pozicování

V minulé aplikaci jsme si formulář naklikali tak, jak nás to napadlo. Jednotlivé komponenty jsme umístili přesně na určitou pozici na formuláři. Tomuto přístupu se říká absolutní pozicování. Jeho nevýhodou je, že aplikace poté nereaguje na rozšíření okna. Drtivá většina aplikací má proto komponenty na formuláři pozicované relativně.

Relativní pozicování

Pokud má komponenta relativní pozici, znamená to, že se tato pozice vztahuje k nějaké jiné komponentě, ve které je vložena. Nejedná se tedy přímo o pozici v hlavním okně, ale o pozici v nadřazené komponentě. V Library v Scene Builderu nalezneme širokou nabídku tzv. kontejnerů. To jsou komponenty, do kterých se vkládají další komponenty. Právě z nich formulář poskládáme a ve výsledku docílíme kvalitního uzpůsobení velikosti okna. To je v dnešní době velmi důležité, jelikož aplikaci můžeme cílit na telefony, tablety nebo stolní PC. Díky přenositelnosti Javy bude fungovat ta samá aplikace všude a díky relativnímu pozicování použijeme na každém zařízení ten samý formulář, i když velikosti displejů jsou různé.

Příprava layoutu

V relativním pozicování se často o rozložení prvků na formuláři hovoří jako o layoutu. Pojďme si ho vytvořit. Vytvořte si novou JavaFX FXML aplikaci a pojmenujte ji UpominacNarozenin. Rovnou si na začátku ukažme, jak bude výsledný formulář aplikace vypadat:

Jako obvykle odstraníme vše kromě App.java a vytvoříme si nový FXML dokument s příslušným kontrolerem. App.java upravíme tak, aby se nám při spuštění aplikace načetl nově vytvořený FXML dokument. Tento dokument si rovnou otevřeme v Scene Builderu.

Kontejner VBox

Jako první do formuláře vložíme z nabídky Containers položku VBox. To je kontejner, do kterého můžeme vkládat další komponenty. Ty se pak řadí pod sebe (vertikálně).

VBox roztáhněte po celém formuláři a v Inspectoru v záložce Properties nastavte Alignment na CENTER. Tím se budou komponenty, které vložíme do nového kontejneru, centrovat.

Nyní přejděme do záložky Layout, kde nastavíme komponentě kotvy a okraje.

Kotvy

Kotvy (Anchors) určují, jak se komponenta přichytává k okrajům rodičovské komponenty. Rodičovská komponenta je ta komponenta, ve které je vložená, v našem případě je to formulář, přesněji AnchorPane. My budeme chtít, aby se VBox přichytil ke všem čtyřem okrajům formuláře. Když budeme formulář roztahovat, bude se roztahovat i VBox.

Kotvy aktivujeme kliknutím na příslušnou čáru mezi obrázky dvou čtverců. Do jednotlivých políček pak vložíme samé nuly. VBox tak bude těsně přilepený k okraji formuláře:

Okraje

Okraje určují velikost volného místa. Můžeme nastavit Padding, což je volné místo okolo obsahu komponenty. Dále máme v nabídce také Spacing, což je volné místo mezi komponentami, které jsou v našem VBox kontejneru vložené.

Všechny velikosti se v JavaFX uvádějí v pixelech.

Okraje nastavíme na hodnotu 20. Výsledkem bude, že na sobě nebudou komponenty nalepené, což by nevypadalo dobře:

Náš formulář prozatím vypadá takto:

Kontejner GridPane

K zobrazení aktuálního data a nejbližších narozenin použijeme čtyři položky typu Label. Aby byly hezky uspořádané, vložíme je do GridPane. To je další kontejner, který komponenty řadí do tabulky.

GridPane vložíme do rodičovského kontejneru (VBox). Jako výchozí má nový GridPane vždy dva sloupce a tři řádky. Nám stačí tabulka 2x2, proto poslední řádek označíme kliknutím na modré číslo 2 a klávesou Delete ho odstraníme.

Pokud bychom v nějaké aplikaci naopak chtěli řádek nebo sloupec přidat, uděláme to pomocí kontextového menu (klikneme na GridPane pravým tlačítkem).

Alignment nastavíme na hodnotu CENTER, v záložce Layout nastavíme Min Height (minimální výšku) na 60. Následně oběma sloupcům tabulky nastavíme Max Width na 150. Sloupec označíme vždy kliknutím na jeho modré číslo.

Náš GridPane tedy bude široký maximálně 300 a vysoký minimálně 60.

Do každé buňky GridPane přetáhneme jeden Label z nabídky Controls a nastavíme jim texty podle obrázku:

Kontejner HBox

Jako druhou komponentu do hlavního kontejneru vložíme HBox. Ten se používá pro řazení komponent vedle sebe (horizontálně). V záložce Layout mu nastavíme Spacing na 10 a položku Vgrow nastavíme na SOMETIMES. Tím docílíme toho, že se HBox bude roztahovat na výšku spolu s formulářem.

Seznam ListView

HBoxu doplníme dalšími komponentami. Jako první sem vložíme z nabídky Controls ListView. To je jednoduchý seznam položek, my ho budeme používat pro zobrazení seznamu přátel. ListView nastavíme PrefHeight i PrefWidth na hodnotu USE_COMPUTED_SIZE a Hgrow na SOMETIMES. Bude se tak roztahovat, co nejvíce to půjde. Rodičovský HBoxu nastavíme totožně.

Jako druhou komponentu přidáme další GridPane. Ten bude opět 2x2 (2 sloupce a 2 řádky). Protože nechceme, aby se roztahoval po celé výšce, nastavíme mu v záložce Layout maximální výšku, MaxHeight na 60. Do každé buňky vložíme Label s textem podle obrázku:

Jako poslední komponentu do vertikálního kontejneru vložíme další horizontální kontejner, HBox. Nastavíme mu Spacing na hodnotu 10. V záložce Properties mu změníme zarovnání, tedy přepneme Alignment na CENTER. Tím se budou položky v něm vložené centrovat. Budou v něm obsažena dvě tlačítka (Button). Tlačítkům nastavíme texty podle obrázku a PrefWidth (v záložce Layout) na 70. Budou tak stejně široká.

Slušelo by se dodat, že PrefWidth je synonymum pro šířku. Ta je označena jako Preferred, protože se od skutečné šířky komponenty může lišit. Např. když nastavíme preferovanou šířku na 70 a formulář zmenšíme na 60, výška se nutně sníží s ním.

Tlačítko nemůže být širší, než formulář, pokud ovšem nemá nastavenou minimální šířku, tím by se zmenšení formuláře na takovou velikost nepovolilo.

Náš formulář máme hotový:

Aplikaci nyní spustíme.

Před spuštěním musíte uložit scénu v Scene Builderu!

Když formulář roztáhneme, uvidíme, že se jeho obsah přizpůsobuje velikosti okna:

Pro případ, že se vám něco nepovedlo, si můžete stáhnout soubor přiložený níže a najít si chybu.

V příští lekci, Upomínač narozenin v JavaFX - Formuláře podruhé, budeme v práci s formuláři pokračovat. Vytvoříme si kontroler a nový dialog pro přidání přátel do aplikace.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.