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

PDF
何が変わった JavaFX 2.0
Yuichi Sakuraba
 
PDF
Scene BuilderでFXML
Yuichi Sakuraba
 
PDF
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Yuichi Sakuraba
 
PDF
Unit testing JavaScript with JUnit/JavaFX
Shinya Mochida
 
PDF
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
a know
 
PDF
JavaFX 2.0 - リッチクライアントのためのUI基盤
Yuichi Sakuraba
 
PDF
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
 
PDF
Creators'night#12今井
Daisuke Imai
 
何が変わった JavaFX 2.0
Yuichi Sakuraba
 
Scene BuilderでFXML
Yuichi Sakuraba
 
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Yuichi Sakuraba
 
Unit testing JavaScript with JUnit/JavaFX
Shinya Mochida
 
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
a know
 
JavaFX 2.0 - リッチクライアントのためのUI基盤
Yuichi Sakuraba
 
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
 
Creators'night#12今井
Daisuke Imai
 

What's hot (10)

PDF
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Akira Inoue
 
PDF
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
 
PPTX
Java fx勉強会lt 第8回
Taiji Miyabe
 
PPT
20090212
小野 修司
 
PDF
はじめてのVue.js
kamiyam .
 
PDF
Study Intro Backbone
Gensei Kawasaki
 
PDF
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
PDF
PhoneGap Introduction
Keisuke Todoroki
 
PDF
Knocked out in knockout js
Hiroyuki Tashima
 
PPTX
Windows ストアアプリのgrid viewを入門してみた
一希 大田
 
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Akira Inoue
 
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
 
Java fx勉強会lt 第8回
Taiji Miyabe
 
20090212
小野 修司
 
はじめてのVue.js
kamiyam .
 
Study Intro Backbone
Gensei Kawasaki
 
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
PhoneGap Introduction
Keisuke Todoroki
 
Knocked out in knockout js
Hiroyuki Tashima
 
Windows ストアアプリのgrid viewを入門してみた
一希 大田
 
Ad

Similar to JavaFX 2.0 への誘い (20)

KEY
Arctic.js
chikathreesix
 
PDF
PWAnight_20221019_クリエイティブコーディングとは?
reona396
 
PDF
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
 
PDF
Visualforce + jQuery
Salesforce Developers Japan
 
PDF
JavaFX & GlassFish 勉強会 Oh! JavaFX 2.0!
Yuichi Sakuraba
 
PDF
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
 
PDF
Canvas勉強会
Tsutomu Kawamura
 
PPTX
HTML5 on ASP.NET
Fujio Kojima
 
PPTX
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
Fujio Kojima
 
PDF
-入門- enchant.js でゲームを作ろう
nico0927
 
PPTX
Java FXグラフィックスとアニメーション入門(JJUG CCC 2015 Spring G-7)
torutk
 
PDF
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
 
PDF
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
 
PDF
Seasarプロジェクト徹底攻略
takezoe
 
PDF
Ajax basic
Katsuyuki Seino
 
PDF
densan2014-late01
Takenori Nakagawa
 
PDF
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
 
PDF
ASP.NETを利用したAJAX開発の応用
Sho Okada
 
PDF
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
 
PDF
これからのJavaScriptの話
Shogo Sensui
 
Arctic.js
chikathreesix
 
PWAnight_20221019_クリエイティブコーディングとは?
reona396
 
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
 
Visualforce + jQuery
Salesforce Developers Japan
 
JavaFX & GlassFish 勉強会 Oh! JavaFX 2.0!
Yuichi Sakuraba
 
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
 
Canvas勉強会
Tsutomu Kawamura
 
HTML5 on ASP.NET
Fujio Kojima
 
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
Fujio Kojima
 
-入門- enchant.js でゲームを作ろう
nico0927
 
Java FXグラフィックスとアニメーション入門(JJUG CCC 2015 Spring G-7)
torutk
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
 
Seasarプロジェクト徹底攻略
takezoe
 
Ajax basic
Katsuyuki Seino
 
densan2014-late01
Takenori Nakagawa
 
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
 
ASP.NETを利用したAJAX開発の応用
Sho Okada
 
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
 
これからのJavaScriptの話
Shogo Sensui
 
Ad

More from Yuichi Sakuraba (20)

PDF
Vector API - Javaによるベクターコンピューティング
Yuichi Sakuraba
 
PDF
Oracle Code One - Java KeynoteとJava SE
Yuichi Sakuraba
 
PDF
Project Loom + Project Panama
Yuichi Sakuraba
 
PDF
Project Loom - 限定継続と軽量スレッド -
Yuichi Sakuraba
 
PDF
Oracle Code One 報告会 Java SE Update
Yuichi Sakuraba
 
PDF
今こそStream API入門
Yuichi Sakuraba
 
PDF
Oracle Code One 報告会 Java SE Update
Yuichi Sakuraba
 
PDF
Learn Language 2018 Java Language Update
Yuichi Sakuraba
 
PDF
Dockerに向けて、Javaもダイエット
Yuichi Sakuraba
 
PDF
What's New in Java
Yuichi Sakuraba
 
PDF
Migration Guide to Java SE 10, and also Java SE 11
Yuichi Sakuraba
 
PDF
琥珀色のJava - Project Amber -
Yuichi Sakuraba
 
PDF
Moving to Module: Issues & Solutions
Yuichi Sakuraba
 
PDF
モジュール移行の課題と対策
Yuichi Sakuraba
 
PDF
Project Jigsawと、ちょっとだけVector API
Yuichi Sakuraba
 
PDF
Java SE 9の全貌
Yuichi Sakuraba
 
PDF
Java SEの現在、過去 そして未来
Yuichi Sakuraba
 
PDF
Java SE 9 のススメ
Yuichi Sakuraba
 
PDF
Introduction of Project Jigsaw
Yuichi Sakuraba
 
PDF
Encouragement of Java SE 9
Yuichi Sakuraba
 
Vector API - Javaによるベクターコンピューティング
Yuichi Sakuraba
 
Oracle Code One - Java KeynoteとJava SE
Yuichi Sakuraba
 
Project Loom + Project Panama
Yuichi Sakuraba
 
Project Loom - 限定継続と軽量スレッド -
Yuichi Sakuraba
 
Oracle Code One 報告会 Java SE Update
Yuichi Sakuraba
 
今こそStream API入門
Yuichi Sakuraba
 
Oracle Code One 報告会 Java SE Update
Yuichi Sakuraba
 
Learn Language 2018 Java Language Update
Yuichi Sakuraba
 
Dockerに向けて、Javaもダイエット
Yuichi Sakuraba
 
What's New in Java
Yuichi Sakuraba
 
Migration Guide to Java SE 10, and also Java SE 11
Yuichi Sakuraba
 
琥珀色のJava - Project Amber -
Yuichi Sakuraba
 
Moving to Module: Issues & Solutions
Yuichi Sakuraba
 
モジュール移行の課題と対策
Yuichi Sakuraba
 
Project Jigsawと、ちょっとだけVector API
Yuichi Sakuraba
 
Java SE 9の全貌
Yuichi Sakuraba
 
Java SEの現在、過去 そして未来
Yuichi Sakuraba
 
Java SE 9 のススメ
Yuichi Sakuraba
 
Introduction of Project Jigsaw
Yuichi Sakuraba
 
Encouragement of Java SE 9
Yuichi Sakuraba
 

Recently uploaded (10)

PDF
第三世代 ウェザーステーションキット v3 ー WSC3-L 日本語カタログ
CRI Japan, Inc.
 
PDF
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
PDF
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
PDF
VMUG Japan book vsan 20250515 CPU/Memory vSAN
Kazuhiro Sota
 
PDF
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
PDF
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
PDF
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 
PDF
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
PPTX
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 
PPTX
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 
第三世代 ウェザーステーションキット v3 ー WSC3-L 日本語カタログ
CRI Japan, Inc.
 
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
VMUG Japan book vsan 20250515 CPU/Memory vSAN
Kazuhiro Sota
 
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 

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 デザイナ向けツールが ...