Getting Most from the Designers with JavaFXTM

Production Suite

Lukas WaldmannMartin BrehovskySun Microsystems, Inc.JavaFX Tools

2

Agenda> Introduction to the designer/developer collaboration> Typical designer/developer workflow> Introducing JavaFX Production Suite> Working with FXD/FXZ files> Content on the desktop and on the mobile> Dynamically generated content> Summary> Q/A

3

Motto:

It is extremely important to let designers be in charge and to be completely responsible for the UI design. Most of the developers we had a chance to work with are having difficult time of creating really innovative and really cool looking user interface without designers helps.

4

A “Classic” Way of Developing UIs> Designer creates UI in AI/PS/Flash and then creates

a specification document usually with used assets cut into individual pieces

> Developer implements the UI following the spec and reusing the assets with better or worse result

> Later in the development cycle someone decides the UI has to be redesigned:● Both the designer and the developer start again● A lot of work and time is wasted on both sides● Rich graphics makes all this even worse as there is

usually a lot of graphics assets, animations, etc ...

5

But We Can Do Better Than That> Designers need to be able to design the UI in AI/PS> Developers still need to be able to do the business

logic application development in their IDE> Developers shouldn't be required to recode the UI

specification - most of the information is available in the graphics files anyway

> Designers need to be able to export gfx to a format which the developer can use to provide the UI

> Update of the graphics files should be painless at any time of the development cycle

6

Designer/Developer Collaboration Workflow

Graphic prototype

Content Authoring

Business logic development

Final Application Deployment

Content/business logic iterations

7

Introducing JavaFX Production Suite> An environment allowing a frequent collaboration

between a designer and a developer> A set of plugins and tools for professional graphical

packages, such as Adobe Illustrator and Photoshop, allowing exporting content to JavaFX

> A content file format allowing separation of graphics and code

> A runtime library allowing loading and manipulating the content generated by JavaFX Production Suite plugins/tools

8

JavaFX Production Suite

A quick and dirty demo

9

How JavaFX Production Suite Helps> Provides separation of the graphics and the code

● Enables frequent update of both the code and the graphics assets

> Graphics is stored as FXD/FXZ files● FXD/FXZ files are data files – this brings additional

benefits over the code solution> Provides a bridge between a designer and a

developer● Designer owns FXD/FXZ assets, developer writes

code and manipulates element exposed by a designer

10

JavaFX Content Formats - FXD and FXZ> FXD

● A textual format for storing graphics following JavaFX Script object literal syntax

● Easy to process and edit in tools, allows storing metadata used by tools

> FXZ● A compressed zip archive which contains one or

more FXD files● Can contain additional embedded assets such as

PNG or JPEG bitmap images or True Type fonts

11

Why Yet Another File Format> FXD maps 1:1 to FX graphics APIs> FXZ stores bitmaps/fonts in a single file> FXD is extensible - we can evolve the format

together with the runtime. We are not limited by slowly evolving existing formats.

> FXD uses “degrade gracefully” policy on platforms with limited resources

12

A Simple FXD Example//@version 1.0Group { content: [ Circle { id:"face" centerX:40 centerY:40 radius:39 fill:Color.YELLOW stroke:Color.BLACK strokeWidth:3.0}, Circle { centerX:25 centerY:30 radius:5 fill: Color.BLACK}, Circle { centerX:55 centerY:30 radius:5 fill: Color.BLACK}, Line{ startX:32 startY:23 endX:16 endY:15 stroke:Color.BLACK strokeWidth:4.0}, Line{ startX:45 startY:23 endX:61 endY:15 stroke:Color.BLACK strokeWidth:4.0}, QuadCurve { id: "smile" stroke:Color.BLACK strokeWidth:3.0 fill: null startX:20 startY:60 endX:60 endY:60 controlX:40 controlY:80 }, QuadCurve { id: "frown" stroke:Color.BLACK strokeWidth:3.0 fill: null startX:20 startY:60 endX:60 endY:60 controlX:40 controlY:40 visible: false } ]}

13

A Simple FXD Example//@version 1.0Group { content: [ Circle { id:"face" centerX:40 centerY:40 radius:39 fill:Color.YELLOW stroke:Color.BLACK strokeWidth:3.0}, Circle { centerX:25 centerY:30 radius:5 fill: Color.BLACK}, Circle { centerX:55 centerY:30 radius:5 fill: Color.BLACK}, Line{ startX:32 startY:23 endX:16 endY:15 stroke:Color.BLACK strokeWidth:4.0}, Line{ startX:45 startY:23 endX:61 endY:15 stroke:Color.BLACK strokeWidth:4.0}, QuadCurve { id: "smile" stroke:Color.BLACK strokeWidth:3.0 fill: null startX:20 startY:60 endX:60 endY:60 controlX:40 controlY:80 }, QuadCurve { id: "frown" stroke:Color.BLACK strokeWidth:3.0 fill: null startX:20 startY:60 endX:60 endY:60 controlX:40 controlY:40 visible: false } ]}

14

Using Content from Code// load the contentvar smiley:FXDContent = FXDLoader.loadContent("{__DIR__}smiley.fxz");// install interactive behaviorsmiley.getRoot().onMouseClicked = function(e) { smiley.getShape("face").fill = Color.RED; smiley.getNode("smile").visible = false; smiley.getNode("frown").visible = true;}// insert the root element into sceneScene { content: smiley.getRoot()}

15

Using Content from Generated UI Class> The previous approach works, but is somewhat

laborious> Using the right tools, developers can easily generate

UI helper class● Variables correspond to named graphics elements● No need to look for an element each time it is used● UI manipulation code is cleaner and easier to

understand

16

Using Content from Generated UI Class// declaration of the Face FXDNodepublic class SmileyUI extends FXDNode { public-read var face:Shape; public-read var smile:Node; public-read var frown:Node; ... }// usage of Smiley classvar smiley = SmileyUI {};smiley.onMouseClicked = function(e) { smiley.face.fill = Color.RED; smiley.smile.visible = false; smiley.frown.visible = true;}// ApplicationStage { scene: Scene { content: smiley}};

17

How it Works

18

Additional Features> Using directly FXDNode > Asynchronous (background) loading> Using FXZ files with multiple content files> Application skinning

19

JavaFX Production Suite

Demos

20

Desktop and Mobile> JavaFX 1.1 brought FXD to mobile> Mobile-aware preview in AI/PS and NetBeans > Files are loaded and rendered with “degrade

gracefully” policy● Loads any FXD/FXZ file even with elements not

supported on Mobile (e.g. filter effects)● Not-supported elements are simply not used

> This approach allows using the same content on both the desktop and the mobile

21

JavaFX Production Suite

Mobile demo

22

Dynamic Content> JavaFX 1.2 brings support for loading FXD content

on background (asynchronously)> Can be used to dynamically download content from

Internet> FXD/FXZ/unpacked FXZ files for desktop> FXD/unpacked FXZ files for mobile

23

JavaFX Production Suite

Remote content demo

24

Future Plans> Skinning of UI Controls in AI/PS/SVG> Enhanced FXD – support for animations, interactive

behaviors and reusable objects> Tighter integration with the JavaFX designer tool> Deployment/runtime binary version of FXZ> We will be demoing some of the above in BOF-5493

– Quo Vadis JavaFX Production Suite● Today 7:30PM – Moscone North 124

25

Summary> Developing rich client applications brings new

patterns to the development process> Designers are equal partners to developers and

both groups work together in an iterative process> For complex projects there is a strong desire to

separate graphics assets and code > Using JavaFX Production Suite we are able to

separate graphics and code and enable easy collaboration between designers and developers using JavaFX platform

26

Additional Information> Getting started with JavaFX Production Suite:

javafx.com/docs/gettingstarted/production_suite> More information about JavaFX: www.javafx.com> JavaFX Blog: blogs.sun.com/javafx> BOF-5493 – Quo Vadis JavaFX Production Suite

● Today 7:30PM – Moscone North 124

Lukas WaldmannMartin Brehovsky

Sun Microsystems, Inc.JavaFX Tools