1. Moving to the Client - JavaFX and HTML5
Stephen Chin
Chief Agile Methodologist, GXS
steveonjava@gmail.com tweet: @steveonjava
Kevin Nilson
VP of Engineering, Just.Me
kevin.nilson@just.me tweet: @javaclimber
2. About the Presenters
Stephen Chin Kevin Nilson
Java Champion
Java Champion
Chief Agile Methodologist, GXS
Author Web 2.0 Fundamentals
Author, Pro JavaFX Platform
User Groups Leader
Silicon Valley Web JUG
Silicon Valley JS Meetup
Silicon Valley Google Technology UG
3. This is a Participatory Session!
• Every now and then we will say something
interesting… and it will go out in a tweet.
• Follow @steveonjava to watch the tweets and
retweet the ones you like to your followers
• Feel free to create your own tweets using the
hash tags "#HTML5 #JavaFX #Devoxx"
• We have some goodies for folks who play. J
4. History of the Web
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5
5. What is HTML5
• Web Hypertext Application Technology Working
Group (WHATWG)
• HTML5 != HTML + CSS + JavaScript
• HTML5 = Next Generation Features for Modern Web
Development
• Offline Storage, Web SQL Database, IndexedDB,
Application Cache, Web Workers, WebSocket,
Notifications, Native Drag & Drop, File System,
GeoLocation, Speech Input, Form Types, Audio,
Video, Canvas, SVG
13. Reaching Older Browsers
• Chrome Frame
– IE6, IE7, IE8 running Chrome
• Modernizr
– Feature Detection rather than User Agent Sniffing
14. Web on Mobile
• iPhone UIWebView
– Formatting Text
Indalo is an iPhone App Kevin Helped Write
15. Native Mobile Web
• Titanium
– Write JavaScript, but Renders
Native Application
– Many “Native” widgets are
UIWebView
E*Trade API Contest App Kevin Wrote
16. JavaFX 2.0 Platform
Immersive Desktop Experience Combining
the Best of JavaFX and HTML5
• Leverage your Java skills with modern
JavaFX APIs
• Integrate Java, JavaScript, and HTML5 in
the same application
• New graphics stack takes advantage of
hardware acceleration for 2D and 3D
applications
• User your favorite IDE: NetBeans, Eclipse,
IntelliJ, etc.
17. JavaFX and the Java Platform
Java EE Java FX MSA Java TV
Java SE Java ME Java Card
HotSpot Java VM Lightweight Java VM
Java Language
Images Copyright Oracle
18. Architecture of JavaFX 2.0
JavaFX Public API
Quantum Toolkit
Prism Glass Media Web
WinTk Engine Engine
Java2D Open GL D3D
Java Virtual Machine
19. Displaying HTML in JavaFX
public class WebViewTest extends Application {
public static void main(String[] args) {
launch(WebViewTest.class, args);
}
@Override public void start(Stage stage) {
WebView webView = new WebView();
webView.getEngine().load("http://google.com");
Scene scene = new Scene(webView);
stage.setScene(scene);
stage.setTitle("Web Test");
stage.show();
}}
21. Displaying HTML in JavaFX
public class WebViewTest extends Application {
public static void main(String[] args) {
launch(WebViewTest.class, args);
}
12 Lines
@Override public void start(Stage stage) {
311 Characters
WebView webView = new WebView();
webView.getEngine().load("http://google.com");
Scene scene = new Scene(webView);
stage.setScene(scene);
stage.setTitle("Web Test");
stage.show();
}}
22. HTML in JavaFX Builders
public class WebViewTest extends Application {
public static void main(String[] args) {
launch(args);
}
11 Lines
@Override public void start(Stage stage) {
321 Characters
WebView webView = WebViewBuilder.create().build();
stage.setScene(SceneBuilder.create().root(webView).build());
webView.getEngine().load("http://google.com");
stage.setTitle("Web Test");
stage.show();
}}
23. HTML in GroovyFX
GroovyFX.start { primaryStage ->
def sg = new SceneGraphBuilder()
sg.stage(
title: 'Web Test',
show: true) { 11 Lines
scene () { 152 Characters
wv = webView()
}
}
wv.engine.load("http://google.com/")
}
24. HTML in ScalaFX
object WebViewTest extends JFXApp {
stage = new Stage {
title = "Web Test"
scene = new Scene {
WebView { 10 Lines
117 Characters
location = "http://google.com/"
}
}
}
}
25. HTML in Visage
Stage {
title: "Web Test"
Scene {
WebView {
8 Lines
location: "http://google.com/"
} 67 Characters
}
}
26. Calling Javascript from JavaFX
String script = "alert('We have got a message,
Houston!');”;
eng.executeScript(script);
26
27. Responding to Browser Events
Supported Events:
• Alert/Confirm/Prompt:
– Respond to JavaScript user interaction functions
• Resize:
– Web page moves or resizes the window object
• Status
– Web page changes the status text
• Visibility
– Hide or show the window object
• Popup
– Spawn a second web view/engine
27
