Introduction to JavaFX

A rich client platform for all screens

Richard Bair
Sun Microsystems, Inc.
 A rich client platform for all screens

Introduction to JavaFX

• JavaFX is the next generation client stack for the Java Platform
> Consumer & Enterprise
> Consistent cross-device API and development model
• Designed for high performance graphics on desktop, mobile, tv
> Leverages OpenGL, Direct3D, SSE3 when possible on any target device
> Ground-up rewrite of fonts, image handling, rasterization
• Designed for multi-language support
> Java
> JavaFX Script
> more...

2009 Sun Microsystems, Incorporated. All Rights Reserved. 2

 A rich client platform for all screens

Outline

• JavaFX Script – a new programming language

• JavaFX scene graph
• User interface controls
• Styling
• Charts
• Layout
• Developer tools

2009 Sun Microsystems, Incorporated. All Rights Reserved. 3

 A rich client platform for all screens

What is JavaFX Script?

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

“DSL for the care and feeding of the Scenegraph”

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Null Pointer-less Language

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Expression Language

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Object Oriented

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

JVM Language

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Strongly Typed

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Type Inference

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Javascript / Scala like syntax

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Why A New Language?

• A programming language is not about telling the computer what to do, but
instead is about expressing the programmer’s intent.
• A programming language needs to embody new, higher-level concepts and to
abstract away irrelevant detail. (Brooks 1993, HOPL-II keynote)
• JavaFX Script is tightly integrated with, and works extremely effectively with
the JavaFX runtime and scenegraph
• Itʼs fun!

2009 Sun Microsystems, Incorporated. All Rights Reserved. 13

 A rich client platform for all screens

println(“Hello, world!”)

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

def PI = 3.14159265;

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

var name = “Richard”;

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

var name:String;
name = “Richard”;

2009 Sun Microsystems, Incorporated. All Rights Reserved.

 A rich client platform for all screens

Data Types

• Primitive types from Java:

> Boolean, Integer, Long, String, ...
> New: string interpolation expressions
– println("The value of x is {x}");
• Object references (similar to Java)
• Number
• Duration
• Sequences

2009 Sun Microsystems, Incorporated. All Rights Reserved. 18

 A rich client platform for all screens

Sequences

• An ordered collection of objects

• Sequences are flat — they do not nest
• A sequence cannot be null (but it can be empty)

var numbers = [3, 1, 4, 1, 5];

insert [9, 2, 6] into numbers;
delete numbers[2];

2009 Sun Microsystems, Incorporated. All Rights Reserved. 19

 A rich client platform for all screens

Expressions, For-Loops, and Sequences

• Every “statement” is actually an expression that has a value

var b = if (a >= 0) a else -a;

• The value of a for-loop is a sequence of values from its body

for (x in [1..5]) {
x * x
}

[1, 4, 9, 16, 25]

2009 Sun Microsystems, Incorporated. All Rights Reserved. 20

 A rich client platform for all screens

Classes, Mixins, and APIs

• Classes are normal classes similar to Java classes

• Mixin classes like Java interfaces
> Can include function implementations
> Can include variable declarations and initial values
• Extending classes
> At most one normal superclass
> Arbitrary number of mixin classes

2009 Sun Microsystems, Incorporated. All Rights Reserved. 21

 A rich client platform for all screens

Object Literals

• Concise “declarative” syntax for object creation

• A series of variable:initial-value pairs
• Can be used on public and public-init variables
• Can be nested arbitrarily
> Useful for creating scene graph structures

var rect = Rectangle {

x: 10
y: 20
width: 30
height: 40
}
2009 Sun Microsystems, Incorporated. All Rights Reserved. 22
 A rich client platform for all screens

Object Literals and Binding

when leftMargin
var leftMargin = 472; changes the x-value
of both Rectangles
changes
var r1 = Rectangle {
x: bind leftMargin
...
};

var r2 = Rectangle {
x: bind leftMargin
...
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 23

 A rich client platform for all screens

JavaFX Library API Style

• The x, y, width, height variables on Rectangle are public!

> What about encapsulation? Enforcing invariants?
• No getters
> Variables can be public-read
• No setters
> Variables are public and have a trigger
• No constructors
> Variables are public-init allowing use in object literals
• Few listeners and callbacks
> State variables exposed (public, public-init, or public-read)
> This allows binding on them

2009 Sun Microsystems, Incorporated. All Rights Reserved. 24

 A rich client platform for all screens

Binds and Triggers

public var x1;

public var x2;
public-read var width = bind x2 - x1;

public var radius = 10 on replace {

diameter = 2 * radius
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 25

 A rich client platform for all screens

Outline

• JavaFX Script – a new programming language

• JavaFX scene graph
• User interface controls
• Styling
• Charts
• Layout
• Developer tools

2009 Sun Microsystems, Incorporated. All Rights Reserved. 26

 A rich client platform for all screens

Scenegraph

• Data structure which represents all visual elements

• Easily reference any visual element in the app and manipulate it
• Comprised of Nodes
> Leaf Nodes (shapes, images, text, etc)
> Parent Nodes (Groups, Containers, etc)

2009 Sun Microsystems, Incorporated. All Rights Reserved. 27

 A rich client platform for all screens

Group

Image Group

Circle Media

2009 Sun Microsystems, Incorporated. All Rights Reserved. 28

 A rich client platform for all screens

Scenegraph Sample

Group {
content: [
ImageView { } Group
Group {
content: [
Circle { },
MediaView { } Image Group

]
}
]
} Circle Media

2009 Sun Microsystems, Incorporated. All Rights Reserved. 29

 A rich client platform for all screens

Nodes

• Group • MediaView
• CustomNode • Text
• Container • more...
• Control
• Line
• Path
• Rectangle
• ImageView

2009 Sun Microsystems, Incorporated. All Rights Reserved. 30

 A rich client platform for all screens

ImageView

• Image represents an in-memory bitmap

> loaded via URL, from jar
• ImageView Node contains an Image
• Both ImageView and Image can scale
> Preserve ratio
> Fit within a specific width/height

2009 Sun Microsystems, Incorporated. All Rights Reserved. 31

 A rich client platform for all screens

Text Node

• x, y, TextOrigin
• Fonts can be specified on Text
• Supports multiline text
• By default, text positioned such that (x, y) is left baseline

2009 Sun Microsystems, Incorporated. All Rights Reserved. 32

 A rich client platform for all screens

(0, -10)

(0, 0)
Example
2009 Sun Microsystems, Incorporated. All Rights Reserved.
 A rich client platform for all screens

Effects

• Any Node can have an Effect

• Many standard built in
> Blend modes
> Bloom
> DisplacementMap
> DropShadow
> ColorAdjust
> BoxBlur
> Glow
> Reflection
> InnerShadow
> more...
2009 Sun Microsystems, Incorporated. All Rights Reserved. 34
 A rich client platform for all screens

Media

• JavaFX supports both visual and audio media

• Cross platform JavaFX Media file (fxm, mp3)
• Also plays native formats (mov, wmv)
• Media class represents a media file
• MediaPlayer plays a Media file
• MediaView is the Node which displays the Media

2009 Sun Microsystems, Incorporated. All Rights Reserved. 35

 A rich client platform for all screens

Animation

• Animation is a key feature of every rich graphics application platform

• There are two supported animation types in JavaFX
> Keyframe animations
> Transitions

2009 Sun Microsystems, Incorporated. All Rights Reserved. 36

 A rich client platform for all screens

KeyFrame Animation

• KeyFrame: specifies that a variable should have...

> a particular value
> at a particular time
• Timeline
> Modifies values of variables specified by KeyFrames
> Doesn’t necessarily do any animation itself
• How is animation actually done?
> Arrange for a KeyFrame to modify an interesting Node variable
– x, rotate, opacity, fill, ...

2009 Sun Microsystems, Incorporated. All Rights Reserved. 37

 A rich client platform for all screens

KeyFrame Animation Setup

var text = Text {

x: 50
y: 80
content: "Hello, world!"
rotate: 30
}

Timeline {
keyFrames: at (4s) { text.rotate => 210.0 }
}.play();

2009 Sun Microsystems, Incorporated. All Rights Reserved. 38

 A rich client platform for all screens

Transitions

• Predefined, single-purpose animations

> Fade, Path, Pause, Rotate, Scale, Translate
> Can specify to, from, and by values
• Container transitions:
> Parallel, Sequential
> Can be nested arbitrarily

2009 Sun Microsystems, Incorporated. All Rights Reserved. 39

 A rich client platform for all screens

DEMO – Simple Scene Graph

2009 Sun Microsystems, Incorporated. All Rights Reserved. 40

 A rich client platform for all screens

Outline

• JavaFX Script – a new programming language

• JavaFX scene graph
• User interface controls
• Styling
• Charts
• Layout
• Developer tools

2009 Sun Microsystems, Incorporated. All Rights Reserved. 41

 A rich client platform for all screens

JavaFX UI Controls

• Simple
• Useful
• Rich

2009 Sun Microsystems, Incorporated. All Rights Reserved. 42

 A rich client platform for all screens

Architecture

Skin

Control

Behavior

2009 Sun Microsystems, Incorporated. All Rights Reserved. 43

 A rich client platform for all screens

Dark color
buttons on
toolbar

Light color
controls on
almost white
background

2009 Sun Microsystems, Incorporated. All Rights Reserved. 44

 A rich client platform for all screens

Controls in JavaFX

• Button • TextBox • Multiline TextBox

• ToggleButton • ListView • Horizontal ListView
• RadioButton • TreeView • Popup
• CheckBox • PasswordBox • Tooltip
• Slider • ChoiceButton
• Label • MenuButton
• ScrollBar • SplitMenuButton
• Hyperlink • Menus
• ProgressIndicator • ToolBar
• ProgressBar • ScrollView
2009 Sun Microsystems, Incorporated. All Rights Reserved. 45
 A rich client platform for all screens

Button

• action:function()
• Example:
Button {
text: “Cancel”
action: function() {
println(“I’ve been clicked!”);
}
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 46

 A rich client platform for all screens

Progress Indicator

• progress:Number (0..1)
• progress bar is-a progress indicator
• Example:
var task = HttpRequest { ... }
ProgressIndicator { progress: bind task.percentDone }

2009 Sun Microsystems, Incorporated. All Rights Reserved. 47

 A rich client platform for all screens

TextBox

• text:String
• promptText:String
• font:Font
• action:function()
• Example:
var t:TextBox = TextBox {
promptText: “Search”
action: function() {
startSearch(t.text);
t.text = “”;
}
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 48

 A rich client platform for all screens

Multiline TextBox

• columns:Integer
• lines:Integer
• multiline:Boolean
• Example:
var t:TextBox = TextBox {
columns: 30
lines: 10
multiline: true
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 49

 A rich client platform for all screens

List View

• Horizontal or Vertical
• Massively Scalable
• Custom Cells
• Dynamically variable row height
• Example:
ListView {
items: [“Apples”, “Oranges”, “Bananas”]
cellMaker: function() {
ListCell { ... }
}
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 50

 A rich client platform for all screens

DEMO – UI Controls

2009 Sun Microsystems, Incorporated. All Rights Reserved. 51

 A rich client platform for all screens

Outline

• JavaFX Script – a new programming language

• JavaFX scene graph
• User interface controls
• Styling
• Charts
• Layout
• Developer tools

2009 Sun Microsystems, Incorporated. All Rights Reserved. 52

 A rich client platform for all screens

Styling

• Easy and Powerful (CSS)

• Highly Customized (fxz)
• Complete Control (code)

2009 Sun Microsystems, Incorporated. All Rights Reserved. 53

 A rich client platform for all screens

Styling

• Easy and Powerful (CSS)

• Highly Customized (fxz)
• Complete Control (code)

2009 Sun Microsystems, Incorporated. All Rights Reserved. 54

 A rich client platform for all screens

Styling

2009 Sun Microsystems, Incorporated. All Rights Reserved. 55

 A rich client platform for all screens

Styling

• CSS is our strategy for styling

• Caspian is our default CSS stylesheet
• CSS is fast, and works on mobile, desktop, and tv
• Stick to the spirit of HTML CSS
> but do not be bound by it

2009 Sun Microsystems, Incorporated. All Rights Reserved. 56

 A rich client platform for all screens

Styling

• Break control skins in styleable parts

• In some ways similar to HTML CSS’s Box
• Rectangle with independently rounded corners
> or any arbitrary path
• Can have multiple
> background fills
> background images
> border strokes
> border images

2009 Sun Microsystems, Incorporated. All Rights Reserved. 57

 A rich client platform for all screens

Styling

2009 Sun Microsystems, Incorporated. All Rights Reserved. 58

 A rich client platform for all screens

2009 Sun Microsystems, Incorporated. All Rights Reserved. 59

 A rich client platform for all screens

Left Button Track Thumb ScrollBar Right Button

Left Arrow Right Arrow

2009 Sun Microsystems, Incorporated. All Rights Reserved. 61

 A rich client platform for all screens

Outline

• JavaFX Script – a new programming language

• JavaFX scene graph
• User interface controls
• Styling
• Charts
• Layout
• Developer tools

2009 Sun Microsystems, Incorporated. All Rights Reserved. 62

 A rich client platform for all screens

Charts

• A basic set of charts for everyday use

> Simple
> Customizable
• To provide tools to help you build your own charts

2009 Sun Microsystems, Incorporated. All Rights Reserved. 63

 A rich client platform for all screens

Pie Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 64

 A rich client platform for all screens

Sample Pie

PieChart {
title: "Sample Pie"
data: [
PieChart.Data {
label: "Apples" value: 34
action: function(){ Alert.inform("Clicked") }
},
PieChart.Data { label: "Oranges" value: 27 },
PieChart.Data { label: "Bananas" value: 16 },
PieChart.Data { label: "Grapes" value: 50 },
PieChart.Data { label: "Cherries" value: 6 },
PieChart.Data { label: "Strawberry" value: 5 },
PieChart.Data { label: "Raspberry" value: 7 }
]
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 65

 A rich client platform for all screens

Bar Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 66

 A rich client platform for all screens

Line Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 67

 A rich client platform for all screens

Area Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 68

 A rich client platform for all screens

Scatter Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 69

 A rich client platform for all screens

Bubble Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 70

 A rich client platform for all screens

3D Bar Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 71

 A rich client platform for all screens

3D Pie Chart

2009 Sun Microsystems, Incorporated. All Rights Reserved. 72

 A rich client platform for all screens

Outline

• JavaFX Script – a new programming language

• JavaFX scene graph
• User interface controls
• Styling
• Charts
• Layout
• Developer tools

2009 Sun Microsystems, Incorporated. All Rights Reserved. 73

 A rich client platform for all screens

Layout Containers

• Container-based layout
• Container is-a Node
• Built-in Containers in 1.2
> Stack: stack all content nodes on top of each other
> HBox: lay out content horizontally
> VBox: lay out content vertically
> Flow: layout out content either horizontally or vertically and line wrap
> Panel: Customizable layout container

2009 Sun Microsystems, Incorporated. All Rights Reserved. 74

 A rich client platform for all screens

Flow Sample

Flow {
width: 800
height: 600
content: for (img in images) {
ImageView { image: img }
}
}

2009 Sun Microsystems, Incorporated. All Rights Reserved. 75

 A rich client platform for all screens

Developer Tools

• NetBeans with JavaFX plug-in

> Syntax highlighting
> Code completion
> SDK integration
• Eclipse, IntelliJ
• JavaFX Production Suite
> Imports artwork from content creation tools
> ... into the scenegraph as a Node
• JavaFX Authoring Tool
> Creating JavaFX Content
> Built completely on top of JavaFX and UI Controls

2009 Sun Microsystems, Incorporated. All Rights Reserved. 76

 A rich client platform for all screens

Developer-Designer Workflow

2009 Sun Microsystems, Incorporated. All Rights Reserved. 77

 A rich client platform for all screens

DEMO – JavaFX Production Suite

2009 Sun Microsystems, Incorporated. All Rights Reserved. 78

 A rich client platform for all screens

Call To Action

• fxexperience.com
• Visit javafx.com
> Download JavaFX SDK + NetBeans
> See demos
> Download example code
> Read tutorials, FAQs, white papers, documentation
> Browse API Documentation

Thank You!

2009 Sun Microsystems, Incorporated. All Rights Reserved. 79