Download as PDF, PPTX
![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(); }}](https://image.slidesharecdn.com/movingtotheclient-devoxx-111117032552-phpapp01/75/Moving-to-the-Client-JavaFX-and-HTML5-19-2048.jpg)
![Displaying HTML in JavaFX public class WebViewTest extends Application { public static void main(String[] args) { launch(WebViewTest.class, args); } 12 Lines @Override public void start(Stage stage) { 311 Characters WebView webView = new WebView(); webView.getEngine().load("http://google.com"); Scene scene = new Scene(webView); stage.setScene(scene); stage.setTitle("Web Test"); stage.show(); }}](https://image.slidesharecdn.com/movingtotheclient-devoxx-111117032552-phpapp01/75/Moving-to-the-Client-JavaFX-and-HTML5-21-2048.jpg)
![HTML in JavaFX Builders public class WebViewTest extends Application { public static void main(String[] args) { launch(args); } 11 Lines @Override public void start(Stage stage) { 321 Characters WebView webView = WebViewBuilder.create().build(); stage.setScene(SceneBuilder.create().root(webView).build()); webView.getEngine().load("http://google.com"); stage.setTitle("Web Test"); stage.show(); }}](https://image.slidesharecdn.com/movingtotheclient-devoxx-111117032552-phpapp01/75/Moving-to-the-Client-JavaFX-and-HTML5-22-2048.jpg)
Uploaded byStephen Chin
Moving to the Client - JavaFX and HTML5
Stephen Chin and Kevin Nilson presented on integrating JavaFX and HTML5. They discussed the history of HTML and HTML5 features like offline storage and WebGL. They demonstrated displaying HTML in JavaFX using WebView and responding to browser events. They also showed examples in different JVM languages like GroovyFX and ScalaFX. A Pro JavaFX 2 book was announced to cover the new controls and integration examples.
Moving to the Client - JavaFX and HTML5
- 1. Moving to theClient - 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
- 2. About the Presenters Stephen Chin Kevin Nilson Java Champion Java Champion Chief Agile Methodologist, GXS Author Web 2.0 Fundamentals Author, Pro JavaFX Platform User Groups Leader Silicon Valley Web JUG Silicon Valley JS Meetup Silicon Valley Google Technology UG
- 3. This is aParticipatory 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
- 4. History of theWeb 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
- 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
- 6. HTML5 Rounded Corners • http://slides.html5rocks.com/#rounded-corners HTML5 No HTML5
- 7. HTML5 Canvas 3D(WebGL) • http://oos.moxiecode.com/js_webgl/fish/ index.html
- 8. Prefixes • -webkit-text-fill-color: black; • -webkit-column-count: 2; • Before the spec is final • Before the browser implementation is verified
- 9. Cross Browser • Browsersbehave differently • HTML5 Non-Ambiguous Spec • JavaScript Frameworks (jQuery, Dojo, YUI) Give Consistent API
- 10.
- 11. jQuery On TheRise • 51% of Top 10,000 sites use jQuery (builtwith.com)
- 12.
- 13. Reaching Older Browsers • Chrome Frame – IE6, IE7, IE8 running Chrome • Modernizr – Feature Detection rather than User Agent Sniffing
- 14. Web on Mobile • iPhone UIWebView – Formatting Text Indalo is an iPhone App Kevin Helped Write
- 15. Native Mobile Web • Titanium – Write JavaScript, but Renders Native Application – Many “Native” widgets are UIWebView E*Trade API Contest App Kevin Wrote
- 16. JavaFX 2.0 Platform ImmersiveDesktop 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.
- 17. JavaFX and theJava Platform Java EE Java FX MSA Java TV Java SE Java ME Java Card HotSpot Java VM Lightweight Java VM Java Language Images Copyright Oracle
- 18. Architecture of JavaFX2.0 JavaFX Public API Quantum Toolkit Prism Glass Media Web WinTk Engine Engine Java2D Open GL D3D Java Virtual Machine
- 19. Displaying HTML inJavaFX 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(); }}
- 20. JVM Language Options • Imperative Java • Java Builders • GroovyFX • ScalaFX • Visage
- 21. Displaying HTML inJavaFX public class WebViewTest extends Application { public static void main(String[] args) { launch(WebViewTest.class, args); } 12 Lines @Override public void start(Stage stage) { 311 Characters WebView webView = new WebView(); webView.getEngine().load("http://google.com"); Scene scene = new Scene(webView); stage.setScene(scene); stage.setTitle("Web Test"); stage.show(); }}
- 22. HTML in JavaFXBuilders public class WebViewTest extends Application { public static void main(String[] args) { launch(args); } 11 Lines @Override public void start(Stage stage) { 321 Characters WebView webView = WebViewBuilder.create().build(); stage.setScene(SceneBuilder.create().root(webView).build()); webView.getEngine().load("http://google.com"); stage.setTitle("Web Test"); stage.show(); }}
- 23. HTML in GroovyFX GroovyFX.start{ primaryStage -> def sg = new SceneGraphBuilder() sg.stage( title: 'Web Test', show: true) { 11 Lines scene () { 152 Characters wv = webView() } } wv.engine.load("http://google.com/") }
- 24. HTML in ScalaFX objectWebViewTest extends JFXApp { stage = new Stage { title = "Web Test" scene = new Scene { WebView { 10 Lines 117 Characters location = "http://google.com/" } } } }
- 25. HTML in Visage Stage{ title: "Web Test" Scene { WebView { 8 Lines location: "http://google.com/" } 67 Characters } }
- 26. Calling Javascript fromJavaFX String script = "alert('We have got a message, Houston!');”; eng.executeScript(script); 26
- 27. Responding to BrowserEvents 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
- 28.
- 29. Pro JavaFX 2Platform 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. Thank You! Stephen Chin Kevin Nilson steveonjava@gmail.com kevin.nilson@just.me tweet: @steveonjava tweet: @javaclimber 30