Exploring JavaFX 8 Stephen Chin (@steveonjava) Java Technology Ambassador JavaOne Content Chair ♯jdt2014_A3 1 JavaFX Platform Immersive Application Experience • Cross-platform Animation, Video, Charting • Integrate Java, JavaScript, and HTML5 in the same application • New graphics stack takes advantage of hardware acceleration for 2D and 3D applications • Bidirectional integration with Swing applications using JFXPanel and SwingNode 2 How to Get JavaFX . Step 1: Download Java 8 3 How to Develop JavaFX Use Your Favorite IDE 4 Architecture of JavaFX 8 JavaFX Public API Quantum Toolkit Glass Media Web Prism WinTk Engine Engine Java2D Open GL D3D Java Virtual Machine 5 Package Your Application Applets, Web Start, and Native Packaging Good Better Best 6 New Features in JavaFX 8 7 Controls DatePicker . Allows selection of dates and ranges . Can use custom formats and calendars . Supports Cascading Style Sheets 9 TreeTableView . Combines a TreeView and a TableView . Optional menu for hiding and showing columns . Root can be hidden . Supports multiple selection . Supports CSS 10 New Modena UI Theme 11 12 Build Applications Visually JavaFX Scene Builder 2 13 14 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(); }} 15 Displaying HTML in JavaFX 16 Calling Javascript from JavaFX String script = "alert('We have got a message, Houston!');”; eng.executeScript(script); 17 JavaScript to Java Type Conversion JavaScript Java null null undefined “undefined” number java.lang.Number (Integer or Double) string java.lang.String boolean java.lang.Boolean object netscape.javascript.JSObject 18 Responding to Browser 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 19 HTML5 Features . Canvas and SVG . Media playback . Form controls . History maintenance . Interactive element tags . DOM . Web workers* . Web sockets* . Web fonts* * = new in HTML5 20 The Java Conference Tour app 21 JAVAFX 3D 22 Mesh Geometry (3D Shapes) https://wikis.oracle.com/display/OpenJDK/SphereAndBox.java ■ Predefined shapes ■ Box ■ Cylinder ■ Sphere ■ User-defined shapes ■ Using TriangleMesh / MeshView 23 23 Creating Primitive Shapes and Materials 24 24 Rotating the 3D Shapes Tip: Use lambda expressions as shown here to simplify event handling 25 25 3D Materials and Textures https://wikis.oracle.com/display/OpenJDK/3D+Features ■ PhongMaterial has these properties ■ Ambient color ■ Diffuse color, diffuse map ■ Specular color, specular map ■ Specular power ■ Bump map ■ Self-illumination map 26 26 UV Mapping Textures to Shapes Tip: A texture is a 2D image to be mapped on a 3D surface Source: http://en.wikipedia.org/wiki/File:UVMapping.png 27 27 Placing a Texture on a Sphere 28 28 Placing a Texture on a Sphere 29 29 UV Mapping on a Cube 30 30 Understanding TriangleMesh 8 points 0, 0 1, 0 14 texCoords Image 12 faces Tip: Best practice for texture map dimensions is powers of two 12 faces (e.g. 1024x512) 0, 1 1, 1 31 31 Using TriangleMesh Points Tip: The API for points, texCoords, and faces is currently being modified, primarily to hold this data in different structures. (For example) 32 32 Using TriangleMesh Texture Coords (For example) 33 33 Using TriangleMesh Faces 0, 2, 1 are points[] indices 10, 5, 9 are texCoords[] indices 34 34 Using TriangleMesh Smoothing Groups (and putting all the pieces together of our user-defined shape) These are faces[] indices 35 35 Real-World Example of Mesh Geometry 36 36 3D Lights https://wikis.oracle.com/display/OpenJDK/3D+Features ■ Lights are nodes in the scene graph ■ PointLight ■ AmbientLight ■ Default light provided if no active lights 37 37 Lights, Camera, Action! Tip: The camera is also a node in 38 the scene graph, so it is moveable 38 Have Java With Your Dessert Raspberry Pi = 39 40 http://elinux.org/File:Raspi-Model-AB-Mono-2-699x1024.png Embedded Controls Theme 41 Virtual Keyboard 42 JavaFX on Raspberry Pi Gotchas WebView Media 43 And you can do cool stuff like this… https://bitbucket.org/stephanj/tweetwall 44 NightHacking Tour Stephen Chin tweet: @steveonjava blog: http://steveonjava.com Real Geeks Live Hacking nighthacking.com 45 The preceding is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. 46 .