2. diel - FXML a prvé formulárové aplikácie v JavaFX

V predchádzajúcej lekcii, Úvod do JavaFX , sme si JavaFX predstavili a nainštalovali. V dnešnom JavaFX tutoriále si vytvoríme základné Hello world aplikáciu.

FXML

V JavaFX je možné vyvíjať podobne ako v staršom swing, teda tak, že tvoríte inštancie jednotlivých formulárových prvkov (tlačidlo, textové pole). Tie potom vkladáte do tzv. Layoutov, čo sú vlastne kontajnery na formulárové komponenty.

Druhým spôsobom, ktorý budeme my v seriáli používať, je FXML. FXML je jazyk pre návrh formulárov. Asi vás podľa názvu neprekvapí, že je to ďalší jazyk odvodený z XML. Použitie XML pre návrh prezentačnej časti aplikácie (to je tá časť, s ktorou komunikuje užívateľ) nie je nič nové, naopak, ide o osvedčený princíp z webových aplikácií. Java sa tu rovnako ako C# inšpiruje a prenáša princípy HTML a CSS do desktopových aplikácií.

Java Scene Builder

Dobrou správou je, že FXML nemusíme písať ručne, máme totiž k dispozícii grafický designer. Ten nie je priamo v NetBeans, ale jedná sa o samostatnú aplikáciu, ktorú pod názvom JavaFX Scene Builder stiahnete tu: https://gluonhq.com/...ene-builder/. Aplikáciu si rovno nainštalujte.

Prvý formulárové aplikácie

Vytvorme si prvú okenné JavaFX aplikáciu. Nezačneme ničím iným, než Hello World. To je program, ktorý nerobí nič iné, než že vypíše nejaký text. V našom prípade tento text zobrazíme vo formulári.

Ako IDE budeme používať NetBeans. Vytvoríme nový projekt z kategórie JavaFX, pri type projektu zvolíme JavaFX FXML Application. Práve to je projekt, v ktorom môžeme používať grafický návrhár. Aplikáciu pomenujeme HelloFX a potvrdíme.

NetBeans nám vygeneruje projekt, ktorý už obsahuje malú ukážkovú aplikáciu. Keď projekt spustíme, uvidíme formulár s jedným tlačidlom. Po kliknutí naň sa zobrazí nápis Hello World. Sme teda v podstate bez práce

Štruktúra JavaFX projektu

Projekt obsahuje 3 súbory, popíšme si ich.

FXMLDocument.fxml

Súbor obsahuje FXML kód, ktorý popisuje ako formulár vyzerá. Ak na súbor v okne Projects 2x klikneme a máme nainštalovaný JavaFX Scene Builder, otvorí sa formulár práve v tomto nástroji:

Pozn. Ak ste JavaFX Scene Builder inštalovali keď bol NetBeans spustený, je ho najprv nutné reštartovať.

V prostrednom stĺpci okna vidíme ako formulár vyzerá.

V ľavej časti okna sa nachádza Library. To je knižnica komponentov, ktoré na formulár môžeme presúvať. Pod ňou, v oknu Hierarchy, vidíme stromovú štruktúru komponentov, ktoré sú na formulári vložené. V našom prípade sa jedná o Button (tlačidlo) a Label (textový popis).

V pravom stĺpci vidíme Inspector. V ňom vidíme vlastnosti označené komponenty. Skúste si v prostrednom stĺpci kliknúť na Button a potom na Label pod ním. Vidíme, že v záložke properties je vidieť napr. Text tlačidla.

Záložky Layout si zatiaľ nebudeme všímať a presunieme sa do záložky Code. Tá je veľmi dôležitá. Ak nejakú komponentu chceme používať v Java kóde, musíme jej prideliť fx: id. To je názov premennej, cez ktorú ku komponentu budeme pristupovať. Vidíme, že tlačidlo má fx: id button. Nižšie vidíme tiež priradenie udalostí, konkrétne udalosti On Action metóde handleButtonAction.

Vrátime sa do NetBeans a miesto dvojkliku na súbor FXMLDocument.fxml naň klikneme pravým tlačidlom a zvolíme Edit. NetBeans nám otvorí priamo obsah dokumentu, ktorý vyzerá 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 podľa toho, čo v ňom naklikáte a ručne do neho nebudeme zasahovať. Napriek tomu si ho popíšeme, aby sme chápali, ako technológia funguje.

Vidíme tu XML hlavičku, ďalej nejaké importy balíčkov s komponentmi a potom AnchorPane, čo je vlastne okno aplikácie. K tomu je priradený javovský kontrolér, ku ktorému sa hneď vrátime. AnchorPane má v sebe element children a v ňom komponenty, ktoré sú na ňom vložené. V našom prípade je to Button a Label. Vidíme, že atribúty naozaj súhlasí s tým, čo sme videli v JavaFX Scene Builder.

FXMLDocumentCon­troller.java

Kontrolér je javovský kód, ktorý formulár obsluhuje. V našom prípade vyzerá 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
    }

}

Kontrolér obsluhuje formulár, umožňuje meniť vlastnosti komponentov a reagovať na ich udalosti.

Všimnite si premenné label. Premenná je typu Label a je označená anotácií @FXML. Atribúty s touto anotáciou reprezentujú komponenty na formulári. Musí sa samozrejme volať rovnako, ako fx: id komponenty. Java túto premennú potom sama "prepojí" s formulárom a my sa nemusíme o nič starať.

Čo sa týka metód, máme tu initialize (), ktorá slúži k inicializácii formulára, tu v nej nie je žiadny kód.

Metóda handleButtonAction () sa zavolá vo chvíli, keď sa klikne na tlačidlo. Je tomu tak samozrejme preto, že je to u tlačidla v FXML súboru nastavenej. Metóda vypíše text do konzoly a tiež zmení text labelu na formulári.

HelloFX.java

Súbor HelloFX.java obsahuje spustiteľné metódy.

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 pre nás metóda štart (). Vidíme, že pomocou FXMLLoaderu načíta FXML súbor a na jeho základe vytvorí tzv. Scénu. Scéna je v podstate formulár. Následne objektu stage (javiska) nastavíme túto scénu a zobrazíme ju.

V našich aplikáciách budeme editovať v podstate len kontrolér a fxml cez JavaFX scene builder, rovnako je však dôležité, že už vieme, ako aplikácia funguje vnútri.

V budúcej lekcii, Jednoduchá kalkulačka v JavaFX , si vytvoríme svoju prvú jednoduchú aplikáciu v JavaFX. Bude sa jednať o kalkulačku. Zdrojové kódy dnešného projektu sú v prílohe k stiahnutiu. Bude tomu tak u všetkých dielov.

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