Your SlideShare is downloading. ×
  • Like
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 3,087 views
Published

JavaFX and HTML5 Presentation given at Devoxx 2011.

JavaFX and HTML5 Presentation given at Devoxx 2011.

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,087
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
33
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • [twitter]HTML5 and JavaFX together? - Find out in Room 7[/twitter]
  • [twitter]Presentation tweets powered by #MacPowerTweet (http://bit.ly/vlGDf5)[/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: http://bit.ly/eVJuNR[/twitter]
  • [twitter]3D WebGL Fish Demo: http://bit.ly/nLYjVf [/twitter]
  • [twitter]HTML5 is a Non-Ambiguous Spec[/twitter]
  • [twitter]Is your brower HTML5 ready? http://acid3.acidtests.org/[/twitter]
  • [twitter]51% of Top 10,000 sites use jQuery[/twitter]
  • [twitter]Chrome Frame enables HTML5 features in IE6: http://bit.ly/47jP6U[/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: http://groovy.codehaus.org/GroovyFX[/twitter]
  • [twitter]Web Test using ScalaFX - 10 lines, 117 characters: http://code.google.com/p/scalafx/[/twitter]
  • [twitter]Web Test using Visage - 8 lines, 67 characters http://visage-lang.org/[/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: http://www.apress.com/9781430268727 [/twitter]
  • [twitter]Thank you for following Moving to the Client - JavaFX and HTML5[/twitter]

Transcript

  • 1. Moving to the Client - JavaFX and HTML5 Stephen Chin Chief Agile Methodologist, GXS steveonjava@gmail.com tweet: @steveonjava Kevin Nilson VP of Engineering, Just.Me kevin.nilson@just.me tweet: @javaclimber
  • 2. About the Presenters
    • Stephen Chin
    • Kevin Nilson
    • Silicon Valley Web JUG
    • Silicon Valley JS Meetup
    • Silicon Valley Google Technology UG
    Chief Agile Methodologist, GXS Author, Pro JavaFX Platform Java Champion Author Web 2.0 Fundamentals User Groups Leader Java Champion
  • 3. This is a Participatory Session!
    • Every now and then we will say something interesting… and it will go out in a tweet.
    • Follow @steveonjava to watch the tweets and retweet the ones you like to your followers
    • Feel free to create your own tweets using the hash tags "#HTML5 #JavaFX #Devoxx"
    • We have some goodies for folks who play. 
  • 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. 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. HTML5 Rounded Corners
    • http://slides.html5rocks.com/#rounded-corners
    HTML5 No HTML5
  • 7. HTML5 Canvas 3D (WebGL)
    • http://oos.moxiecode.com/js_webgl/fish/index.html
  • 8. Prefixes
    • -webkit-text-fill-color: black;
    • -webkit-column-count: 2;
    • Before the spec is final
    • Before the browser implementation is verified
  • 9. Cross Browser
    • Browsers behave differently
    • HTML5 Non-Ambiguous Spec
    • JavaScript Frameworks (jQuery, Dojo, YUI) Give Consistent API
  • 10. Acid Test
    • http://acid3.acidtests.org/
  • 11. jQuery On The Rise
    • 51% of Top 10,000 sites use jQuery (builtwith.com)
  • 12. jQuery http://jsfiddle.net/3urR9/
  • 13. Reaching Older Browsers
    • Chrome Frame
      • IE6, IE7, IE8 running Chrome
    • Modernizr
      • Feature Detection rather than User Agent Sniffing
  • 14. Web on Mobile
    • iPhone UIWebView
      • Formatting Text
    • Indalo is an iPhone App Kevin Helped Write
  • 15. Native Mobile Web
    • Titanium
      • Write JavaScript, but Renders Native Application
      • Many “Native” widgets are UIWebView
    • E*Trade API Contest App Kevin Wrote
  • 16. JavaFX 2.0 Platform
    • Immersive Desktop Experience Combining the Best of JavaFX and HTML5
    • 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. JavaFX and the Java Platform Images Copyright Oracle
  • 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. Displaying HTML in JavaFX
    • public 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();
    • }}
  • 20. JVM Language Options
    • Imperative Java
    • Java Builders
    • GroovyFX
    • ScalaFX
    • Visage
  • 21. Displaying HTML in JavaFX
    • public 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();
    • }}
    12 Lines 311 Characters
  • 22. HTML in JavaFX Builders
    • public class WebViewTest extends Application {
    • public static void main(String[] args) {
    • launch(args);
    • }
    • @Override public void start(Stage stage) {
    • WebView webView = WebViewBuilder.create().build();
    • stage.setScene(SceneBuilder.create().root(webView).build());
    • webView.getEngine().load("http://google.com");
    • stage.setTitle("Web Test");
    • stage.show();
    • }}
    11 Lines 321 Characters
  • 23. HTML in GroovyFX
    • GroovyFX.start { primaryStage ->
    • def sg = new SceneGraphBuilder()
    • sg.stage(
    • title: 'Web Test',
    • show: true) {
    • scene () {
    • wv = webView()
    • }
    • }
    • wv.engine.load("http://google.com/")
    • }
    11 Lines 152 Characters
  • 24. HTML in ScalaFX
    • object WebViewTest extends JFXApp {
    • stage = new Stage {
    • title = "Web Test"
    • scene = new Scene {
    • WebView {
    • location = "http://google.com/"
    • }
    • }
    • }
    • }
    10 Lines 117 Characters
  • 25. HTML in Visage
    • Stage {
    • title: "Web Test"
    • Scene {
    • WebView {
    • location: "http://google.com/"
    • }
    • }
    • }
    8 Lines 67 Characters
  • 26. Calling Javascript from JavaFX
    • String script = "alert('We have got a message, Houston!');”;
    • eng.executeScript(script);
  • 27. Responding to Browser Events
    • Supported 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
  • 28. HTML5/JavaFX Integration Demo
  • 29. Pro JavaFX 2 Platform Coming Soon!
    • Coming 1 st Quarter 2012
    • All examples rewritten in Java
    • Covers new controls including:
      • WebPane
      • TableView
      • TreeView
      • Etc.
    • Content on ScalaFX/GroovyFX/Visage
  • 30. Stephen Chin [email_address] tweet: @steveonjava Kevin Nilson k [email_address] tweet: @javaclimber Thank You!