JavaFX 2 quickstart: layouty a uzly

JavaFX je knihovna, která umožňuje vývoj grafických aplikací v Javě.

Zdrojové kódy budu z důvodu úspory místa uvádět bez importů. Všechny zde uvedené kódy si můžete stáhnout v přiloženém zipu.

Netbeans

Vytvoření JavaFX projektu: File → New Project → JavaFX → JavaFX Application → název projektu plus si můžete zvolit, zda zda chcete předvytvořit JavaFX třídu (Create Application Class).

V případě, že při zakládání nového projektu nemáte na výběr možnost JavaFX, zkuste si doinstalovat plugin: Tools → Plugins → JavaFX 2 Support, popřípadě stáhnout nejnovější plnou verzi Netbeans IDE.

Eclipse

Pro Eclipse je třeba doinstalovat plugin e(fx)clipse: Help → Install New Software → Add → Name: e(fx)clipse | Location: http://download.eclipse.org/…nightly/site → OK → rozevřít nabídku e(fx)clipse a zašktnout volbu dle verze vašeho Eclipse → Next → Next → musíte souhlasit s licenčním ujednáním → Finish (postup instalace s printscreen naleznete na: http://www.eclipse.org/…install.html)

Vytvoření JavaFX projektu: File → New Project → JavaFX → JavaFX Project → název projektu.

Struktura JavaFX aplikace

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í třída JavaFX aplikace dědí (extends) z javafx.applica­tion.Applicati­on class. Metoda start() je hlavním vstupním bodem JavaFX aplikace. Pokud vyvíjíte v Netbeans, tak metoda main(String[] args) není vyžadována, ale například v Eclipse bez ní projekt nespustíte.

JavaFX Stage je kontejner nejvyšší úrovně, který dostáváme předpřipravený jako parametr metody start().

JavaFX Scene je kontejner pro veškerý obsah scene grafu.

JavaFX Scene Graph je stromová struktura naší grafické aplikace. Graf se skládá z uzlů (Node) a každý uzel je buď typu kořen (root), větev (branch node), nebo list (leaf node). Root node (kořen) je první uzel. Tento uzel nemá žádného rodiče (parent). Branch node (větev) může mít děti (může mít pod sebou další uzly) a má rodiče (parent). Leaf node (list) je konečný uzel, který nemůže obsahovat další uzly. Jako root uzel (node) se většinou používá nějaký layout pane (plocha, panel pro prostorové rozmístění uzlů), do kterého se pak umisťují další uzly (tlačítka, štítky, další layouty, …) a vytváří se tak strom grafické aplikace.

Vytvoření aplikace

Vytvoříme třídu, která dědí (extends) z javafx.applica­tion.Applicati­on třídy. Implementujeme metodu start(Stage stage), která dostává jako parametr objekt typu Stage (jeviště). Tento objekt dostáváme již hotový. Dále si vytvoříme kořenový uzel (root node). Většinou použijeme nějaké předdefinované rozvržení (BorderPane, GridPane, Hbox, Vbox, FlowPane, …). Následně do rozvržení umisťujeme grafické komponenty - uzly (tlačítko, štítek, tabulku, posuvník, textové pole, …). Pak vytvoříme objekt typu Scene (scéna), vložíme do něj kořenový uzel a nastavíme velikost. Scene je kontejner pro veškerý námi vytvořený grafický obsah. Scene vložíme do Stage, nastavíme titulek a zavoláme metodu show(). Ještě nezapomeňme na metodu main(String[] args).

Layouty

Při vytváření grafické aplikace potřebujeme umístit jednotlivé komponenty (uzly) na určitá místa, abychom dostali požadovaný vzhled. K tomu můžeme použít předpřipravené layouty (kontejnery, které nám umožňují pozicovat jednotlivé uzly grafického uživatelského rozhraní). Layout je uzel typu větev (branch node). To znamená, že v sobě může obsahovat další uzly a těmto uzlům je navíc možné určit, kam se v rámci layout kontejneru mají umístit.

Příklady některých layoutů:

• BorderPane – poskytuje pět oblastí pro umístění uzlů (nahoru, doleva, doprostřed, doprava a dolů)
• HBox – uzly umisťuje jeden vedle druhého
• Vbox – uzly umisťuje pod sebe
• GridPane – vytváří mřížku do jejichž buněk je možné uzly umisťovat

Label (štítek)

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ýsledek:

Button (tlačítko)

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ýsledek:

Další ...

JavaFX nabízí mnoho ovládacích prvků uživatelského rozhraní. Je mimo rozsah tohoto krátkého tutoriálu všechny je zmiňovat, navíc jejich použití je podobné tomu, co jsme si již ukázali. V přiložením zipu naleznete bonusový příklad, který používá vstupní textové pole (TextField), přepínač (RadioButton), zaškrtávací políčka (CheckBox) a výběr (ChoiceBox).

Ve druhé části tohoto tutoriálu si probereme události (event) a stylování pomocí 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