JavaFXで開く新世代GUI

5,033 views

Published on

第2回 岡山Javaユーザ会 勉強会 #okajug
発表資料 「JavaFXで開く新世代GUI」

Published in: Technology
2 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
5,033
On SlideShare
0
From Embeds
0
Number of Embeds
2,220
Actions
Shares
0
Downloads
17
Comments
2
Likes
9
Embeds 0
No embeds

No notes for slide

JavaFXで開く新世代GUI

  1. 1. Structure
  2. 2. Structure SceneGraph
  3. 3. GUI = Tree
  4. 4. Stage Stage Scene Scene VBox VBox HBox HBox TableView TableViewStageStage Scene VBox Scene VBox HBox HBox Label Label TextBox TextBox Button Button TableView TableView
  5. 5. public class Hello extends Application { @Override public void start(Stage stage) { // コンテナ Group container = new Group(); // シーングラフのルート要素を生成し、コンテナを貼る Scene scene = new Scene(container, 100, 20); stage.setScene(scene); // ラベルを生成しコンテナに貼る Label label = new Label("Hello, World!"); container.getChildren().add(label); } stage.show(); SceneGraph stage.setVisible(true); public static void main(String[] args) { Application.launch(args); }}
  6. 6. XML Script GroovyFXFXML ScalaFX Visage
  7. 7. <VBox xmlns:fx="http://javafx.com/fxml" fx:controller="contents.browser2" spacing="10" layoutY="10"> <children> <HBox spacing="10" style="-fx-alignment: center"> <children> <TextField fx:id="field" prefWidth="200" onAction="#handleAction" /> <Button text="Load" onAction="#handleAction" /> </children> </HBox> <WebView fx:id="view" /> </children></VBox>
  8. 8. <VBox xmlns:fx="http://javafx.com/fxml" fx:controller="contents.browser2" spacing="10" layoutY="10"> <children> <HBox spacing="10" style="-fx-alignment: center"> <children> <TextField fx:id="field" prefWidth="200" onAction="#handleAction" /> <Button text="Load" onAction="#handleAction" /> </children> </HBox> <WebView fx:id="view" /> </children></VBox> View FXML Model Java Controller Java
  9. 9. <VBox xmlns:fx="http://javafx.com/fxml" fx:controller="contents.browser2" spacing="10" layoutY="10"> <children> <HBox spacing="10" style="-fx-alignment: center"> <children> <TextField fx:id="field" prefWidth="200" onAction="#handleAction" /> <Button text="Load" onAction="#handleAction" /> </children> </HBox> <WebView fx:id="view" /> </children></VBox>public class browser2 { @FXML View private TextField field; @FXML FXML private WebView view; private WebEngine engine; Model Java @FXML private void handleAction(ActionEvent event) { String url = field.getText(); engine.load(url); } Controller} Java
  10. 10. Contents
  11. 11. Control NodeContainer ShapeContents
  12. 12. Web/HTML Media
  13. 13. Web/HTML
  14. 14. Web/HTML
  15. 15. Web/HTML MediaMedia media = new Media(url);MediaPlayer player = new MediaPlayer(media);MediaView view = new MediaView(player);player.play();
  16. 16. Animation 自動補完
  17. 17. Animation 自動補完
  18. 18. Animation
  19. 19. Animation
  20. 20. EffectNode image = ...; Node image = ...;GaussianBlur blur = new GaussianBlur(); DropShadow shdw= new DropShadow();blur.setRadius(10.0); shdw.setOffsetX(5); shdw.setOffsetY(5);image.setEffect(blur); image.setEffect(shdw);Node image = ...; Node image = ...;image.setEffect(new Reflection()); image.setEffect(new SepiaTone());
  21. 21. CSSContents Design
  22. 22. CSS Scene scene = new Scene(container, 400, 100); // スタイルシートの設定 scene.getStylesheets().add("/style.css");.button { .button { -fx-font: 24pt "SansSerif"; -fx-font: 16pt "SansSerif"; -fx-text-fill: #006666; -fx-text-fill: #00FF33; -fx-background-color: orange; -fx-background-color: #0066FF; -fx-border-radius: 20; -fx-border-radius: 0; -fx-background-radius: 20; -fx-background-radius: 0; -fx-padding: 5; -fx-padding: 20;} }
  23. 23. CSS Scene scene = new Scene(container, 400, 100); // スタイルシートの設定 scene.getStylesheets().add("/style.css");.button { .button { -fx-font: 24pt "SansSerif"; -fx-font: 16pt "SansSerif"; -fx-text-fill: #006666; -fx-text-fill: #00FF33; -fx-background-color: orange; -fx-background-color: #0066FF; -fx-border-radius: 20; -fx-border-radius: 0; -fx-background-radius: 20; -fx-background-radius: 0; -fx-padding: 5; -fx-padding: 20;} }
  24. 24. Structure Tool Logic Design SceneBuilderContents Design
  25. 25. ConclusionStructure Design JavaFXContents Tool
  26. 26. で開く新世代 GUI

×