• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[JavaOne Tokyo 2012] JavaFX and Web Integration
 

[JavaOne Tokyo 2012] JavaFX and Web Integration

on

  • 3,743 views

JavaFXの重要なポイントの一つはフル機能のWebブラウザを内蔵していることです。

JavaFXの重要なポイントの一つはフル機能のWebブラウザを内蔵していることです。
これにより、JavaFXアプリケーションの中にWebアプリケーションを埋め込んだり、HTML5アプリケーションとJavaFXを連携させたりすることが可能になりました。
このセッションでは、JavaFXのWebコンポーネント(WebEngine)を中心に、JavaFXとWeb技術(HTML/CSS/JavaScript)のさまざまな連携手法やその活用例などについて、デモを交えて紹介します。

【セッションコード】JS1-13
【日時】4/4(水) 13:15-14:15
【会場】六本木アカデミーヒルズ49 [カンファレンスルーム2]

Statistics

Views

Total Views
3,743
Views on SlideShare
2,946
Embed Views
797

Actions

Likes
5
Downloads
8
Comments
0

6 Embeds 797

http://d.hatena.ne.jp 789
http://us-w1.rockmelt.com 3
http://webcache.googleusercontent.com 2
https://si0.twimg.com 1
http://translate.googleusercontent.com 1
http://hatenatunnel.appspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [JavaOne Tokyo 2012] JavaFX and Web Integration [JavaOne Tokyo 2012] JavaFX and Web Integration Presentation Transcript

    • 1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • JavaFX and Web Integration 日本オラクル株式会社 Java Embedded Global Business Unit2 関谷 和愛 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 以下の事項は、弊社の一般的な製品の方向性に関する概要を説明するものです。また、情報提供を唯一の目的とするものであり、いかなる契約にも組み込むことはできません。以下の事項は、マテリアルやコード、機能を提供することをコミットメント(確約)するものではないため、購買決定を行う際の判断材料になさらないで下さい。オラクル製品に関して記載されている機能の開発、リリースおよび時期については、弊社の裁量により決定されます。 OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。 文中の社名、商品名等は各社の商標または登録商標である場合があります。3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 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.
    • JavaFXとは 次世代Javaクライアントソリューション メディア Web 動画・音声 HTML5/CSS3/JavaScript アニメーション エフェクト 高度なグラフィックス 3D5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • JavaFX 2.0アーキテクチャ6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • アジェンダ • Webコンポーネントの概要 • API: WebEngineとWebView • より高度な連携7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • JavaFXのWebコンポーネント • 本格的なブラウザを内蔵 – HTML4およびHTML5の一部をサポート – JavaScriptエンジン – LiveConnect対応 – DOMアクセス – SVGサポート8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • Webコンポーネントの利用シーン • Webコンテンツの表示 – リモートはもちろんローカル生成コンテンツも • Webアプリケーションの埋め込み – JavaからWebアプリをコントロール – Webアプリと多彩なJavaライブラリを融合9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • Webコンポーネントの実装 • WebKitベース – ネットワーク機能はjava.netを利用 – レンダリングにはJavaFX(Prism)を利用 • シーングラフノードとして提供 – エフェクトやトランジションなどを適用可能10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 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.
    • 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.
    • DEMO13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • アジェンダ • Webコンポーネントの概要 • API: WebEngineとWebView • より高度な連携14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • WebEngineとWebView15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • WebEngine package javafx.scene.web; • ビューではなく機能を提供 – Webページのロード – スクリプトの実行 – DOMアクセス • WebVeiwとは独立に利用可能16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • WebView package javafx.scene.web; • シーングラフノードとしてビューを提供 – Webページを表示 • 連動するWebEngineを1個持つ – 生成時に自動的に作られ変更は不可 – WebView.getEngine() で取得17 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を取得18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • ロード状況の監視とキャンセル 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.
    • 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.
    • DEMO21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • アジェンダ • Webコンポーネントの概要 • API: WebEngineとWebView • より高度な連携22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • DOM (Document Object Model) アクセス • WebEngineのgetDocumentメソッド、documentプロパティ – ページのロード時に初期化 – プロパティ自体はReadOnlyだがドキュメント構造は変更可能23 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);24 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • DEMO25 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 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.
    • JavaScriptの実行 • WebEngine.executeScriptメソッド – 現在のコンテキストで任意のJavaScript式を評価できるpublic String getPath() { return (String)webEngine.executeScript("location.pathname");} 27 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.JSObject28 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 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.
    • 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.
    • JavaScriptからのJava呼び出し • インタフェースオブジェクトを作り、JSObjectにsetMemeber →JavaScriptから呼び出し可能に31 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 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.
    • スレッドについての注意 • JavaFXはSwing同様シングルスレッドポリシー • WebKitもシングルスレッドポリシー →WebコンポーネントにはJavaFXのアプリケーションスレッドか らアクセスしなければならない – javafx.application.PlatformのrunLaterメソッドを利用33 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • DEMO34 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • WiiリモコンでGoogle Mapをコントロール WiiRemoteJ BlueCove Googleマップ Bluetooth JavaScript API 呼び出し WebEngine/WebViewWiiリモコン35 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • TwitterストリームとHTML5の連動 Ball Pool Streaming API JavaScript呼び出し createBall() WebEngine/WebView36 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • まとめ 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.
    • 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コンテンツ ハンズオン・展示 • JH2-01 JavaFX 2.0によるリッチグラフィカルア プリケーション開発 [ハンズオン] • Oracle DEMOgrounds: JavaFX Labs39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
    • 41 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.