moving to the client - javafx and html5
DESCRIPTION
TRANSCRIPT
![Page 1: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/1.jpg)
Moving to the Client - JavaFX and HTML5 Stephen Chin Chief Agile Methodologist, GXS [email protected] tweet: @steveonjava
Kevin Nilson VP of Engineering, Just.Me [email protected] tweet: @javaclimber
![Page 2: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/2.jpg)
About the Presenters
Stephen Chin Chief Agile Methodologist, GXS
Author, Pro JavaFX Platform
Java Champion
Kevin Nilson
Silicon Valley Web JUG Silicon Valley JS Meetup Silicon Valley Google Technology UG
Author Web 2.0 Fundamentals
User Groups Leader
Java Champion
![Page 3: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/3.jpg)
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. J
![Page 4: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/4.jpg)
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
![Page 5: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/5.jpg)
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
![Page 6: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/6.jpg)
HTML5 Rounded Corners
• http://slides.html5rocks.com/#rounded-corners
HTML5 No HTML5
![Page 7: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/7.jpg)
HTML5 Canvas 3D (WebGL) • http://oos.moxiecode.com/js_webgl/fish/
index.html
![Page 8: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/8.jpg)
Prefixes • -webkit-text-fill-color: black; • -webkit-column-count: 2;
• Before the spec is final
• Before the browser implementation is verified
![Page 9: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/9.jpg)
Cross Browser • Browsers behave differently
• HTML5 Non-Ambiguous Spec
• JavaScript Frameworks (jQuery, Dojo, YUI) Give Consistent API
![Page 10: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/10.jpg)
Acid Test • http://acid3.acidtests.org/
![Page 11: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/11.jpg)
jQuery On The Rise • 51% of Top 10,000 sites use jQuery
(builtwith.com)
![Page 12: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/12.jpg)
jQuery
http://jsfiddle.net/3urR9/
![Page 13: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/13.jpg)
Reaching Older Browsers • Chrome Frame
– IE6, IE7, IE8 running Chrome
• Modernizr – Feature Detection rather than User Agent Sniffing
![Page 14: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/14.jpg)
Web on Mobile • iPhone UIWebView
– Formatting Text
Indalo is an iPhone App Kevin Helped Write
![Page 15: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/15.jpg)
Native Mobile Web • Titanium
– Write JavaScript, but Renders Native Application
– Many “Native” widgets are UIWebView
E*Trade API Contest App Kevin Wrote
![Page 16: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/16.jpg)
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.
![Page 17: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/17.jpg)
JavaFX and the Java Platform
Java Language
Java EE
HotSpot Java VM Lightweight Java VM
Java SE Java ME Java Card
Java FX
Images Copyright Oracle
MSA Java TV
![Page 18: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/18.jpg)
Architecture of JavaFX 2.0
Java Virtual Machine
Java2D Open GL D3D
Prism Glass WinTk
Media Engine
Web Engine
JavaFX Public API
Quantum Toolkit
![Page 19: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/19.jpg)
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(); }}
![Page 20: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/20.jpg)
JVM Language Options
• Imperative Java • Java Builders • GroovyFX • ScalaFX • Visage
![Page 21: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/21.jpg)
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
![Page 22: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/22.jpg)
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
![Page 23: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/23.jpg)
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
![Page 24: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/24.jpg)
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
![Page 25: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/25.jpg)
HTML in Visage Stage { title: "Web Test" Scene { WebView { location: "http://google.com/" } } }
8 Lines 67 Characters
![Page 26: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/26.jpg)
Calling Javascript from JavaFX String script = "alert('We have got a message, Houston!');”; eng.executeScript(script);
26
![Page 27: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/27.jpg)
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 27
![Page 28: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/28.jpg)
HTML5/JavaFX Integration Demo
28
![Page 29: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/29.jpg)
Pro JavaFX 2 Platform Coming Soon!
• Coming 1st Quarter 2012 • All examples rewritten in Java • Covers new controls including:
– WebPane – TableView – TreeView – Etc.
• Content on ScalaFX/GroovyFX/Visage
29
![Page 30: Moving to the Client - JavaFX and HTML5](https://reader034.vdocuments.us/reader034/viewer/2022042814/54c676ca4a7959b0298b45a4/html5/thumbnails/30.jpg)
30
Stephen Chin [email protected]
tweet: @steveonjava
Kevin Nilson [email protected] tweet: @javaclimber
Thank You!