JavaFX 2.0
Weiqi Gao, February 9, 2012
St. Louis Java Users Group
Thursday, February 9, 12
About The Presenter
Java developer since 1998
Principal Software Engineer at OCI
Co-author of Pro JavaFX 2 Platform
Steering committee of St. Louis JUG
Loud on the Internet at http://
www.weiqigao.com/blog and @weiqigao
Thursday, February 9, 12
Agenda
A little history
A little architecture
A lot of technologies
A lot of demos, code samples have more
details
Questions & Answers
Thursday, February 9, 12
History
JavaFX 1.0 (12/08, JavaFX Script, Win, Mac)
JavaFX 1.1 (02/09, Mobile)
JavaFX 1.2 (06/09, Linux/Solaris, Charting)
JavaFX 1.3 (04/10, End of line for 1.x)
JavaFX 2.0 (10/11, Java API, WebView, FXML)
JavaFX 2.1 (RSN, Mac support)
Thursday, February 9, 12
Architecture
Departure from AWT/Swing
Emphasizes GPU, Media, HTML5
Very regular public API (ScalaFX, GroovyFX,
KawaFX, etc.)
Thursday, February 9, 12
Scene Graph
The JavaFX runtime gives you a Stage
You give the Stage a Scene
You give the Scene a Node that is a Parent
That Parent is the root of a tree of Nodes
(the scene graph)
You tell the Stage to show()
Thursday, February 9, 12
SceneGraphExample
Thursday, February 9, 12
The Application Class
You extend it in order to be injected a Stage
Lifecycle methods: init(), start(), stop(); only
start() is abstract and must be overridden
Static methods launch(args), launch(appClass,
args)
Static methods getHostServices(),
getParameters(),
notifyPreloader(preloaerNotification)
Thursday, February 9, 12
ApplicationExample
java com.weiqigao.stlouisjug.ApplicationExample --arg1=val1 --arg2=val2 -arg3 arg4
Constructor called in "JavaFX-Launcher" thread
init() called in "JavaFX-Launcher" thread
named parameters = {arg2=val2, arg1=val1}
unnamed parameters = [-arg3, arg4]
start() called in "JavaFX Application Thread" thread
JavaFX application launcher: calling System.exit
stop() called in "JavaFX Application Thread" thread
Thursday, February 9, 12
The Platform class
isFxApplicationThread()
isSupported(ConditionalFeature)
exit()
runLater(Runnable)
Thursday, February 9, 12
The Stage Class
Properties: title, fullScreen, iconified,
resizable
Owns a Scene
Styles: DECORATED, UNDECORATED,
TRANSPARENT, UTILITY
Modality: NONE, WINDOW_MODAL,
APPLICATION_MODAL
toFront(), toBack(), show()
Thursday, February 9, 12
StageCoach Example
Thursday, February 9, 12
The Scene Class
ReadOnlyProperties: x, y, width, height,
window
Properties: root, fill, cursor, camera,
eventDispatcher
Many events: keyboard, mouse, drag&drop,
context menu, input methods
root must be set to Parent (which is a Node)
Thursday, February 9, 12
OneTheScene Example
Thursday, February 9, 12
The root in a Scene
The root must be a Parent
The Parent is a Node
The Parent has four direct subclasses
Group is just a container
Region lays out its content
Controls are UI controls and skinnable
WebView is, what else, a WebView
Thursday, February 9, 12
CenterUsingBind Example
Text text = new Text("JavaFX Reversi");
text.setTextOrigin(VPos.TOP);
text.setFont(Font.font(null, FontWeight.BOLD, 18));
Scene scene = new Scene(new Group(text), 400, 100);
text.layoutXProperty().bind(scene.widthProperty().subtract(text.prefWidth(0))
.divide(2));
text.layoutYProperty().bind(scene.heightProperty().subtract(text.prefHeight(0))
.divide(2));
Thursday, February 9, 12
Layout
Layout classes are called Panes in JavaFX
They all extend Region
StackPane, TilePane, FlowPane, HBox, VBox,
GridPane, AnchorPane
Extend Region to create custom layout
Thursday, February 9, 12
Layout Examples
CenterUsingStack
Custom Region
AlignUsingStackAndTile
Thursday, February 9, 12
Controls
Label, Button, RadioButton, ToggleButton
CheckBox, ChoiceBox
TextField, PasswordField, TextArea, Hyperlink
ScrollBar, ScrollPane, Slider, ProgressBar
ListView, TableView, TreeView, HTMLEditor
TabPane, SplitPane, TitledPane, Accordion
MenuBar, MenuButton, ContextMenu, ToolBar
Tooltip, Separator, ProgressIndicator and more
Thursday, February 9, 12
StarterApp Example
Thursday, February 9, 12
Thursday, February 9, 12
Thursday, February 9, 12
Thursday, February 9, 12
Thursday, February 9, 12
The WebView
Thursday, February 9, 12
Shapes and Paths
Shapes: Line, PolyLine, Polygon, Rectangle,
Arc, Circle, Ellipse, QuadCurve, CubicCurve,
Path, SVGPath
PathElements: MoveTo, LineTo, HLineTo,
VLineTo, ArcTo, QuadCurveTo, CubicCurveTo,
ClosePath
ArcType, StrokeType, StrokeLineJoin,
StrokeLineCap, FillRule
Thursday, February 9, 12
TrigonometryExample
Thursday, February 9, 12
LissajousCurveExample
Thursday, February 9, 12
Charts
BarChart
XYChart: BarChart, LineChart, AreaChart,
ScatterChart, BubbleChart
Title, Legend, Axis<X>, CategoryAxis,
ValueAxis, NumberAxis
Series, BarChart.Data, XYChart.Data
Thursday, February 9, 12
Chart Examples
Thursday, February 9, 12
Audio and Video
Supported formats: mp3, aif, aiff, wav, fxm,
flv
VP6 video with MP3 audio
Metadata
In memory uncompressed AudioClip
Media, MediaPlayer, MediaView
Audio equalization
Thursday, February 9, 12
Audio Player Example
Thursday, February 9, 12
Effects
Can apply to any Node
Shadow, PerspectiveTransform, ColorInput,
Bloom, Lighting, Glow, DropShadow,
ImageInput, MotionBlur, SepiaTone,
Reflection, GaussianBlur, Blend, InnerShadow,
BoxBlur, ColorAdjust, DisplacementMap
Thursday, February 9, 12
VanishingCircle Example
Thursday, February 9, 12
Transforms
Can apply to any Node
Translate, Scale, Rotate, Affine, Shear
Can apply more than one transforms
(composition)
Convenience properties: translateX, scaleX,
etc.
Thursday, February 9, 12
Observable
Thursday, February 9, 12
Properties
Observable: InvalidationListener (lazy)
ObservableValue: ChangeListener (ov, old,
new)
ReadOnlyProperty, Property: Boolean,
Integer, Long, Float, Double, String, Object
Owner, name
Thursday, February 9, 12
JavaFX 2.0 Beans
public class Foo {
private IntegerProperty bar = new SimpleIntegerProperty(this, “bar”, 0);
public final int getBar() {
return bar.get();
}
public final void setBar(int newValue) {
bar.set(newValue);
}
public IntegerProperty barProperty() {
return bar;
}
}
Strategies for avoiding unnecessary
instantiations of properties objects: wait
until...
Thursday, February 9, 12
Bindings
Propergate changes
foo.barProperty().bind(baz.quuxProperty());
foo.barProperty().bindBidirectional(baz.quuxP
roperty());
unbind(), unbindBidirectional()
Factory methods in Bindings class
Fluent Interface API
Thursday, February 9, 12
HeronsFormulaExample
DoubleProperty a = new SimpleDoubleProperty(0);
DoubleProperty b = new SimpleDoubleProperty(0);
DoubleProperty c = new SimpleDoubleProperty(0);
DoubleBinding s = a.add(b).add(c).divide(2.0D);
final DoubleBinding areaSquared = new When(a.add(b).greaterThan(c)
.and(b.add(c).greaterThan(a))
.and(c.add(a).greaterThan(b)))
.then(s.multiply(s.subtract(a))
.multiply(s.subtract(b))
.multiply(s.subtract(c)))
.otherwise(0.0D);
Thursday, February 9, 12
Observable Collections
ObservableList, ListChangeListener,
ListChangeListener.Change (rich information)
ObservableMap, MapChangeListener,
MapChangeListener.Change (not so rich)
FXCollections is similar to Collections
It has factory methods for ObservableList
and ObservableMap, and utility methods for
ObservableList that generate one Change
Thursday, February 9, 12
Threading
The “main” thread
The “JavaFX-Launcher” thread
The “JavaFX Application Thread” thread
The “QuantumRenderer-0” thread
The “JFXMedia Player EventQueue” thread
The pulse event synchronizes scene to
rendering engine. It’s throttled at 60/s
Thursday, February 9, 12
JavaFXThreadsExample
Thursday, February 9, 12
Worker Threading
Worker interface has properties: title,
message, running, state, totalWork,
workDone, progress, value, exception
Properties are published on the JavaFX
Application Thread
Task<V> and Service<V> abstract classes
implements the Worker interface
Task is one use only, Service can be reused
READY, SCHEDULED, RUNNING, SUCCEEDED,
CANCELED, FAILED
Thursday, February 9, 12
WorkerAndTaskExample
ServiceExample
Thursday, February 9, 12
Animation
KeyFrame based Timeline animation
Interpolation.LINEAR, EASYIN, EASEOUT
cycleCount, repeat properties of Timeline
TimelineBuilder.create()
.keyFrames(
new KeyFrame(Duration.seconds(0), new KeyValue(a, 2)),
new KeyFrame(Duration.seconds(3), new KeyValue(a, 6))
)
.build()
.play();
Thursday, February 9, 12
Transitions
Convenient animations
RotateTransition, FadeTransition,
PauseTransition, PathTransition,
StrokeTransition, TranslateTransition,
ParallelTransition, ScaleTransition,
SequentialTransition, FillTransition
Thursday, February 9, 12
Styling with CSS
Load CSS files from the class path:
URL css = getClass().getResource("my.css");
scene.getStylesheets().add(css.toString());
All CSS rules apply, all styles start with -fxnode.setId(“a”)
node.getStyleClass().add(“b”)
caspian.css from the jfxrt.jar is your friend
Thursday, February 9, 12
FXML
XML representation of JavaFX 2.0 scene
graph
FXML can be hooked up to Controller classes
to effect behavior
Do you want to write XML by hand? I don’t
But it will be a boon for the SceneBuilder
Thursday, February 9, 12
Load FXML, Get Node
Parent root = FXMLLoader.load(getClass().getResource("AdoptionForm.fxml"));
<StackPane prefWidth="400" prefHeight="500" xmlns:fx="http://javafx.com/fxml"
fx:controller="com.projavafx.fxml.AdoptionFormController">
<children>
<ImageView>
<image>
<Image url="@cat.jpg" requestedWidth="800" requestedHeight="800"
preserveRatio="true"/>
</image>
<effect>
<ColorAdjust brightness="0.1">
<input>
<GaussianBl...
Thursday, February 9, 12
Deployment
Java app, Java Webstart, Java applet
The Java Deployment Toolkit is recommended
Source it from http://java.com/js/dtjava.js
or host it from your own site
NetBeans 7.1 makes all of these easy
javafxpackager.exe and ant-javafx.jar
Thursday, February 9, 12
Useful Resources
javafx.com (Official site: new releases, API
docs, examples)
JavaFX forums (Official support)
fxexperience.com (Richard Bair, Jasper Potts,
Jonathon Giles from JavaFX team)
blog.netopyr.com (Mike Heinrich’s blog)
javafxpert.com (Jim Weaver’s blog)
Thursday, February 9, 12
Useful Resources (Cont.)
amyfowlersblog.blogspot.com (Amy Fowler’s
blog, layouts, etc.)
steveonjava.com (Stephen Chin’s blog)
pleasingsoftware.com (Dean Iversion’s blog,
GroovyFX, etc.)
efxclipse.org (e(fx)clipse, JavaFX 2 plugin for
Eclipse)
Thursday, February 9, 12
Useful Resources (Cont.)
groovyfx-project.github.com (GroovyFX)
code.google.com/p/scalafx/ (ScalaFX)
code.google.com/p/visage/ (Visage, formerly
JavaFX Script)
www.javafxdata.org (DataFX)
jfxtras.org (JFXtras, extra stuff for JavaFX)
Thursday, February 9, 12
Q&A
Thursday, February 9, 12