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

Moving to the Client - JavaFX and HTML5

Stephen ChinChief Agile Methodologist, [email protected] tweet: @steveonjava

Kevin NilsonVP of Engineering, [email protected] tweet: @javaclimber

About the PresentersAbout the Presenters

Stephen Chin

Chief Agile Methodologist, GXSAuthor, Pro JavaFX Platform

Java Champion

Kevin Nilson

Silicon Valley Web JUG

Silicon Valley JS Meetup

Silicon Valley Google Technology UG

Author Web 2.0 FundamentalsUser Groups Leader

Java Champion

This is a Participatory Session!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 WebHistory 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 HTML5What 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 CornersHTML5 Rounded Corners

• http://slides.html5rocks.com/#rounded-corners

HTML5 No HTML5

HTML5 Canvas 3D (WebGL)HTML5 Canvas 3D (WebGL)

• http://oos.moxiecode.com/js_webgl/fish/index.html

PrefixesPrefixes

• -webkit-text-fill-color: black;

• -webkit-column-count: 2;

• Before the spec is final

• Before the browser implementation is verified

Cross BrowserCross Browser

• Browsers behave differently

• HTML5 Non-Ambiguous Spec

• JavaScript Frameworks (jQuery, Dojo, YUI) Give Consistent API

Acid TestAcid Test

• http://acid3.acidtests.org/

jQuery On The RisejQuery On The Rise

• 51% of Top 10,000 sites use jQuery (builtwith.com)

jQueryjQuery

http://jsfiddle.net/3urR9/

Reaching Older BrowsersReaching Older Browsers

• Chrome Frame–IE6, IE7, IE8 running Chrome

• Modernizr–Feature Detection rather than User Agent Sniffing

Web on MobileWeb on Mobile

• iPhone UIWebView–Formatting Text

Indalo is an iPhone App Kevin Helped Write

Native Mobile WebNative Mobile Web

• Titanium–Write JavaScript, but Renders

Native Application

–Many “Native” widgets are UIWebView

E*Trade API Contest App Kevin Wrote

JavaFX 2.0 PlatformJavaFX 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 JavaFX and the Java Platform

Images Copyright Oracle

Architecture of JavaFX 2.0Architecture of JavaFX 2.0

Java Virtual MachineJava Virtual Machine

Java2DJava2D Open GLOpen GL D3DD3D

PrismPrism GlassWinTkGlassWinTk

MediaEngineMediaEngine

WebEngineWeb

Engine

JavaFX Public APIJavaFX Public API

Quantum ToolkitQuantum Toolkit

Displaying HTML in JavaFXDisplaying 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 OptionsJVM Language Options

• Imperative Java

• Java Builders

• GroovyFX

• ScalaFX

• Visage

Displaying HTML in JavaFXDisplaying HTML in JavaFX



launch(WebViewTest.class, args);

}


WebView webView = new WebView();


Scene scene = new Scene(webView);

stage.setScene(scene);


stage.show();

}}

12 Lines311 Characters


HTML in JavaFX BuildersHTML in JavaFX Builders



launch(args);

}


WebView webView = WebViewBuilder.create().build();

stage.setScene(SceneBuilder.create().root(webView).build());



stage.show();

}}



HTML in GroovyFXHTML 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/")

}



HTML in ScalaFXHTML in ScalaFX

object WebViewTest extends JFXApp {

stage = new Stage {

title = "Web Test"

scene = new Scene {

WebView {

location = "http://google.com/"

}

}

}

}



HTML in VisageHTML in Visage

Stage {

title: "Web Test"

Scene {

WebView {

location: "http://google.com/"

}

}

}



Calling Javascript from JavaFXCalling Javascript from JavaFX

String script = "alert('We have got a message, Houston!');”;

eng.executeScript(script);

26

Responding to Browser EventsResponding 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

HTML5/JavaFX Integration DemoHTML5/JavaFX Integration Demo

28

Pro JavaFX 2 Platform Coming Soon!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

30

Stephen [email protected]

tweet: @steveonjava

Kevin [email protected]: @javaclimber

Thank You!