javafx overview - jugs · > drag-and drop a javafx application from the browser to deploy to the...
TRANSCRIPT
1
1
JavaFX OverviewPeter Doschkinow Software ArchitektSun Microsystems
2
Agenda
• What is and Why JavaFX• Key features• Things you can build with JavaFX• JavaFX platform architecture• JavaFX script• Content of JavaFX 1.1
3
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> cooperation of graphic designer + application developer
4
RIA todayomnipresent but fragmented
5
> 6 Billion Java-Enabled Devices2.5 Billion Java-Enabled Phones3.5 Billion Java Card20 Million Java Set-top Boxes800 Million Java Desktops180 Operators Deploying Java Content6 Million Developers
Java Omnipresence
Java Everywhere
6
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
7
JavaFX VisionJavaFX is THE platform for creating and delivering
Rich Internet Applications (RIA) across all the screens of your life
JavaFX is Powered by Java
8
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.
9
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.
10
Demo
• WORA in action• Running a JavaFX application on the desktop and
on the mobile without changing a single line of code
11
Things you can build with JavaFX
•Cross-Browser Video playback•Interactive and immersive business applications•Mash-ups with REST basedweb services•Applications that run acrossthe browser, desktop, mobileand more!
12
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. •
13
3-D Display Shelf With the PerspectiveTransform•The PerspectiveTransform built into JavaFX can be used to easily create 3-D effects
14
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.
15
JavaFX Platform Architecture
Common Platform
DesktopExtensions
TV Extensions
Applications and Services
Application Framework
DeveloperTools
AuthoringTools
DesktopRuntime
MobileRuntime
TVRuntime
DesignerTools
MobileExtensions
Java Platform: Java SE, JavaME
16
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
17
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> many performance improvements
18
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
• Commitment from carriers: Orange, Sprint
19
JavaFX Mobile Application Architecture
• Application deployed as Midlets• Full access to all FX and device features• Language runtime is common to all platforms
Mobile
CLDC + MIDP + MSA
Java FX Mobile Application
JavaFX Language Runtime
20
Mobile vs. Desktop
• Common profile• Platform specific APIs> Performance> Capabilities
• Mobile specific APIs include e.g.:> SMS send and receive> Embedded camera access> Persistent data storage> Contact list access
Desktop
CommonMobile
21
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
22
JavaFX Workflow
JavaFX Tools
Visual Designer Content developer
Visual Assets
JavaF X Script code
Java FX SourceApplication
Compilation
JavaFX Mobile
Java FX MobileApp Binary
JavaFX TV
Java FX TV App Binary
JavaFX Desktop/ Consumer JRE
Java FX DesktopApp Binary
Packaging
Packaging
Packaging
23
JavaFX Tool ChainMedia AssetsCreated By
AssetsTransformed By
IntegratedInto IDEs
Emulated By(If Required)
AdobeIllustrator
AdobePhotoshop JavaFX
ProductionSuite JavaFX
Compiler
JavaFXPlug-in
for IDEs JavaFXMobile
EmulatorOn2 Flix
Encoders(JavaFX File Format,
VP6 and MP3)
Adobe CS3(Flash and
Flash Video,JavaFX 1.5)
(OpenSource)
3rd PartyRAD Tool
24
JavaFX Deployment OptionsDesktop
• 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
25
• 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> Better developer experience
JavaFX Deployment OptionsMobile
26
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
27
Variables, Constants
• JavaString str = “hello”; // Type name = init_valuefinal double PI = 3.14; // “final” keyword => unmodifiable
• JavaScriptvar str = “hello”; // “var” is a keywordconst PI = 3.14; // “const” is a keyword
• JavaFXvar str = “hello”; // “var” is a keywordvar str : String = “hello”; // optionally specify typedef PI = 3.14; // “def” keyword => unmodifiable
28
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)
29
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
30
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 expressionvar str = if (x mod 2 == 0) then “even” else “odd”
• while expression• break, continue, return expression• try .. catch .. finally, throw expression
31
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 }
32
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);
33
Classes• JavaFXclass 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}”); }}
34
JavaFX Object Creatation
• Java-style creation - Mostly used with Java classesvar a = new ArrayList(20);
• Object Literalsvar p = Person { // initialize each “property” here name: “Sundar”, // similar p.setName(“Sundar”) likes: “JavaFX”};
35
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
specifically).
36
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
37
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
Bind in JavaFX
38
var x = 10;var v = bind 2 * x; // v is 20x = 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 10x = 11; // z is 11 nowz = 34; // x is 34 now – because it is bidirectional•The power of binding really shows when it is used with GUI objects
Reverse Bind in JavaFX
39
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// whenever “offset” (used by 'func') changes
40
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.
41
Sequences
• JavaString[] 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]
42
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” operatorvar len = sizeof seq;
43
Example of JavaFX Applicationimport 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 } ] }}
44
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.
45
JavaFX API Stack
Java2Djava.awt.*
SceneGraphcom.sun.scenario.scenegraph.*com.sun.scenario.animation.*com.sun.scenario.effects.*
JavaFX Script Programming Languagejavafx.scene.*
javafx.scene.effect.*
javafx.animation.*
Java
API
ssc
ript
Swingjavax.swing.*
JavaFX Script programs can call any Java APIs
46
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
47
JavaFX Architecture
Graphics hardware
Java 2D
Effects
Project Scene Graph
JavaFX Script SoftwareModels a JavaFX GUI
48
Scene Graph: Group Group {
transforms: Translate {x:15, y, 15
}content: [
Text {x: 10, y: 50font: Font: {
size: 50}content: “Hello World”
}Circle {
centerX: 100, centerY: 100radius: 40fill: Color.BLACK
}]
}
Group
CircleText
x:15y:15
49
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
50
Animation through Bindingvar 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,] } ]}
51
Media Support
•Native Media codecs per platform•On2 VP6 codec everywhere•MP3 everywhere•Use native encoders or On2 Flix
52
Media APIs
var player = MediaPlayer {media: Media {url: “http://foo.com/vid.fxm” } repeatCount: 2}
var view = MediaView { player: player }
player.play();
53
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
54
JavaFX Download Bundlesjavafx.com
55
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
56
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
57
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
58
JavaFX 1.1 Pluginsfor Adobe Photoshop and Adobe Illustrator
•Use them to export graphic assets from creative designer tools to JavaFX format.
59
JavaFX 1.1 Media Factory
•SVG Converter> Convert SVG graphics into JavaFX format
• Viewer> View graphic assets that were converted to JavaFX format.
60
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
61
JavaFX roadmapJavaFX Desktop
(Winter 2008)
JavaFX Mobile(Spring 2009)
JavaFX TV(Summer 2009)
Desktop Product Line
Mobile Product Line
TV Product Line
Other PlatformsWith Partner platforms/OSs
62
2008-09 Major Milestones
Dec 2008 Feb 2009 May/June 2009
. Launch10 Designer Tool
Platform Franca Marina ,20
Tools Mobile Emulator Designer Tool
Launch MWC’09 JavaOne ‘09 MAX ‘09
2nd Half 2009
Mobile Runtime and Tools
Mobile Announcements
1.0 Launch 2D, Media, Animation
SDKNetBeans Plug-in
Media FactoryMedia Encoder (On2)
RAD Tool
Designer Tool (Preview)
11/10JavaFX.com
63
Future Releases
•More Components•More Speed•More Platforms•More Devices
64
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
65
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
66
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/
