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