Moving to the Client - JavaFX and HTML5 Stephen Chin Chief Agile Methodologist, GXS [email protected] tweet: @steveonjava Kevin Nilson Principle Architect, E*Trade k [email protected] tweet: @javaclimber
Jan 27, 2015
Moving to the Client - JavaFX and HTML5
Stephen ChinChief Agile Methodologist, [email protected]: @steveonjava
Kevin NilsonPrinciple Architect, E*[email protected]: @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://slides.html5rocks.com/#canvas-3d
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
jQuery On The Rise
> 44% of Top 10,000 sites use jQuery (builtwith.com)
JavaOne Live Tiobe with jQuery Pluginhttp://javaclimber.com/livetiobe.html
$('.all').quicksand( $('.warm li'), { duration: 3000, attribute: 'id', easing: 'easeInOutQuad’ });
Acid Test
> http://acid3.acidtests.org/
Reaching Older Browsers
> Chrome Frame IE6, IE7, IE8 running Chrome
> Modernizer
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 Main extends Application { public static void main(String[] args) { Launcher.launch(Main.class, args); } @Override public void start(Stage stage) { WebEngine eng = new WebEngine("http://google.com"); WebView webView = new WebView(eng); Scene scene = new Scene(webView); stage.setScene(scene); stage.setTitle("Web Test"); stage.setVisible(true);}}
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:> Show:
Alert, Confirm, Prompt> Window:
Create, Show, Close, Resize Fixed/Resizable Frame
> Show/Hide: Menubar, Scrollbars, Statusbar, Toolbar
21
HTML5/JavaFX Integration Demo
22
JavaFX 2.0 Product Timeline
CYQ1 2011
JavaFX 2.0 EA(Early Access)
CYQ2 2011 CYQ3 2011
JavaFX 2.0 Beta JavaFX 2.0 GA(General Availability)
Copyright 2010 Oracle
JavaFX Beta in Late May!
Pro JavaFX 2 Platform Coming Soon!
> Coming 2nd half of this year> All examples rewritten in Java> Will cover the new JavaFX 2.0
APIs> India edition will be available
24