JavaFX
Paul Bakker

About me
Paul Bakker
EJB 3
Trainer Info Support
JSF
NLJUG speaker Seam
Java Magazine author JavaFX
Spring
Hibernate
Flex

Outline
Video
Deployment
Mobile
Production Suite
Web Services API

One minute intro
JavaFX is Sun’s RIA platform
Competes with Flex, Flash and Silverlight
A new language
JavaFX Script
Declarative UI programming

Platform Support
MacOS
Windows
Linux / Solaris on the way

Runtimes
JRE 6 update 11 recommended
Performance
Drag-able applets
Stability
Download size
Runs on JRE 5

Video
Native codec support
Cross platform FLV

Native codecs
Core Video
Video: H.261, H.263, and H.264 codecs
MPEG-1, MPEG-2, and MPEG-4 Video file formats and
associated codecs (such as AVC)
Sorenson Video 2 and 3 codecs
Audio: AIFF, MP3, WAV,MPEG-4 AAC Audio
(.m4a, .m4b, .m4p), MIDI

Native Codecs
DirectShow
Video: Windows Media Video,H264 (as an
update)
Audio: MPEG-1, MP3, Windows Media Audio,
MIDI

FXM
Video: On2 VP6
Audio: MP3

Using Video
Media
MediaPlayer
MediaView

Media
var media = Media {
source: \"file:///Users/paul/21.avi\"
}
MediaPlayer
var player = MediaPlayer {
media: media
autoPlay:true
}

MediaView
Stage {
title: \"Video demo\"
width: bind media.width
height: bind media.height
scene: Scene {
content: MediaView {
mediaPlayer: player
}
}
}

Media
SimpleVideo
VideoPerformance

Skins
Styling components
using external
CSS
style sheets

Skins
Styling components
using external
CSS
style sheets
Not a standard feature yet!

A skinnable button
public class Button extends Control{
public var label : String;
init {
skin = ButtonSkin{}
}
}

The Skin
public class ButtonSkin extends Skin{
public var backgroundColor : Color = Color.BLACK;
public var color : Color = Color.WHITE;
public var arcHeight : Number = 20;
public var arcWidth : Number = 20;
var button : Button = bind control as Button;
init {
scene = {
.... // Draw the control’s UI

The CSS
Button {
backgroundColor: green;
color: black;
arcHeight: 0;
arcWidth: 0;
}
Button.rounded {
arcHeight: 20;
arcWidth: 20;
}

Deployment
Desktop, Browser and Mobile
No code changes
Device specific hooks

One
root object
Stage {
title: \"Application title\"
width: 250
height: 80
scene: Scene {
content: []
}
}

Applet
<script src=\"http://dl.javafx.com/dtfx.js\"></script>
<script>
javafx(
{
archive: \"JavaFXDemo.jar\",
draggable: true,
width: 800,
height: 600,
code: \"awsdemo.AmazonBrowser\",
name: \"JavaFXDemo\"
}
);
</script>

Applet hooks
Specify drag behavior
extensions: [
AppletStageExtension {
onDragStarted: function() {
}
}
]

JavaScript integration
Call JavaScript from Java
var applet = FX.getArgument(\"javafx.applet\") as
java.applet.Applet;
var window : JSObject = JSObject.getWindow(applet);
window.call(\"showProduct\",
[product.name, product.description]);

<script>
function showProduct(name, description) {
var titleElement = document.getElementById('productTitle');
titleElement.innerHTML = name;
var detailsElement =
document.getElementById('productDetails');
detailsElement.innerHTML = description;
}
</script>
<h1 id=\"productTitle\"></h1>
<div id=\"productDetails\"></div>

Frame styles
Decorated (standard)
Undecorated
Transparent

Applets
WindowStyles
JavaScriptDemo

Animation
Timeline
Set of frames
Controls playing
KeyFrame
A moment in time

Defining KeyFrames
KeyFrame {
time: 1s
values: [
imageView.x => 100 tween Interpolator.EASEBOTH
imageView.y => 100 tween Interpolator.EASEBOTH
]
action: function() {
println(“Action executed”);
}
}

Transitions
Predefined animations
FadeTransition
ParallelTransition
PathTransition
PauseTransition
RotateTransition
ScaleTransition

Animation

Mobile
February 2009
Write Once, Run
Everywhere

Not supported
Effects (reflection etc.)
Opacity
Video

Mobile

Production Suite
Designer => Developer
Workflow

Web Services
HTTPRequest
REST style services
PullParser
JSON & XML

Web Service call
Enqueue HTTP Request
Handle input
Parse input
Handle ‘events’

XML PullParser
if(event.qname.name == \"Item\" and event.type ==
PullParser.START_ELEMENT) {
product = new Product();
}
else if(event.qname.name == \"Title\") {
product.title = event.text;
}
else if(event.qname.name == \"Item\" and event.type ==
PullParser.END_ELEMENT) {
insert product into products;
}

Web Services
Amazon Demo

Effects
Effect property at any Node
Including text, video, and images
Lots of standard effects
e.g. DropShadow, Blur, InnerShadow,
Reflection, SepiaTone

Current problems
No components!
No layout managers
No selectable text

Road Map
Februari 2009 => JavaFX Mobile 1.0
JavaOne 2009 => Announcing JavaFX 2.0
Winter 2009 => JavaFX 2.0
Complete new component suite
Swing end-of-life?

JavaFX.com

The RIA war

Shameless plug ;-)
2 day JavaFX course now available
Full JavaFX Script language coverage
Video
Web Services
Animations
Custom components
Production Suite