4. diel - PRIPOMIENKOVÉ narodenín v JavaFX - Návrh formulára

V minulej lekcii, Jednoduchá kalkulačka v JavaFX , sme si naprogramovali jednoduchú kalkulačku. V dnešnom tutoriále začneme tvorbu zložitejšie aplikácie, ktorá bude slúžiť na upomínania narodenín priateľov.

Návrh formulára

Začneme tradične s návrhom formulára. Poriadne si pri tom zaklikáme a preto som sa snažil do článku vložiť čo najviac obrázkov, aby ste si mohli kontrolovať, že postupujete správne. Vysvetlime si však najprv absolútnu a relatívnu pozicovanie.

Absolútna pozíciovanie

V minulej aplikácii sme si formulár naklikali tak, ako nás to napadlo. Jednotlivé komponenty sme umiestnili presne na určitú pozíciu na formulári. Tomuto prístupu sa hovorí absolútna pozicovanie. Jeho nevýhodou je, že aplikácia potom nereaguje na rozšírenie okna. Drvivá väčšina aplikácií má preto komponenty na formulári pozicovanie relatívne.

Relatívna pozíciovanie

Pokiaľ má komponent relatívnu pozíciu, znamená to, že sa táto pozícia vzťahuje k nejakej inej komponente, v ktorej je vložená. Nejedná sa teda priamo o pozíciu v hlavnom okne, ale o pozíciu v nadradenej komponente. V Library v JavaFX Scene Builderu nájdeme širokú ponuku tzv. Kontajnerov. To sú komponenty, do ktorých sa vkladajú ďalšie komponenty. Práve z nich formulár poskladáme a vo výsledku docielime kvalitného uspôsobenie veľkosti okna. To je v dnešnej dobe veľmi dôležité, pretože aplikáciu môžeme cieliť na telefóny, tablety alebo stolný PC. Vďaka prenositeľnosti Javy bude fungovať tá istá aplikácie všade a vďaka relatívnemu pozicovanie použijeme na každom zariadení ten istý formulár, aj keď veľkosti displejov sú rôzne.

Príprava layoutu

V relatívnom pozíciovanie sa často o rozloženie prvkov na formulári hovorí ako o layoutu. Poďme si ho vytvoriť. Vytvorte si novú JavaFX FXML Application a pomenujte ju UpominacNarozenin. Rovno si na začiatku ukážme, ako bude výsledný formulár aplikácie vyzerať:

Nový FXML dokument si rovno otvoríme v JavaFX Scene Builder a odstránime z neho vygenerovaný Button a Label.

VBox

Ako prvý do formulára vložíme VBox. To je kontajner, do ktorého môžeme vkladať ďalšie komponenty. Tieto komponenty sa radia pod seba (vertikálne).

VBox roztiahne po celom formulári a v Inspector v záložke Properties nastavte Alignment na CENTER. Tým sa budú komponenty vložené vo VBoxu centrovať. Prejdite do záložky Layout. Komponente tu nastastavíme kotvy a okraje.

Kotvy

Kotvy (Anchors) určujú ako sa komponenta prichytáva k okrajom rodičovskej komponenty. Rodičovská komponenta je tá komponenta, v ktorej je vložená, v našom prípade je to formulár (presnejšie AnchorPane). My budeme chcieť, aby sa VBox prichytil ku všetkým štyrom okrajom formulára. Keď budeme formulár rozťahovať, bude sa rozťahovať aj VBox. Jednotlivé kotvy aktivujeme kliknutím na príslušnú prerušovanou čiaru na obrázku dvoch štvorcov. Do políčok TOP, RIGHT, BOTTOM, LEFT vložte samé nuly. VBox tak bude tesne prilepený k okraju formulára.

Okraje

Okraje určujú veľkosť voľného miesta. Môžeme nastaviť Padding, čo je voľné miesto okolo obsahu komponenty. Ďalej tiež Spacing, čo je voľné miesto medzi komponentmi, ktoré sú vo VBoxu vložené.

Všetky okraje nastavíme na hodnotu 20. Výsledkom bude, že na sebe nebudú komponenty nalepené, čo by nevyzeralo dobre.

Náš formulár zatiaľ vyzerá takto:

GridPane

Na zobrazenie dnešného dátumu a najbližších narodenín použijeme 4 labelom. Aby boli pekne usporiadané, vložíme ich do GridPane. To je ďalší kontajner, ktorý komponenty radí do tabuľky.

GridPane vložíme do VBoxu. Ako východiskový má vždy 2 stĺpce a 3 riadky. Nám stačí tabuľka 2x2 a preto posledný riadok označíme kliknutím na modrej číslo 2 a klávesou delete ho odstránime. Ak by sme v nejakej aplikácii naopak chceli riadok alebo stĺpec pridať, urobíme to pomocou kontextového menu (klikneme na GridPane pravým tlačidlom).

Alignment nastavíme na CENTER, v záložke Layout nastavíme Min Height (minimálna výšku) na 60. Následne oboma stĺpcom tabuľky nastavíme Max Width na 150. Stĺpec označíme vždy kliknutím na jeho modrej číslo.

Náš Grid Pane teda bude široký maximálne 300 a vysoký minimálne 60.

Do každej bunky GridPane pretiahnite jeden Label a nastavte im texty podľa obrázku:

HBox

Ako druhú komponent do VBoxu vložíme HBox. Ten sa používa pre radenie komponentov vedľa seba (horizontálne). V záložke Layout mu nastavíme Spacing na 10 a Vgrow na Sometimes. Pomocou Vgrow tak nastavíme, aby sa HBox rozťahoval na výšku s formulárom.

ListView

Ako prvý komponent do HBoxu vložíme ListView. To je jednoduchý zoznam položiek, my ho budeme používať pre zobrazenie zoznamu priateľov. ListView nastavíme Pref Height aj Pref Width na hodnotu USE_COMPUTED_SIZE a Hgrow na Sometimes. Bude sa tak rozťahovať čo najviac to pôjde. Rodičovskému HBoxu nastavíme to isté.

Ako druhú komponent do HBoxu vložíme ďalšej GridPane. Ten bude opäť 2x2 (2 stĺpce a 2 riadky). Pretože nechceme, aby sa rozťahoval po celej výške, nastavíme mu v záložke Layout Max Height na 60. Do každej bunky vložíme Label s textom podľa obrázku:

Ako posledný komponent do VBoxu vložíme ďalšej HBox sa Spacing 10. V záložke Properties mu nastavíme Alignment na CENTER. Tým sa budú položky v ňom vložené centrovať. V ňom budú obsiahnuté 2 tlačidlá (button). Tlačidlám nastavíme texty podľa obrázka a Pref Width (v záložke Layout) na 70. Budú tak rovnako široká.

Patrilo by sa dodať, že Pref Width je synonymum pre šírku. Tá je označená ako Preferred, pretože sa od skutočnej šírky komponenty môže líšiť. Napr. keď nastavíme preferovanú šírku na 70 a formulár zmenšíme na 60, výška sa nutne zníži s ním (tlačidlo nemôže byť širší, než formulár, pokiaľ však nemá nastavenú minimálnu šírku, to by sa zmenšenie formulára na takú veľkosť nepovolilo).

Náš formulár máme hotový. Skúste si aplikáciu spustiť a formulár roztiahnuť, jeho obsah sa veľkosti okna prispôsobuje. (Pred spustením musíte uložiť scénu v JavaFX Scene Builderu az kontroleru vymazať atribúty a metódy s @FXML anotáciou, ktoré tam zostali po východiskovým projektu)

Pre prípad, že sa vám niečo nepodarilo, si ho môžete stiahnuť nižšie a nájsť si chybu. V budúcej lekcii, PRIPOMIENKOVÉ narodenín v JavaFX - Formuláre druhýkrát , naprogramujeme základ logické vrstvy aplikácie.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.