1.
JavaFX
Paul Bakker

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

3.
Outline
Video
Deployment
Mobile
Production Suite
Web Services API

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

5.
Platform Support
MacOS
Windows
Linux / Solaris on the way

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

7.
Video
Native codec support
Cross platform FLV

8.
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

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

10.
FXM
Video: On2 VP6
Audio: MP3

11.
Using Video
Media
MediaPlayer
MediaView

12.
Media
var media = Media {
source: quot;file:///Users/paul/21.aviquot;
}
MediaPlayer
var player = MediaPlayer {
media: media
autoPlay:true
}

13.
MediaView
Stage {
title: quot;Video demoquot;
width: bind media.width
height: bind media.height
scene: Scene {
content: MediaView {
mediaPlayer: player
}
}
}

14.
Media
SimpleVideo
VideoPerformance

15.
Skins
Styling components
using external
CSS
style sheets

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

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

18.
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

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

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

21.
One
root object
Stage {
title: quot;Application titlequot;
width: 250
height: 80
scene: Scene {
content: []
}
}

22.
Applet
<script src=quot;http://dl.javafx.com/dtfx.jsquot;></script>
<script>
javafx(
{
archive: quot;JavaFXDemo.jarquot;,
draggable: true,
width: 800,
height: 600,
code: quot;awsdemo.AmazonBrowserquot;,
name: quot;JavaFXDemoquot;
}
);
</script>

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

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

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

26.
Frame styles
Decorated (standard)
Undecorated
Transparent

27.
Applets
WindowStyles
JavaScriptDemo

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

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

30.
Transitions
Predefined animations
FadeTransition
ParallelTransition
PathTransition
PauseTransition
RotateTransition
ScaleTransition

31.
Animation

32.
Mobile
February 2009
Write Once, Run
Everywhere

33.
Not supported
Effects (reflection etc.)
Opacity
Video

34.
Mobile

35.
Production Suite
Designer => Developer
Workflow

36.
Web Services
HTTPRequest
REST style services
PullParser
JSON & XML

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

38.
XML PullParser
if(event.qname.name == quot;Itemquot; and event.type ==
PullParser.START_ELEMENT) {
product = new Product();
}
else if(event.qname.name == quot;Titlequot;) {
product.title = event.text;
}
else if(event.qname.name == quot;Itemquot; and event.type ==
PullParser.END_ELEMENT) {
insert product into products;
}

39.
Web Services
Amazon Demo

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

41.
Current problems
No components!
No layout managers
No selectable text

42.
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?

43.
JavaFX.com

44.
The RIA war

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