Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

Lekce 2 - FXML a první formulářová aplikace v JavaFX

V předchozí lekci, Úvod do JavaFX, jsme si JavaFX představili a nainstalovali.

V dnešním JavaFX tutoriálu si vytvoříme základní Hello world aplikaci.

FXML

V JavaFX je možné vyvíjet podobně jako ve starším Swingu, tedy tak, že tvoříte instance jednotlivých formulářových prvků (tlačítko, textové pole). Ty poté vkládáte do tzv. layoutů, což jsou vlastně kontejnery na formulářové komponenty.

Druhým způsobem, který budeme my v seriálu používat, je FXML. FXML je jazyk pro návrh formulářů. Asi vás podle názvu nepřekvapí, že je to další jazyk odvozený z XML. Použití XML pro návrh prezentační části aplikace (to je ta část, se kterou komunikuje uživatel) není nic nového, naopak se jedná o osvědčený princip z webových aplikací. Java se zde stejně jako C# inspiruje a přenáší principy HTML a CSS do desktopových aplikací.

Java Scene Builder

Dobrou zprávou je, že FXML nemusíme psát ručně, máme totiž k dispozici grafický designer. Ten není přímo v NetBeans, ale jedná se o samostatnou aplikaci, kterou pod názvem JavaFX Scene Builder stáhnete zde: https://gluonhq.com/…ene-builder/. Aplikaci si rovnou nainstalujte.

První formulářová aplikace

Vytvořme si první okenní JavaFX aplikaci. Nezačneme ničím jiným, než Hello World. To je program, který nedělá nic jiného, než že vypíše nějaký text. V našem případě tento text zobrazíme ve formuláři.

Jako IDE budeme používat NetBeans. Vytvoříme nový projekt z kategorie JavaFX, u typu projektu zvolíme JavaFX FXML Application. Právě to je projekt, ve kterém můžeme používat grafický návrhář. Aplikaci pojmenujeme HelloFX a potvrdíme.

NetBeans nám vygeneruje projekt, který již obsahuje malou ukázkovou aplikaci. Když projekt spustíme, uvidíme formulář s jedním tlačítkem. Po kliknutí na něj se zobrazí nápis Hello World. Jsme tedy v podstatě bez práce :)

Hello World aplikace v JavaFX

Struktura JavaFX projektu

Projekt obsahuje 3 soubory, popišme si je.

FXMLDocument.fxml

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Soubor obsahuje FXML kód, který popisuje jak formulář vypadá. Pokud na soubor v oknu Projects 2x klikneme a máme nainstalovaný JavaFX Scene Builder, otevře se formulář právě v tomto nástroji:

JavaFX Scene Builder

Pozn. Pokud jste JavaFX Scene Builder instalovali když byl NetBeans spuštěný, je ho nejprve nutné restartovat.

V prostředním sloupci okna vidíme jak formulář vypadá.

V levé části okna se nachází Library. To je knihovna komponent, které na formulář můžeme přesouvat. Pod ní, v oknu Hierarchy, vidíme stromovou strukturu komponent, které jsou na formuláři vložené. V našem případě se jedná o Button (tlačítko) a Label (textový popisek).

V pravém sloupci vidíme Inspector. V něm vidíme vlastnosti označené komponenty. Zkuste si v prostředním sloupci kliknout na Button a potom na Label pod ním. Vidíme, že v záložce properties je vidět např. text tlačítka.

Vlastnosti tlačítka v JavaFX Scene Builder

Záložky Layout si zatím nebudeme všímat a přesuneme se do záložky Code. Ta je velmi důležitá. Pokud nějakou komponentu chceme používat v Java kódu, musíme jí přidělit fx:id. To je název proměnné, přes kterou ke komponentě budeme přistupovat. Vidíme, že tlačítko má fx:id button. Níže vidíme také přiřazení událostí, konkrétně události On Action metodě handleButtonAction.

fxid v JavaFX Scene Builder

Vrátíme se do NetBeans a místo dvojkliku na soubor FXMLDocument.fxml na něj klikneme pravým tlačítkem a zvolíme Edit. NetBeans nám otevře přímo obsah dokumentu, který vypadá takto:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="hellofx.FXMLDocumentController">
    <children>
        <Button layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button" />
        <Label layoutX="126" layoutY="120" minHeight="16" minWidth="69" fx:id="label" />
    </children>
</AnchorPane>

Tento kód nám JavaFX Scene Builder generuje podle toho, co v něm naklikáme a ručně do něj nebudeme zasahovat. Přesto si ho popíšeme, abychom chápali, jak technologie funguje.

Vidíme zde XML hlavičku, dále nějaké importy balíčků s komponentami a poté AnchorPane, což je vlastně okno aplikace. K tomu je přiřazený javovský kontroler, ke kterému se hned vrátíme. AnchorPane má v sobě element children a v něm komponenty, které jsou na něm vložené. V našem případě je to Button a Label. Vidíme, že atributy opravdu souhlasí s tím, co jsme viděli v JavaFX Scene Builderu.

FXMLDocumentCon­troller.java

Kontroler je javovský kód, který formulář obsluhuje. V našem případě vypadá takto:

public class FXMLDocumentController implements Initializable {

    @FXML
    private Label label;

    @FXML
    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello World!");
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }

}

Kontroler obsluhuje formulář, umožňuje měnit vlastnosti komponent a reagovat na jejich události.

Všimněte si proměnné label. Proměnná je typu Label a je označená anotací @FXML. Atributy s touto anotací reprezentují komponenty na formuláři. Musí se samozřejmě jmenovat stejně, jako fx:id komponenty. Java tuto proměnnou poté sama "propojí" s formulářem a my se nemusíme o nic starat.

Co se týče metod, máme zde initialize(), která slouží k inicializaci formuláře, zde v ní není žádný kód.

Metoda handleButtonAc­tion() se zavolá ve chvíli, kdy se klikne na tlačítko. Je tomu tak samozřejmě proto, že je to u tlačítka v FXML souboru nastavené. Metoda vypíše text do konzole a také změní text labelu na formuláři.

HelloFX.java

Soubor HelloFX.java obsahuje spustitelné metody.

public class HelloFX extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

Důležitá je pro nás metoda start(). Vidíme, že pomocí FXMLLoaderu načte FXML soubor a na jeho základě vytvoří tzv. scénu. Scéna je v podstatě formulář. Následně objektu stage (jeviště) nastavíme tuto scénu a zobrazíme ji.

V našich aplikacích budeme editovat v podstatě jen kontroler a fxml přes JavaFX scene builder, stejně je však důležité, že již víme, jak aplikace funguje uvnitř.

V příští lekci, Jednoduchá kalkulačka v JavaFX, si vytvoříme svou první jednoduchou aplikaci v JavaFX. Bude se jednat o kalkulačku. Zdrojové kódy dnešního projektu jsou v příloze ke stažení. Bude tomu tak u všech dílů.


 

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
Úvod do JavaFX
Všechny články v sekci
Java FX - Okenní aplikace
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
22 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (7)

 

 

Komentáře
Zobrazit starší komentáře (55)

Avatar
Petr Daříček:1.12.2019 18:28

Koukam ze posledni Scene Builder je pro Java 11. Je nejaka alternativa pro Java 12, nebo je to komaptabilni?
Dik

 
Odpovědět
1.12.2019 18:28
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovídá na Petr Daříček
Petr Štechmüller:1.12.2019 19:23

Ahoj, je to kompatibilní. Scene builder nedělá nic jiného, než že uživatelsky přívětivou cestou upravuje XML soubor ;-)

Odpovědět
1.12.2019 19:23
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Jiří
Člen
Avatar
Jiří:3.6.2020 22:17

Ahoj, předchozí lekci (Lekce 1) jsem absolvoval v pohodě a podařilo se mi projekt spustit. Když ale chci vytvořit nový projekt -> JavaFX FXML Application tak mi to nejde vytvořit a hodí mi to hlášku, viz screen.
Nevím co dál. Kde může být chyba? Postupoval jsem dle návodu.
Díky :)

 
Odpovědět
3.6.2020 22:17
Avatar
Odpovídá na Jiří
Ondřej Kozel:11.10.2020 17:38

Narážím na stejný problém. Nepodařilo se ti to náhodou vyřešit?

 
Odpovědět
11.10.2020 17:38
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovídá na Ondřej Kozel
Petr Štechmüller:11.10.2020 19:13

Ahoj, JavaFX již není součástí Javy. Je třeba ji přidat jako samostatnou knihovnu. Jsou tu na to i články.

Odpovědět
11.10.2020 19:13
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Petr Štechmüller
Ondřej Kozel:11.10.2020 22:30

Díky, teď mi to už je jasné :-)

 
Odpovědět
11.10.2020 22:30
Avatar
Jiří
Člen
Avatar
Odpovídá na Ondřej Kozel
Jiří:12.10.2020 21:51

Ahoj a podařilo se ti to teda rozjet? Já to nebyl schopný dát dohromady ani podle různých návodů a tak projekty v JavaFX tvořím přes Maven.

 
Odpovědět
12.10.2020 21:51
Avatar
Odpovídá na Jiří
Ondřej Kozel:13.10.2020 13:30

Tak, jak to bylo popsáno v prvním článku – manuálně stáhnout a naimportovat knihovnu – ano, teď nějak bojuju s Gradlem. Už mi to přes něj fungovalo, ale teď zase nic :-(

 
Odpovědět
13.10.2020 13:30
Avatar
Michal Š.
Člen
Avatar
Odpovídá na Jiří
Michal Š.:2. ledna 18:44

Ahoj mám úplně stejný problém. Podařilo se Ti to nějak rozjet sim

 
Odpovědět
2. ledna 18:44
Avatar
David Maňák:13. března 17:34

Ahoj,
všichni tady chválí jak jsou tu dobré tutoriály. Ano souhlasím, ale tady tento se teda hrubě nepovedl. Aspoň z pohledu významu slova tutoriál. V lekci 1 ano, naimportujete knihovny spustíte - funguje. Ale tato druhá lekce to teda s tutoriálem nemá nic společného.
Podle komentářů výše vidím, že nejsem sám kdo se nedostal přes tento odstavec:

Jako IDE budeme používat NetBeans. Vytvoříme nový projekt z kategorie JavaFX, u typu projektu zvolíme JavaFX FXML Application. Právě to je projekt, ve kterém můžeme používat grafický návrhář. Aplikaci pojmenujeme HelloFX a potvrdíme.

Zkusil jsem snad všechno a už to vzdávám. Zvláště pak když jsem narazil na tohle:

Warning: Don't try to create a JavaFX project. The JavaFX Ant tasks of the current Apache NetBeans version are not ready for JavaFX 11+ yet, unless you have a custom JDK that bundles JavaFX, as described in Custom JDK+JavaFX image.

To chápu úplně jako protimluv ke zmiňovanému odstavci.

Poradil by někdo jak na to?
Nebo je to třeba dělat nějak jinak než je popsáno v tomto článku?
Děkuji všem.

 
Odpovědět
13. března 17:34
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 10 zpráv z 65. Zobrazit vše