[JavaOne Tokyo 2012] JavaFX and Web Integration

4,118 views

Published on

JavaFXの重要なポイントの一つはフル機能のWebブラウザを内蔵していることです。
これにより、JavaFXアプリケーションの中にWebアプリケーションを埋め込んだり、HTML5アプリケーションとJavaFXを連携させたりすることが可能になりました。
このセッションでは、JavaFXのWebコンポーネント(WebEngine)を中心に、JavaFXとWeb技術(HTML/CSS/JavaScript)のさまざまな連携手法やその活用例などについて、デモを交えて紹介します。

【セッションコード】JS1-13
【日時】4/4(水) 13:15-14:15
【会場】六本木アカデミーヒルズ49 [カンファレンスルーム2]

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,118
On SlideShare
0
From Embeds
0
Number of Embeds
922
Actions
Shares
0
Downloads
10
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

[JavaOne Tokyo 2012] JavaFX and Web Integration

  1. 1. 1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  2. 2. JavaFX and Web Integration 日本オラクル株式会社 Java Embedded Global Business Unit2 関谷 和愛 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  3. 3. 以下の事項は、弊社の一般的な製品の方向性に関する概要を説明するものです。また、情報提供を唯一の目的とするものであり、いかなる契約にも組み込むことはできません。以下の事項は、マテリアルやコード、機能を提供することをコミットメント(確約)するものではないため、購買決定を行う際の判断材料になさらないで下さい。オラクル製品に関して記載されている機能の開発、リリースおよび時期については、弊社の裁量により決定されます。 OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。 文中の社名、商品名等は各社の商標または登録商標である場合があります。3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  4. 4. Servers Desktop Embedded TV Mobile Card BD-J Key APIs Java EE JavaFX Java TV MSA Platform Java SE Java ME Java CardLanguage Java Language Java Platform4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  5. 5. JavaFXとは 次世代Javaクライアントソリューション メディア Web 動画・音声 HTML5/CSS3/JavaScript アニメーション エフェクト 高度なグラフィックス 3D5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  6. 6. JavaFX 2.0アーキテクチャ6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  7. 7. アジェンダ • Webコンポーネントの概要 • API: WebEngineとWebView • より高度な連携7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  8. 8. JavaFXのWebコンポーネント • 本格的なブラウザを内蔵 – HTML4およびHTML5の一部をサポート – JavaScriptエンジン – LiveConnect対応 – DOMアクセス – SVGサポート8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  9. 9. Webコンポーネントの利用シーン • Webコンテンツの表示 – リモートはもちろんローカル生成コンテンツも • Webアプリケーションの埋め込み – JavaからWebアプリをコントロール – Webアプリと多彩なJavaライブラリを融合9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  10. 10. Webコンポーネントの実装 • WebKitベース – ネットワーク機能はjava.netを利用 – レンダリングにはJavaFX(Prism)を利用 • シーングラフノードとして提供 – エフェクトやトランジションなどを適用可能10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  11. 11. Webコンポーネントのパフォーマンス Windows • GUIMark2 HTML5テスト http://www.craftymind.com/guimark2 Vector Test Bitmap Test Text Test Chrome 16.4 22.1 20.6 17.0 Firefox 12.2 9.8 28.4 10.0.2 JavaFX 15.1 30.2 5.8 2.0.3 Windows 7 Professional / Intel Core 2 Duo 2.53GHz / RAM 4.0GB11 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  12. 12. Webコンポーネントのパフォーマンス Mac • GUIMark2 HTML5テスト http://www.craftymind.com/guimark2 Vector Test Bitmap Test Text Test Chrome 16.9 56 18.9 18.0 Safari 3.5 14.5 23.8 5.1.5 JavaFX 15.5 31.1 7.0 2.1 beta b19 MacOSX 10.6.8 / Intel Core 2 Duo 2.13GHz / RAM 4.0GB12 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  13. 13. DEMO13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  14. 14. アジェンダ • Webコンポーネントの概要 • API: WebEngineとWebView • より高度な連携14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  15. 15. WebEngineとWebView15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  16. 16. WebEngine package javafx.scene.web; • ビューではなく機能を提供 – Webページのロード – スクリプトの実行 – DOMアクセス • WebVeiwとは独立に利用可能16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  17. 17. WebView package javafx.scene.web; • シーングラフノードとしてビューを提供 – Webページを表示 • 連動するWebEngineを1個持つ – 生成時に自動的に作られ変更は不可 – WebView.getEngine() で取得17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  18. 18. WebEngineの主なメソッド メソッド 説明 void load(String url) 指定したWebページをロード void loadContent(String content) HTMLを直接ロード void reload() リロード Worker getLoadWorker() ロード状況監視用のWorkerを取得 Object executeScript(String script) JavaScriptを実行 Document getDocument() DOMを取得18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  19. 19. ロード状況の監視とキャンセル package javafx.concurrent; • Webページのロードは非同期に行われる • WebEngineから取得したWorkerを利用する – 状態遷移 • state: READY→SCHEDULED→RUNNING→SUCCEEDED/FAILED/CANCE LED – 進捗状況 • progress (0〜1) • totalWork, workDone (全体作業量と終了分) – キャンセル • cancel()19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  20. 20. Webコンポーネントの基本的な利用例 import javafx.scene.web.WebView; import javafx.scene.web.WebEngine; WebView view = new WebView(); // シーングラフに追加 // WebEngineを取得 WebEngine engine = view.getEngine(); // ページをロード engine.load("http://javafx.com");20 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  21. 21. DEMO21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  22. 22. アジェンダ • Webコンポーネントの概要 • API: WebEngineとWebView • より高度な連携22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  23. 23. DOM (Document Object Model) アクセス • WebEngineのgetDocumentメソッド、documentプロパティ – ページのロード時に初期化 – プロパティ自体はReadOnlyだがドキュメント構造は変更可能23 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  24. 24. DOMの変更の例 Document = engine.getDocument(); Element para2 = doc.getElementById("para2"); Element newp = doc.createElement("p"); newp.appendChild(doc.createTextNode("new paragraph")); para2.getParentNode().insertBefore(newp, para2);24 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  25. 25. DEMO25 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  26. 26. contentEditable • HTML5でサポートされる属性 • 要素を編集可能にする例:// DOMのElementインタフェースを使用inputLine.setAttribute("contenteditable", "true");// またはJSObjectにキャストして((JSObject)inputLine).setMember("contentEditable", true) 26 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  27. 27. JavaScriptの実行 • WebEngine.executeScriptメソッド – 現在のコンテキストで任意のJavaScript式を評価できるpublic String getPath() { return (String)webEngine.executeScript("location.pathname");} 27 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  28. 28. JavaScript値のJavaへの変換 JavaScript Java null null undefined “undefined” 数値 java.lang.Number (Integer または Double) 文字列 java.lang.String ブール値 java.lang.Boolean オブジェクト netscape.javascript.JSObject28 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  29. 29. JSObject package netscape.javascript; • JavaScriptオブジェクトのラッパークラス • LiveConnectで規定されたAPI 主なメソッド 説明 Object getMember(String name) メンバーの取得 void setMember(String name, Object value) メンバーの設定 void removeMember(String name) メンバーの削除 Object call(String method, Object[] args) メソッド呼び出し29 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  30. 30. JSObjectとDOM • DOMノードはJSObjectもimplementsしている – 同じオブジェクトがWebKitのnative DOMとJS DOMの両方をラップ • キャストしてJSObjectとしても扱える Element inputLine = ...; // DOM要素を取得 // JSObjectとして扱う ((JSObject)inputLine).call("focus");30 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  31. 31. JavaScriptからのJava呼び出し • インタフェースオブジェクトを作り、JSObjectにsetMemeber →JavaScriptから呼び出し可能に31 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  32. 32. JavaScriptからのJava呼び出しclass Bridge { public void exit() { Platform.exit(); }}JSObject jsobj = (JSObject)webEngine.executeScript("window");jsobj.setMember("java", new Bridge());<p>Click<a href="" onclick="java.exit();">here</a>to exit the application</p> 32 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  33. 33. スレッドについての注意 • JavaFXはSwing同様シングルスレッドポリシー • WebKitもシングルスレッドポリシー →WebコンポーネントにはJavaFXのアプリケーションスレッドか らアクセスしなければならない – javafx.application.PlatformのrunLaterメソッドを利用33 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  34. 34. DEMO34 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  35. 35. WiiリモコンでGoogle Mapをコントロール WiiRemoteJ BlueCove Googleマップ Bluetooth JavaScript API 呼び出し WebEngine/WebViewWiiリモコン35 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  36. 36. TwitterストリームとHTML5の連動 Ball Pool Streaming API JavaScript呼び出し createBall() WebEngine/WebView36 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  37. 37. まとめ JavaFX and Web Integration • JavaFXは強力なWebコンポーネントを標準装備 – WebKitベースの本格的な内蔵ブラウザ • HTML5にも部分対応 • 高性能 – Java・Webアプリ間の連携APIを提供 • JavaScript実行 • DOMアクセス →WebとJavaを融合した新しいアプリ開発が可能に!37 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  38. 38. JavaOne Tokyo 2012: JavaFXコンテンツ 今後のセッション • JS1-23 JavaFX + FXML + CSS = Javaの次世代GUI [CFPセッション] • JS1-32 Introduction to the JavaFX Scene Builder • JS2-02 JavaFX Architecture and Programming Model • JS2-32 Interface Layout with JavaFX 2.0 • JS2-42 UI Controls and Charts: Drag-and-Drop, Filtering, Sorting, Table Hookup with Charts38 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  39. 39. JavaOne Tokyo 2012: JavaFXコンテンツ ハンズオン・展示 • JH2-01 JavaFX 2.0によるリッチグラフィカルア プリケーション開発 [ハンズオン] • Oracle DEMOgrounds: JavaFX Labs39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  40. 40. 40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  41. 41. 41 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

×