はじめよう　JavaFX 2.x 2012/07/28　@a_know

1.はじめに(1)

・最近、密か？に盛り上がりを見せている「JavaFX」 → 7月初旬に東京で開催されたJavaFX勉強会では、 　　　80名キャパの会場が埋まったとか！

・今回、自作SwingアプリケーションをJavaFXで 　1から作り直したという経験もあり・・・

・「JavaFXとは何か」というところから、 　簡単なJavaFXアプリケーションを作る流れまでを 　簡単にご紹介できたら！

1.はじめに(2)

・といっても「Swing -> JavaFXのリプレース」とか 　といったお話ではないです。。(._.)

・当プレゼンテーションには、 　JavaFX技術は使用されておりません(._.)

2.アジェンダ

・自己紹介 ・JavaFXとは？ ・JavaFX 2.xの特徴、主な機能 ・JavaFX 2.xアプリケーションを作って

みよう！ ・まとめ

3.自己紹介

・HN：a-know（えーの） ・昨年末までは製造系企業のSI子会社でSE（5年9ヶ月） ・今年6月までは、Webアプリ構築＆ 　技術勉強などの武者修行＆就職活動 　→ 今回のこの発表も、その一環の 　　　つもりだった！ ・7月からはサーバーサイド（GAE/J！）エンジニアとして 　働いています！ ・心は常に大都会に(｀・ω・´)！

それでは本題。

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開発プラットフォームである、ぐらいの理解です。。

4.「JavaFX」とは？(2)

・バージョン1.x系と2.x系とで大きな違いが。

・JavaFX 1.x系 　→ 「JavaFX Script」というスクリプト言語によって 　　　GUIアプリケーションを構築する仕組み 　→ ターゲットとして、携帯（JavaFX Mobile）の他、 　　　TV（JavaFX TV）まで！クロスプラットフォーム！ 　→ 2010年10月のJavaOneにて、JavaFXを 　　　Javaのライブラリとすることが発表、同時に 　　　JavaFX 2.0がデスクトップ向けに限定された 　→ JavaFX Scriptは、2.0からはサポート外

4.「JavaFX」とは？(3)

・JavaFX Script 　→ 「APIを書く為の言語」＆「UIを記述する為の言語」 　　→ サポートのためのリソース不足に？ 　→ オープンソースプロジェクト「Project Visaage」で 　　　開発は継続

4.「JavaFX」とは？(4)

・JavaFX 2.x系 　→ 前述の通り、2.xからJavaFXはJavaのAPIに。 　「新しいUIフレームワーク」という位置づけ 　→ 開発スピードUP、パフォーマンスUP 　→ JavaFXを使える言語も増加（Scala, Groovy, ...） ・もちろん、クロスプラットフォームという考え方は根幹にある

　→ 「JavaFX on iOS」も夢じゃない！

・1.xとは全くの別物、と考えたほうがイイ！ 　→ Google先生に質問するときもご注意を

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」のサブクラスとして 　実装されている 　→ これら要素をツリー構造化して表現

Scene Group Circle

AnchorPane HBox Label

TextField

Button

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);

5.JavaFX 2.xの特徴、主な機能 5-2.FXML(1)

・ユーザーインターフェースのマークアップ言語

・クラスを使って・プログラム内でSceneGraphを 　構築しなくても、XMLで記述することができる

・JavaFXアプリケーション実行時にXMLファイルを 　読み込み、レイアウトを形成するイメージ。 　→ FXMLLoader.load(getClass().getResource("layout.fxml"));

・FXMLを編集するためのツールとして、 　「SceneBuilder」というものもあります

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>

※一部記述を省略しています。

5.JavaFX 2.xの特徴、主な機能 5-3.UI Controll

・独自のUI部品群 ・代表的な部品の使用例を御覧ください...

・ボタンなどの標準的な部品以外にも、 　チャート（グラフ）などの描画も行える

5.JavaFX 2.xの特徴、主な機能 5-4.CSS Support

・デザイン、スタイルの指定にcssの利用が可能に！ ・.cssファイルの利用ももちろん可能です

・デザイナーとプログラマとのワークフローを考慮した 　結果の現れか？

・実際のcss適用例を御覧ください...

・各プロパティ名に「-fx」プリフィクスがつきます

5.JavaFX 2.xの特徴、主な機能 5-5.bind

・変数同士を自動的に同期させるための仕組み

・こんな感じです...

5.JavaFX 2.xの特徴、主な機能 5-6.animation, 5-7.Effect

・作ったアプリケーションの性質上、 　グラフィック関係はあまり触っていなかったりします orz

・こんな感じのことができます...

・ありがとうございます @skrb さん(._.);;

5.JavaFX 2.xの特徴、主な機能 5-8.Swingとの連携

・「連携」？ 　→ 「Swing UIにJavaFXを埋め込む」？ 　　　「JavaFX UIにSwingを埋め込む」？ 　　→ 「Swing UIにJavaFXを埋め込む」ことのみ可能。 　　　　「Swingにできない部分をFXで補う」考え方！ 　　→ JFXPanelクラスを用いる 　　　　→ Swingのコンポーネントであり、かつ 　　　　　　シーングラフのためのコンテナとなるもの ・SwingとJavaFXではスレッドが異なる 　→ お互いがお互いにアクセスし合わないでいいように！

5.JavaFX 2.xの特徴、主な機能 5-9.WebStart

・今までの機能と同列に扱って良いものか微妙ですが。。

・こんな感じでのアプリケーションの起動が 　できるようになります

・アプリケーションに対するウェルカムメッセージ・・・ 　使用方法、各種注意事項・・・etc.

・「デスクトップアプリケーションはアイコンをダブルクリックしてはじめるもの」とは違うアプローチができる！

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でも開発しようと思えばできるみたいです

6.JavaFX 2.xアプリケーションを作ってみよう！

6-1.JavaFX FXMLアプリケーションの構成要素

・アプリケーションクラス 　- アプリケーション全体を管理（？） 　- JavaFXのruntimeから、以下のように働きかけられる 　　1. コンストラクタ呼び出し 　　2. init() 　　3. start() 　　4. ウィンドウが閉じられる・Platform.exit()まで待つ 　　5. stop() ・コントローラクラス 　- SceneGraphを管理（？） ・レイアウトファイル

7.まとめ

・「JavaFXとはなにか」というお話から、バージョンの違いと2.xの特徴、実際の作り方の流れまでをご紹介しました

・Swingからの卒業を考えておられる方も、JavaGUI開発を 　されたことのない方も、まずはお試しになってみては？ 　→ 特別なことを意識することは少なく、開発できました

・JavaFXで何か困ったことがあれば、 　@a_know @skrb さんへmention！ 　→ 色々なノウハウが蓄積されていくのは、まだまだこれから。その先頭集団の一員として「自ら調査し発信」も大事かな、と！

ご清聴ありがとうございました！

@a_know （a-know / えーの）

blog : http://d.hatena.ne.jp/a-know web page : http://a-know-home.appspot.com/