• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
はじめよう JavaFX 2.x
 

はじめよう JavaFX 2.x

on

  • 721 views

2012/7/28に開催された、「第3回 岡山Javaユーザ会 勉強会」において登壇・発表させて頂いた資料です。

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

Statistics

Views

Total Views
721
Views on SlideShare
721
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    はじめよう JavaFX 2.x はじめよう JavaFX 2.x Presentation 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-knowweb page : http://a-know-home.appspot.com/