1. díl - Úvod do JavaFX

Java JavaFX Úvod do JavaFX

V tomto seriálu se naučíme vytvářet okenní (formulářové) aplikace v JavaFX. Naučíme se pracovat s tlačítky, textovými poli, tabulkami, ale i obrázky nebo např. grafy.

Pro absolvování seriálu nepotřebujete žádné pokročilé znalosti. Předpokládám však, že znáte alespoň základy objektově orientovaného programování.

JavaFX a Swing

V Javě je spolu s JavaFX přítomný ještě starší okenní framework Swing. Oracle oznámil, že ho má JavaFX v budoucnu nahradit. Proto má nové aplikace smysl programovat již jen v JavaFX. U existujících projektů se budete ještě nějakou dobu setkávat se starším Swingem a je dobré mít v něm alespoň základní přehled.

JavaFX

JavaFX je moderní framework pro tvorbu bohatých okenních aplikací. Bohatých je zde myšleno vizuálně. JavaFX přináší podporu obrázků, videa, hudby, grafů, CSS stylů a dalších technologií, které zajistí, že výsledná aplikace je opravdu líbivá. Zároveň je kladen důraz na jednoduchost tvorby, všechny zmiňované věci jsou v JavěFX v základu. JavaFX se hodí jak pro desktopové aplikace, tak pro webové applety nebo mobilní aplikace.

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: http://www.oracle.com/…2157684.html. 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

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

Příště 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ů.


 

Stáhnout

Staženo 584x (153.1 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 (15 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Okenní aplikace v Java FX
Miniatura
Následující článek
Jednoduchá kalkulačka v JavaFX

 

 

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

Avatar
husakpetr93
Člen
Avatar
husakpetr93:

Máte někdo stejný problém? Stažený projekt funguje, ale mnou vytvořený ne, i když jsou kódy identické

Exception in Application start method
java.lang.reflect.InvocationTargetException
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:497)
        at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
        at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:497)
        at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:767)
Caused by: java.lang.RuntimeException: Exception in Application start method
        at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
        at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$156(LauncherImpl.java:182)
        at java.lang.Thread.run(Thread.java:745)
Caused by: java.lang.NullPointerException: Location is required.
        at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3207)
        at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3175)
        at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3148)
        at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3124)
        at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3104)
        at javafx.fxml.FXMLLoader.load(FXMLLoader.java:3097)
        at hellofx.HelloFX.start(HelloFX.java:22)
        at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$163(LauncherImpl.java:863)
        at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$176(PlatformImpl.java:326)
        at com.sun.javafx.application.PlatformImpl.lambda$null$174(PlatformImpl.java:295)
        at java.security.AccessController.doPrivileged(Native Method)
        at com.sun.javafx.application.PlatformImpl.lambda$runLater$175(PlatformImpl.java:294)
        at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
        at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
        at com.sun.glass.ui.win.WinApplication.lambda$null$149(WinApplication.java:191)
        ... 1 more
Exception running application hellofx.HelloFX
C:\Users\Petr\Desktop\HelloFX\nbproject\build-impl.xml:1051: The following error occurred while executing this line:
C:\Users\Petr\Desktop\HelloFX\nbproject\build-impl.xml:805: Java returned: 1
BUILD FAILED (total time: 2 seconds)
 
Odpovědět 13. dubna 3:29
Avatar
Odpovídá na husakpetr93
Petr Štechmüller:

Ahoj, máš špatnou cestu k FXML dokumentu. Zjisti si, odkud Ti NetBeans tahá resources...

Odpovědět 13. dubna 7:32
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
husakpetr93
Člen
Avatar
Odpovídá na Petr Štechmüller
husakpetr93:

Nějaká rada jak na to? Já to tu zkouším a nemůžu na nic přijít

 
Odpovědět 13. dubna 13:28
Avatar
Odpovídá na husakpetr93
Petr Štechmüller:

Můžeš sem hodit obrázek se složkovou strukturou projektu?

Odpovědět 13. dubna 14:49
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
rosatislav
Člen
Avatar
rosatislav:

Pokud jste taky nemohli najít java fx scene builder, tak jsem se dočetl na fórech, že to nyní najdete pod názvem Gluon

 
Odpovědět 15. října 17:53
Avatar
pocitac770
Redaktor
Avatar
Odpovídá na rosatislav
pocitac770:

Nevím, co myslíš tím "taky jste nemohli nají fx scene builder", když přímo ve článku máš odkaz na stažení. To, co sem dáváš je jeden z neoficiálních Scene builderů, které navazují na normální, protože byl neaktualizován (ale přesto ve většině věcí normálně funkční, třeba já ho pro nějaké ty základní věci stále používám)

 
Odpovědět 15. října 21:56
Avatar
Odpovídá na pocitac770
Petr Štechmüller:

To je sice pěkné, ale v oficiálním builderu už chybí nějaké kontrolky a někdo s tím může mít potíže...

Odpovědět 16. října 8:54
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
pocitac770
Redaktor
Avatar
Odpovídá na Petr Štechmüller
pocitac770:

které navazují na normální, protože byl neaktualizován (ale přesto ve většině věcí normálně funkční

 
Odpovědět 16. října 13:38
Avatar
rosatislav
Člen
Avatar
Odpovídá na pocitac770
rosatislav:

Ok ok, špatně jsem to pochopil, za to se omlouvám... Každopádně když jsem se to pokoušel stáhnout z této stránky, tak se to zhruba v 70% vždy zastavilo a nepodařilo.. (možná je chyba na mé straně).. tak jsem po chvíli hledání narazil na gluon, který je co se týče uživatelského rozhraní dost podobný.

 
Odpovědět 16. října 17:18
Avatar
Atrament
Člen
Avatar
Odpovídá na rosatislav
Atrament:

Situace se SceneBuilderem se má tak, že se Oracle před časem rozhodl přestat vydávat jeho binárky, pouze poskytuje zdrojáky. Gluon poskytuje binárky sestavené z těchto zdrojáků, takže se dá brát jako oficiální SceneBuilder. Vyjádření Oracle zde. Jaké k tomu měl Oracle důvody nevím, předpokládám, že je to v souladu s jejich firemní politikou 'posereme na co sáhneme' :(

 
Odpovědět 16. října 17: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 10 zpráv z 43. Zobrazit vše