JavaFX 2 quickstart: layouty a uzly
Java JavaFX 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.application.Application 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.application.Application 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
Stáhnout
Staženo 277x (4.13 kB)
Aplikace je včetně zdrojových kódů v jazyce java
Komentáře
Zobrazeno 5 zpráv z 5.