Scene Builderで
          FXML

        Java in the Box
        櫻庭 祐一
FXML
JavaFX
   GUI Library for Java


もちろん、すべて Java で記述
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);
    }
}
Scene Graph
   = Tree
Stage

       Scene
     AnchorPane

            HBox
TableView


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);
Java      XML
  手続き       構造

   冗長        簡潔
ツールとの相性   ツールとの相性
FXML
  シーングラフを 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 の連携

 View     Controller   Model
 FXML       Java       Java
fx:id     @FXML
#method
<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) {
                   // テーブルの初期化
               }
           }
FXML は便利
 でも複雑なGUIになると...
 やっぱりツールがほしい!!


 Scene Builder
Scene Builder
Scene Builder

    WYSWYG FXML Editor




             連携

  NetBeans        Scene Builder
   Java              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

  • 1.
    Scene Builderで FXML Java in the Box 櫻庭 祐一
  • 3.
  • 4.
    JavaFX GUI Library for Java もちろん、すべて Java で記述
  • 5.
    public class Helloextends 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.
  • 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.
  • 16.
    Scene Builder WYSWYG FXML Editor 連携 NetBeans Scene Builder Java FXML
  • 17.
  • 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 櫻庭 祐一