Moving to the Client - JavaFX and HTML5<br />Stephen Chin<br />Chief Agile Methodologist, GXS<br />steveonjava@gmail.com<b...
About the Presenters<br />Stephen Chin<br />Kevin Nilson<br />Java Champion<br />Java Champion<br />Chief Agile Methodolog...
History of the Web<br />1991 HTML<br />1994 HTML 2<br />1996 CSS 1 + JavaScript<br />1997 HTML 4<br />1998 CSS 2<br />2000...
What is HTML5<br />Web Hypertext Application Technology Working Group (WHATWG)<br />HTML5 != HTML + CSS + JavaScript<br />...
HTML5 Rounded Corners<br />http://slides.html5rocks.com/#rounded-corners<br />HTML5<br />No HTML5<br />
HTML5 Canvas 3D (WebGL)<br />http://slides.html5rocks.com/#canvas-3d<br />
Prefixes<br />-webkit-text-fill-color: black;<br />-webkit-column-count: 2;<br />Before the Spec is final<br />Before the ...
Cross Browser<br />Browsers behave fairly differently<br />HTML5 Non-Ambiguous Spec<br />JavaScript Frameworks (jQuery, Do...
jQuery On The Rise<br />44% of Top 10,000 sites use jQuery (builtwith.com)<br />
JavaOne Live Tiobe with jQuery Plugin<br />http://javaclimber.com/livetiobe.html<br />$('.all').quicksand( $('.warmli'), {...
Acid Test<br />http://acid3.acidtests.org/<br />
Reaching Older Browsers<br />Chrome Frame<br />IE6, IE7, IE8 running Chrome<br />Modernizer<br />
JavaFX and the Java Platform <br />Java Language<br />Java EE<br />HotSpot Java VM<br />Lightweight Java VM<br />Java SE<b...
JavaFX 2.0 Platform<br />Immersive Desktop Experience Combining the Best of JavaFX and HTML5<br />Leverage your Java skill...
iPhone UIWebView<br />Formatting Text<br />Indalo is an iPhone App Kevin Helped Write<br />
Titanium<br />Write JavaScript, but Renders Native Application<br />Many “Native” widgets are UIWebView<br />E*Trade API C...
Displaying HTML in JavaFX<br />public class Main extends Application {<br />    public static void main(String[] args) {<b...
Displaying HTML in JavaFX<br />19<br />
Calling Javascript from JavaFX<br />String script = "alert('We've got a message, Houston!');”;<br />eng.executeScript(scri...
Responding to Browser Events<br />Supported Events:<br />Show:<br />Alert, Confirm, Prompt<br />Window:<br />Create, Show,...
HTML5/JavaFX Integration Demo<br />22<br />
JavaFX 2.0 Product Timeline<br />CYQ1 2011<br />CYQ3 2011<br />CYQ2 2011<br />JavaFX 2.0 EA<br />(Early Access)<br />JavaF...
Pro JavaFX 2 Platform Coming Soon!<br />Coming 2nd half of this year<br />All examples rewritten in Java<br />Will cover t...
25<br />Stephen Chin<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />Kevin Nilson<br />kevin_nilson@dev.java.net<...
Upcoming SlideShare
Loading in...5
×

Moving to the Client - JavaFX and HTML5

16,581

Published on

Talk given at JavaOne India about taking the best parts of JavaFX and HTML5 and leveraging them together. This talk contains an integration of Google Maps into a native Java application with interactive controls.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,581
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
139
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Moving to the Client - JavaFX and HTML5

  1. 1. Moving to the Client - JavaFX and HTML5<br />Stephen Chin<br />Chief Agile Methodologist, GXS<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />Kevin Nilson<br />Principle Architect, E*Trade<br />kevin_nilson@dev.java.net<br />tweet: @javaclimber<br />
  2. 2. About the Presenters<br />Stephen Chin<br />Kevin Nilson<br />Java Champion<br />Java Champion<br />Chief Agile Methodologist, GXS<br />Author Web 2.0 Fundamentals<br />Author, Pro JavaFX Platform<br />User Groups Leader<br />Silicon Valley Web JUG<br />Silicon Valley JS Meetup<br />Silicon Valley Google Technology UG<br />
  3. 3.
  4. 4. History of the Web<br />1991 HTML<br />1994 HTML 2<br />1996 CSS 1 + JavaScript<br />1997 HTML 4<br />1998 CSS 2<br />2000 XHTML 1<br />2002Tableless Web Design<br />2005AJAX<br />2009HTML 5<br />
  5. 5. What is HTML5<br />Web Hypertext Application Technology Working Group (WHATWG)<br />HTML5 != HTML + CSS + JavaScript<br />HTML5 = Next Generation Features for Modern Web Development<br />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<br />
  6. 6. HTML5 Rounded Corners<br />http://slides.html5rocks.com/#rounded-corners<br />HTML5<br />No HTML5<br />
  7. 7. HTML5 Canvas 3D (WebGL)<br />http://slides.html5rocks.com/#canvas-3d<br />
  8. 8. Prefixes<br />-webkit-text-fill-color: black;<br />-webkit-column-count: 2;<br />Before the Spec is final<br />Before the Browser implementation is Verified<br />
  9. 9. Cross Browser<br />Browsers behave fairly differently<br />HTML5 Non-Ambiguous Spec<br />JavaScript Frameworks (jQuery, Dojo, YUI) give consistent API<br />
  10. 10. jQuery On The Rise<br />44% of Top 10,000 sites use jQuery (builtwith.com)<br />
  11. 11. JavaOne Live Tiobe with jQuery Plugin<br />http://javaclimber.com/livetiobe.html<br />$('.all').quicksand( $('.warmli'), {<br />duration: 3000,<br />attribute: 'id',<br />easing: 'easeInOutQuad’<br /> });<br />
  12. 12. Acid Test<br />http://acid3.acidtests.org/<br />
  13. 13. Reaching Older Browsers<br />Chrome Frame<br />IE6, IE7, IE8 running Chrome<br />Modernizer<br />
  14. 14. JavaFX and the Java Platform <br />Java Language<br />Java EE<br />HotSpot Java VM<br />Lightweight Java VM<br />Java SE<br />Java ME<br />Java Card<br />Java FX<br />MSA<br />Java TV<br />APIs<br />Copyright 2010 Oracle<br />
  15. 15. JavaFX 2.0 Platform<br />Immersive Desktop Experience Combining the Best of JavaFX and HTML5<br />Leverage your Java skills with modern JavaFX APIs<br />Integrate Java, JavaScript, and HTML5 in the same application<br />New graphics stack takes advantage of hardware acceleration for 2D and 3D applications<br />User your favorite IDE: NetBeans, Eclipse, IntelliJ, etc.<br />
  16. 16. iPhone UIWebView<br />Formatting Text<br />Indalo is an iPhone App Kevin Helped Write<br />
  17. 17. Titanium<br />Write JavaScript, but Renders Native Application<br />Many “Native” widgets are UIWebView<br />E*Trade API Contest App Kevin Wrote<br />
  18. 18. Displaying HTML in JavaFX<br />public class Main extends Application {<br /> public static void main(String[] args) {<br />Launcher.launch(Main.class, args);<br />}<br /> @Override public void start(Stage stage) {<br />WebEngineeng = new WebEngine("http://google.com");<br />WebViewwebView = new WebView(eng);<br /> Scene scene = new Scene(webView);<br />stage.setScene(scene);<br />stage.setTitle("Web Test");<br />stage.setVisible(true);<br />}}<br />18<br />
  19. 19. Displaying HTML in JavaFX<br />19<br />
  20. 20. Calling Javascript from JavaFX<br />String script = "alert('We've got a message, Houston!');”;<br />eng.executeScript(script);<br />20<br />
  21. 21. Responding to Browser Events<br />Supported Events:<br />Show:<br />Alert, Confirm, Prompt<br />Window:<br />Create, Show, Close, Resize<br />Fixed/Resizable Frame<br />Show/Hide:<br />Menubar, Scrollbars, Statusbar, Toolbar<br />Print<br />21<br />
  22. 22. HTML5/JavaFX Integration Demo<br />22<br />
  23. 23. JavaFX 2.0 Product Timeline<br />CYQ1 2011<br />CYQ3 2011<br />CYQ2 2011<br />JavaFX 2.0 EA<br />(Early Access)<br />JavaFX 2.0 Beta<br />JavaFX 2.0 GA<br />(General Availability)<br />Copyright 2010 Oracle<br />JavaFX Beta in Late May!<br />
  24. 24. Pro JavaFX 2 Platform Coming Soon!<br />Coming 2nd half of this year<br />All examples rewritten in Java<br />Will cover the new JavaFX 2.0 APIs<br />India edition will be available<br />24<br />
  25. 25. 25<br />Stephen Chin<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />Kevin Nilson<br />kevin_nilson@dev.java.net<br />tweet: @javaclimber<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×