[English version] JavaFX and Web Integration

JavaFX and Web Integration
Kazuchika Sekiya
2 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 is
intended for information purposes only, and may not be incorporated into any
contract. It is not a commitment to deliver any material, code, or functionality,
and should not be relied upon in making purchasing decisions. The
development, release, and timing of any features or functionality described for
Oracle’s products remains at the sole discretion of Oracle.


Servers Desktop Embedded TV Mobile Card
BD-J
Key APIs Java EE JavaFX Java TV MSA

Platform Java SE Java ME Java Card

Language Java Language
Java Platform

What is JavaFX?
Next Generation Java Client Solution

Media Web

Audio/Video HTML5/CSS3/JavaScript

Animations
Effects
Advanced Graphics 3D

JavaFX 2.0 Architecture


Agenda

• Overview
• API: WebEngine and WebView
• Advanced Features


JavaFX Web Component

• Full-fledged built-in browser
– HTML4, partial HTML5 support
– JavaScript engine
– LiveConnect
– DOM access
– SVG support


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 libraries


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 applied


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

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

DEMO


Agenda

• Overview


WebEngine and WebView


WebEngine
package javafx.scene.web;
• Non visual component
• Provides following functions:
– Loads Web pages
– Runs scripts on pages
– Manages DOM
• Can be used without WebView


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


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 page


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() loading


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


DEMO


Agenda

• Overview


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!


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


DEMO


contentEditable

• An attribute introduced in HTML5
• To make region editable, do one of:

// use Element interface of DOM
inputLine.setAttribute("contenteditable", "true");

// or, casting to JSObject
((JSObject)inputLine).setMember("contentEditable", true)


JavaScript Evaluation

• WebEngine.executeScript() method
– evaluate a JavaScript expression in the context of the current page

public String getPath() {
return (String)webEngine.executeScript("location.pathname");
}


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


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 method


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


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 JavaScript


Calling Java from JavaScript

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>


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() method


DEMO


Control Google Map using Wii Remote

WiiRemoteJ

BlueCove Google Map
Bluetooth

JavaScript API
call

WebEngine/WebView
Wii Remote


Integrate Twitter4J library and HTML5 App

HTML5 app
“Ball Pool”
Streaming API
JavaScript call
createBall()

WebEngine/WebView


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!


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 Zhelezniakov


[English version] JavaFX and Web Integration

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to [English version] JavaFX and Web Integration (20)

More from Kazuchika Sekiya (11)

Recently uploaded (20)

[English version] JavaFX and Web Integration