Moving to the Client - JavaFX and HTML5

Stephen ChinChief Agile Methodologist, GXSsteveonjava@gmail.comtweet: @steveonjava

Kevin NilsonVP of Engineering, Just.Mekevin.nilson@just.metweet: @javaclimber

About the Presenters

Stephen Chin

Chief Agile Methodologist, GXSAuthor, Pro JavaFX Platform

Java Champion

Kevin Nilson

Silicon Valley Web JUGSilicon Valley JS MeetupSilicon Valley Google Technology UG

Author Web 2.0 FundamentalsUser Groups Leader

Java Champion

History of the Web

1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless Web Design2005 AJAX2009 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

HTML5No 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 fairly differently

> HTML5 Non-Ambiguous Spec

> JavaScript Frameworks (jQuery, Dojo, YUI) give consistent API

Acid Test

> http://acid3.acidtests.org/

jQuery On The Rise> 49.58% of Top 10,000 sites use jQuery

(builtwith.com)

jQuery

12

http://jsfiddle.net/3urR9/

Reaching Older Browsers

> Chrome Frame IE6, IE7, IE8 running Chrome

> Modernizer Feature detection rather than User Agent Sniffing

JavaFX and the Java Platform

Java Language

Java EE

HotSpot Java VM Lightweight Java VM

Java SE Java ME Java Card

APIsJava FX

Copyright 2010 Oracle

MSA Java TV

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.

> iPhone UIWebView Formatting Text

Indalo is an iPhone App Kevin Helped Write

> Titanium Write JavaScript, but

Renders Native Application

Many “Native” widgets are UIWebView

E*Trade API Contest App Kevin Wrote

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

18

Displaying HTML in JavaFX

19

Calling Javascript from JavaFX

String script = "alert('We've got a message, Houston!');”;eng.executeScript(script);

20

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/engine21

HTML5/JavaFX Integration Demo

22

Pro JavaFX 2 Platform Coming Soon!

> Coming 4th quarter this year> All examples rewritten in Java> Covers new controls including:

WebPane TableView TreeView Etc.

> Content on ScalaFX/GroovyFX/Visage big announcement - come to my

Wednesday session23

24

Stephen Chinsteveonjava@gmail.comtweet: @steveonjava

Kevin Nilsonkevin.nilson@just.metweet: @javaclimber