Your SlideShare is downloading. ×
JavaFX and HTML5 - Like Curds and Rice
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaFX and HTML5 - Like Curds and Rice


Published on

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 …

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.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JavaFX and HTML5 – Like Curds and RiceStephen Chin Kevin NilsonJava Evangelist, Oracle VP of Engineering, kevin.nilson@just.metweet: @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:
  • 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• HTML5 No HTML5
  • 7. HTML5 Canvas 3D (WebGL)•
  • 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•
  • 11. jQuery On The Rise> 56.87% of Top 10,000 sites use jQuery (
  • 12. jQuery• 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 15
  • 16. JavaFX 2.0 PlatformImmersive Desktop ExperienceCombining the Best of JavaFX andHTML5• 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 TextIndalo is an iPhone App Kevin HelpedWrite
  • 18. • Titanium • Write JavaScript, but Renders Native Application • Many “Native” widgets are UIWebViewE*Trade API Contest App Kevin Wrote
  • 19. Displaying HTML in JavaFXpublic 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(""); Scene scene = new Scene(webView); stage.setScene(scene); stage.setTitle("Web Test");;}} 19
  • 20. Displaying HTML in JavaFX 20
  • 21. Calling Javascript from JavaFXString script = "alert(We have got a message,Houston!);”;eng.executeScript(script); 21
  • 22. JavaScript to Java Type ConversionJavaScript Javanull nullundefined “undefined”number java.lang.Number (Integer or Double)string java.lang.Stringboolean java.lang.Booleanobject netscape.javascript.JSOb ject 22
  • 23. Responding to Browser EventsSupported 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 kevin.nilson@just.metweet: @steveonjava tweet: @javaclimber 26