JavaFXで開く新世代GUI

  • 4,002 views
Uploaded on

第2回 岡山Javaユーザ会 勉強会 #okajug …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • もともと、JavaFXがF3という名前だった頃から、Flashにかなり影響を受けているので、こうなったのは必然的だったのかもしれません。
    Are you sure you want to
    Your message goes here
  • すばらしいですね!
    MXML+AS3でやれたことがそのままできそうですね。
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,002
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
14
Comments
2
Likes
7

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. Structure
  • 2. Structure SceneGraph
  • 3. GUI = Tree
  • 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. 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. XML Script GroovyFXFXML ScalaFX Visage
  • 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. <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. <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. Contents
  • 11. Control NodeContainer ShapeContents
  • 12. Web/HTML Media
  • 13. Web/HTML
  • 14. Web/HTML
  • 15. Web/HTML MediaMedia media = new Media(url);MediaPlayer player = new MediaPlayer(media);MediaView view = new MediaView(player);player.play();
  • 16. Animation 自動補完
  • 17. Animation 自動補完
  • 18. Animation
  • 19. Animation
  • 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. CSSContents Design
  • 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. 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. Structure Tool Logic Design SceneBuilderContents Design
  • 25. ConclusionStructure Design JavaFXContents Tool
  • 26. で開く新世代 GUI