JavaFX and HTML5 – Like Curds and RiceStephen Chin              Kevin NilsonJava Evangelist, Oracle   VP of Engineering, J...
About the Presenters        Stephen Chin                      Kevin Nilson  Java Evangelist, Oracle          Java Champion...
Photo by Kaushal Karkhanis: http://www.flickr.com/photos/kaushal/
History of the Web•   1991 HTML•   1994 HTML 2•   1996 CSS 1 + JavaScript•   1997 HTML 4•   1998 CSS 2•   2000 XHTML 1•   ...
What is HTML5• Web Hypertext Application Technology Working Group  (WHATWG)• HTML5 ! = HTML + CSS + JavaScript• HTML5 = Ne...
HTML5 Rounded Corners• http://slides.html5rocks.com/#rounded-corners HTML5                              No HTML5
HTML5 Canvas 3D (WebGL)• http://oos.moxiecode.com/js_webgl/fish/index.html
Prefixes• -webkit-text-fill-color: black;• -webkit-column-count: 2;• Before the Spec is final• Before the Browser implemen...
Cross Browser• Browsers behave fairly differently• HTML5 Non-Ambiguous Spec• JavaScript Frameworks (jQuery, Dojo, YUI)  gi...
Acid Test• http://acid3.acidtests.org
jQuery On The Rise>   56.87% of Top 10,000 sites use jQuery    (builtwith.com)
jQuery• http://jsfiddle.net/3urR9                              12
Reaching Older Browsers•   Chrome Frame    • IE6, IE7, IE8 running Chrome•   Modernizer    • Feature detection rather than...
Bootstrap            14
Responsive UI                http://earthhour.fr                                  15
JavaFX 2.0 PlatformImmersive Desktop ExperienceCombining the Best of JavaFX andHTML5• Leverage your Java skills with moder...
• iPhone UIWebView      Formatting TextIndalo is an iPhone App Kevin HelpedWrite
• Titanium  • Write JavaScript, but     Renders Native     Application  • Many “Native” widgets are     UIWebViewE*Trade A...
Displaying HTML in JavaFXpublic class WebViewTest extends Application {   public static void main(String[] args) {     lau...
Displaying HTML in JavaFX                            20
Calling Javascript from JavaFXString script = "alert(We have got a message,Houston!);”;eng.executeScript(script);         ...
JavaScript to Java Type ConversionJavaScript         Javanull               nullundefined          “undefined”number      ...
Responding to Browser EventsSupported Events:• Alert/Confirm/Prompt:    • Respond to JavaScript user interaction functions...
HTML5/JavaFX Integration Demo                                24
Pro JavaFX 2 Platform           • All examples rewritten in Java           • Covers new controls including:              ...
Stephen Chin              Kevin Nilsonstephen.chin@oracle.com   kevin.nilson@just.metweet: @steveonjava       tweet: @java...
Upcoming SlideShare
Loading in …5
×

JavaFX and HTML5 - Like Curds and Rice

18,653 views

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 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
18,653
On SlideShare
0
From Embeds
0
Number of Embeds
9,911
Actions
Shares
0
Downloads
130
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaFX and HTML5 - Like Curds and Rice

  1. 1. JavaFX and HTML5 – Like Curds and RiceStephen Chin Kevin NilsonJava Evangelist, Oracle VP of Engineering, Just.Mestephen.chin@oracle.com kevin.nilson@just.metweet: @steveonjava tweet: @javaclimber
  2. 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. 3. Photo by Kaushal Karkhanis: http://www.flickr.com/photos/kaushal/
  4. 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. 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. 6. HTML5 Rounded Corners• http://slides.html5rocks.com/#rounded-corners HTML5 No HTML5
  7. 7. HTML5 Canvas 3D (WebGL)• http://oos.moxiecode.com/js_webgl/fish/index.html
  8. 8. Prefixes• -webkit-text-fill-color: black;• -webkit-column-count: 2;• Before the Spec is final• Before the Browser implementation is Verified
  9. 9. Cross Browser• Browsers behave fairly differently• HTML5 Non-Ambiguous Spec• JavaScript Frameworks (jQuery, Dojo, YUI) give consistent API
  10. 10. Acid Test• http://acid3.acidtests.org
  11. 11. jQuery On The Rise> 56.87% of Top 10,000 sites use jQuery (builtwith.com)
  12. 12. jQuery• http://jsfiddle.net/3urR9 12
  13. 13. Reaching Older Browsers• Chrome Frame • IE6, IE7, IE8 running Chrome• Modernizer • Feature detection rather than User Agent Sniffing
  14. 14. Bootstrap 14
  15. 15. Responsive UI http://earthhour.fr 15
  16. 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. 17. • iPhone UIWebView  Formatting TextIndalo is an iPhone App Kevin HelpedWrite
  18. 18. • Titanium • Write JavaScript, but Renders Native Application • Many “Native” widgets are UIWebViewE*Trade API Contest App Kevin Wrote
  19. 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("http://google.com"); Scene scene = new Scene(webView); stage.setScene(scene); stage.setTitle("Web Test"); stage.show();}} 19
  20. 20. Displaying HTML in JavaFX 20
  21. 21. Calling Javascript from JavaFXString script = "alert(We have got a message,Houston!);”;eng.executeScript(script); 21
  22. 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. 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. 24. HTML5/JavaFX Integration Demo 24
  25. 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. 26. Stephen Chin Kevin Nilsonstephen.chin@oracle.com kevin.nilson@just.metweet: @steveonjava tweet: @javaclimber 26

×