Your SlideShare is downloading. ×
Scene BuilderでFXML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Scene BuilderでFXML

15,745

Published on

Japan JavaFX User Group seminar on 2 Jul. 2012. …

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

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

No Downloads
Views
Total Views
15,745
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
25
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×