Upload
a-know
View
2.831
Download
2
Embed Size (px)
DESCRIPTION
2012/07/28に開催された「第3回 岡山Javaユーザー会」において発表した、「はじめよう JavaFX 2.x」のスライド資料です。
Citation preview
はじめよう 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/