[JavaOne Tokyo 2012] JavaFX and Web Integration

1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.


JavaFX and Web Integration

日本オラクル株式会社 Java Embedded Global Business Unit

関谷和愛


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

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


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


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コンポーネントのパフォーマンス

• 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

http://www.craftymind.com/guimark2


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

http://www.craftymind.com/guimark2


DEMO


アジェンダ





WebEngineとWebView


WebEngine

• ビューではなく機能を提供

– Webページのロード

– スクリプトの実行

– DOMアクセス

• WebVeiwとは独立に利用可能

package javafx.scene.web;


WebView

• シーングラフノードとしてビューを提供

– Webページを表示

• 連動するWebEngineを1個持つ

– 生成時に自動的に作られ変更は不可

– WebView.getEngine() で取得

package javafx.scene.web;


WebEngineの主なメソッド

メソッド説明

void load(String url) 指定したWebページをロード

void loadContent(String content) HTMLを直接ロード

void reload() リロード

Worker getLoadWorker() ロード状況監視用のWorkerを取得

Object executeScript(String script) JavaScriptを実行

Document getDocument() DOMを取得


ロード状況の監視とキャンセル

• Webページのロードは非同期に行われる

• WebEngineから取得したWorkerを利用する

– 状態遷移

• state:

READY→SCHEDULED→RUNNING→SUCCEEDED/FAILED/CANCE

LED

– 進捗状況

• progress (0〜1)

• totalWork, workDone （全体作業量と終了分）

– キャンセル

• cancel()

package javafx.concurrent;


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

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


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呼び出し

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>


スレッドについての注意

• JavaFXはSwing同様シングルスレッドポリシー

• WebKitもシングルスレッドポリシー

→WebコンポーネントにはJavaFXのアプリケーションスレッドからアクセスしなければならない

– javafx.application.PlatformのrunLaterメソッドを利用


DEMO


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

Wiiリモコン

Googleマップ

WiiRemoteJ

BlueCove

WebEngine/WebView

Bluetooth

JavaScript API 呼び出し


TwitterストリームとHTML5の連動

Ball Pool

WebEngine/WebView

Streaming API

JavaScript呼び出し createBall()


まとめ

• JavaFXは強力なWebコンポーネントを標準装備

– WebKitベースの本格的な内蔵ブラウザ

• HTML5にも部分対応

•高性能

– Java・Webアプリ間の連携APIを提供

• JavaScript実行

• DOMアクセス

→WebとJavaを融合した新しいアプリ開発が可能に！

JavaFX and Web Integration


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

ハンズオン・展示



Technology

[JavaOne Tokyo 2012] JavaFX and Web Integration