Moving to the Client - JavaFX and HTML5 (PowerPoint Version)


Published on

JavaFX and HTML5 Presentation given at Devoxx 2011.

Published in: Technology, Design
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • [twitter]HTML5 and JavaFX together? - Find out in Room 7[/twitter]
  • [twitter]Presentation tweets powered by #MacPowerTweet ([/twitter]
  • [twitter]Follow the HTML5/JavaFX Dev Talk here: XXX[/twitter]
  • [twitter]HTML is not a teenager anymore… 20+ years[/twitter]
  • [twitter]HTML5 != HTML + CSS + JavaScript[/twitter]
  • [twitter]Rounded corners in HTML5:[/twitter]
  • [twitter]3D WebGL Fish Demo: [/twitter]
  • [twitter]HTML5 is a Non-Ambiguous Spec[/twitter]
  • [twitter]Is your brower HTML5 ready?[/twitter]
  • [twitter]51% of Top 10,000 sites use jQuery[/twitter]
  • [twitter]Chrome Frame enables HTML5 features in IE6:[/twitter]
  • [twitter]JavaFX combines the Best of Java and HTML5[/twitter]
  • [twitter]WebView let's you embed HTML5 in JavaFX and Swing Apps[/twitter]
  • [twitter]Web Test using Java - 12 lines, 311 characters[/twitter]
  • [twitter]Web Test using Java Builders - 11 lines, 321 characters[/twitter]
  • [twitter]Web Test using GroovyFX - 11 lines, 152 characters:[/twitter]
  • [twitter]Web Test using ScalaFX - 10 lines, 117 characters:[/twitter]
  • [twitter]Web Test using Visage - 8 lines, 67 characters[/twitter]
  • [twitter]You can even call Javascript methods from JavaFX[/twitter]
  • [twitter]No Map component? Embed Google Maps in your JavaFX app![/twitter]
  • [twitter]Pro JavaFX 2 Coming in Q1 2012: [/twitter]
  • [twitter]Thank you for following Moving to the Client - JavaFX and HTML5[/twitter]
  • Moving to the Client - JavaFX and HTML5 (PowerPoint Version)

    1. 1. Moving to the Client - JavaFX and HTML5 Stephen Chin Chief Agile Methodologist, GXS tweet: @steveonjava Kevin Nilson VP of Engineering, Just.Me tweet: @javaclimber
    2. 2. About the Presenters <ul><li>Stephen Chin </li></ul><ul><li>Kevin Nilson </li></ul><ul><li>Silicon Valley Web JUG </li></ul><ul><li>Silicon Valley JS Meetup </li></ul><ul><li>Silicon Valley Google Technology UG </li></ul>Chief Agile Methodologist, GXS Author, Pro JavaFX Platform Java Champion Author Web 2.0 Fundamentals User Groups Leader Java Champion
    3. 3. This is a Participatory Session! <ul><li>Every now and then we will say something interesting… and it will go out in a tweet. </li></ul><ul><li>Follow @steveonjava to watch the tweets and retweet the ones you like to your followers </li></ul><ul><li>Feel free to create your own tweets using the hash tags &quot;#HTML5 #JavaFX #Devoxx&quot; </li></ul><ul><li>We have some goodies for folks who play.  </li></ul>
    4. 4. History of the Web <ul><li>1991 HTML </li></ul><ul><li>1994 HTML 2 </li></ul><ul><li>1996 CSS 1 + JavaScript </li></ul><ul><li>1997 HTML 4 </li></ul><ul><li>1998 CSS 2 </li></ul><ul><li>2000 XHTML 1 </li></ul><ul><li>2002 Tableless Web Design </li></ul><ul><li>2005 AJAX </li></ul><ul><li>2009 HTML 5 </li></ul>
    5. 5. What is HTML5 <ul><li>Web Hypertext Application Technology Working Group ( WHATWG ) </li></ul><ul><li>HTML5 != HTML + CSS + JavaScript </li></ul><ul><li>HTML5 = Next Generation Features for Modern Web Development </li></ul><ul><li>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 </li></ul>
    6. 6. HTML5 Rounded Corners <ul><li> </li></ul>HTML5 No HTML5
    7. 7. HTML5 Canvas 3D (WebGL) <ul><li> </li></ul>
    8. 8. Prefixes <ul><li>-webkit-text-fill-color: black; </li></ul><ul><li>-webkit-column-count: 2; </li></ul><ul><li>Before the spec is final </li></ul><ul><li>Before the browser implementation is verified </li></ul>
    9. 9. Cross Browser <ul><li>Browsers behave differently </li></ul><ul><li>HTML5 Non-Ambiguous Spec </li></ul><ul><li>JavaScript Frameworks (jQuery, Dojo, YUI) Give Consistent API </li></ul>
    10. 10. Acid Test <ul><li> </li></ul>
    11. 11. jQuery On The Rise <ul><li>51% of Top 10,000 sites use jQuery ( </li></ul>
    12. 12. jQuery
    13. 13. Reaching Older Browsers <ul><li>Chrome Frame </li></ul><ul><ul><li>IE6, IE7, IE8 running Chrome </li></ul></ul><ul><li>Modernizr </li></ul><ul><ul><li>Feature Detection rather than User Agent Sniffing </li></ul></ul>
    14. 14. Web on Mobile <ul><li>iPhone UIWebView </li></ul><ul><ul><li>Formatting Text </li></ul></ul><ul><li>Indalo is an iPhone App Kevin Helped Write </li></ul>
    15. 15. Native Mobile Web <ul><li>Titanium </li></ul><ul><ul><li>Write JavaScript, but Renders Native Application </li></ul></ul><ul><ul><li>Many “Native” widgets are UIWebView </li></ul></ul><ul><li>E*Trade API Contest App Kevin Wrote </li></ul>
    16. 16. JavaFX 2.0 Platform <ul><li>Immersive Desktop Experience Combining the Best of JavaFX and HTML5 </li></ul><ul><li>Leverage your Java skills with modern JavaFX APIs </li></ul><ul><li>Integrate Java, JavaScript, and HTML5 in the same application </li></ul><ul><li>New graphics stack takes advantage of hardware acceleration for 2D and 3D applications </li></ul><ul><li>User your favorite IDE: NetBeans, Eclipse, IntelliJ, etc. </li></ul>
    17. 17. JavaFX and the Java Platform Images Copyright Oracle
    18. 18. Architecture of JavaFX 2.0 Java Virtual Machine Java2D Open GL D3D Prism Glass WinTk Media Engine Web Engine JavaFX Public API Quantum Toolkit
    19. 19. Displaying HTML in JavaFX <ul><li>public class WebViewTest extends Application { </li></ul><ul><li>public static void main(String[] args) { </li></ul><ul><li>launch(WebViewTest.class, args); </li></ul><ul><li>} </li></ul><ul><li>@Override public void start(Stage stage) { </li></ul><ul><li>WebView webView = new WebView(); </li></ul><ul><li>webView.getEngine().load(&quot;;); </li></ul><ul><li>Scene scene = new Scene(webView); </li></ul><ul><li>stage.setScene(scene); </li></ul><ul><li>stage.setTitle(&quot;Web Test&quot;); </li></ul><ul><li>; </li></ul><ul><li>}} </li></ul>
    20. 20. JVM Language Options <ul><li>Imperative Java </li></ul><ul><li>Java Builders </li></ul><ul><li>GroovyFX </li></ul><ul><li>ScalaFX </li></ul><ul><li>Visage </li></ul>
    21. 21. Displaying HTML in JavaFX <ul><li>public class WebViewTest extends Application { </li></ul><ul><li>public static void main(String[] args) { </li></ul><ul><li>launch(WebViewTest.class, args); </li></ul><ul><li>} </li></ul><ul><li>@Override public void start(Stage stage) { </li></ul><ul><li>WebView webView = new WebView(); </li></ul><ul><li>webView.getEngine().load(&quot;;); </li></ul><ul><li>Scene scene = new Scene(webView); </li></ul><ul><li>stage.setScene(scene); </li></ul><ul><li>stage.setTitle(&quot;Web Test&quot;); </li></ul><ul><li>; </li></ul><ul><li>}} </li></ul>12 Lines 311 Characters
    22. 22. HTML in JavaFX Builders <ul><li>public class WebViewTest extends Application { </li></ul><ul><li>public static void main(String[] args) { </li></ul><ul><li>launch(args); </li></ul><ul><li>} </li></ul><ul><li>@Override public void start(Stage stage) { </li></ul><ul><li>WebView webView = WebViewBuilder.create().build(); </li></ul><ul><li>stage.setScene(SceneBuilder.create().root(webView).build()); </li></ul><ul><li>webView.getEngine().load(&quot;;); </li></ul><ul><li>stage.setTitle(&quot;Web Test&quot;); </li></ul><ul><li>; </li></ul><ul><li>}} </li></ul>11 Lines 321 Characters
    23. 23. HTML in GroovyFX <ul><li>GroovyFX.start { primaryStage -> </li></ul><ul><li>def sg = new SceneGraphBuilder() </li></ul><ul><li>sg.stage( </li></ul><ul><li>title: 'Web Test', </li></ul><ul><li>show: true) { </li></ul><ul><li>scene () { </li></ul><ul><li>wv = webView() </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>wv.engine.load(&quot;;) </li></ul><ul><li>} </li></ul>11 Lines 152 Characters
    24. 24. HTML in ScalaFX <ul><li>object WebViewTest extends JFXApp { </li></ul><ul><li>stage = new Stage { </li></ul><ul><li>title = &quot;Web Test&quot; </li></ul><ul><li>scene = new Scene { </li></ul><ul><li>WebView { </li></ul><ul><li>location = &quot;; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>10 Lines 117 Characters
    25. 25. HTML in Visage <ul><li>Stage { </li></ul><ul><li>title: &quot;Web Test&quot; </li></ul><ul><li>Scene { </li></ul><ul><li>WebView { </li></ul><ul><li>location: &quot;; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>8 Lines 67 Characters
    26. 26. Calling Javascript from JavaFX <ul><li>String script = &quot;alert('We have got a message, Houston!');”; </li></ul><ul><li>eng.executeScript(script); </li></ul>
    27. 27. Responding to Browser Events <ul><li>Supported Events: </li></ul><ul><li>Alert/Confirm/Prompt: </li></ul><ul><ul><li>Respond to JavaScript user interaction functions </li></ul></ul><ul><li>Resize: </li></ul><ul><ul><li>Web page moves or resizes the window object </li></ul></ul><ul><li>Status </li></ul><ul><ul><li>Web page changes the status text </li></ul></ul><ul><li>Visibility </li></ul><ul><ul><li>Hide or show the window object </li></ul></ul><ul><li>Popup </li></ul><ul><ul><li>Spawn a second web view/engine </li></ul></ul>
    28. 28. HTML5/JavaFX Integration Demo
    29. 29. Pro JavaFX 2 Platform Coming Soon! <ul><li>Coming 1 st Quarter 2012 </li></ul><ul><li>All examples rewritten in Java </li></ul><ul><li>Covers new controls including: </li></ul><ul><ul><li>WebPane </li></ul></ul><ul><ul><li>TableView </li></ul></ul><ul><ul><li>TreeView </li></ul></ul><ul><ul><li>Etc. </li></ul></ul><ul><li>Content on ScalaFX/GroovyFX/Visage </li></ul>
    30. 30. Stephen Chin [email_address] tweet: @steveonjava Kevin Nilson k [email_address] tweet: @javaclimber Thank You!