[English version] JavaFX and Web Integration

1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.


JavaFX and Web Integration

Kazuchika Sekiya

Java Embedded Global Business Unit, Oracle Japan 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

Java Card

Java EE Java TV

BD-J

JavaFX MSA

Java Language

Java SE Java ME

Key APIs

Platform

Language

Java Platform


What is JavaFX? Next Generation Java Client Solution

Advanced Graphics

Web Media

Audio/Video HTML5/CSS3/JavaScript

Animations Effects 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

• GUIMark2 HTML5 test 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

http://www.craftymind.com/guimark2


Performance

• GUIMark2 HTML5 test http://www.craftymind.com/guimark2

Mac

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

Mac OS X 10.6.8 / Intel Core 2 Duo 2.13GHz / RAM 4.0GB

http://www.craftymind.com/guimark2


DEMO


Agenda

• Overview




WebEngine and WebView


WebEngine

• Non visual component

• Provides following functions:

– Loads Web pages

– Runs scripts on pages

– Manages DOM

• Can be used without WebView

package javafx.scene.web;


WebView

• Is a scene graph Node

– Used to display Web pages

• Has an associated WebEngine

– Created at construction time

– Cannot be changed

– WebView.getEngine()

package javafx.scene.web;


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

• Loading is asynchronous

• Use WebEngine.getLoadWorker() to track loading

– state

• READY -> SCHEDULED -> RUNNING ->

SUCCEEDED/FAILED/CANCELED

– progress (0…1)

– workDone / totalWork

– Can cancel() loading

package javafx.concurrent;


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

• Java wrapper around JavaScript object

• Part of LiveConnect API

package netscape.javascript;

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

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>


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

Wii Remote

Google Map

WiiRemoteJ

BlueCove

WebEngine/WebView

Bluetooth

JavaScript API call


Integrate Twitter4J library and HTML5 App

HTML5 app

“Ball Pool”

WebEngine/WebView

Streaming API

JavaScript call createBall()


Summary

• 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!

JavaFX and Web Integration


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

https://blogs.oracle.com/javafx/entry/communicating_between_javascript_and_javafx

https://blogs.oracle.com/javafx/entry/communicating_between_javascript_and_javafx



Technology

[English version] JavaFX and Web Integration