Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)

3,869 views

Published on

2012/07/28に開催された「第3回 岡山Javaユーザー会」において発表した、
「はじめよう JavaFX 2.x」のスライド資料です。

Published in: Technology
  • Be the first to comment

はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)

  1. 1. はじめよう JavaFX 2.x 2012/07/28 @a_know
  2. 2. 1.はじめに(1) ・最近、密か?に盛り上がりを見せている「JavaFX」  → 7月初旬に東京で開催されたJavaFX勉強会では、    80名キャパの会場が埋まったとか! ・今回、自作SwingアプリケーションをJavaFXで  1から作りなおしたという経験をしたこともあり・・・ ・「JavaFXとは何か」というところから、  簡単なJavaFXアプリケーションを作る流れまでを  簡単にご紹介できたら!
  3. 3. 1.はじめに(2) ・といっても、「Swing -> JavaFXのリプレース」とか  といったお話ではないです。。(._.) ・当プレゼンテーションには、  JavaFX技術は使用されておりません(._.)
  4. 4. 2.アジェンダ ・自己紹介 ・JavaFXとは? ・JavaFX 2.xの特徴、主な機能 ・JavaFX 2.xアプリケーションを作ってみよう! ・まとめ
  5. 5. 3.自己紹介・HN:a-know(えーの)・昨年末までは製造系企業のSI子会社でSE(5年9ヶ月)・今年6月までは、Webアプリ構築& 技術勉強などの武者修行&就職活動 → 今回のこの発表も、その一環の   つもりだった!・7月からはサーバーサイド(GAE/J!)エンジニアとして 働いています!・心は常に大都会に(`・ω・´)!
  6. 6. それでは本題。
  7. 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. 8. 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からはサポート外
  9. 9. 4.「JavaFX」とは?(3)・JavaFX Script → 「APIを書くための言語」&「UIを記述するための言語」  → サポートのためのリソース不足に? → オープンソースプロジェクト「Project Visaage」で   開発は継続
  10. 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. 11. 5.JavaFX 2.xの特徴、主な機能・SceneGraph・FXML・UI Control・CSS support・bind・animation・Effect・Swingとの連携・Web Start
  12. 12. 5.JavaFX 2.xの特徴、主な機能5-1.SceneGraph(1)・ツリーで表されたUI構造のこと・部品やグラフィック要素など描画の対象となる 要素はすべて、「javafx.scene.Node」のサブクラスとして 実装されている → これら要素をツリー構造化して表現Scene Group Circle AnchorPane HBox Label TextField Button
  13. 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. 14. 5.JavaFX 2.xの特徴、主な機能5-2.FXML(1)・ユーザーインターフェースのマークアップ言語・クラスを使って・プログラム内でSceneGraphを 構築しなくても、XMLで記述することができる・JavaFXアプリケーション実行時にXMLファイルを 読み込み、レイアウトを形成するイメージ。 → FXMLLoader.load(getClass().getResource("layout.fxml"));・FXMLを編集するためのツールとして、 「SceneBuilder」というものもあります
  15. 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. 16. 5.JavaFX 2.xの特徴、主な機能5-3.UI Controll・独自のUI部品群・代表的な部品の使用例を御覧ください...・ボタンなどの標準的な部品以外にも、 チャート(グラフ)などの描画も行える
  17. 17. 5.JavaFX 2.xの特徴、主な機能5-4.CSS Support・デザイン、スタイルの指定にcssの利用が可能に!・.cssファイルの利用ももちろん可能です・デザイナーとプログラマとのワークフローを考慮した 結果の現れか?・実際のcss適用例を御覧ください...・各プロパティ名に「-fx」プリフィクスがつきます
  18. 18. 5.JavaFX 2.xの特徴、主な機能5-5.bind・変数同士を自動的に同期させるための仕組み・こんな感じです...
  19. 19. 5.JavaFX 2.xの特徴、主な機能5-6.animation, 5-7.Effect・作ったアプリケーションの性質上、 グラフィック関係はあまり触っていなかったりします orz・こんな感じのことができます...・ありがとうございます @skrb さん(._.);;
  20. 20. 5.JavaFX 2.xの特徴、主な機能5-8.Swingとの連携・「連携」? → 「Swing UIにJavaFXを埋め込む」?   「JavaFX UIにSwingを埋め込む」?  → 「Swing UIにJavaFXを埋め込む」ことのみ可能。    「Swingにできない部分をFXで補う」考え方!  → JFXPanelクラスを用いる    → Swingのコンポーネントであり、かつ      シーングラフのためのコンテナとなるもの・SwingとJavaFXではスレッドが異なる → お互いがお互いにアクセスし合わないでいいように!
  21. 21. 5.JavaFX 2.xの特徴、主な機能5-9.WebStart・今までの機能と同列に扱って良いものか微妙ですが。。・こんな感じでのアプリケーションの起動が できるようになります・アプリケーションに対するウェルカムメッセージ・・・ 使用方法、各種注意事項・・・etc.・「デスクトップアプリケーションはアイコンをダブルクリックしてはじめるもの」とは違うアプローチができる!
  22. 22. 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でも開発しようと思えばできるみたいです
  23. 23. 6.JavaFX 2.xアプリケーションを作ってみよう!6-1.JavaFX FXMLアプリケーションの構成要素・アプリケーションクラス - アプリケーション全体を管理(?) - JavaFXのランタイムにより、以下のように働きかけられる  1. コンストラクタ呼び出し  2. init()  3. start()  4. ウィンドウが閉じられるか、Platform.exit()まで待つ  5. stop()・コントローラクラス - SceneGraphを管理(?)・レイアウトファイル
  24. 24. 7.まとめ・「JavaFXとはなにか」というお話から、バージョンの違いと2.xの特徴、実際の作り方の流れまでをご紹介しました・Swingからの卒業を考えておられる方も、JavaGUI開発を されたことのない方も、まずはお試しになってみては? → 特別なことを意識することは少なく、開発できました・JavaFXで何か困ったことがあれば、 @a_know @skrb さんへmention! → 色々なノウハウが蓄積されていくのは、まだまだこれから。その先頭集団の一員として「自ら調査し発信」も大事かな、と!
  25. 25. ご清聴ありがとうございました! @a_know (a-know / えーの) blog : http://d.hatena.ne.jp/a-knowweb page : http://a-know-home.appspot.com/

×