JavaFX 2 QUICKSTART: layouty a uzly

V minulom dieli, Timer v JavaFX , sme sa naučili používať triedu Timer, ktorá umožňuje spúšťať udalosť po časovom intervale.

JavaFX je knižnica, ktorá umožňuje vývoj grafických aplikácií v Jave.

Zdrojové kódy budem z dôvodu úspory miesta uvádzať bez importov. Všetky tu uvedené kódy si môžete stiahnuť v priloženom zipsu.

NetBeans

Vytvorenie JavaFX projektu: File → New Project → JavaFX → JavaFX Application → názov projektu plus si môžete zvoliť, či či chcete předvytvořit JavaFX triedu (Create Application Class).

V prípade, že pri zakladaní nového projektu nemáte na výber možnosť JavaFX, skúste si doinštalovať plugin: Tools → Plugins → JavaFX 2 Support, prípadne stiahnuť najnovšiu plnú verziu Netbeans IDE.

Eclipse

Pre Eclipse je potrebné doinštalovať plugin e (fx) Clipse: Help → Install New Software → Add → Name: e (fx) Clipse | Location: http://download.eclipse.org/...nightly/site → OK → roztvoriť ponuku e (fx) Clipse a zašktnout voľbu podľa verzie vášho Eclipse → Next → Next → musíte súhlasiť s licenčnými podmienkami → Finish (postup inštalácie s printscreen nájdete na: http://www.eclipse.org/...install.html)

Vytvorenie JavaFX projektu: File → New Project → JavaFX → JavaFX Project → názov projektu.

Štruktúra JavaFX aplikácie

public class MyBasicGUI extends Application {

    @Override
    public void start(Stage stage) {
        try {
            BorderPane root = new BorderPane();

            // Zde přijde náš kód.

            Scene scene = new Scene(root, 400, 400);
            stage.setScene(scene);
            stage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

Hlavná trieda JavaFX aplikácie dedia (Extends) z javafx.applica­tion.Applicati­on class. Metóda štart () je hlavným vstupným bodom JavaFX aplikácie. Ak vyvíjate v Netbeans, tak metóda main (String [] args) nie je potrebná, ale napríklad v Eclipse bez nej projekt nespustíte.

JavaFX Stage je kontajner najvyššej úrovne, ktorý dostávame predpripravený ako parameter metódy štart ().

JavaFX Scene je kontajner pre všetok obsah scene grafu.

JavaFX Scene Graph je stromová štruktúra našej grafické aplikácie. Graf sa skladá z uzlov (Node) a každý uzol je buď typu koreň (root), vetva (branch node), alebo list (leaf node). Root node (koreň) je prvý uzol. Tento uzol nemá žiadneho rodiča (parent). Branch node (vetva) môže mať deti (môže mať pod sebou ďalšie uzly) a má rodiča (parent). Leaf node (list) je konečný uzol, ktorý nemôže obsahovať ďalšie uzly. Ako root uzol (node) sa väčšinou používa nejaký layout pane (plocha, panel pre priestorové rozmiestnenie uzlov), do ktorého sa potom umiestňujú ďalšie uzly (tlačidlá, štítky, ďalšie layouty, ...) a vytvára sa tak strom grafické aplikácie.

Vytvorenie aplikácie

Vytvoríme triedu, ktorá dedí (Extends) z javafx.applica­tion.Applicati­on triedy. Implementujeme metódu start (Stage stage), ktorá dostáva ako parameter objekt typu Stage (javiska). Tento objekt dostávame už hotový. Ďalej si vytvoríme koreňový uzol (root node). Väčšinou použijeme nejaké preddefinované rozvrhnutie (BorderPane, GridPane, Hbox, Vbox, FlowPane, ...). Následne do rozvrhnutie umiestňujeme grafickej komponenty - uzly (tlačidlo, štítok, tabuľku, posuvník, textové pole, ...). Potom vytvoríme objekt typu Scene (scéna), vložíme do neho koreňový uzol a nastavíme veľkosť. Scene je kontajner pre všetok nami vytvorený grafický obsah. Scene vložíme do Stage, nastavíme titulok a zavoláme metódu show (). Ešte nezabudnime na metódu main (String [] args).

Layouty

Pri vytváraní grafické aplikácie potrebujeme umiestniť jednotlivé komponenty (uzly) na určité miesta, aby sme dostali požadovaný vzhľad. K tomu môžeme použiť predpripravené layouty (kontajnery, ktoré nám umožňujú pozicový jednotlivé uzly grafického používateľského rozhrania). Layout je uzol typu vetva (branch node). To znamená, že v sebe môže obsahovať ďalšie uzly a týmto uzlom je navyše možné určiť, kam sa v rámci layout kontajneri majú umiestniť.

Príklady niektorých layoutov:

• BorderPane - poskytuje päť oblastí pre umiestnenie uzlov (nahor, doľava, doprostred, doprava a dole)
• HBox - uzly umiestňuje jeden vedľa druhého
• Vbox - uzly umiestňuje pod seba
• GridPane - vytvára mriežku do ktorých buniek je možné uzly umiestňovať

Label (štítok)

public class MyLabel extends Application {

    @Override
    public void start(Stage stage) {
        try {
            HBox hBoxPane = new HBox();             // vytvoření HBox rozvržení
            hBoxPane.setSpacing(20);                // nastaví velikost mezery mezi každým potomkem (child) v HBox
            hBoxPane.setPadding(new Insets(20, 10, 20, 10));    // horní, pravý, dolní a levý prostor okolo obsahu HBox

            Label label1 = new Label();         // vytvoření labelu bez textu
            label1.setText("Label 1");          // nastavení textu
            label1.setTextFill(Color.RED);          // nastaví barvu textu
            hBoxPane.getChildren().add(label1);     // vložení label1 do HBox rozvržení

            Label label2 = new Label("Label 2");        // vytvoření labelu s textem
            label2.setFont(new Font("Verdana", 28));    // nastavení typu písma a velikosti písma
            label2.setRotate(190);              // nastaví úhel otočení
            hBoxPane.getChildren().add(label2);     // vložení label2 do HBox rozvržení

            DropShadow ds = new DropShadow();   // vytvoření efektu DropShadow
            ds.setOffsetX(5);           // posun ve směru x v pixelech
            ds.setOffsetY(5);           // posun ve směru y v pixelech
            ds.setColor(Color.GRAY);        // nastavení barvy efektu

            Label label3 = new Label("Label 3");
            label3.setFont(Font.font("Courier New", FontWeight.BOLD, 22));  // jiný způsob nastavení písma
            label3.setTextFill(Color.GREEN);                // nastavení barvy textu
            label3.setEffect(ds);                       // nastavení efektu
            hBoxPane.getChildren().add(label3);             // vložení label3 do HBox rozvržení

            Scene scene = new Scene(hBoxPane);  // vložení HBox rozvržení do Scene (HBox je root node scene grafu)
            stage.setScene(scene);          // přidání scene do stage
            stage.setTitle("MyLabel");      // nastavení titulku
            stage.show();               // zobrazení okna

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

výsledok:

Button (tlačidlo)

public class MyButton extends Application {

    @Override
    public void start(Stage stage) {
        try {
            HBox hBoxPane = new HBox();
            hBoxPane.setSpacing(20);
            hBoxPane.setPadding(new Insets(30));    // nastavení prostoru okolo obsahu HBox rozvržení

            Button button1 = new Button();      // vytvoření nového tlačítka bez popisku
            button1.setText("Tlačítko 1");        // nastavení popisku (textu)
            hBoxPane.getChildren().add(button1);    // vložení tlačítka do HBox rozvržení

            Reflection reflection = new Reflection();   // vytvoření efektu odrazu
            reflection.setFraction(0.8);            // nastavení viditelné části odrazu

            Button button2 = new Button("Tlačítko 2");    // vytvoření tlačítka s popiskem
            button2.setCursor(Cursor.CLOSED_HAND);      // nastavení typu kurzoru
            button2.setEffect(reflection);          // přiřazení efektru tlačítku
            hBoxPane.getChildren().add(button2);

            Button button3 = new Button("Tlačítko 3");
            button3.setOpacity(0.5);            // nastavení neprůhlednosti tlačítka
            hBoxPane.getChildren().add(button3);

            Scene scene = new Scene(hBoxPane);
            stage.setScene(scene);
            stage.setTitle("MyButton");
            stage.show();

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

výsledok:

Ďalší ...

JavaFX ponúka mnoho ovládacích prvkov používateľského rozhrania. Je mimo rozsah tohto krátkeho tutoriálu všetky je zmieňovať, navyše ich použitie je podobné tomu, čo sme si už ukázali. V priložením zipsu nájdete bonusový príklad, ktorý používa vstupné textové pole (TextField), prepínač (RadioButton), zaškrtávacie políčka (checkbox) a výber (ChoiceBox).

V druhej časti tohto tutoriálu si preberieme udalosti (event) a štýlovanie pomocou CSS.

---

zdroje:

• http://docs.oracle.com/...i/index.html
• http://docs.oracle.com/..._started.htm
• http://docs.oracle.com/...controls.htm
• http://docs.oracle.com/...b-layout.htm
• http://docs.oracle.com/...enegraph.htm
• http://www.eclipse.org/...install.html

V budúcej lekcii, Task s návratovou hodnotou v JavaFX , si ukážeme použitie triedy Task na vrátenie výsledkov dlhotrvajúcej operácie.