[JavaOne Tokyo 2012] JavaFX and Web Integration

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

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

Webコンポーネントのパフォーマンス

• GUIMark2 HTML5テスト http://www.craftymind.com/guimark2

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

アジェンダ

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

– 進捗状況

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

アジェンダ

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

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メソッドを利用

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

ハンズオン・展示

[JavaOne Tokyo 2012] JavaFX and Web Integration

Technology

Transcript of [JavaOne Tokyo 2012] JavaFX and Web Integration

JavaOne 2013 Report

JavaOne Report for Java EE

JavaOne 2012 Groovy update

Linkedin Javaone

JavaOne 2012 San Francisco Report

JavaFx Tutorials

JavaOne 2014 San Francisco Report

Javafx Gui

01 - JavaFX. Введение в JavaFX

Lambdaj Javaone Slides

JavaFXでFun eXperience 20131213@JavaFx勉強会LT

JavaOneで一番セッションが多かったのは... JavaFXでした

JavaFX programming

JavaOne 2015 - Java SE Update

JavaFX Enterprise

JavaOne 2010 - JRuby

Javaone 2013 moscow gradle

Alphorm.com Formation JavaFX

JavaFX 2 Tutorial

JavaOne Tokyo LT : Internationalization