Scene BuilderでFXML

Scene Builderで FXML

Java in the Box櫻庭祐一

FXML

JavaFXGUI Library for Java

もちろん、すべて Java で記述

public class Hello extends Application {

}

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

@Override public void start(Stage stage) {

}

// ルートコンテナ AnchorPane root = new AnchorPane(); // Scene Graph を生成し、ルートコンテナを貼る Scene scene = new Scene(root); stage.setScene(scene);

stage.show();

// Scene Graph を構築

Scene Graph= Tree

Scene Graph= Tree

Stage

Scene

AnchorPane

HBoxTableView

Label TextField Button

AnchorPane root = new AnchorPane(); Scene scene = new Scene(root); stage.setScene(scene);

TableView<Person> table = new TableView<>(); root.getChildren().add(table);

HBox hbox = new HBox(); Label label = new Label("Label"); hbox.getChildren().add(label); TextField field = new TextField("TextField"); hbox.getChildren().add(field); Button button = new Button("button"); hbox.getChildren().add(button); root.getChildren().add(hbox);

AnchorPane root = new AnchorPane(); Scene scene = new Scene(root); stage.setScene(scene);

TableView<Person> table = new TableView<>(); root.getChildren().add(table);

HBox hbox = new HBox(); Label label = new Label("Label"); hbox.getChildren().add(label); TextField field = new TextField("TextField"); hbox.getChildren().add(field); Button button = new Button("button"); hbox.getChildren().add(button); root.getChildren().add(hbox);

Java

手続き構造

XML

冗長

ツールとの相性

簡潔

ツールとの相性

FXMLFXMLシーングラフを XML で表す

スキーマレスクラス : 要素プロパティ : 属性 or 要素

CSS

Java との連携

<AnchorPane prefHeight="400.0" prefWidth="600.0"> <children> <HBox alignment="CENTER" prefHeight="50.0" prefWidth="572.0" spacing="20.0"> <children> <Label style="-fx-font-size: 24;" text="Label" /> <TextField style="-fx-font-size: 24;" text="TextField" /> <Button style="-fx-font-size: 24;" text="Load" /> </children> </HBox> <TableView prefHeight="302.0" prefWidth="572.0" /> </children></AnchorPane>




AnchorPane pane = FXMLLoader.load( this.getClass().getResource("table.fxml"));

FXML と Java の連携

ModelViewFXML Java

ControllerJava

fx:id#method

@FXML

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.TableController"> <children> <HBox> <children> <Label /> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <TableView fx:id="table" /> </children></AnchorPane>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.TableController"> <children> <HBox> <children> <Label /> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <TableView fx:id="table" /> </children></AnchorPane>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.TableController"> <children> <HBox> <children> <Label /> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <TableView fx:id="table" /> </children></AnchorPane>public class TableController implements Initializable {

@FXML private TextField textfield; @FXML private TableView table; @FXML public void handleAction(ActionEvent event) { // テーブルの更新 } @Override public void initialize(URL url, ResourceBundle rb) { // テーブルの初期化 } }

public class TableController implements Initializable { @FXML private TextField textfield; @FXML private TableView table; @FXML public void handleAction(ActionEvent event) { // テーブルの更新 } @Override public void initialize(URL url, ResourceBundle rb) { // テーブルの初期化 } }

FXML は便利

でも複雑なGUIになると...

やっぱりツールがほしい!!

Scene Builder

Scene Builder

Scene Builder

WYSWYG FXML Editor

NetBeans Scene BuilderJava FXML

連携

できること

FXMLをグラフィカルに編集

Preview

CSSの設定

Controller の設定

できないこと

コントローラの作成

外部CSSの編集

FXMLソースの表示

NBとのプロジェクト共有

Making an Application w/ Scene Builder

Conclusion

FXML でシーングラフを簡単に

MVC (Presentation Model, MVVM)

Scene Builder: FXML Editor

UI 構築には便利

まだまだ足りない点いっぱい

Scene Builderで FXML

Java in the Box櫻庭祐一

Scene BuilderでFXML

Technology