Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde

Lekce 1 - Úvod do JavaFX

Java JavaFX Úvod do JavaFX

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V tomto Java on-line kurzu 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í kurzu 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ř.

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


 

Stáhnout

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

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
21 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Okenní aplikace v Java FX
Miniatura
Následující článek
Jednoduchá kalkulačka v JavaFX
Aktivity (2)

 

 

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

Avatar
Mango
Redaktor
Avatar
Mango:25. března 12:12

Nemá to být public void? V Controlleru

Odpovědět 25. března 12:12
Nezáleží na věku ale na vědomostech ;D
Avatar
Odpovídá na Mango
Petr Štechmüller:25. března 12:57

Myslíš u této metody:

@FXML
    private void buttonAction(ActionEvent event) {
        label1.setText("Klikli ste na mopsla");
    }

Díky anotaci @FXML to může být private.

Odpovědět 25. března 12:57
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Marty
Člen
Avatar
Marty:4. srpna 4:24

U FX se mi nelíbí to bílé pozadí. Nedá se podobně jako u Swing nastavit "Windows" style, aby to pozadí bylo klasicky světle šedé?

Editováno 4. srpna 4:26
 
Odpovědět 4. srpna 4:24
Avatar
Odpovídá na Marty
Petr Štechmüller:4. srpna 8:25

Ahoj, když se Ti nelíbí bílá, tak si barvu změn pomocí CSS

Odpovědět  +1 4. srpna 8:25
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Marty
Člen
Avatar
Odpovídá na Petr Štechmüller
Marty:4. srpna 22:47

A jo, díky. Hned se na to líp dívá. :)

 
Odpovědět 4. srpna 22:47
Avatar
MiroslavP
Člen
Avatar
MiroslavP:11. října 21:23

Velmi názorné, poutavé vysvětlení. Děkuji

 
Odpovědět 11. října 21:23
Avatar
Radka Jánská:1. listopadu 11:52

Ahoj všem, manžel se mi vrátil z mise a já se tím pádem mohu vrátit ke studiu, hurá. Bohužel jsem se zasekla hned na prvním úkolu - stáhnout JavaFX Scene Builder. Zkoušela jsem to přes odkaz v článku, ale háže mi to chyby (IP adresa serveru download.oracle.com nebyla nalezena.), dohledala jsem si i to vyjádření Oraclu uvedené výše v komentářích, ale tam mi to háže také chyby (IP adresa serveru wiki.openjdk.ja­va.net nebyla nalezena.) ... Můžete mi někdo poradit, kde to mám tedy stáhnout, nebo jestli je ten odkaz stále funkční, ale musím nějak vyřešit ty chyby ...

 
Odpovědět 1. listopadu 11:52
Avatar
Odpovídá na Radka Jánská
Radka Jánská:1. listopadu 12:01

Chápu to dobře, že funguje již jen ten Gluon?

 
Odpovědět 1. listopadu 12:01
Avatar
Odpovídá na Radka Jánská
Radka Jánská:1. listopadu 12:11

Nejde mi stáhnout ani Gluon.

 
Odpovědět 1. listopadu 12:11
Avatar
Odpovídá na Radka Jánská
Radka Jánská:1. listopadu 13:57

Tak se všem omlouvám za spam, dala jsem si dvě hoďky pauzu a už to najednou funguje.

 
Odpovědět 1. listopadu 13:57
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 55. Zobrazit vše