Java FX 1.0 SDK Presentation by Rich Bair, Jasper Potts, and Martin Brehovsky in Paris on December 12, 2008

1. JavaFX™ 1.0
SDK

2. About the Speakers
• Martin lead the team
responsible for the JavaFX
Production Suite
• Richard is one of the API
leads for JavaFX SDK
• Jasper is one of the key
engineers on the JavaFX
SDK

3. JavaFX is for graphical Java applications
across all devices.

4. Agenda
• Introduction to JavaFX
• (Brief) JavaFX Script
• Scene Graph
• Animations and
Transitions
• Q &A

5. Introduction to JavaFX™
• Common APIs across
devices
• Scales from small devices
to powerful desktops
• Brings rich media and
graphical APIs to Java
• Simplifies building
graphical consumer and
enterprise applications

6. JavaFX Script
• Expression language
• Declarative and
Procedural
• Integrates with Java
• Loosely based on
JavaScript

7. JavaFX Script Explained
• JavaFX Script source files
are called “scripts”
• Everything* in JavaFX
Script is an expression
• All blocks are
expressions
• The last line is the
result

8. Primitive Data Types
• Boolean
• Integer
• Number
• String
• Duration
• Primitives cannot be null*

9. Declaring Sequences
// A sequence of one can omit the brackets
var names:String[] = “Richard”;
// Empty sequences are not null
var names:String[];
println(sizeof names); // prints 0
// elements are accessed by index
var names = [“Jasper”, “Richard”, “Martin”];
var martin = names[2];
// and you can populate a sequence using a for loop
var hellos = for (i in [1..3]) { “Hello #{i}” }

10. Modifying Sequences
// Inserting items into a sequence
var names:String[] = “Richard”;
insert “Jasper” into names;
// Inserting before a certain index
insert “Martin” before names[1];
// Inserting after a certain index
insert “Duke” after names[1];
// Deleting from the sequence
delete “Duke” from names;

11. Operators
• +-/*
• ++ --
• *= /= += -=
• and or not
• = == !=
• mod

12. Flow Control
• if ( booleanExpression) • for (i in sequence) { ... }
then a else b
• Can get index of item
• if (booleanExpression) a “i” by “indexof i”
else b
• break
• if (booleanExpression)
{ a } else { b } • continue
• while (booleanExpression)
{ ... }

13. Bind
• bind is a way to tie the • bound variables cannot be
value of one variable to set manually
the value of an expression
• binding must be defined
when the variable is
initialized
• bindings are statically
compiled

14. JavaFX Objects
public class Distance extends {
public var x1:Number;
public var x2:Number;
// Whenever x2 or x1 changes, distance will be updated
// Binding can be used for invariants
public-read var distance:Number = bind x2 - x1;
}

15. Object Literals
• Concise declarative syntax
for object creation
• Similar to JavaScript
• Combine with binding for
maximum effect
• variable: initial-value
• initial-value is an
expression

16. Object Literal
// creates a Rectangle
// x: 10 is not an assignment, it is an initialization!
var rect = Rectangle {
x: 10
y: 10
width: 100
height: 100
}

17. Nested Literals
// creates a Rectangle with a Color for its fill
var rect = Rectangle {
x: 10
y: 10
width: 100
height: 100
fill: Color {
red: 1
green: 0
blue: 0
}
}

18. Variables and Literals
// A variation that allows me to reference the color later
var color:Color;
var rect = Rectangle {
x: 10
y: 10
width: 100
height: 100
fill: color = Color {
red: 1
green: 0
blue: 0
}
}

19. Scene Graph
• Describes the graphics • Graph is set on a Scene
and controls in a scene
• Scene is set in a Stage
• Each node in the graph
has a single parent
• Special “group” nodes
have zero or more
children
• “leaf” nodes have no
children

20. Scene Graph
Group
Circle Group
Line Rect

21. Scene
• Canvas upon which the
Scene Graph is
displayed
• Can set multiple CSS
Stylesheets
• Can set background
color (or set to null)
• Can set canvas width /
height

22. Stage
• Top-level container for • JFrame on desktop
the scene
• JApplet on web page
• Contains only one
Scene • SVG player on
mobile
• Can set Stage width /
height
• Potentially represented
by:

23. Custom Node
• Primary method of
Scene Graph
encapsulation
• All other nodes are not
extendable
• Simply override the
create() method

24. Shapes - Building Blocks
• Arc • Rectangle
• Circle • stroke
• Ellipse • strokeWidth
• Line • fill
• Path • smooth
• Polygon

25. Create an App
(part 1)

26. Colors
• Colors • Color.rgb(128, 222,
21)
• 150+ built in colors
(all the HTML & CSS
built in values)
• Color.web(“#aabbcc
”)
• Color.web(“blue”)

27. Linear Gradients
• startX, startY, endX, • Has an offset
endY between 0...1
• Define the direction • Has a Color
of the gradient
• On the unit square
• Stops define each step
in the gradient. Each
stop

28. Create an App
(part 2)

29. Images
• ImageView node shows • Preserve ratio
images
• Fit within a specific
• Image represents an in width/height
memory Image
• When fit on Image
• Image can load images level, keeps smaller
in FG thread or BG image in memory
thread
• Both ImageView and
Image can scale

30. Create an App
(part 3)

31. Text
• x, y, TextOrigin • Supports multiline text
• By default, text • Use alignment to align
positioned such that multiline text
(x, y) is left baseline
• To center text,
• Fonts can be specified compute the center via
on Text layout bounds
• Favor “fill” over
“stroke”

32. Text Box
• Used for text input • “action” function is
invoked when ENTER
• Use CSS to style the pressed
TextBox
• “columns” specifies the
• “text” is changed to preferred width based
on the font size and
reflect the actual text
in the TextBox number of characters
to display
• “value” is changed
when the text is
“committed” via
ENTER, TAB, etc

33. Effects
• Effects are placed on • Reflection
Nodes
• more...
• Many standard built in
• DropShadow
• ColorAdjust
• GaussianBlur
• Glow

34. Create an App
(part 4)

35. Media
• JavaFX supports both visual • MediaView is the Node which
and audio media displays the Media
• Cross platform JavaFX Media • No built in Movie playing
file (fxm, mp3) Control
• Also plays native formats
(mov, wmv)
• Media class represents a
media file
• MediaPlayer plays a Media file

36. Animation
• Animation is a key • Transitions
feature of every rich
graphics application
platform
• There are two
supported animation
types in JavaFX
• Keyframe
Animations

37. Keyframe Animation
• A general purpose • tween keyword and
animation mechanism custom interpolators
for JavaFX
• Long sytax vs short
• Uses a concept of a syntax
timeline and keyframes
specifying values at
given times
• autorepeat +
autoreverse behavior
• Built in the language • Actions
syntax - can animate
any variable • Nested timelines

38. Transitions
• “Precanned”, single • Parallel
purpose animations
• Sequential
• Translation/Rotation/
Scale/Fade • Pause Transition
• “by” values
• Animation along a path •
• Containers:

39. Create an App
(part 5)

40. JavaFX provides APIs for
building creative
applications

41. JavaFX will be updtaed
regularly and quickly

42. 1.1 release Februrary 2009
1.5 release June 2009

43. JavaFX 1.0 Production Suite
for professional graphics

44. Try JavaFX Today!

45. javafx.com