への誘い
Agenda  Java の UI の歴史  JavaFX 2.0     UI     General Purpose  Conclusion
History
JDK/JRE  AWT      Swing              JavaFX3.0           Java 2DJava        SwingX             JAI/ImageIO           Java ...
JavaFX 2.0    第 3 の Java の GUI ライブラリ     高性能レンダリングエンジン  アニメーション / エフェクト      JVM で動作する言語から利用可
JavaFX        UI        General                  PurposeSceneGraph
Stage                        Scene                       VBox                       HBox                       TableViewSt...
NodeControl   Pane   Shape
Node  Control             Pane   ShapeWeb      Media              Chart
Web      WebView view = new WebView();      WebEngine engine = view.getEngine();      engine.load("http://google.com/");
MediaMedia media = new Media(url);MediaPlayer player = new MediaPlayer(media);MediaView view = new MediaView(player);playe...
SceneGraph の構築  public class Hello extends Application {      @Override      public void start(Stage stage) {          // ...
SceneGraph の構築FXML <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <FlowPane xmlns:fx="http://javafx.co...
JavaFX             UI                    General                                   Purpose  SceneGraph      FXML          ...
Animation            自動補完
Animation
EffectNode image = ...;                         Node image = ...;GaussianBlur blur = new GaussianBlur();   DropShadow shdw...
CSS                 Scene scene = new Scene(container, 400, 100);                 // スタイルシートの設定                 scene.getS...
CSS                 Scene scene = new Scene(container, 400, 100);                 // スタイルシートの設定                 scene.getS...
JavaFX             UI                   General                                  Purpose  SceneGraph      FXML         Pro...
MVC   View         Observer Pattern                         Model                    Event      Controller
MVC   View                                  Model                Bind      Controller         // モデル         DoublePropert...
JavaSE8            JavaFX                 OpenJDK             UI                    General                               ...
への誘い
Upcoming SlideShare
Loading in …5
×

JavaFX 2.0 への誘い

4,451 views

Published on

JJUG CCC 2011 Falll 発表資料
「JavaFX 2.0への誘い」

Introducting JavaFX 2.0

Published in: Technology, Art & Photos
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,451
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
50
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

JavaFX 2.0 への誘い

  1. 1. への誘い
  2. 2. Agenda Java の UI の歴史 JavaFX 2.0 UI General Purpose Conclusion
  3. 3. History
  4. 4. JDK/JRE AWT Swing JavaFX3.0 Java 2DJava SwingX JAI/ImageIO Java 3D LG3D JOGL SWT JavaFX2.0Non-Java GWT F3 JavaFX
  5. 5. JavaFX 2.0 第 3 の Java の GUI ライブラリ 高性能レンダリングエンジン アニメーション / エフェクト JVM で動作する言語から利用可
  6. 6. JavaFX UI General PurposeSceneGraph
  7. 7. Stage Scene VBox HBox TableViewStage Scene VBox HBox Label TextBox Button TableView
  8. 8. NodeControl Pane Shape
  9. 9. Node Control Pane ShapeWeb Media Chart
  10. 10. Web WebView view = new WebView(); WebEngine engine = view.getEngine(); engine.load("http://google.com/");
  11. 11. MediaMedia media = new Media(url);MediaPlayer player = new MediaPlayer(media);MediaView view = new MediaView(player);player.play();
  12. 12. SceneGraph の構築 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 の構築 public static void main(String[] args) { Application.launch(Hello.class, null); } }
  13. 13. SceneGraph の構築FXML <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <FlowPane xmlns:fx="http://javafx.com/fxml"> <children> <Label text="Label" /> <TextBox fx:id="textBox" text="TextBox" /> <Button fx:id="button" text="Button" /> </children> </FlowPane>
  14. 14. JavaFX UI General Purpose SceneGraph FXML Animation Node Effect CSSControl Region ShapeWeb Media Chart
  15. 15. Animation 自動補完
  16. 16. Animation
  17. 17. 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());
  18. 18. 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;} }
  19. 19. 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;} }
  20. 20. JavaFX UI General Purpose SceneGraph FXML Property Async Animation Node Effect Bind Collection CSSControl Region ShapeWeb Media Chart
  21. 21. MVC View Observer Pattern Model Event Controller
  22. 22. MVC View Model Bind Controller // モデル DoubleProperty xProperty = new DoubleProperty(); Slider slider = new Slider(50, 300, 0); // モデルにスライダの値をバインドさせる xProperty.bind(slider.valueProperty()); Rectangle rect = new Rectangle(50, 10, 50, 30); // 四角の x 座標にモデルをバインドさせる rect.xProperty().bind(xProperty);
  23. 23. JavaSE8 JavaFX OpenJDK UI General Purpose SceneGraph FXML Property Async Animation Node Effect Bind Collection CSS ToolControl Region Shape NetBeans 7.1 Scene BuilderWeb Media Chart デザイナ向けツールが ...
  24. 24. への誘い

×