Your SlideShare is downloading. ×
0
はじめよう JavaFX 2.x   2012/07/28 @a_know
1.はじめに(1) ・最近、密か?に盛り上がりを見せている「JavaFX」  → 7月初旬に東京で開催されたJavaFX勉強会では、    80名キャパの会場が埋まったとか! ・今回、自作SwingアプリケーションをJavaFXで  1から作り...
1.はじめに(2) ・といっても、「Swing -> JavaFXのリプレース」とか  といったお話ではないです。。(._.) ・当プレゼンテーションには、  JavaFX技術は使用されておりません(._.)
2.アジェンダ ・自己紹介 ・JavaFXとは? ・JavaFX 2.xの特徴、主な機能 ・JavaFX 2.xアプリケーションを作ってみよう! ・まとめ
3.自己紹介・HN:a-know(えーの)・昨年末までは製造系企業のSI子会社でSE(5年9ヶ月)・今年6月までは、Webアプリ構築& 技術勉強などの武者修行&就職活動 → 今回のこの発表も、その一環の   つもりだった!・7月からはサーバーサ...
それでは本題。
4.「JavaFX」とは?(1)『JavaFX(ジャバエフエックス)とはJava仮想マシン上で動作するリッチインターネットアプリケーションのGUIライブラリである。JavaSE 7 Update 2 以降に標準搭載されている。Swing とは異...
4.「JavaFX」とは?(2)・バージョン1.x系と2.x系とで大きな違いが。・JavaFX 1.x系 → 「JavaFX Script」というスクリプト言語によって   GUIアプリケーションを構築する仕組み → ターゲットとして、携帯電話...
4.「JavaFX」とは?(3)・JavaFX Script → 「APIを書くための言語」&「UIを記述するための言語」  → サポートのためのリソース不足に? → オープンソースプロジェクト「Project Visaage」で   開発は継続
4.「JavaFX」とは?(4)・JavaFX 2.x系 → 前述の通り、2.xからJavaFXはJavaのAPIに。 「新しいUIフレームワーク」という位置づけ → 開発スピードUP、パフォーマンスUP → JavaFXを使える言語も増加(S...
5.JavaFX 2.xの特徴、主な機能・SceneGraph・FXML・UI Control・CSS support・bind・animation・Effect・Swingとの連携・Web Start
5.JavaFX 2.xの特徴、主な機能5-1.SceneGraph(1)・ツリーで表されたUI構造のこと・部品やグラフィック要素など描画の対象となる 要素はすべて、「javafx.scene.Node」のサブクラスとして 実装されている → ...
5.JavaFX 2.xの特徴、主な機能5-1.SceneGraph(2)  Group root = new Group();  Scene scene = new Scene(root);  Circle circle = new Circ...
5.JavaFX 2.xの特徴、主な機能5-2.FXML(1)・ユーザーインターフェースのマークアップ言語・クラスを使って・プログラム内でSceneGraphを 構築しなくても、XMLで記述することができる・JavaFXアプリケーション実行時に...
5.JavaFX 2.xの特徴、主な機能5-2.FXML(2)<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" > <children>  <Circle id="...
5.JavaFX 2.xの特徴、主な機能5-3.UI Controll・独自のUI部品群・代表的な部品の使用例を御覧ください...・ボタンなどの標準的な部品以外にも、 チャート(グラフ)などの描画も行える
5.JavaFX 2.xの特徴、主な機能5-4.CSS Support・デザイン、スタイルの指定にcssの利用が可能に!・.cssファイルの利用ももちろん可能です・デザイナーとプログラマとのワークフローを考慮した 結果の現れか?・実際のcss適...
5.JavaFX 2.xの特徴、主な機能5-5.bind・変数同士を自動的に同期させるための仕組み・こんな感じです...
5.JavaFX 2.xの特徴、主な機能5-6.animation, 5-7.Effect・作ったアプリケーションの性質上、 グラフィック関係はあまり触っていなかったりします orz・こんな感じのことができます...・ありがとうございます @s...
5.JavaFX 2.xの特徴、主な機能5-8.Swingとの連携・「連携」? → 「Swing UIにJavaFXを埋め込む」?   「JavaFX UIにSwingを埋め込む」?  → 「Swing UIにJavaFXを埋め込む」ことのみ可...
5.JavaFX 2.xの特徴、主な機能5-9.WebStart・今までの機能と同列に扱って良いものか微妙ですが。。・こんな感じでのアプリケーションの起動が できるようになります・アプリケーションに対するウェルカムメッセージ・・・ 使用方法、各...
6.JavaFX 2.xアプリケーションを作ってみよう!・お話ばかりでもアレですので・・・・ごくごく簡単なJavaFX 2.xアプリケーションを ライブコーディングしてみます・開発環境は「NetBeans IDE 7.1.2」と 「JavaFX...
6.JavaFX 2.xアプリケーションを作ってみよう!6-1.JavaFX FXMLアプリケーションの構成要素・アプリケーションクラス - アプリケーション全体を管理(?) - JavaFXのランタイムにより、以下のように働きかけられる  1...
7.まとめ・「JavaFXとはなにか」というお話から、バージョンの違いと2.xの特徴、実際の作り方の流れまでをご紹介しました・Swingからの卒業を考えておられる方も、JavaGUI開発を されたことのない方も、まずはお試しになってみては? →...
ご清聴ありがとうございました!       @a_know (a-know / えーの)     blog : http://d.hatena.ne.jp/a-knowweb page : http://a-know-home.appspot....
Upcoming SlideShare
Loading in...5
×

はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)

2,897

Published on

2012/07/28に開催された「第3回 岡山Javaユーザー会」において発表した、
「はじめよう JavaFX 2.x」のスライド資料です。

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,897
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)"

  1. 1. はじめよう JavaFX 2.x 2012/07/28 @a_know
  2. 2. 1.はじめに(1) ・最近、密か?に盛り上がりを見せている「JavaFX」  → 7月初旬に東京で開催されたJavaFX勉強会では、    80名キャパの会場が埋まったとか! ・今回、自作SwingアプリケーションをJavaFXで  1から作りなおしたという経験をしたこともあり・・・ ・「JavaFXとは何か」というところから、  簡単なJavaFXアプリケーションを作る流れまでを  簡単にご紹介できたら!
  3. 3. 1.はじめに(2) ・といっても、「Swing -> JavaFXのリプレース」とか  といったお話ではないです。。(._.) ・当プレゼンテーションには、  JavaFX技術は使用されておりません(._.)
  4. 4. 2.アジェンダ ・自己紹介 ・JavaFXとは? ・JavaFX 2.xの特徴、主な機能 ・JavaFX 2.xアプリケーションを作ってみよう! ・まとめ
  5. 5. 3.自己紹介・HN:a-know(えーの)・昨年末までは製造系企業のSI子会社でSE(5年9ヶ月)・今年6月までは、Webアプリ構築& 技術勉強などの武者修行&就職活動 → 今回のこの発表も、その一環の   つもりだった!・7月からはサーバーサイド(GAE/J!)エンジニアとして 働いています!・心は常に大都会に(`・ω・´)!
  6. 6. それでは本題。
  7. 7. 4.「JavaFX」とは?(1)『JavaFX(ジャバエフエックス)とはJava仮想マシン上で動作するリッチインターネットアプリケーションのGUIライブラリである。JavaSE 7 Update 2 以降に標準搭載されている。Swing とは異なり、FXML と呼ばれる XML と CSS を併用してデザインを記述する。』 (Wikipedia - http://ja.wikipedia.org/wiki/JavaFX)・AWTやSwingに代わる、新しい(より簡単に、よりリッチに)GUI開発プラットフォームである、ぐらいの理解です。。
  8. 8. 4.「JavaFX」とは?(2)・バージョン1.x系と2.x系とで大きな違いが。・JavaFX 1.x系 → 「JavaFX Script」というスクリプト言語によって   GUIアプリケーションを構築する仕組み → ターゲットとして、携帯電話(JavaFX Mobile)の他、   テレビ(JavaFX TV)まで!クロスプラットフォーム! → 2010年10月のJavaOneにて、JavaFXを   Javaのライブラリとすることが発表、同時に   JavaFX 2.0がデスクトップ向けに限定された → JavaFX Scriptは、2.0からはサポート外
  9. 9. 4.「JavaFX」とは?(3)・JavaFX Script → 「APIを書くための言語」&「UIを記述するための言語」  → サポートのためのリソース不足に? → オープンソースプロジェクト「Project Visaage」で   開発は継続
  10. 10. 4.「JavaFX」とは?(4)・JavaFX 2.x系 → 前述の通り、2.xからJavaFXはJavaのAPIに。 「新しいUIフレームワーク」という位置づけ → 開発スピードUP、パフォーマンスUP → JavaFXを使える言語も増加(Scala, Groovy, ...)・もちろん、クロスプラットフォームという考え方は根幹にある → 「JavaFX on iOS」も夢じゃない!・1.xとは全くの別物、と考えたほうがイイ! → Google先生に質問するときもご注意を
  11. 11. 5.JavaFX 2.xの特徴、主な機能・SceneGraph・FXML・UI Control・CSS support・bind・animation・Effect・Swingとの連携・Web Start
  12. 12. 5.JavaFX 2.xの特徴、主な機能5-1.SceneGraph(1)・ツリーで表されたUI構造のこと・部品やグラフィック要素など描画の対象となる 要素はすべて、「javafx.scene.Node」のサブクラスとして 実装されている → これら要素をツリー構造化して表現Scene Group Circle AnchorPane HBox Label TextField Button
  13. 13. 5.JavaFX 2.xの特徴、主な機能5-1.SceneGraph(2) Group root = new Group(); Scene scene = new Scene(root); Circle circle = new Circle(200.0, 200.0, 300.0, Color.PINK); root.getChildren().add(circle); // root の子要素としてcircleを追加 BorderPane borderPane = new BorderPane(); root.getChildren().add(borderPane); Button button = new Button("Open"); borderPane.setCenter(button); HBox hbox = new HBox(10); borderPane.setTop(hbox); Label label = new Label("URL:"); hbox.getChildren().add(label); // hboxの子要素としてlabelを追加 TextBox textBox = new TextBox(40); hbox.getChildren().add(textBox);
  14. 14. 5.JavaFX 2.xの特徴、主な機能5-2.FXML(1)・ユーザーインターフェースのマークアップ言語・クラスを使って・プログラム内でSceneGraphを 構築しなくても、XMLで記述することができる・JavaFXアプリケーション実行時にXMLファイルを 読み込み、レイアウトを形成するイメージ。 → FXMLLoader.load(getClass().getResource("layout.fxml"));・FXMLを編集するためのツールとして、 「SceneBuilder」というものもあります
  15. 15. 5.JavaFX 2.xの特徴、主な機能5-2.FXML(2)<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" > <children> <Circle id="circle1" fill="DODGERBLUE" radius="100.0" stroke="BLACK" /> <AnchorPane id="Content" prefHeight="400.0" prefWidth="600.0"> <children> <HBox id="hBox1" prefHeight="100.0" prefWidth="200.0"> <children> <Label id="label1" text="Label" /> <TextField id="textField1" prefWidth="200.0" text="TextField" /> </children> </HBox> <Button id="button1" layoutX="100.0" layoutY="100.0" text="Button" /> </children> </AnchorPane> </children></AnchorPane> ※一部記述を省略しています。
  16. 16. 5.JavaFX 2.xの特徴、主な機能5-3.UI Controll・独自のUI部品群・代表的な部品の使用例を御覧ください...・ボタンなどの標準的な部品以外にも、 チャート(グラフ)などの描画も行える
  17. 17. 5.JavaFX 2.xの特徴、主な機能5-4.CSS Support・デザイン、スタイルの指定にcssの利用が可能に!・.cssファイルの利用ももちろん可能です・デザイナーとプログラマとのワークフローを考慮した 結果の現れか?・実際のcss適用例を御覧ください...・各プロパティ名に「-fx」プリフィクスがつきます
  18. 18. 5.JavaFX 2.xの特徴、主な機能5-5.bind・変数同士を自動的に同期させるための仕組み・こんな感じです...
  19. 19. 5.JavaFX 2.xの特徴、主な機能5-6.animation, 5-7.Effect・作ったアプリケーションの性質上、 グラフィック関係はあまり触っていなかったりします orz・こんな感じのことができます...・ありがとうございます @skrb さん(._.);;
  20. 20. 5.JavaFX 2.xの特徴、主な機能5-8.Swingとの連携・「連携」? → 「Swing UIにJavaFXを埋め込む」?   「JavaFX UIにSwingを埋め込む」?  → 「Swing UIにJavaFXを埋め込む」ことのみ可能。    「Swingにできない部分をFXで補う」考え方!  → JFXPanelクラスを用いる    → Swingのコンポーネントであり、かつ      シーングラフのためのコンテナとなるもの・SwingとJavaFXではスレッドが異なる → お互いがお互いにアクセスし合わないでいいように!
  21. 21. 5.JavaFX 2.xの特徴、主な機能5-9.WebStart・今までの機能と同列に扱って良いものか微妙ですが。。・こんな感じでのアプリケーションの起動が できるようになります・アプリケーションに対するウェルカムメッセージ・・・ 使用方法、各種注意事項・・・etc.・「デスクトップアプリケーションはアイコンをダブルクリックしてはじめるもの」とは違うアプローチができる!
  22. 22. 6.JavaFX 2.xアプリケーションを作ってみよう!・お話ばかりでもアレですので・・・・ごくごく簡単なJavaFX 2.xアプリケーションを ライブコーディングしてみます・開発環境は「NetBeans IDE 7.1.2」と 「JavaFX SceneBuilder」を使います → 環境整備については以下をご参考下さい。。 http://netbeans.org/kb/docs/java/javafx-setup.html http://docs.oracle.com/javafx/scenebuilder/1/installation/jsbpub-installation.htm・Eclipseでも開発しようと思えばできるみたいです
  23. 23. 6.JavaFX 2.xアプリケーションを作ってみよう!6-1.JavaFX FXMLアプリケーションの構成要素・アプリケーションクラス - アプリケーション全体を管理(?) - JavaFXのランタイムにより、以下のように働きかけられる  1. コンストラクタ呼び出し  2. init()  3. start()  4. ウィンドウが閉じられるか、Platform.exit()まで待つ  5. stop()・コントローラクラス - SceneGraphを管理(?)・レイアウトファイル
  24. 24. 7.まとめ・「JavaFXとはなにか」というお話から、バージョンの違いと2.xの特徴、実際の作り方の流れまでをご紹介しました・Swingからの卒業を考えておられる方も、JavaGUI開発を されたことのない方も、まずはお試しになってみては? → 特別なことを意識することは少なく、開発できました・JavaFXで何か困ったことがあれば、 @a_know @skrb さんへmention! → 色々なノウハウが蓄積されていくのは、まだまだこれから。その先頭集団の一員として「自ら調査し発信」も大事かな、と!
  25. 25. ご清聴ありがとうございました! @a_know (a-know / えーの) blog : http://d.hatena.ne.jp/a-knowweb page : http://a-know-home.appspot.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×