SlideShare a Scribd company logo
への誘い
Agenda

  Java の UI の歴史

  JavaFX 2.0
     UI
     General Purpose

  Conclusion
History
JDK/JRE

  AWT      Swing              JavaFX3.0
           Java 2D
Java        SwingX
             JAI/ImageIO
           Java 3D    LG3D
                JOGL
              SWT         JavaFX2.0
Non-Java
                 GWT
                  F3 JavaFX
JavaFX 2.0
    第 3 の Java の GUI ライブラリ

     高性能レンダリングエンジン
  アニメーション / エフェクト
      JVM で動作する言語から利用可
JavaFX
        UI        General
                  Purpose

SceneGraph
Stage
                        Scene
                       VBox
                       HBox
                       TableView




Stage   Scene VBox   HBox          Label
                                   TextBox
                                   Button
                     TableView
Node



Control   Pane   Shape
Node



  Control             Pane   Shape


Web

      Media

              Chart
Web
      WebView view = new WebView();

      WebEngine engine = view.getEngine();
      engine.load("http://google.com/");
Media

Media media = new Media(url);
MediaPlayer player = new MediaPlayer(media);
MediaView view = new MediaView(player);

player.play();
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);
      }
  }
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>
JavaFX
             UI                    General
                                   Purpose

  SceneGraph      FXML
                       Animation
      Node             Effect
                       CSS

Control Region Shape


Web Media Chart
Animation




            自動補完
Animation
Effect


Node 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());
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;
}                                          }
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;
}                                          }
JavaFX
             UI                   General
                                  Purpose

  SceneGraph      FXML         Property     Async
                   Animation
      Node         Effect      Bind   Collection
                   CSS

Control Region Shape


Web Media Chart
MVC   View         Observer Pattern

                         Model


                    Event
      Controller
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);
JavaSE8            JavaFX                 OpenJDK

             UI                    General
                                   Purpose

  SceneGraph      FXML          Property       Async
                   Animation
      Node         Effect      Bind      Collection
                   CSS
                               Tool
Control Region Shape
                               NetBeans 7.1 Scene Builder

Web Media Chart                デザイナ向けツールが ...
への誘い

More Related Content

JavaFX 2.0 への誘い

  • 2. Agenda Java の UI の歴史 JavaFX 2.0 UI General Purpose Conclusion
  • 4. JDK/JRE AWT Swing JavaFX3.0 Java 2D Java SwingX JAI/ImageIO Java 3D LG3D JOGL SWT JavaFX2.0 Non-Java GWT F3 JavaFX
  • 5. JavaFX 2.0 第 3 の Java の GUI ライブラリ 高性能レンダリングエンジン アニメーション / エフェクト JVM で動作する言語から利用可
  • 6. JavaFX UI General Purpose SceneGraph
  • 7. Stage Scene VBox HBox TableView Stage Scene VBox HBox Label TextBox Button TableView
  • 8. Node Control Pane Shape
  • 9. Node Control Pane Shape Web Media Chart
  • 10. Web WebView view = new WebView(); WebEngine engine = view.getEngine(); engine.load("http://google.com/");
  • 11. Media Media media = new Media(url); MediaPlayer player = new MediaPlayer(media); MediaView view = new MediaView(player); player.play();
  • 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. 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. JavaFX UI General Purpose SceneGraph FXML Animation Node Effect CSS Control Region Shape Web Media Chart
  • 15. Animation 自動補完
  • 17. Effect Node 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. 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. 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. JavaFX UI General Purpose SceneGraph FXML Property Async Animation Node Effect Bind Collection CSS Control Region Shape Web Media Chart
  • 21. MVC View Observer Pattern Model Event Controller
  • 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. JavaSE8 JavaFX OpenJDK UI General Purpose SceneGraph FXML Property Async Animation Node Effect Bind Collection CSS Tool Control Region Shape NetBeans 7.1 Scene Builder Web Media Chart デザイナ向けツールが ...