An introduction to JavaFX as delivered to the Chicago Java Users Group in 2010

1. JavaFX for Java Developers
Sten Anderson

2. Introduction
Senior Consultant for Citytech, Inc.
Software consultancy specializing in Java Enterprise Application Development
Sun Preferred Solution Provider for JavaFX
Located here in Chicago

3. What is JavaFX?
•Platform for developing Rich Internet Applications
•Runs on the Java Platform
•Consists of:
•Runtimes for Desktop, Mobile, and TV
•SDK (APIs, javafxc, etc.)
•Declarative Language (JavaFX Script)
•JavaFX is purely client side technology

4. An Applet by Any Other Name…

8. The Scenegraph
Node Group
Stage
Scene
Node
Node Node Node

9. Increasingly Rich API
Graphics primitives (shapes, and Images)
Animations
Media Support
UI Controls (widgets)

10. In Practice, JavaFX = JavaFX Script

11. JavaFX and Java: BFF
JavaFX compiles down to Java bytecode
JavaFX can call into Java and (somewhat) vice versa
JavaFX classes can extend Java classes or interfaces
Many shared language features: classes, exception handling, access
modifiers, package structure, and data types.

12. JavaFX Promotes “Ease of Development”
…and you can‟t spell “Ease of Development” without “Develop”[er]

13. Modern Language Features
Expression-based Language (most things return a value)
Declarative Syntax
Type Inference
Data Binding
Mixins
Closures/first-class functions
Triggers
Ranges
Extra Datatypes
• Duration (5s, 5000ms)
• Sequences

14. public class Main {
public static void main(String[] args) {
JFrame frame = new JFrame("Swing Frame");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
JPanel panel = new JPanel();
JButton button = new JButton("Click me!");
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
System.out.println("Clicked!");
}
});
panel.add(button);
frame.add(panel, BorderLayout.CENTER);
frame.setSize(new Dimension(300, 100));
frame.setVisible(true);
}
}
Java

15. Stage {
title: "JavaFX Frame"
width: 300
height: 100
scene: Scene {
content:
Flow {
width: 300
hpos: HPos.CENTER
content:
Button {
text: "Click me!"
action: function () { println ("Clicked!") }
}
}
}
}
JavaFXJava

16. public class Main {
public static void main(String[] args) {
JFrame frame = new JFrame("Swing Frame");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
JPanel panel = new JPanel();
JButton button = new JButton("Click me!");
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
System.out.println("Clicked!");
}
});
panel.add(button);
frame.add(panel, BorderLayout.CENTER);
frame.setSize(new Dimension(300, 100));
frame.setVisible(true);
}
}
Java

17. Stage {
title: "JavaFX Frame"
width: 300
height: 100
scene: Scene {
content:
Flow {
width: 300
hpos: HPos.CENTER
content:
Button {
text: "Click me!"
action: function () { println ("Clicked!") }
}
}
}
}
JavaFXJava

18. JButton button = new JButton("Click me!");
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
System.out.println("Clicked!");
}
});
Java

19. Button {
text: "Click me!”
action: function () { println ("Clicked!") }
}
JavaFX

20. Data Binding
Circle {
centerX: width / 2
centerY: height / 2
radius: bind slider.value
}

21. Type Inference
Boolean b = new Boolean (false);
var b = false;
or…
var b:Boolean = false;
Java
JavaFX

22. Arrays vs Sequences
int[] zeroToNine = new int[10];
for (int i = 0; i < 10; i++) {
zeroToNine[i] = i;
}
var zeroToNine = for (i in [0..<10]) i;
or…
var zeroToNine = [0..9];
Java
JavaFX

23. Sequence Slicing with Predicates
> var zeroToNine = [0..9];
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
> var onlyOdds = zeroToNine[i | i mod 2 == 1];
[ 1, 3, 5, 7, 9 ]

24. A DSL for Building User Interfaces

25. Animation
Timeline {
autoReverse:true
keyFrames: [
at (0s) { curOpacity => 0.0 tween Interpolator.EASEBOTH }
at (1s) { curOpacity => 0.2 tween Interpolator.EASEBOTH }
at (2s) { curOpacity => 1.0 tween Interpolator.EASEBOTH }
]
}

26. Transitions: Animation Simplified
Translate
Scale
Fade
Parallel
Sequence
Rotate
Pause
Path

27. FadeTransition {
node: circle
toValue: 1.0
duration: 1s
}.play();

28. ScaleTransition {
node: circle
toX: 1.0
toY: 1.0
duration: 1s
}.play();

29. TranslateTransition {
node: circle
toX: 100
toY: 100
duration: 1s
}.play();

30. ParallelTransition {
node: circle
content: [fade, scale, translate]
}.play();

31. SequentialTransition {
node: circle
content: [fade, scale, translate]
}.play();

32. You Can‟t Spell “JavaFX” without…er…”Effects”…?
Reflection
Lighting
Glow
ColorAdjust
Shadows
Blurs
PerspectiveTransform

33. Demo Time!

34. Tool Support

35. Netbeans

36. Eclipse

37. Courtesy of http://learningjavafx.com/2009/08/poll-3

38. JavaFX Composer

39. Adobe Illustrator

40. JavaFX in the Wild

41. Indaba Session Console

43. vancouver2010.com

48. Those Apps Sure Were Swell…
…but Can I write Enterprise Apps in JavaFX?

49. JavaFX v1.1: List of Controls
TextBox

50. JavaFX v1.2: List of Controls
TextBox
Button
CheckBox
Hyperlink
Label
ListView
ProgressBar
ProgressIndicator
RadioButton
ScrollBar
Slider
TextBox
ToggleButton
Charts

51. JavaFX v1.3: (Tentative) List of Controls
TextBox
Button
CheckBox
Hyperlink
Label
ListView
ProgressBar
ProgressIndicator
RadioButton
ScrollBar
Slider
TextBox
ToggleButton
Charts
TreeView
ChoiceButton
PasswordBox
MenuButton
SplitMenuButton
Menus
ToolBar
Multiline TextBox
Horizontal ListView
Popup
Tooltip

52. Style-able Controls
Image Courtesy of Dean Iverson at pleasingsoftware.blogspot.com

53. Well Can‟t I Just Integrate JavaFX and Swing?
JavaFX 1.1 + Swing JavaFX 1.2 + Swing JavaFX 1.2 (no Swing)

54. Web Services

55. HttpRequest {
location: “http://developer.echonest.com/api/get_similar?id=1232”
onException: exception
onDone: done
onInput: readResponse
}.connect();

56. function readResponse(in:InputStream) {
PullParser {
input: in
documentType: PullParser.XML
onEvent: function (e:Event) {
if (e.type == PullParser.TEXT) {
processTextEvent(e);
}
}
}.parse();
}

57. Exadel Flamingo

60. The Future
Next Release: Early „10
More Controls
CSS Styling of controls
Faster scenegraph
Designer Tool (Composer?)
(This image is likely subject to copyright)

61. Books!

62. …and due out any day now…

63. Final Thoughts: The Tipping Point for JavaFX

64. Bonus Final Thoughts: It‟s all about Usability
“The basic advice regarding response times has been about the same
for thirty years:
•0.1 second is about the limit for having the user feel that the system is
reacting instantaneously, meaning that no special feedback is necessary
except to display the result
•1.0 second is about the limit for the user's flow of thought to stay
uninterrupted, even though the user will notice the delay. Normally, no
special feedback is necessary during delays of more than 0.1 but less than
1.0 second, but the user does lose the feeling of operating directly on the
data”
- Jakob Nielsen (noted Usability Expert)

65. Questions?