はじめよう javafx 2.x
DESCRIPTION
2012/7/28に開催された、「第3回 岡山Javaユーザ会 勉強会」において登壇・発表させて頂いた資料です。 私自身、ずっとSwingアプリケーションをプライベートで作っていたのですが、JavaFX 2.xの登場で、一気に作りなおす経験をしました。それをもとに、JavaFX 2.xの概要をお話した上で、「みんなもJavaFXやろうよ!」という趣旨のもと、発表させて頂きました。TRANSCRIPT
はじめよう 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/