0
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://oos.moxiecode.com/js_webgl/fish/index.html<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...
Acid Test<br />http://acid3.acidtests.org/<br />
jQuery On The Rise<br />49.58% of Top 10,000 sites use jQuery (builtwith.com)<br />
jQuery<br />12<br />http://jsfiddle.net/3urR9/<br />
Reaching Older Browsers<br />Chrome Frame<br />IE6, IE7, IE8 running Chrome<br />Modernizer<br />Feature detection rather ...
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 WebViewTest extends Application {<br />    public static void main(String[] ar...
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 />Alert/Confirm/Prompt:<br />Respond to JavaScript user interaction...
HTML5/JavaFX Integration Demo<br />22<br />
Pro JavaFX 2 Platform Coming Soon!<br />Coming 4th quarter this year<br />All examples rewritten in Java<br />Covers new c...
24<br />Stephen Chin<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />Kevin Nilson<br />kevin.nilson@just.me<br />...
Upcoming SlideShare
Loading in...5
×

Moving To The Client - JavaFX and HTML5

3,061

Published on

Presentation on Jav

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

No Downloads
Views
Total Views
3,061
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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 />VP of Engineering, Just.Me<br />kevin.nilson@just.me<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://oos.moxiecode.com/js_webgl/fish/index.html<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. Acid Test<br />http://acid3.acidtests.org/<br />
  11. 11. jQuery On The Rise<br />49.58% of Top 10,000 sites use jQuery (builtwith.com)<br />
  12. 12. jQuery<br />12<br />http://jsfiddle.net/3urR9/<br />
  13. 13. Reaching Older Browsers<br />Chrome Frame<br />IE6, IE7, IE8 running Chrome<br />Modernizer<br />Feature detection rather than User Agent Sniffing<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 WebViewTest extends Application {<br /> public static void main(String[] args) {<br />launch(WebViewTest.class, args);<br />}<br /> @Override public void start(Stage stage) {<br />WebViewwebView = new WebView();<br />webView.getEngine().load("http://google.com");<br />Scene scene = new Scene(webView);<br />stage.setScene(scene);<br />stage.setTitle("Web Test");<br />stage.show();<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 />Alert/Confirm/Prompt:<br />Respond to JavaScript user interaction functions<br />Resize:<br />Web page moves or resizes the window object<br />Status<br />Web page changes the status text<br />Visibility<br />Hide or show the window object<br />Popup<br />Spawn a second web view/engine<br />21<br />
  22. 22. HTML5/JavaFX Integration Demo<br />22<br />
  23. 23. Pro JavaFX 2 Platform Coming Soon!<br />Coming 4th quarter this year<br />All examples rewritten in Java<br />Covers new controls including:<br />WebPane<br />TableView<br />TreeView<br />Etc.<br />Content on ScalaFX/GroovyFX/Visage<br />big announcement - come to my Wednesday session<br />23<br />
  24. 24. 24<br />Stephen Chin<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />Kevin Nilson<br />kevin.nilson@just.me<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.

×