[JavaOne Tokyo 2012] JavaFX and Web Integration

JavaFX and Web Integration
日本オラクル株式会社 Java Embedded Global Business Unit
2 関谷和愛
Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

以下の事項は、弊社の一般的な製品の方向性に関する概要を説明するものです。ま
た、情報提供を唯一の目的とするものであり、いかなる契約にも組み込むことはでき
ません。以下の事項は、マテリアルやコード、機能を提供することをコミットメント（確約
）するものではないため、購買決定を行う際の判断材料になさらないで下さい。オラク
ル製品に関して記載されている機能の開発、リリースおよび時期については、弊社の
裁量により決定されます。

OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。
文中の社名、商品名等は各社の商標または登録商標である場合があります。


Servers Desktop Embedded TV Mobile Card
BD-J
Key APIs Java EE JavaFX Java TV MSA

Platform Java SE Java ME Java Card

Language Java Language
Java Platform

JavaFXとは
次世代Javaクライアントソリューション

メディア Web

動画・音声 HTML5/CSS3/JavaScript

アニメーション
エフェクト
高度なグラフィックス 3D

JavaFX 2.0アーキテクチャ


アジェンダ

• Webコンポーネントの概要
• API: WebEngineとWebView
• より高度な連携


JavaFXのWebコンポーネント

• 本格的なブラウザを内蔵
– HTML4およびHTML5の一部をサポート
– JavaScriptエンジン
– LiveConnect対応
– DOMアクセス
– SVGサポート


Webコンポーネントの利用シーン

• Webコンテンツの表示
– リモートはもちろんローカル生成コンテンツも
• Webアプリケーションの埋め込み
– JavaからWebアプリをコントロール
– Webアプリと多彩なJavaライブラリを融合


Webコンポーネントの実装

• WebKitベース
– ネットワーク機能はjava.netを利用
– レンダリングにはJavaFX(Prism)を利用
• シーングラフノードとして提供
– エフェクトやトランジションなどを適用可能


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.0GB

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.0GB

DEMO


アジェンダ



WebEngineとWebView


WebEngine
package javafx.scene.web;
• ビューではなく機能を提供
– Webページのロード
– スクリプトの実行
– DOMアクセス
• WebVeiwとは独立に利用可能


WebView
package javafx.scene.web;
• シーングラフノードとしてビューを提供
– Webページを表示
• 連動するWebEngineを1個持つ
– 生成時に自動的に作られ変更は不可
– WebView.getEngine() で取得


WebEngineの主なメソッド

メソッド説明
void load(String url) 指定したWebページをロード
void loadContent(String content) HTMLを直接ロード
void reload() リロード
Worker getLoadWorker() ロード状況監視用のWorkerを取得
Object executeScript(String script) JavaScriptを実行
Document getDocument() DOMを取得


ロード状況の監視とキャンセル
package javafx.concurrent;
• Webページのロードは非同期に行われる
• WebEngineから取得したWorkerを利用する
– 状態遷移
• state:
READY→SCHEDULED→RUNNING→SUCCEEDED/FAILED/CANCE
LED
– 進捗状況
• progress (0〜1)
• totalWork, workDone （全体作業量と終了分）
– キャンセル
• cancel()

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");


DEMO


アジェンダ



DOM (Document Object Model) アクセス

• WebEngineのgetDocumentメソッド、documentプロパティ
– ページのロード時に初期化
– プロパティ自体はReadOnlyだがドキュメント構造は変更可能


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);


DEMO


contentEditable

• HTML5でサポートされる属性
• 要素を編集可能にする例：

// DOMのElementインタフェースを使用
inputLine.setAttribute("contenteditable", "true");

// またはJSObjectにキャストして
((JSObject)inputLine).setMember("contentEditable", true)


JavaScriptの実行

• WebEngine.executeScriptメソッド
– 現在のコンテキストで任意のJavaScript式を評価できる

public String getPath() {
return (String)webEngine.executeScript("location.pathname");
}


JavaScript値のJavaへの変換

JavaScript Java
null null
undefined “undefined”
数値 java.lang.Number
(Integer または Double)
文字列 java.lang.String
ブール値 java.lang.Boolean
オブジェクト netscape.javascript.JSObject


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) メソッド呼び出し


JSObjectとDOM

• DOMノードはJSObjectもimplementsしている
– 同じオブジェクトがWebKitのnative DOMとJS DOMの両方をラップ
• キャストしてJSObjectとしても扱える

Element inputLine = ...; // DOM要素を取得
// JSObjectとして扱う
((JSObject)inputLine).call("focus");


JavaScriptからのJava呼び出し

• インタフェースオブジェクトを作り、JSObjectにsetMemeber
→JavaScriptから呼び出し可能に


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>


スレッドについての注意

• JavaFXはSwing同様シングルスレッドポリシー
• WebKitもシングルスレッドポリシー
→WebコンポーネントにはJavaFXのアプリケーションスレッドか
らアクセスしなければならない
– javafx.application.PlatformのrunLaterメソッドを利用


DEMO


WiiリモコンでGoogle Mapをコントロール

WiiRemoteJ

BlueCove Googleマップ
Bluetooth

JavaScript API
呼び出し

WebEngine/WebView
Wiiリモコン


TwitterストリームとHTML5の連動

Ball Pool
Streaming API
JavaScript呼び出し
createBall()

WebEngine/WebView


まとめ
JavaFX and Web Integration
• JavaFXは強力なWebコンポーネントを標準装備
– WebKitベースの本格的な内蔵ブラウザ
• HTML5にも部分対応
• 高性能
– Java・Webアプリ間の連携APIを提供
• JavaScript実行
• DOMアクセス
→WebとJavaを融合した新しいアプリ開発が可能に！


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


JavaOne Tokyo 2012: JavaFXコンテンツ
ハンズオン・展示
• JH2-01 JavaFX 2.0によるリッチグラフィカルア
プリケーション開発 [ハンズオン]
• Oracle DEMOgrounds: JavaFX Labs


[JavaOne Tokyo 2012] JavaFX and Web Integration

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to [JavaOne Tokyo 2012] JavaFX and Web Integration

Similar to [JavaOne Tokyo 2012] JavaFX and Web Integration (20)

More from Kazuchika Sekiya

More from Kazuchika Sekiya (17)

Recently uploaded

Recently uploaded (12)

[JavaOne Tokyo 2012] JavaFX and Web Integration