[JavaOne Tokyo 2012] JavaFX and Web Integration

3. 以下の事項は、弊社の一般的な製品の方向性に関する概要を説明するものです。また、情報提供を唯一の目的とするものであり、いかなる契約にも組み込むことはできません。以下の事項は、マテリアルやコード、機能を提供することをコミットメント（確約）するものではないため、購買決定を行う際の判断材料になさらないで下さい。オラクル製品に関して記載されている機能の開発、リリースおよび時期については、弊社の裁量により決定されます。 OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

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.

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

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

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. ロード状況の監視とキャンセル 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. 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.

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.

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

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. スレッドについての注意 • JavaFXはSwing同様シングルスレッドポリシー • WebKitもシングルスレッドポリシー →WebコンポーネントにはJavaFXのアプリケーションスレッドからアクセスしなければならない – javafx.application.PlatformのrunLaterメソッドを利用33 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

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

[JavaOne Tokyo 2012] JavaFX and Web Integration

Kazuchika Sekiya

[JavaOne Tokyo 2012] JavaFX and Web Integration