はじめよう　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）の他、

　　　テレビ（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のランタイムにより、以下のように働きかけられる

　　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-knowweb page : http://a-know-home.appspot.com/