Moving to the Client - JavaFX and HTML5

17,077
-1

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
17,077
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
143
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.

×