1. JavaFX: Incorporating Media
and animation
Raghavan N. Srinivas
Technology Evangelist
Sun Microsystems, Inc. 1

2. Speaker
> Rags
● CTO, Technology Evangelism
● Developing and deploying Java apps. for a decade
(trying to anyway)
● HOL track lead for JavaOne; Author of JavaFX
HOL for JavaOne 2007 and 2008
2

3. Agenda
• JavaFX Platform Overview
• JavaFX Script Language features
> Binding
> Animation
> Media
> JavaFX Script from Java
• Java SE 6 update 10 and Deployment basics
• Tools, Summary and References
3

4. JavaFX Vision
JavaFX is THE platform for creating and delivering
Rich Internet Applications
across all the screens of your life
JavaFX is Powered by Java
4

5. JavaFX roadmap
Desktop Product Line JavaFX Desktop
(Fall 2008)
Mobile Product Line JavaFX Mobile
(Spring 2009)
JavaFX TV
TV Product Line (Summer 2009)
Other Platforms With Partner platforms/OSs
5

6. JavaFX Script Programming Language
• Declarative, statically-typed scripting language
• Facilitates rapid GUI development
• Many cool, interesting language features
• Runs on Virtual Machine for the Java™ platform
• Deployment options same as Java programs
• Fully utilizes Java class libraries behind the scenes
• For content designers and Media engineers
• binding – the swiss army knife
6

7. Timing, Jgoodies Framework
public ControlPanel(AnimationView animationView) {
this.animationView = animationView;
setLayout(new GridBagLayout());
intFormat = NumberFormat.getNumberInstance();
intFormat.setParseIntegerOnly(true);
doubleFormat = NumberFormat.getNumberInstance();
setupCycleGUI();
setupEnvelopeGUI();
setupPropertySetterGUI();
setupAccelerationGUI();
setupActionsGUI();
// Animation View
JPanel panel = new JPanel(new BorderLayout());
panel.add(animationView);
...
}
7

8. JavaFX code : Animation for everyone else
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]
}
]
}; 8

9. How to get started: Software Requirements
• Java SE 6 Update 10 SDK
• NetBeans IDE 6.1 with JavaFX Plugin OR pre-
bundled NetBeans IDE 6.1 with JavaFX
• JavaFX Preview SDK (Already bundled with the
plugin)
• Mozilla Firefox 3, Safari, Internet Explorer or
Google Chrome
9

10. NetBeans IDE 6.1
• JavaFX Plugin for NetBeans IDE 6.1 OR pre-
bundled NetBeans IDE 6.1 for JavaFX
> Support development cycle
● edit, compile, run, test
> JavaFX project system
> Includes automatic installation of JavaFX Preview SDK
10

11. Components – JavaFX Preview SDK
/lib
javafxc.jar
/docs javafxrt.jar
javafxgui.jar /bin
javafx-swing.jar javafxc.exe
Scenario.jar javafx.exe
Decora-D3D.jar
/samples Decora-HW.jar
SmokeScreenSample jmc.jar
StopWatch jogl.jar
jaxb*.jar
11

12. Command Line Development
• 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
● javafxc Main.fx
● javafx Main
12

13. Agenda
• JavaFX Platform Overview
• JavaFX Script Language features
> Binding
> Animation
> Media
> JavaFX Script from Java
• Java SE 6 & Deployment Basics
• Summary and References
13

14. Binding in JavaFX Script
> Cause and Effect—Responding to change
> The JavaFX Script 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
14

15. Example: Binding in JavaFX Script
import javafx.application.*;
import javafx.ext.swing.*;
Frame {
var a: String = quot;namequot;;
title: quot;Hello Worldquot;
width: 400
stage: Stage {
content: ComponentView {
component: BorderPanel {
bottom: TextField { text: bind a with inverse}
top: Label { text: bind quot;Hello {a}quot; }
}
}
}
visible: true
}
15

16. More Binding Examples
public class User {
public attribute userid: String;
public attribute password: String;
}
// Create sequence
var users = [
User {userid: quot;ragsquot; password: quot;everestquot; },
User {userid: quot;sridharquot; password: quot;hyderabadquot; },
User {userid: quot;inyoungquot; password: quot;koreaquot; },
];
// Bind list to sequence of users
var list = List{items: bind for (user in users)
ListItem {text: bind quot;{user.userid}quot;}};
16

17. Agenda
• JavaFX Platform Overview
• JavaFX Script language features
> Binding
> Animation
> Media
> JavaFX Script from Java
• Java SE 6 & Deployment basics
• Summary and References
17

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

19. Animation
• Timelines handles the animation in JavaFX
• Timelines are first-class citizen in the language
along with the duration time constants (1s, 10s)
• They can have one or more KeyFrames
• Methods: start(), stop(), pause(), resume()
• Properties: autoReverse, repeatCount, toggle
• BigDeal: Timelines are nestable!
19

20. 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]
}
]
}; 20

21. 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 :-))
21

22. Animation Controls
var buttons =
FlowPanel {
content: [
Button {
text: quot;Startquot;
action: function():Void { t.start(); }
},
Button {
text: quot;Stopquot;
action: function():Void { t.stop(); }
},
Button {
text: quot;Pausequot;
action: function():Void { t.pause(); }
}
]
};
22

23. JavaFX Animation demo
23

24. Agenda
• JavaFX Platform Overview
• JavaFX Script language features
> Binding
> Animation
> Media
> JavaFX Script from Java
• Java SE 6 & Deployment basics
• Summary and References
24

25. Design Goals
• Media Playback is of primary importance
• Simple API: only a few lines of coded needed
• Cross platform A/V format required
• Native support also desirable
> “Mash ups”
> Viewing local media
• Zero Configuration plug in support
> Drop in format support
• Going beyond rectangular video
> Support lightweight rendering
> Integration with Scenegraph, FXScript, and 3D APIs
25

26. Architectural Overview, JMC
• Java Media Components
> JMediaPlayer
● A JComponent that provides media playback
> JMediaPane
● A JComponent that provided media playback
without UI controls
> MediaProvider
● Low level media player
> Media Class
● For getting information about the media
– Tracks
– Metadata
> Events and Exceptions
26

27. Code Sample: Java Player
class MediaDemo extends JFrame {
MediaDemo() {
JmediaPlayer mediaPlayer;
try {
mediaPlayer = new JMediaPlayer(
new URI(quot;movie.movquot;));
} catch (Exception e) {
System.out.println(quot;Error opening mediaquot; + e);
System.exit(0);
}
add(mediaPlayer);
mediaPlayer.play();
setVisible(true);
} ...
27

28. Media - javafx.scene.media.*
MediaPlayer
media
Media
autoPlay
source MediaView
volume
resolutionX fullScreen
REPEAT_FOREVER
resoultionY mediaPlayer
clip
rotate
transform
effect
28

29. Media in JavaFX
• Media classes are part of javafx.scene.media
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.
• Other media events may be triggered
29

30. 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;
}
30

31. JavaFX Media demo
31

32. Agenda
• JavaFX Platform Overview
• JavaFX Script language features
> Binding
> Animation
> Media
> JavaFX Script from Java
• Java SE 6 & Deployment basics
• Tools, Summary and References
32

33. Code Sample: JavaFX™ from Java
// evaluate the FX script
Object fxobject = scrEng.eval(script.toString());
// you could use the FXAdapter method
// or use pure reflection
Method method=
fxobject.getClass().getMethod(quot;getJComponentquot;);
JComponent component = (Jcomponent)
method.invoke(fxobject);
frame.add(component);
33

34. Agenda
• JavaFX Platform Overview
• JavaFX Script language features
> Binding
> Animation
> Media
> JavaFX Script from Java
• Java SE 6 & Deployment basics
• Tools, Summary and References
34

35. Consumer JRE
Project Hamburg
Java SE 6, Update X
Java SE 6, Update N
Java SE 6, Update 10
35

36. Features
• Java Quick Starter
> Faster cold starts on most systems
• Java Kernel
> Shorter download + install + launch times
• Deployment Toolkit
> Simplifies using Java technology in a web browser
36

37. Quickstarter
• “Coldstart” vs. “Warmstart”
• Root problem:
> Large files + Disk access speed
• Solution: QuickStarter
> Pre-warm the disk cache
• Note: QuickStarter != running VM
> Smaller footprint, more targeted disk pages
37

38. Install Time
• Java's not small
> J2SE 5.0: 7.1 MB
> Java SE 6: 10+ MB
> rt.jar: 40+ MB on disk
• Lots of bits being moved around
> Download, Unzip, Unpack200, Copying
• Solution: Java Kernel
> Download only core dependencies first
> Launch application
> Download and install in the background
38

39. JRE sizes
39

40. Look Mom! We Shrunk the JRE
40

41. Architectural Overview
Java Applet 1
Java Applet 2
HTML-Webpage Java Applet 3
41

42. Architectural Overview
Fat Client JVM 1
OS Process 2
Thin Server JVM
OS Process 1
Fat Client JVM 2
OS Process 3
42

43. Applets Reloaded
• Ground-up rewrite of the Java Plug-In
> Mostly in Java
• Advanced new architecture
> Out-of-process execution
• Major benefits
> Improved reliability
> Support for larger Java heap sizes for applets
> Better support for signed applets on Windows Vista
> Support for per-applet JVM command-line arguments
> Support for multiple simultaneous JRE versions
43

44. Agenda
• JavaFX Platform Overview
• JavaFX Script Language features
> Binding
> Animation
> Media
> JavaFX Script from Java
• Java SE 6 & Deployment basics
• Tools, Summary and References
44

45. Ajax and Java compared (for RIA)
Ajax Java
• Javascript-based • Java-based
• No plugins • Plugins required
• Simple effects, transition • Complex effects,
and windows transition, windows
• Does not work in • Can work in
disconnected mode disconnected mode
• Mobile phones? • Plans for mobile phones
• Designer/Developer • Designer/Developer
delineation is blurred delineation can be clear
45

46. JavaFX Preview SDK
• JavaFX Preview SDK since 31st July 2008
> http://openjfx.java.sun.com
> http://www.javafx.com
> available for Windows and MacOS
• NetBeans 6.1 IDE and JavaFX Plugin
> Available now and since 31st July 2008
• Desktop SDK 1.0 later this year
• Project Nile
46

47. Project Nile (Designer + Developer)
• Photoshop and Illustrator plugins
• FXD File Format
• FXD Viewer
• SVG Converter
• Designer / Developer Collaboration
47

48. JavaFX Summary
• JavaFX is a Platform for creating rich internet
applications (RIA) with immersive media and
content, across all the screens of your life
• JavaFX has familiarity with Java developers
aimed at designers
• Easier to write UI and Graphics programs
• Timelines make animations very easy
• Binding and other features make it easier
• Possible to use JavaFX Script in Java
• Java SE 6 update 10 is the deployment platform
48

49. JavaFX References
• http://javafx.com/
• https://openjfx.dev.java.net/
• http://openjfx-compiler.dev.java.net
• http://scenegraph.dev.java.net
• http://java.sun.com/javafx/
• http://java.sun.com/javafx/tutorials /project_nile_integrating_graphics/
• http://openjfx.java.sun.com/current-build/doc/index.html
• http://www.netbeans.org
49

50. Thank You!!
Raghavan N. Srinivas
Incorporating Media and
animation into JavaFX and
Java
rags@sun.com
50