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) {        // ルートコンテナ        AnchorP...
Scene Graph   = Tree
Stage       Scene     AnchorPane            HBoxTableViewLabel TextField Button
AnchorPane root = new AnchorPane();Scene scene = new Scene(root);stage.setScene(scene);TableView<Person> table = new Table...
Java      XML  手続き       構造   冗長        簡潔ツールとの相性   ツールとの相性
FXML  シーングラフを XML で表す スキーマレス  クラス : 要素  プロパティ : 属性 or 要素 CSS  Java との連携
<AnchorPane prefHeight="400.0" prefWidth="600.0">  <children>    <HBox alignment="CENTER"          prefHeight="50.0" prefW...
FXML と Java の連携 View     Controller   Model FXML       Java       Javafx:id     @FXML#method
<AnchorPane xmlns:fx="http://javafx.com/fxml"             fx:controller="contents.TableController">  <children>    <HBox> ...
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
Upcoming SlideShare
Loading in …5
×

Scene BuilderでFXML

23,521 views

Published on

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

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
23,521
On SlideShare
0
From Embeds
0
Number of Embeds
17,540
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Scene BuilderでFXML

  1. 1. Scene Builderで FXML Java in the Box 櫻庭 祐一
  2. 2. FXML
  3. 3. JavaFX GUI Library for Javaもちろん、すべて Java で記述
  4. 4. 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); }}
  5. 5. Scene Graph = Tree
  6. 6. Stage Scene AnchorPane HBoxTableViewLabel TextField Button
  7. 7. 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);
  8. 8. Java XML 手続き 構造 冗長 簡潔ツールとの相性 ツールとの相性
  9. 9. FXML シーングラフを XML で表す スキーマレス クラス : 要素 プロパティ : 属性 or 要素 CSS Java との連携
  10. 10. <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"));
  11. 11. FXML と Java の連携 View Controller Model FXML Java Javafx:id @FXML#method
  12. 12. <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) { // テーブルの初期化 } }
  13. 13. FXML は便利 でも複雑なGUIになると... やっぱりツールがほしい!! Scene Builder
  14. 14. Scene Builder
  15. 15. Scene Builder WYSWYG FXML Editor 連携 NetBeans Scene Builder Java FXML
  16. 16. できることFXML をグラフィカルに編集 Preview CSS の設定 Controller の設定
  17. 17. できないことコントローラの作成 外部 CSS の編集 FXML ソースの表示 NB とのプロジェクト共有
  18. 18. Making an Application w/ Scene Builder
  19. 19. Conclusion FXML でシーングラフを簡単に MVC (Presentation Model, MVVM)Scene Builder: FXML Editor UI 構築には便利 まだまだ足りない点いっぱい
  20. 20. Scene Builderで FXML Java in the Box 櫻庭 祐一

×