Japan JavaFX User Group seminar on 2 Jul. 2012. "Editing FXML w/ Scene Builder"

1. Scene Builderで
FXML
Java in the Box
櫻庭 祐一

3. FXML

4. JavaFX
GUI Library for Java
もちろん、すべて Java で記述

5. public class Hello extends Application {
@Override
public void start(Stage stage) {
// ルートコンテナ
AnchorPane root = new AnchorPane();
// Scene Graph を生成し、ルートコンテナを貼る
Scene scene = new Scene(root);
stage.setScene(scene);
// Scene Graph を構築
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

6. Scene Graph
= Tree

7. Stage
Scene
AnchorPane
HBox
TableView
Label TextField Button

8. 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);

9. Java XML
手続き 構造
冗長 簡潔
ツールとの相性 ツールとの相性

10. FXML
シーングラフを XML で表す
スキーマレス
クラス : 要素
プロパティ : 属性 or 要素
CSS
Java との連携

11. <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"));

12. FXML と Java の連携
View Controller Model
FXML Java Java
fx:id @FXML
#method

13. <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>
public class TableController implements Initializable {
</AnchorPane>
@FXML private TextField textfield;
@FXML private TableView table;
@FXML public void handleAction(ActionEvent event) {
// テーブルの更新
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// テーブルの初期化
}
}

14. FXML は便利
でも複雑なGUIになると...
やっぱりツールがほしい!!
Scene Builder

15. Scene Builder

16. Scene Builder
WYSWYG FXML Editor
連携
NetBeans Scene Builder
Java FXML

17. できること
FXML をグラフィカルに編集
Preview
CSS の設定
Controller の設定

18. できないこと
コントローラの作成
外部 CSS の編集
FXML ソースの表示
NB とのプロジェクト共有

19. Making an Application
w/ Scene Builder

20. Conclusion
FXML でシーングラフを簡単に
MVC (Presentation Model, MVVM)
Scene Builder: FXML Editor
UI 構築には便利
まだまだ足りない点いっぱい

21. Scene Builderで
FXML
Java in the Box
櫻庭 祐一