3. díl - Upomínač narozenin v JavaFX - Návrh formuláře

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

V minulém dílu našeho seriálu tutoriálů o JavaFX jsme si naprogramovali jednoduchou kalkulačku. Dnes 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čne 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:

Formulář upomínače narozenin v JavaFX

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.

Kotvy v JavaFX Scene Builderu
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.

Padding v JavaFX Scene Builder

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

Tvorba formuláře JavaFX aplikace

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:

Tvorba formuláře JavaFX aplikace

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:

Tvorba formuláře JavaFX aplikace

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

Tvorba formuláře JavaFX aplikace

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)

Tvorba formuláře JavaFX aplikace
Tvorba formuláře JavaFX aplikace

Pro případ, že se vám něco nepovedlo, si ho můžete stáhnout níže a najít si chybu. Příště naprogramujeme základ logické vrstvy aplikace.


 

Stáhnout

Staženo 320x (164.85 kB)
Aplikace je včetně zdrojových kódů v jazyce java

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (5 hlasů) :
4.84.84.84.84.8


 


Miniatura
Předchozí článek
Jednoduchá kalkulačka v JavaFX
Miniatura
Všechny články v sekci
Okenní aplikace v Java FX

 

 

Komentáře

Avatar
petr.chatar.anton:

Ahoj, zajímalo by mně, jak nastavím minimální (nebo i maximální) velikost, pod kterou
nepůjde okno aplikace zmenšit (zvětšit).

 
Odpovědět 24.2.2015 17:21
Avatar
petrkokoska
Člen
Avatar
petrkokoska:

Zdravím, chtěl bych se zeptat jak v Controlleru dělat klávesové zkratky.
Toto jaksi nefunguje
@FXML
public MenuItem novy;
novy.setAccele­rator(new KeyCodeCombina­tion(KeyCode.N, KeyCombination­.CONTROL_DOWN));
:-)

 
Odpovědět 29.4.2015 15:50
Avatar
Michal Huff
Člen
Avatar
Odpovídá na petr.chatar.anton
Michal Huff:

Nastavis AnchorPanu nejakou MaxWidth a MaxHeight a nemelo by to jit pod ni zmensit

Odpovědět 31. března 15:32
Než položím hloupou otázku, použiji google.
Avatar
Odpovídá na Michal Huff
Pavel Habžanský:

MinWidth/MinHeight ne? Tím by se měla nastavit minimální šířka/výška kontejnetu, pod kterou nepůjde okno zmenšit.

Odpovědět 4. června 15:03
Čím větší výzva, tím větší zkušenost
Avatar
rosatislav
Člen
Avatar
Odpovídá na petr.chatar.anton
rosatislav:

když jsem dal min width nebo height anchorpane, tak to stejně šlo zmenšit (aspoň mě to jde). Dá se to udělat tak, že ve třídě UpominacNarozenin ve funkci start zavoláš např:

stage.setMinWidth(200);
stage.setMinHeight(300);
 
Odpovědět 16. listopadu 16:38
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.