JavaFX : A Technical

Introduction
Raghavan “Rags” N. Srinivas
rags@sun.com
Sun Microsystems

1
Speaker(s)

> Rags
> CTO, Technology Evangelism
> Designing ugly GUIs for well over a decade (and
counting)
> HOL track lead for JavaOne
> Author of JavaFX HOL for JavaOne 2007 and 2008

2
Goal of the Talk

Learn how to write programs using

JavaFX including SceneGraphs,
Animation and Media

3
JavaFX Script Overview
• Declarative, statically-typed scripting language with
type inference
• Facilitates rapid GUI development
• Many cool, interesting language features
• Runs on Java VM
• Deployment options same as Java
• Fully utilizes Java class libraries behind the scenes

4
A Basic Java GUI: Not Very Pretty

5
Hello World with Swing
import javax.swing.*;
public class HelloWorldSwing {
public static void main(String[] args) {
JFrame frame = new JFrame("HelloWorldSwing");
final JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
frame.setVisible(true);
}
}
6
Hello World with JavaFX

import javafx.ui.*;
Frame {
title: "Hello World JavaFX"
width: 200
height: 50
content: Label {
text: "Hello World"
}
visible: true
}

7
Declarative Syntax

• Tell me what you want. Not How.

• Common in Web applications
• For example, ease of composing styled
text
> HTML vs. JTextPane
• HTML Table using JSTL versus JTable
• JavaFX brings that same ease of use to
Swing and Java 2D API programming
8
JavaFX Simplified Architecture

JavaFX Script Software

Project Scene Graph

Effects, Animation,
Media and
and Timing
Java 2D

Graphics hardware

9
Agenda
• SDK and Prerequisite software
• First JavaFX Application
• Language and SceneGraph Basics
• Animation Basics
• Media Basics
• Deployment Basics
• Summary

10
SDK and prerequisite software

11
Software Requirements
• Java SE 6 Update 10 SDK
• NetBeans 6.1 – Web & Java EE version
• JavaFX Kit – NetBeans plug-in
• JavaFX SDK (Already bundled with the plugin)
• Mozilla Firefox 3 beta 5 or higher (for deployment
only)

12
NetBeans IDE – JavaFX Plug-in
• New plug-in for NetBeans IDE 6.1
• Support development cycle
> edit, compile, run, test
• JavaFX project system
• Includes automatic installation of JavaFX
SDK

13
 Components – JavaFX SDK
/lib
javafxc.jar
/docs javafxrt.jar
Javadocs javafxgui.jar /bin
Scenario.jar javafxc.bat
Decora-D3D.jar javafx.bat
Decora-HW.jar
jmc.jar
/samples jogl.jar
SmokeScreenSample jaxb*.jar

14
Command Line Development using
JavaFX SDK
• include <javafx-sdk>/bin in PATH
• javafxc to compile
• javafx to run
• Relevant library files in <javafx-sdk>/lib are
automatically included in classpath as
necessary. Rest can be included with the
-classpath option
> With packages
> javafxc -d . simple/Main.fx
> javafx simple.Main
> Without packages 15

> javafxc Main.fx

First JavaFX Script Application

16
Language and SceneGraph
Basics

17
Language Highlights
• Declarative Syntax
• First Class Functions
• Sequences
• Binding

18
Declarative Syntax
• Loosely based on Scalable Vector Graphics (SVG)
• Object literal syntax similar to JavaScript
• Enables fast, easy construction of GUI hierarchy
• No Swing programming experience required
• Attributes
• Triggers

19
Declarative Syntax - Example
import javafx.gui.*;

Frame {
title: "Hello World JavaFX
width: 200
height: 50
content: Label {
text: "Hello World"
}
visible: true
}

20
First Class Functions
• No anonymous inner classes!
• Callbacks made easier

21
First Class Functions - Example
import javafx.gui.*;
import java.lang.System;

var doExit = function():Void {

System.exit(0);
};

var fileItems = [
MenuItem{text:"Exit" action:doExit}
];

Frame {
title: "JavaFX Demo"
menus: [Menu{text:"File" items:fileItems},
Menu{text:"Help"}]
content: ...
} 22
Sequences
• Arrays on steroids
• Compared for equality on value
• Series notation
var days = [1..31];

• Slices via syntax and predicate

var week1 = days[0..<7];
var oddDays = days[n|n % 2 == 1];

• Insert/delete
delete 1 from days; // result is [2..31]
23
Data Binding in JavaFX
> Cause and Effect—Responding to change
> The JavaFX bind operator—Allows dynamic
content to be expressed declaratively
> Dependency-based evaluation of any
expression
> Automated by the system—Rather than
manually wired by the programmer
> You just declare dependencies and the
JavaFX runtime takes care of performing
updates when things change
> Eliminates listener patterns 24
Binding
• The power drill for GUI development
• Dependency-based evaluation of expressions
• Enables expression of dynamic data relationships
var x = 10;
var y = bind x + 100;
x = 50;
y == 150; // true
• Any expression can be bound
> conditionals, loops, functions, calls into Java
methods/constructors 25
Example: Dynamic Behavior
import javafx.gui.*;
Frame {
var a: String = "name";
title: "Hello World"
width: 400
content: BorderPanel {
bottom: TextField { text: bind a with inverse}
top: Label { text: bind "Hello {a}" }
}
visible: true
}

26
More Binding Examples
public class User {
public attribute userid: String;
public attribute password: String;
}

// Create sequence
var users = [
User {userid: "rags" password: "everest" },
User {userid: "sridhar" password: "hyderabad" },
User {userid: "Inyoung" password: "korea" },
];

// Bind list to sequence of users

var list = List{items: bind for (user in users)
ListItem {text: bind "{user.userid}"}};

27
GUI Components –javafx.gui.*
Button
CheckBox
Frame ComboBox
Dialog Label BorderPanel
Window List FlowPanel
RadioButton GridPanel
Slider Panel
ToggleButton
Canvas Menu
MenuItem
TextField

28
JavaFX Scene Graphs
• Object literal syntax simplifies defining scenes
var scene = Circle {
centerX: 100
centerY: 100
radius: 50
fill: Color.CRIMSON
stroke: Color.INDIGO
strokeWidth: 5
};

Frame {
title: "Circle"
content: Canvas { content:scene }
background: Color.BEIGE
visible: true
} 29
GUI – Example 1
import javafx.gui.*;

var b1 = Button{name: "Button 1" text: "Button 1"};

var b2 = Button{name: "Button 2" text: "Button 2"};
var b3 = Button{name: "Button 3" text: "Button 3"};
var b4 = Button{name: "Button 4" text: "Button 4"};

var p1 = FlowPanel { content: [b1, b2, b3, b4]

hgap: 10
vgap: 30
}

var f1 = Frame {
name: "Frame 1"
content: p1
width: 400
height: 400
30
visible: true
}
Scene Graph Nodes -javafx.gui.*
Node

ComponentView* Group Shape

ImageView Hbox Arc
MediaView Vbox Circle
CubicCurve
Ellipse
Transform Line
Path
Affine Polygon
Rotate Polyline
Scale QuadCurve
Shear Rectangle
Translate Text
31
Scene Graph Effects -
javafx.gui.effect.*

Blend
Bloom
ColorAdjust
...
Flood
GaussianBlur
Glow
...
MotionBlur
...
Source
32
GUI – Example 2
var canvas =
Canvas {
background: Color.WHITE
content:
Rectangle {
x: bind x1
y: bind y1
width: bind w
height: bind h
fill: bind color
opacity: bind op
onMouseEntered:
function(e) { fader.start(); }
onMouseExited:
function(e) { fader.stop(); }
}
};
33
Animation Basics

34
Animation - javafx.gui.animation.*
KeyFrame
action
TimeLine canSkip
autoReverse time InterPolator
INDEFINITE timelines
keyFrames values DISCRETE
repeatCount EASEBOTH
running EASEIN
toggle EASEOUT
LINEAR

35
Animation
var t = Timeline {
repeatCount: bind rep
autoReverse: bind autoRevCheckBox.selected
toggle: bind toggleCheckBox.selected
keyFrames: [
KeyFrame {
time: 0ms
values: [
x => 0,
y => 0]
},
KeyFrame {
time: 2000ms
values: [
x => 200 tween interpolate,
y => 200 tween interpolate]
}
36
]
};
The “=>” literal constructor
values: [x => 100 tween Interpolator.LINEAR]

is equivalent to

values: [KeyValue {target: pX, value: 100,

interpolate: Interpolator.LINEAR}]

where pX is “pointer of x” (obtained magically :-))

37
Animation Controls
var buttons =
FlowPanel {
content: [
Button {
text: "Start"
action: function():Void { t.start(); }
},
Button {
text: "Stop"
action: function():Void { t.stop(); }
},
Button {
text: "Pause"
action: function():Void { t.pause(); }
}
]
};
38
Media Basics

39
Architectural Overview, JMC
• Java Media Components
> JmediaPlayer
> A JComponent that provides media playback with user interface
controls
> JMediaPane
> A JComponent that provided media playback without UI
controls
> MediaProvider
> Low level media player that can render into a graphics object or
pass raw data into other rendering systems
> Media Class
> For getting information about the media 40
– Tracks: Audio Video and SubTitiles currently supported
Media in Java
• Cross Platform Video Format Support
> Encode once, play anywhere
> Over time, multiple formats may be supported
> Sun Open Media Stack (OMS)
• Leverages native platform
> Windows
> Play Windows Media via DirectShow
> Flash via the ActiveX control
> Mac
> Quicktime and Core Audio/Video.
> Linux and Solaris 41

> GStreamer
Code Sample: Java Player

class MediaDemo extends JFrame {

MediaDemo() {
JmediaPlayer mediaPlayer;
try {
mediaPlayer = new JMediaPlayer(
new URI("movie.mov"));
} catch (Exception e) {
System.out.println("Error opening media" + e);
System.exit(0);
}
add(mediaPlayer);
mediaPlayer.play();
setVisible(true);
} ...

42
Java API
• JMediaPlayer, JMediaPane, and MediaProvider
contain typical methods for media playback:
> play, pause, setRate, setRepeating, setVolume,
setSource etc.
> Player and media are separate objects, rather then
having play methods on the media.
> Better Beans/Swing/NetBeans integration
> More efficient use of objects in typical scenarios

43
Media in JavaFX
• Media classes are part of javafx.gui package
• Media, MediaPlayer and MediaView
> MediaView is a Node
> has a MediaPlayer
> MediaPlayer has a Media object.
> MediaView may be rotated, translated, sheared, and have
filter effects applied to it.
> Multiple views may be bound to single player.
• MediaTimers allow functions to be invoked at key
points in Media.
44
• Other media events may be triggered
Code Sample: JavaFX™ MediaPlayer
var media = Media{source:”movie.mov”};
var player = MediaPlayer{media: media, autoPlay:true};
var mediaView = MediaView{mediaPlayer: player};

// To enable audio only, don't create MediaView

MediaView{mediaPlayer:player,
onMouseClicked: function(e) {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
// Add a clip and rotate
clip: c;
rotate: 90; 45
}
Deployment Basics

46
Java SE 6 Update 10

• Unification of Java Web Start and applets

> Ground-up rewrite of the support for applets in the web
browser
> Applets are no longer executed in a Java virtual machine
(JVM) inside the web browser
> Instead, a separate JVM process is launched to execute
the applets
> By default, only one JVM is launched
> Same resource consumption and sharing properties as the
“classic” Java Plug-In
> Opportunity to launch more than one JVM
47
> To support per-applet command-line arguments, heap size
requests, and more
HelloWorld.jnlp
<jnlp href="HelloWorld.jnlp">
<information>...
</information>
<resources>
<j2se version="1.6+" href=
"http://java.sun.com/products/autodl/j2se" />
<jar href="HelloWorld.jar" main="true" />
<jar href="javafxrt.jar" />
<jar href="javafxgui.jar" />
<jar href="Scenario.jar" />
</resources>
<application-desc main-class="HelloWorld">
</application-desc>
</jnlp>

48
TestApplet.fx
import javafx.gui.*;
Application {
content: Canvas {
background: Color.BLACK
content: [
Rectangle {
width: 50
height: 50
fill: Color.CRIMSON
}, Text {
content: "Hello World"
x: 25
y: 35
fill: Color.WHITE
font: Font { size:32 }
}
]
49
}
}
test.jnlp (applet)
<jnlp href="test.jnlp">
<information>...
</information>
<resources>
<j2se version="1.6+" href=
"http://java.sun.com/products/autodl/j2se" />
<jar href="TestApplet.jar" main="true" />
<jar href="javafxrt.jar" />
<jar href="javafxgui.jar" />
<jar href="Scenario.jar" />
</resources>
<applet-desc
name=test
main-class="javafx.gui.Applet"
width=500
height=500>
</applet-desc>
50
</jnlp>
test.html
<html>
<head>
<title>FX Script Applet Test</title>
</head>

<body bgcolor="#000000">
<h1>FX Script Applet Test</h1>
<center>
<applet width="640" height="480">
<param name="jnlp_href" value="test.jnlp">
<param name="ApplicationClass"
value="TestApplet">
</applet>
</center>
</body>
</html>
51
Summary
• We have learned how to Develop Java FX
applications
> Use the JavaFX SDK
> Work with NetBeans IDE
> Use JavaFX Script projects
> Integrate SceneGraph, Animation and media
• Deploy Java FX applications
> as JNLP
> as applets
52
For More Information
• http://openjfx.dev.java.net
• http://javafx.netbeans.org

53
Thank You!
Raghavan “Rags” N. Srinivas
rags@sun.com
Sun Microsystems

54
54