[English version] JavaFX and Web Integration
Upcoming SlideShare
Loading in...5
×
 

[English version] JavaFX and Web Integration

on

  • 4,156 views

One of the key features of JavaFX 2.0 is having full-fledged embedded browser. This enables JavaFX apps to embed web contents, and also to work together with HTML5 apps. ...

One of the key features of JavaFX 2.0 is having full-fledged embedded browser. This enables JavaFX apps to embed web contents, and also to work together with HTML5 apps.

This session focuses on JavaFX's web component, WebEngine, and show how JavaFX can work together with web technologies (HTML/CSS/JavaScript) by using demos and sample codes.

(Session JS1-13 / Apr 4th, JavaOne Tokyo 2012)

Statistics

Views

Total Views
4,156
Views on SlideShare
4,134
Embed Views
22

Actions

Likes
3
Downloads
38
Comments
1

5 Embeds 22

http://www.linkedin.com 9
http://www.brijj.com 6
http://www.devbrijj1.infoedge.com 5
https://twimg0-a.akamaihd.net 1
https://twitter.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

[English version] JavaFX and Web Integration [English version] JavaFX and Web Integration Presentation Transcript

  • 1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • JavaFX and Web Integration Kazuchika Sekiya2 Java Embedded Global Business Unit, Oracle Japan Copyright © 2012, Oracle and/or its affiliates. All rights reserved. English version
  • The following is intended to outline our general product direction. It isintended for information purposes only, and may not be incorporated into anycontract. It is not a commitment to deliver any material, code, or functionality,and should not be relied upon in making purchasing decisions. Thedevelopment, release, and timing of any features or functionality described forOracle’s products remains at the sole discretion of Oracle.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.
  • What is JavaFX? Next Generation Java Client Solution Media Web Audio/Video HTML5/CSS3/JavaScript Animations Effects Advanced Graphics 3D5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • JavaFX 2.0 Architecture6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Agenda • Overview • API: WebEngine and WebView • Advanced Features7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • JavaFX Web Component • Full-fledged built-in browser – HTML4, partial HTML5 support – JavaScript engine – LiveConnect – DOM access – SVG support8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Use Cases • Showing Web content – Remote content, locally generated content • Embedding Web applications – Using Java to control Web apps – Enhance Web apps by a variety of Java libraries9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Implementation Notes • Based on WebKit browser engine – Networking is implemented using java.net – Rendering is implemented using JavaFX (Prism) • Provided as a scene graph node – Effects, transforms and transitions can be applied10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Performance Windows • GUIMark2 HTML5 test 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.
  • Performance Mac • GUIMark2 HTML5 test 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 Mac OS X 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.
  • Agenda • Overview • API: WebEngine and WebView • Advanced Features14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • WebEngine and WebView15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • WebEngine package javafx.scene.web; • Non visual component • Provides following functions: – Loads Web pages – Runs scripts on pages – Manages DOM • Can be used without WebView16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • WebView package javafx.scene.web; • Is a scene graph Node – Used to display Web pages • Has an associated WebEngine – Created at construction time – Cannot be changed – WebView.getEngine()17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Key Methods of WebEngine Method Description void load(String url) Loads a Web page void loadContent(String content) Loads the given HTML content void reload() Reloads the current page Worker getLoadWorker() Returns a Worker to track loading Object executeScript(String script) Executes a script Document getDocument() Returns the DOM for current page18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Tracking of Web Page Loading package javafx.concurrent; • Loading is asynchronous • Use WebEngine.getLoadWorker() to track loading – state • READY -> SCHEDULED -> RUNNING -> SUCCEEDED/FAILED/CANCELED – progress (0…1) – workDone / totalWork – Can cancel() loading19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Basic Usage of Web Component import javafx.scene.web.WebView; import javafx.scene.web.WebEngine; WebView view = new WebView(); // add WebView to scene graph // get WebEngine from WebView WebEngine engine = view.getEngine(); // load a URL 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.
  • Agenda • Overview • API: WebEngine and WebView • Advanced Features22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • DOM (Document Object Model) Access • WebEngine.document property / getDocument() method – Initialized at some point before page is loaded – Read only – But you can modify the Document structure!23 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Example: Modifying 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 • An attribute introduced in HTML5 • To make region editable, do one of:// use Element interface of DOMinputLine.setAttribute("contenteditable", "true");// or, casting to JSObject((JSObject)inputLine).setMember("contentEditable", true) 26 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • JavaScript Evaluation • WebEngine.executeScript() method – evaluate a JavaScript expression in the context of the current pagepublic String getPath() { return (String)webEngine.executeScript("location.pathname");} 27 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Translating JavaScript value to Java JavaScript Java null null undefined “undefined” number java.lang.Number (Integer or Double) string java.lang.String boolean java.lang.Boolean object netscape.javascript.JSObject28 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • JSObject package netscape.javascript; • Java wrapper around JavaScript object • Part of LiveConnect API Key Method Description Object getMember(String name) Retrieves a named member void setMember(String name, Object value) Sets a named member void removeMember(String name) Removes a named member Object call(String method, Object[] args) Calls a JavaScript method29 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Node implements JSObject • DOM Node implementation also implements JSObject – same object wraps both the native WebKit (C++) DOM, and wraps JavaScripts DOM (which also wrap native DOM) • You do need to cast: Element inputLine = ...; // get an Element // use it as JSObject ((JSObject)inputLine).call("focus");30 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Calling Java from JavaScript 1. Create an interface object (of any class) 2. Make it known to JavaScript by calling JSObject.setMember() ⇒You can call public methods from JavaScript31 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Calling Java from JavaScriptclass 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.
  • Threading • JavaFX, like Swing, is single-threaded • WebKit is single-threaded as well ⇒Web Component must only be accessed from the JavaFX application thread – use javafx.application.Platform.runLater() method33 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • DEMO34 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Control Google Map using Wii Remote WiiRemoteJ BlueCove Google Map Bluetooth JavaScript API call WebEngine/WebViewWii Remote 35 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Integrate Twitter4J library and HTML5 App HTML5 app “Ball Pool” Streaming API JavaScript call createBall() WebEngine/WebView36 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Summary JavaFX and Web Integration • JavaFX has powerful Web Component – WebKit based full-fledged built-in browser • Partial HTML5 support • High performance – APIs to integrate Java and Web apps • JavaScript bridge • DOM access ⇒You can produce new “mash-up”s of Web and Java!37 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • Acknowledgement • This presentation is mostly based on: – TS24313 “JavaFX 2.0 Web Component at a Glance” • JavaOne 2011 San Francisco • by Per Bothner, Peter Zhelezniakov – The JavaFX Blog: “Communicating between JavaScript and JavaFX with WebEngine” • https://blogs.oracle.com/javafx/entry/communicating_between_javascri pt_and_javafx • by Peter Zhelezniakov38 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • 39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  • 40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.