JavaFX 2 is an exciting new platform for developing rich user interfaces with animation, media, and advanced controls with pure Java code. HTML5 is the next standard for web technologies promising richer graphics, native media support, and offline storage among other features. So which technology should you choose? We say you can have your curds with your rice! With one HTML5 expert and one JavaFX wizard on stage, we will show how you can leverage both of these technologies to create a new breed of application that goes beyond your expectations.

1. JavaFX and HTML5 – Like Curds and Rice
Stephen Chin Kevin Nilson
Java Evangelist, Oracle VP of Engineering, Just.Me
stephen.chin@oracle.com kevin.nilson@just.me
tweet: @steveonjava tweet: @javaclimber

2. About the Presenters
Stephen Chin Kevin Nilson
Java Evangelist, Oracle Java Champion
Author, Pro JavaFX Platform 2 VP of Engineering, Just.Me
SV JavaFX User Group Founder Author Web 2.0 Fundamentals
User Groups
Silicon Valley Web JUG
Silicon Valley JS Meetup
Silicon Valley Google
Technology UG

3. Photo by Kaushal Karkhanis: http://www.flickr.com/photos/kaushal/

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

6. HTML5 Rounded Corners
• http://slides.html5rocks.com/#rounded-corners
HTML5
No HTML5

7. HTML5 Canvas 3D (WebGL)
• http://oos.moxiecode.com/js_webgl/fish/index.html

8. Prefixes
• -webkit-text-fill-color: black;
• -webkit-column-count: 2;
• Before the Spec is final
• Before the Browser implementation is Verified

9. Cross Browser
• Browsers behave fairly differently
• HTML5 Non-Ambiguous Spec
• JavaScript Frameworks (jQuery, Dojo, YUI)
give consistent API

10. Acid Test
• http://acid3.acidtests.org

11. jQuery On The Rise
> 56.87% of Top 10,000 sites use jQuery
(builtwith.com)

12. jQuery
• http://jsfiddle.net/3urR9
12

13. Reaching Older Browsers
• Chrome Frame
• IE6, IE7, IE8 running Chrome
• Modernizer
• Feature detection rather than User Agent
Sniffing

14. Bootstrap
14

15. Responsive UI
http://earthhour.fr
15

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. • iPhone UIWebView
 Formatting Text
Indalo is an iPhone App Kevin Helped
Write

18. • Titanium
• Write JavaScript, but
Renders Native
Application
• Many “Native” widgets are
UIWebView
E*Trade API Contest App Kevin Wrote

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();
}}
19

20. Displaying HTML in JavaFX
20

21. Calling Javascript from JavaFX
String script = "alert('We have got a message,
Houston!');”;
eng.executeScript(script);
21

22. JavaScript to Java Type Conversion
JavaScript Java
null null
undefined “undefined”
number java.lang.Number
(Integer or Double)
string java.lang.String
boolean java.lang.Boolean
object netscape.javascript.JSOb
ject
22

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

24. HTML5/JavaFX Integration Demo
24

25. Pro JavaFX 2 Platform
• All examples rewritten in Java
• Covers new controls including:
 WebPane
 TableView
 TreeView
 Etc.
• Content on
ScalaFX/GroovyFX/Visage
25

26. Stephen Chin Kevin Nilson
stephen.chin@oracle.com kevin.nilson@just.me
tweet: @steveonjava tweet: @javaclimber
26