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

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

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

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. 

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

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

HTML5 Rounded Corners http://slides.html5rocks.com/#rounded-corners HTML5 No HTML5

HTML5 Canvas 3D (WebGL) http://oos.moxiecode.com/js_webgl/fish/index.html

Prefixes -webkit-text-fill-color: black; -webkit-column-count: 2; Before the spec is final Before the browser implementation is verified

Cross Browser Browsers behave differently HTML5 Non-Ambiguous Spec JavaScript Frameworks (jQuery, Dojo, YUI) Give Consistent API

Acid Test http://acid3.acidtests.org/

jQuery On The Rise 51% of Top 10,000 sites use jQuery (builtwith.com)

jQuery http://jsfiddle.net/3urR9/

Reaching Older Browsers Chrome Frame IE6, IE7, IE8 running Chrome Modernizr Feature Detection rather than User Agent Sniffing

Web on Mobile iPhone UIWebView Formatting Text Indalo is an iPhone App Kevin Helped Write

Native Mobile Web Titanium Write JavaScript, but Renders Native Application Many “Native” widgets are UIWebView E*Trade API Contest App Kevin Wrote

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.

JavaFX and the Java Platform Images Copyright Oracle

Architecture of JavaFX 2.0 Java Virtual Machine Java2D Open GL D3D Prism Glass WinTk Media Engine Web Engine JavaFX Public API Quantum Toolkit

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(); }}

JVM Language Options Imperative Java Java Builders GroovyFX ScalaFX Visage

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

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

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

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

HTML in Visage Stage { title: "Web Test" Scene { WebView { location: "http://google.com/" } } } 8 Lines 67 Characters

Calling Javascript from JavaFX String script = "alert('We have got a message, Houston!');”; eng.executeScript(script);

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

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

Stephen Chin [email_address] tweet: @steveonjava Kevin Nilson k [email_address] tweet: @javaclimber Thank You!

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

Recommended

More Related Content

What's hot (20)

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

More from Stephen Chin (20)

Recently uploaded (20)

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

Editor's Notes