はじめよう JavaFX 2.x（第3回 岡山Javaユーザー会）
3 likes2,743 views
2012/07/28に開催された「第3回 岡山Javaユーザー会」において発表した、 「はじめよう JavaFX 2.x」のスライド資料です。
はじめよう JavaFX 2.x（第3回 岡山Javaユーザー会）
- 1. はじめよう JavaFX 2.x 2012/07/28 @a_know
- 2. 1.はじめに(1) ・最近、密か？に盛り上がりを見せている「JavaFX」 → 7月初旬に東京で開催されたJavaFX勉強会では、 80名キャパの会場が埋まったとか！ ・今回、自作SwingアプリケーションをJavaFXで 1から作りなおしたという経験をしたこともあり・・・ ・「JavaFXとは何か」というところから、 簡単なJavaFXアプリケーションを作る流れまでを 簡単にご紹介できたら！
- 3. 1.はじめに(2) ・といっても、「Swing -> JavaFXのリプレース」とか といったお話ではないです。。(._.) ・当プレゼンテーションには、 JavaFX技術は使用されておりません(._.)
- 4. 2.アジェンダ ・自己紹介 ・JavaFXとは？ ・JavaFX 2.xの特徴、主な機能 ・JavaFX 2.xアプリケーションを作ってみよう！ ・まとめ
- 6. それでは本題。
- 7. 4.「JavaFX」とは？(1) 『JavaFX（ジャバエフエックス）とはJava仮想マシン上で動作する リッチインターネットアプリケーションのGUIライブラリである。Java SE 7 Update 2 以降に標準搭載されている。Swing とは異なり、 FXML と呼ばれる XML と CSS を併用してデザインを記述す る。』 （Wikipedia - http://ja.wikipedia.org/wiki/JavaFX） ・AWTやSwingに代わる、新しい（より簡単に、よりリッチに）GUI 開発プラットフォームである、ぐらいの理解です。。
- 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. 4.「JavaFX」とは？(3) ・JavaFX Script → 「APIを書くための言語」＆「UIを記述するための言語」 → サポートのためのリソース不足に？ → オープンソースプロジェクト「Project Visaage」で 開発は継続
- 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. 5.JavaFX 2.xの特徴、主な機能 ・SceneGraph ・FXML ・UI Control ・CSS support ・bind ・animation ・Effect ・Swingとの連携 ・Web Start
- 12. 5.JavaFX 2.xの特徴、主な機能 5-1.SceneGraph(1) ・ツリーで表されたUI構造のこと ・部品やグラフィック要素など描画の対象となる 要素はすべて、「javafx.scene.Node」のサブクラスとして 実装されている → これら要素をツリー構造化して表現 Scene Group Circle AnchorPane HBox Label TextField Button
- 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. 5.JavaFX 2.xの特徴、主な機能 5-2.FXML(1) ・ユーザーインターフェースのマークアップ言語 ・クラスを使って・プログラム内でSceneGraphを 構築しなくても、XMLで記述することができる ・JavaFXアプリケーション実行時にXMLファイルを 読み込み、レイアウトを形成するイメージ。 → FXMLLoader.load(getClass().getResource("layout.fxml")); ・FXMLを編集するためのツールとして、 「SceneBuilder」というものもあります
- 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> ※一部記述を省略しています。
- 19. 5.JavaFX 2.xの特徴、主な機能 5-6.animation, 5-7.Effect ・作ったアプリケーションの性質上、 グラフィック関係はあまり触っていなかったりします orz ・こんな感じのことができます... ・ありがとうございます @skrb さん(._.);;
- 20. 5.JavaFX 2.xの特徴、主な機能 5-8.Swingとの連携 ・「連携」？ → 「Swing UIにJavaFXを埋め込む」？ 「JavaFX UIにSwingを埋め込む」？ → 「Swing UIにJavaFXを埋め込む」ことのみ可能。 「Swingにできない部分をFXで補う」考え方！ → JFXPanelクラスを用いる → Swingのコンポーネントであり、かつ シーングラフのためのコンテナとなるもの ・SwingとJavaFXではスレッドが異なる → お互いがお互いにアクセスし合わないでいいように！
- 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. 6.JavaFX 2.xアプリケーションを作ってみよう！ 6-1.JavaFX FXMLアプリケーションの構成要素 ・アプリケーションクラス - アプリケーション全体を管理（？） - JavaFXのランタイムにより、以下のように働きかけられる 1. コンストラクタ呼び出し 2. init() 3. start() 4. ウィンドウが閉じられるか、Platform.exit()まで待つ 5. stop() ・コントローラクラス - SceneGraphを管理（？） ・レイアウトファイル
- 24. 7.まとめ ・「JavaFXとはなにか」というお話から、バージョンの違いと2.xの特 徴、実際の作り方の流れまでをご紹介しました ・Swingからの卒業を考えておられる方も、JavaGUI開発を されたことのない方も、まずはお試しになってみては？ → 特別なことを意識することは少なく、開発できました ・JavaFXで何か困ったことがあれば、 @a_know @skrb さんへmention！ → 色々なノウハウが蓄積されていくのは、まだまだこれから。その 先頭集団の一員として「自ら調査し発信」も大事かな、と！
- 25. ご清聴ありがとうございました！ @a_know （a-know / えーの） blog : http://d.hatena.ne.jp/a-know web page : http://a-know-home.appspot.com/