はじめよう　JavaFX 2.x

はじめよう　JavaFX 2.x

• 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アプリケーションを作って みよう！ ・まとめ
• 5.
  3.自己紹介 ・HN：a-know（えーの） ・昨年末までは製造系企業のSI子会社でSE（5年9ヶ月） ・今年6月までは、Webアプリ構築＆  技術勉強などの武者修行＆就職活動  → 今回のこの発表も、その一環の    つもりだった！ ・7月からはサーバーサイド（GAE/J！）エンジニアとして  働いています！ ・心は常に大都会に(｀・ω・´)！
• 6.
  それでは本題。
• 7.
  4.「JavaFX」とは？(1) 『JavaFX（ジャバエフエックス）とはJava仮想マシン上 で動作するリッチインターネットアプリケーションの GUIライブラリである。JavaSE 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系  → 「JavaFXScript」というスクリプト言語によって    GUIアプリケーションを構築する仕組み  → ターゲットとして、携帯（JavaFX Mobile）の他、    TV（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 ・CSSsupport ・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> ※一部記述を省略しています。
• 16.
  5.JavaFX 2.xの特徴、主な機能 5-3.UI Controll ・独自のUI部品群 ・代表的な部品の使用例を御覧ください... ・ボタンなどの標準的な部品以外にも、  チャート（グラフ）などの描画も行える
• 17.
  5.JavaFX 2.xの特徴、主な機能 5-4.CSS Support ・デザイン、スタイルの指定にcssの利用が可能に！ ・.cssファイルの利用ももちろん可能です ・デザイナーとプログラマとのワークフローを考慮した  結果の現れか？ ・実際のcss適用例を御覧ください... ・各プロパティ名に「-fx」プリフィクスがつきます
• 18.
  5.JavaFX 2.xの特徴、主な機能 5-5.bind ・変数同士を自動的に同期させるための仕組み ・こんな感じです...
• 19.
  5.JavaFX 2.xの特徴、主な機能 5-6.animation,5-7.Effect ・作ったアプリケーションの性質上、  グラフィック関係はあまり触っていなかったりします orz ・こんな感じのことができます... ・ありがとうございます @skrb さん(._.);;
• 20.
  5.JavaFX 2.xの特徴、主な機能 5-8.Swingとの連携 ・「連携」？  → 「SwingUIにJavaFXを埋め込む」？    「JavaFX UIにSwingを埋め込む」？   → 「Swing UIにJavaFXを埋め込む」ことのみ可能。     「Swingにできない部分をFXで補う」考え方！   → JFXPanelクラスを用いる     → Swingのコンポーネントであり、かつ       シーングラフのためのコンテナとなるもの ・SwingとJavaFXではスレッドが異なる  → お互いがお互いにアクセスし合わないでいいように！
• 21.
  5.JavaFX 2.xの特徴、主な機能 5-9.WebStart ・今までの機能と同列に扱って良いものか微妙ですが。。 ・こんな感じでのアプリケーションの起動が  できるようになります ・アプリケーションに対するウェルカムメッセージ・・・  使用方法、各種注意事項・・・etc. ・「デスクトップアプリケーションはアイコンをダブルク リックしてはじめるもの」とは違うアプローチができる！
• 22.
  6.JavaFX 2.xアプリケーションを作ってみよ う！ ・お話ばかりでもアレですので・・・ ・ごくごく簡単なJavaFX 2.xアプリケーションを  ライブコーディングしてみます ・開発環境は「NetBeansIDE 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.JavaFXFXMLアプリケーションの構成要素 ・アプリケーションクラス  - アプリケーション全体を管理（？）  - JavaFXのruntimeから、以下のように働きかけられる   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/