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);
    }
}

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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