JavaFX Overview
Peter Doschkinow Software Architekt Sun Microsystems 1
1 Agenda
• What is and Why JavaFX • Key features • Things you can build with JavaFX • JavaFX platform architecture • JavaFX script • Content of JavaFX 1.1
2 RIA Market Trends
• Browser based applications reach their limits regarding complexity and performance • Many vendors and content providers are looking for independence on browser and search engines > their default settings could be a competitive disadvantage > not willing to pay to contact their customers, direct contact is needed • Client applications are becoming more expressive and visually rich • Client applications are being designed in addition to being programmed
3 > cooperation of graphic designer + application developer RIA today omnipresent but fragmented
4 Java Omnipresence
Java Everywhere
> 6 Billion Java-Enabled Devices 2.5 Billion Java-Enabled Phones 3.5 Billion Java Card 20 Million Java Set-top Boxes 800 Million Java Desktops 180 Operators Deploying Java Content 6 Million Developers
5 RIA Platform Requirements
• accessible for any Internet user > on desktops, mobile phones and new devices • high performance, easy-to-use and accessible for design professionals • reuse of available know-how and IT-infrastructure • free and open development environment
6 JavaFX Vision
JavaFX is THE platform for creating and delivering Rich Internet Applications (RIA) across all the screens of your life
JavaFX is Powered by Java
7 JavaFX Key Features
•One-stop expressive RIA platform for all screens: > Build engaging visual experiences across desktop, browser and mobile with a unified development and deployment model. •Broadest market reach: > Distribute RIAs easily across billions of devices with the power of Java. •Powerful runtime and API: > Leverage the extreme ubiquity, power, performance and security of the Java runtime. 8 Key Features (Continued)
• Designer-developer workflow: > Dramatically shorten your production cycle for design and development. • Break free from the browser: > Drag-and drop a JavaFX application from the browser to deploy to the desktop. • Java technology compatibility: > Preserve your investment by enabling the use of any Java library within a JavaFX application.
9 Demo
• WORA in action • Running a JavaFX application on the desktop and on the mobile without changing a single line of code
10 Things you can build with JavaFX
•Cross-Browser Video playback •Interactive and immersive business applications •Mash-ups with REST based web services •Applications that run across the browser, desktop, mobile and more!
11 Simple Video Player •Incorporating video in your application is as simple as creating an instance of this component, setting a few variables and including a link to your video source. •
12 3-D Display Shelf With the PerspectiveTransform •The PerspectiveTransform built into JavaFX can be used to easily create 3-D effects
13 Flying Saucer •The new out-of-process Java applet plugin in Java SE 6 update 10 enables you to make applets which can run outside of the browser.
14 JavaFX Platform Architecture
Applications and Services
Application Framework Authoring Tools Desktop TV Mobile Developer Runtime Runtime Runtime Tools Mobile Desktop TV Extensions Extensions Extensions Designer Tools Common Platform
Java Platform: Java SE, JavaME
15 JavaFX Components
• JavaFX Script – the language • JavaFX Runtimes: Desktop/Web, Mobile, TV > 1.5 MB jar (700 KB packed), dynamically downloaded, cached, and updated as necessary (i.e. “no-hassle deployment”) • JavaFX applications > In jar file(s), loaded via class loader > Standalone, via Java Web Start, as Applet, or mobile app • JavaFX Tools > FX Script compiler and runtime tools, IDE plug-in, designer tools, and graphics-, media-, web services-, and rich text libraries
16 Java SE 6u10 – Consumer JRE
• Features for better performance & experience > better support for applets (“New Plugin”) > simpler installation (“Deployment Toolkit”) > significantly reduced download size (“Java Kernel” - modularized JRE) > quicker start-up(“Java Quickstarter”) > new windows rendering pipeline (“DirectX v9”) > new Look & Feel (“Nimbus”) > better support for JavaFX > Support für Translucent/Shaped Windows, V-Synced Double Buffering • current version is JRE 1.6.0_12 > 17 many performance improvements JavaFX Mobile
• Available now: NetBeans 6.5 with JavaFX 1.1 Plugin > Includes final version of JavaFX Mobile and emulator • Unified development > Create cross-platform applications: Use JavaFX Common Platform > Leverage mobile-specific features: Use JavaFX Mobile Elements and/or mobile-specific JSR APIs • Commitment from vendors > Sony-Ericsson, LG Electronics
18• Commitment from carriers: Orange, Sprint JavaFX Mobile Application Architecture
Java FX Mobile Application
bile Mo JavaFX Language Runtime
CLDC + MIDP + MSA
• Application deployed as Midlets • Full access to all FX and device features • Language runtime is common to all platforms 19 Mobile vs. Desktop
p n le skto i De ommo ob • Common profile C M • Platform specific APIs > Performance > Capabilities • Mobile specific APIs include e.g.: > SMS send and receive > Embedded camera access > Persistent data storage > Contact list access
20 Why Separation of Roles between Designers and Developers
• Combining graphics directly with code is great for small projects and encapsulated components • However - for large applications (complex graphics, many screens, bigger teams) separation of graphics and code is required • Designers and developers need to work on graphics and code as separate parts in independent iterations • The tooling needs to assure a seamless integration of the both parts at any time
21 JavaFX Workflow
Visual Designer Content developer Java FX Mobile App Binary
JavaFX Mobile
g in g cka Java FX TV Pa
J App Binary
Visual ava ng F gi X Scr ka JavaFX TV A Pac sse
i
t pt s cod n o Pa lati ck e mpi ag in Co g Java FX Source Application Java FX Desktop App Binary
JavaFX Tools JavaFX Desktop / Consumer JRE 22 JavaFX Tool Chain
Media Assets Assets Integrated Emulated By Created By Transformed By Into IDEs (If Required)
Adobe Illustrator JavaFX Plug-in for IDEs Adobe Photoshop JavaFX JavaFX Production Mobile Suite JavaFX Emulator On2 Flix Compiler Encoders (JavaFX File Format, VP6 and MP3)
Adobe CS3 rd (Flash and 3 Party Flash Video, JavaFX 1.5) RAD Tool (Open Source)
23 JavaFX Deployment Options Desktop
• using standard Java deployment technologies > Java Plugin: A tool used for deploying Java applets that run inside a web browser. > Java Web Start: A tool used for deploying stand-alone Java applications on the desktop, using JNLP (Java Network Launching Protocol). • for desktop applications > provisioning through the browser: just drag&drop on the desktop > possible through new Java Plugin architecture since JDK 1.6u10 > JavaFX runtime is a chached JNLP extension 24 JavaFX Deployment Options Mobile • OTA (Over-The-Air) > Possible to prototype on in-the-market phones > Lower performance > Bigger storage footprint (bigger downloads) > Demonstration purposes only • Embedded > Better platform integration possibilities > Ability to leverage all target device capabilities (i.e. hardware acceleration) > Better performance > Smaller storage footprint
25 > Better developer experience JavaFX Script
• Declarative, statically-typed scripting language • Facilitates rapid GUI development • Supports multimedia and visual effects • Runs on the JVM • Deployment options same as Java programs • Full access to Java class libraries • Also for content designers and Media engineers
26 Variables, Constants
• Java String str = “hello”; // Type name = init_value final double PI = 3.14; // “final” keyword => unmodifiable • JavaScript var str = “hello”; // “var” is a keyword const PI = 3.14; // “const” is a keyword • JavaFX var str = “hello”; // “var” is a keyword var str : String = “hello”; // optionally specify type def PI = 3.14; // “def” keyword => unmodifiable
27 Primitive Types
• Java > char, byte, short, int, long, float, double, boolean > void (as return type) • JavaScript > Number, boolean, string, null, undefined • JavaFX > Value types – non-null default value, immutable types > String, Number, Integer, Boolean, Duration > Void (as return type)
28 String Literals
• Java > “This is a String” • JavaScript > 'single-quoted string' > “double-quoted string” • JavaFX > “double quoted like Java” > 'single quoted too works like JavaScript!' > “x is {x}” // string with embedded expressions
29 Expressions
• JavaFX is an expression rich language • Block are expressions // block is evaluated and last expression “33” is assigned to “v” var v = { println(“hello”); 33 } • “if” is expression var str = if (x mod 2 == 0) then “even” else “odd” • while expression • break, continue, return expression • try .. catch .. finally, throw expression
30 Functions • Java No free standing functions, use static methods • JavaScript function Hello() { alert(“hello“); // alert is built-in } • JavaFX function Hello(str) { println(“hello”); // println is built-in }
31 Functions - contd.
• JavaScript – anonymous functions, function values // function valued variable var func = function (x) { alert (“x = “ + x); } func(10); • JavaFX // function valued variable var func = function (x) { println(“x = {x}”); } func(10);
32 Classes
• JavaFX class Person { // instance variables are variables inside classes var name: String; var likes: String; // methods are functions with classes public function hello() { println(“Hello, I'm {name}”); }
33 } JavaFX Object Creatation
• Java-style creation - Mostly used with Java classes var a = new ArrayList(20); • Object Literals var p = Person { // initialize each “property” here name: “Sundar”, // similar p.setName(“Sundar”) likes: “JavaFX” };
34 Globals
• Java > No globals. Closest is static fields and methods. > Caller always qualifies with class name – Math.PI, System.out • JavaScript > Global variables and functions live (and compete) in the same scope. Need to take care to avoid collision of globals from different files. • JavaFX > File level variables and functions can be defined. > But, caller always qualifies with file name (or imports
35 specifically). Bind
• Event listeners or in general observer/observable is implemented in Java as follows: > Observable maintains of observers to notify > Observable calls a specific listener method on observer whenever change occurs > Observer in turn re-computes it's dependent value based on new value notified • GUI programs are full of event listeners • Also, “model” changes are tracked by “view” by observer/observable
36 Bind in JavaFX
var v = 10; def x = bind v * v; // whenever “v” changes, “x” automatically // changes to v * v // In general, def x = bind someExpression; // means when someExpression changes, x // will be updated to match 37 Reverse Bind in JavaFX var x = 10; var v = bind 2 * x; // v is 20 x = 11; // v becomes 2*11 = 22 • There is also reverse “bind” (“bi-directional” bind) var x = 10; var z = bind x with inverse; // z is also 10 x = 11; // z is 11 now z = 34; // x is 34 now – because it is bidirectional •The power of binding really shows when it is used with GUI objects 38 Bind – Bound Functions
• Consider no argument changes – but something else used by function “func” changes. var offset = 2; // function func(a) { return a + offset; } // if we want “var v” to re-compute even when // no argument change but “offset” changes, then bound function func(a) { return a + offset; } var v = bind func(x); // now “v” is re-computed when ever “x” changes or
39 // whenever “offset” (used by 'func') changes Sequences
• In Java, arrays are fixed length. array.length returns length. Arrays can be nested (can have arrays within arrays within arrays and so on) • In JavaScript arrays are dynamic. We can add/remove elements to/from array. array.length returns current length of the array. • In JavaFX, we use sequences. Sequences are dynamic, flat lists. Like JavaScript, sequence length is dynamic. Unlike Java and JavaScript, sequences are flat. There are no nested sequences. 40 Sequences
• Java String[] args = { “hello”, “world”, “is”, “great!” }; • JavaScript var args = [ “hello”, “world”, “is”, “great!” ]; • JavaFX // optionally specify type of sequence like.. var args : String[] = [ “hello”, “world”, “is”, “great!” ]; • Sequence element access syntax is same as Java and JavaScript array element access - array[index]
41 Sequences
• JavaFX range sequence var seq = [1..10]; // sequence containing 1 to 10 var seq1 = [1..<10]; // sequence containing 1 to 9 var seq2 = [0..100 step 5]; // sequence 0, 5, 10.... 100 • Length of the sequence // We use seq.length in Java and JavaScript to get length // of arrays. In JavaFX, we use “sizeof” operator var len = sizeof seq;
42 Example of JavaFX Application
import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.scene.shape.Circle; import javafx.stage.Stage;
Stage { scene: Scene { content: [ Circle { centerX: 50 centerY: 50 radius: 50 fill: Color.RED } ] }
43 } Why Declarative Syntax for Building GUI?
•Because the structure of declared objects in the code reflects the visual structure of the scene graph, and this enables you to understand and maintain the code easily. •The order of elements you declare in the code matches the order in which they appear in the application.
44 JavaFX API Stack
JavaFX Script Programming Language javafx.scene.* javafx.scene.effect.*
script javafx.animation.*
SceneGraph com.sun.scenario.scenegraph.* com.sun.scenario.animation.* com.sun.scenario.effects.*
PIs
A
Java Swing Java2D javax.swing.* java.awt.*
JavaFX Script programs can call any Java APIs 45 What is Scene Graph?
• Scene Graph enables declarative GUI programming • The scene graph is a tree-like data structure which defines a hierarchy of graphical objects in a scene. • Node Types > Node > Group > CustomNode
46 JavaFX Architecture
JavaFX Script Software Models a JavaFX GUI Project Scene Graph
Effects
Java 2D
Graphics hardware
47 Scene Graph: Group
Group { transforms: Translate { Group x:15, y, 15 } content: [ Text { x: 10, y: 50 x:15 font: Font: { y:15 size: 50 } content: “Hello World” } Circle { centerX: 100, centerY: 100 radius: 40 fill: Color.BLACK Text Circle } ] }
48 Animation Support in JavaFX
• Built in the language syntax • Native support for time > Duration class • Transitions based > “Precanned” animations > Rotate, Translate, Scale, Path, Fade • KeyFrame based > More flexible but more code > discrete or interpolated
49 Animation through Binding
var opa = 0.0; var street1:ImageView = ImageView { image: Image { url: "{__DIR__}street1.jpg" } opacity: bind opa onMouseClicked: function( e: MouseEvent ):Void { timeline.play(); } } var timeline:Timeline = Timeline { keyFrames: [ KeyFrame { time: 0s values: [ opa => 0.0,] }, KeyFrame { time: 1s values: [ opa => 1.0 tween Interpolator.LINEAR,] } ] }
50 Media Support
•Native Media codecs per platform •On2 VP6 codec everywhere •MP3 everywhere •Use native encoders or On2 Flix
51 Media APIs
var player = MediaPlayer { media: Media {url: “http://foo.com/vid.fxm” } repeatCount: 2 }
var view = MediaView { player: player }
player.play();
52 JavaFX Current Status
• JavaFX 1.0 Launch Dec 2008 > Desktop runtime, Mobile Emulator Beta(for Windows) > javafx.com, a new Sun web site > 100 000 000 downloads reached in February •JavaFX 1.1 Launch Feb 2009 > Desktop runtime new features and improvements > JavaFX Mobile Emulator 1.0 > Commitment from mobile vendors: LG Electronics, Sony-Ericsson > Commitment from mobil carriers: Orange, Sprint
53 JavaFX Download Bundles javafx.com
54 Development Bundle
• NetBeans IDE 6.5 for JavaFX 1.1 • JavaFX 1.1 Plugin for NetBeans > Use it if you already have NetBeans 6.5
55 Netbeans & JavaFX Jumpstart
• Get JavaFX plugin if not bundled • Open a new Netbeans project of category Samples/JavaFX and choose one • Run the sample, study and modify the code at your will • Download and try the examples at javafx.com • Try the different execution models 56 Designer Bundle JavaFX 1.1 Production Suite
• enables designers to exchange visual assets with developers. > JavaFX 1.1 Plugin for Adobe Photoshop and JavaFX 1.1 Plugin for Adobe Illustrator > JavaFX 1.1 Media Factory >SVG Converter >Viewer
57 JavaFX 1.1 Plugins for Adobe Photoshop and Adobe Illustrator
•Use them to export graphic assets from creative designer tools to JavaFX format. 58 JavaFX 1.1 Media Factory
•SVG Converter > Convert SVG graphics into JavaFX format • Viewer > View graphic assets that were converted to JavaFX format. 59 Stand-alone SDK
• If you prefer using other tools, or developing directly via the command line, you can download the stand-alone SDK. • JavaFX 1.0 SDK > JavaFX 1.1 Desktop Runtime > JavaFX 1.1 Mobile Emulator (for Windows) > JavaFX 1.1 APIs > JavaFX 1.1 Compiler > JavaFX API documentation > Samples
60 JavaFX roadmap Desktop Product Line JavaFX Desktop (Winter 2008)
Mobile Product Line JavaFX Mobile (Spring 2009) JavaFX TV TV Product Line (Summer 2009)
Other Platforms With Partner platforms/OSs
61 2008-09 Major Milestones
Dec 2008 Feb 2009 May/June 2009 2nd Half 2009
Mobile Runtime Mobile 1.0 Launch Designer Tool and Tools Announcements 1.0 Launch 2D, Media, Platform Franca Marina 2,0 Animation SDK NetBeans Plug-in Designer Tool Tools Media Factory Mobile Emulator Designer Tool (Preview) Media Encoder (On2) RAD Tool 11/10 Launch MWC’09 JavaOne ‘09 MAX ‘09 JavaFX.com
62 Future Releases
•More Components •More Speed •More Platforms •More Devices
63 Links • javafx.com > New L&F > Downloads > FAQ, Tutorials, Samples & Demo Gallery, Screencasts > New content planned • openjfx.dev.java.net > JavaFX compiler project • www.javapassion.com/javafx/ > Free JavaFX online programming course > Great JavaFX resource collection • jfxstudio.wordpress.com • jfx.wikia.com 64 Questions asked by JavaFX Users
• Annoying pop-ups asking for applet execution permission > on Mac they appear even if the applet is not signed – Sun is working with Apple to resolve this > the security model is being reviewed to make the user experience seamless • graphics animation is not smooth enough > scenegraph and graphics animation implementation will be improved in the next JavaFX releases
65 Questions asked by JavaFX Users
• Is Skinning of the Swing Dialog in PlayGrounds-Demo possible > yes, for Nimbus L&F, which is default for JavaFX > http://www.jasperpotts.com/blog/2008/08/skinning-a-slider-with-nimbus/ > in the next Release(Marina) default L&F will be the native one > more JavaFX UI controls will be included in next release • More complex, real-life examples? > we are working on this > JavaFX petstore using RESTful web services > JavaFX code contest > http://in.sun.com/specials/codejavafx/ 66 JavaFX Overview
Peter Doschkinow [email protected]
67
67