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

V minulé lekci, Jednoduchá kalkulačka v JavaFX, jsme si naprogramovali jednoduchou kalkulačku. V dnešním tutoriálu započneme tvorbu složitější 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 JavaFX 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 Application a pojmenujte ji UpominacNarozenin. Rovnou si na začátku ukažme, jak bude výsledný formulář aplikace vypadat:

Nový FXML dokument si rovnou otevřeme v JavaFX Scene Builderu a odstraníme z něj vygenerovaný Button a Label.

VBox

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

VBox roztahněte po celém formuláři a v Inspectoru v záložce Properties nastavte Alignment na CENTER. Tím se budou komponenty vložené ve VBoxu centrovat. Přejděte do záložky Layout. Komponentě zde nastastavíme 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. Jednotlivé kotvy aktivujeme kliknutím na příslušnou přerušovanou čáru na obrázku dvou čtverců. Do políček TOP, RIGHT, BOTTOM, LEFT vložte 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 také Spacing, což je volné místo mezi komponentami, které jsou ve VBoxu vložené.

Všechny 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:

GridPane

K zobrazení dnešního data a nejbližších narozenin použijeme 4 Labely. Aby byly hezky uspořádané, vložíme je do GridPane. To je další kontejner, který komponenty řadí do tabulky.

GridPane vložíme do VBoxu. Jako výchozí má vždy 2 sloupce a 3 řádky. Nám stačí tabulka 2x2 a 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 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áš Grid Pane tedy bude široký maximálně 300 a vysoký minimálně 60.

Do každé buňky GridPane přetáhněte jeden Label a nastavte jim texty podle obrázku:

HBox

Jako druhou komponentu do VBoxu 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 Vgrow na SOMETIMES. Pomocí Vgrow tak nastavíme, aby se HBox roztahoval na výšku s formulářem.

ListView

Jako první komponentu do HBoxu vložíme ListView. To je jednoduchý seznam položek, my ho budeme používat pro zobrazení seznamu přátel. ListView nastavíme Pref Height i Pref Width na hodnotu USE_COMPUTED_SIZE a Hgrow na SOMETIMES. Bude se tak roztahovat co nejvíce to půjde. Rodičovskému HBoxu nastavíme totéž.

Jako druhou komponentu do HBoxu vloží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 Max Height na 60. Do každé buňky vložíme Label s textem podle obrázku:

Jako poslední komponentu do VBoxu vložíme další HBox se Spacing 10. V záložce Properties mu nastavíme Alignment na CENTER. Tím se budou položky v něm vložené centrovat. V něm budou obsažena 2 tlačítka (Buttony). Tlačítkům nastavíme texty podle obrázku a Pref Width (v záložce Layout) na 70. Budou tak stejně široká.

Slušelo by se dodat, že Pref Width 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, to by se zmenšení formuláře na takovou velikost nepovolilo).

Náš formulář máme hotový. Zkuste si aplikaci spustit a formulář roztahnout, jeho obsah se velikosti okna přizpůsobuje. (Před spuštěním musíte uložit scénu v JavaFX Scene Builderu a z kontroleru vymazat atributy a metody s @FXML anotací, které tam zbyly po výchozím projektu)

Pro případ, že se vám něco nepovedlo, si ho můžete stáhnout níže a najít si chybu. V příští lekci, Upomínač narozenin v JavaFX - Formuláře podruhé, naprogramujeme základ logické vrstvy aplikace.