JavaFX Overview. Peter Doschkinow Software Architekt Sun Microsystems

Transcription

1 JavaFX Overview Peter Doschkinow Software Architekt Sun Microsystems 1 1

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 2

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 3 > cooperation of graphic designer + application developer

4 RIA today omnipresent but fragmented 4

5 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

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 6

7 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

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 8 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. 9

10 Demo WORA in action Running a JavaFX application on the desktop and on the mobile without changing a single line of code 10

11 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

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. 12

13 3-D Display Shelf With the PerspectiveTransform The PerspectiveTransform built into JavaFX can be used to easily create 3-D effects 13

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. 14

15 JavaFX Platform Architecture Applications and Services Authoring Application Framework Tools Mobile Desktop TV Runtime Runtime Runtime Mobile Desktop TV Extensions Extensions Extensions Common Platform Java Platform: Java SE, JavaME 15 Developer Tools Designer Tools

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 16

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 17 > 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 18

19 JavaFX Mobile Application Architecture Java FX Mobile Application ile b o M 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

20 Mobile vs. Desktop Common profile Platform specific APIs p o t sk e D > Performance > Capabilities Mobile specific APIs include e.g.: > > > > 20 SMS send and receive Embedded camera access Persistent data storage Contact list access m o C n o m ile b Mo

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 21

22 JavaFX Workflow Visual Designer Content developer Java FX Mobile App Binary Pa ck ag i ng JavaFX Mobile Java FX TV g g in a k c JavaFX TV io lat pi ag ck Pa in g Co sets n Pa m al As Visu JavaFX Script code App Binary Java FX Source Application Java FX Desktop App Binary JavaFX Tools 22 JavaFX Desktop / Consumer JRE

23 JavaFX Tool Chain Media Assets Created By Assets Transformed By Adobe Illustrator Adobe Photoshop Integrated Into IDEs Emulated By (If Required) JavaFX Plug-in for IDEs JavaFX Production Suite JavaFX Compiler On2 Flix Encoders JavaFX Mobile Emulator (JavaFX File Format, VP6 and MP3) Adobe CS3 (Flash and Flash Video, JavaFX 1.5) 23 3rd Party RAD Tool (Open Source)

24 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

25 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 25 acceleration) > Better performance > Smaller storage footprint > Better developer experience

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 26

27 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

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) 28

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 29

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 expression var str = if (x mod 2 == 0) then even else odd while expression break, continue, return expression try.. catch.. finally, throw expression 30

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 } 31

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); 32

33 Classes JavaFX 33 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} ); } }

34 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

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 35 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 36

37 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

38 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

39 Bind Bound Functions Consider no argument changes but something else used by function func changes. 39 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 40 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 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

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 = [ step 5]; // sequence 0, 5, 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

43 Example of JavaFX Application import javafx.scene.paint.color; import javafx.scene.scene; import javafx.scene.shape.circle; import javafx.stage.stage; 43 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. 44

45 JavaFX API Stack script JavaFX Script Programming Language javafx.scene.* javafx.scene.effect.* javafx.animation.* Java APIs SceneGraph 45 com.sun.scenario.scenegraph.* com.sun.scenario.animation.* com.sun.scenario.effects.* Swing Java2D javax.swing.* java.awt.* 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 46

47 JavaFX Architecture JavaFX Script Software Models a JavaFX GUI Project Scene Graph Effects Java 2D Graphics hardware 47

48 Scene Graph: Group Group { transforms: Translate { x:15, y, 15 } content: [ Text { x: 10, y: 50 font: Font: { size: 50 } content: Hello World } Circle { centerx: 100, centery: 100 radius: 40 fill: Color.BLACK } ] } 48 Group x:15 y:15 Text Circle

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 49

50 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

51 Media Support Native Media codecs per platform On2 VP6 codec everywhere MP3 everywhere Use native encoders or On2 Flix 51

52 Media APIs var player = MediaPlayer { media: Media {url: } repeatcount: 2 } var view = MediaView { player: player } player.play(); 52

53 JavaFX Current Status JavaFX 1.0 Launch Dec 2008 > Desktop runtime, Mobile Emulator Beta(for Windows) > javafx.com, a new Sun web site > 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

54 JavaFX Download Bundles javafx.com 54

55 Development Bundle NetBeans IDE 6.5 for JavaFX 1.1 JavaFX 1.1 Plugin for NetBeans > Use it if you already have NetBeans

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 56

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 57

58 JavaFX 1.1 Plugins for Adobe Photoshop and Adobe Illustrator Use them to export graphic assets from creative designer tools to JavaFX format. 58

59 JavaFX 1.1 Media Factory SVG Converter > Convert SVG graphics into JavaFX format Viewer > View graphic assets that were converted to JavaFX format. 59

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 > > > > > > 60 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 roadmap Desktop Product Line JavaFX Desktop (Winter 2008) Mobile Product Line JavaFX Mobile (Spring 2009) TV Product Line Other Platforms 61 JavaFX TV (Summer 2009) With Partner platforms/oss

62 Major Milestones Dec 2008 Feb 2009 May/June nd Half Launch Mobile Runtime and Tools Mobile Announcements Designer Tool Platform 1.0 Launch 2D, Media, Animation Franca Marina 2,0 Tools SDK NetBeans Plug-in Media Factory Media Encoder (On2) RAD Tool Mobile Emulator Designer Tool (Preview) Designer Tool 11/10 JavaFX.com MWC 09 JavaOne 09 MAX 09 Launch 62

63 Future Releases More Components More Speed More Platforms More Devices 63

64 Links javafx.com > > > > New L&F Downloads FAQ, Tutorials, Samples & Demo Gallery, Screencasts New content planned openjfx.dev.java.net > JavaFX compiler project > Free JavaFX online programming course > Great JavaFX resource collection 64 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 65

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 > > 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 > 66

67 JavaFX Overview Peter Doschkinow 67 67