8/14/2019 TD MXC JavaFX Srinivas
1/54
1
JavaFX : A TechnicalIntroduction
Raghavan Rags N. [email protected] Microsystems
1
8/14/2019 TD MXC JavaFX Srinivas
2/54
8/14/2019 TD MXC JavaFX Srinivas
3/54
3
Goal of the Talk
Learn how to write programs usingJavaFX including SceneGraphs, Animation and Media
8/14/2019 TD MXC JavaFX Srinivas
4/54
4
JavaFX Script Overview
Declarative, statically-typed scripting language withtype inference
Facilitates rapid GUI development Many cool, interesting language features Runs on Java VM Deployment options same as Java Fully utilizes Java class libraries behind the scenes
8/14/2019 TD MXC JavaFX Srinivas
5/54
5
A Basic Java GUI: Not Very Pretty
8/14/2019 TD MXC JavaFX Srinivas
6/54
6
import javax.swing.*;
public class HelloWorldSwing {
public static void main(String[] args) {
JFrame frame = new JFrame("HelloWorldSwing");
final JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();frame.setVisible(true);
}
}
Hello World with Swing
8/14/2019 TD MXC JavaFX Srinivas
7/54
7
import javafx.ui.*;
Frame {
title: "Hello World JavaFX"width: 200height: 50content: Label {
text: "Hello World"
}visible: true}
Hello World with JavaFX
8/14/2019 TD MXC JavaFX Srinivas
8/54
8
Tell me what you want. Not How. Common in Web applications
For example, ease of composing styledtext> HTML vs. JTextPane
HTML Table using JSTL versus JTable JavaFX brings that same ease of use to
Swing and Java 2D API programming
Declarative Syntax
8/14/2019 TD MXC JavaFX Srinivas
9/54
9
JavaFX Simplified Architecture
Graphics hardware
Java 2D
Effects, Animation,Media and
and Timing
Project Scene Graph
JavaFX Script Software
8/14/2019 TD MXC JavaFX Srinivas
10/54
8/14/2019 TD MXC JavaFX Srinivas
11/54
11
SDK and prerequisite software
8/14/2019 TD MXC JavaFX Srinivas
12/54
12
Software Requirements
Java SE 6 Update 10 SDK NetBeans 6.1 Web & Java EE version JavaFX Kit NetBeans plug-in JavaFX SDK (Already bundled with the plugin) Mozilla Firefox 3 beta 5 or higher (for deployment
only)
8/14/2019 TD MXC JavaFX Srinivas
13/54
13
NetBeans IDE JavaFX Plug-in
New plug-in for NetBeans IDE 6.1 Support development cycle
> edit, compile, run, test JavaFX project system Includes automatic installation of JavaFX
SDK
8/14/2019 TD MXC JavaFX Srinivas
14/54
14
Components JavaFX SDK
/docsJavadocs
/libjavafxc.jar
javafxrt.jar
javafxgui.jarScenario.jarDecora-D3D.jarDecora-HW.jar
jmc.jar
jogl.jarjaxb*.jar/samplesSmokeScreenSample
/binjavafxc.batjavafx.bat
8/14/2019 TD MXC JavaFX Srinivas
15/54
15
Command Line Development using
JavaFX SDK include /bin in PATH javafxc to compile javafx to run Relevant library files in /lib are
automatically included in classpath asnecessary. Rest can be included with the
-classpath option> With packages> javafxc -d . simple/Main.fx> javafx simple.Main
> Without packages> javafxc Main.fx
8/14/2019 TD MXC JavaFX Srinivas
16/54
16
First JavaFX Script Application
8/14/2019 TD MXC JavaFX Srinivas
17/54
17
Language and SceneGraphBasics
8/14/2019 TD MXC JavaFX Srinivas
18/54
18
Language Highlights
Declarative Syntax First Class Functions Sequences Binding
8/14/2019 TD MXC JavaFX Srinivas
19/54
19
Declarative Syntax
Loosely based on Scalable Vector Graphics (SVG) Object literal syntax similar to JavaScript Enables fast, easy construction of GUI hierarchy No Swing programming experience required Attributes Triggers
8/14/2019 TD MXC JavaFX Srinivas
20/54
20
Declarative Syntax - Example
import javafx.gui.*;
Frame {title: "Hello World JavaFXwidth: 200height: 50content: Label {
text: "Hello World"
}visible: true
}
8/14/2019 TD MXC JavaFX Srinivas
21/54
21
First Class Functions
No anonymous inner classes! Callbacks made easier
8/14/2019 TD MXC JavaFX Srinivas
22/54
22
First Class Functions - Exampleimport javafx.gui.*;import java.lang.System;
var doExit = function():Void {System.exit(0);
}; var fileItems = [
MenuItem{text:"Exit" action:doExit}];
Frame {title: "JavaFX Demo"menus: [Menu{text:"File" items:fileItems },
Menu{text:"Help"}]content: ...
}
8/14/2019 TD MXC JavaFX Srinivas
23/54
23
Sequences
Arrays on steroids Compared for equality on value Series notation
var days = [1..31];
Slices via syntax and predicate
var week1 = days[0..
8/14/2019 TD MXC JavaFX Srinivas
24/54
24
> Cause and EffectResponding to change> The JavaFX bind operatorAllows dynamic
content to be expressed declaratively
> Dependency-based evaluation of anyexpression> Automated by the systemRather than
manually wired by the programmer
> You just declare dependencies and theJavaFX runtime takes care of performingupdates when things change
> Eliminates listener patterns
Data Binding in JavaFX
8/14/2019 TD MXC JavaFX Srinivas
25/54
25
Binding
The power drill for GUI development Dependency-based evaluation of expressions Enables expression of dynamic data relationships var x = 10; var y = bind x + 100;
x = 50;
y == 150; // true Any expression can be bound> conditionals, loops, functions, calls into Java
methods/constructors
8/14/2019 TD MXC JavaFX Srinivas
26/54
26
import javafx.gui.*;Frame {
var a: String = "name";
title: "Hello World"
width: 400content: BorderPanel {
bottom: TextField { text: bind a with inverse}
top: Label { text: bind "Hello {a}" }
}visible: true
}
Example: Dynamic Behavior
8/14/2019 TD MXC JavaFX Srinivas
27/54
27
More Binding Examples public class User {
public attribute userid: String;public attribute password: String;
}
// Create sequence var users = [User {userid: "rags" password: "everest" },User {userid: "sridhar" password: "hyderabad" },User {userid: "Inyoung" password: "korea" },
];
// Bind list to sequence of users var list = List{items: bind for (user in users)
ListItem {text: bind "{user.userid}"} };
8/14/2019 TD MXC JavaFX Srinivas
28/54
28
GUI Components javafx.gui.*
FrameDialog
Window
ButtonCheckBoxComboBox
LabelList
RadioButtonSlider
ToggleButton
Menu MenuItem TextField
Canvas
BorderPanelFlowPanelGridPanel
Panel
8/14/2019 TD MXC JavaFX Srinivas
29/54
29
JavaFX Scene Graphs
Object literal syntax simplifies defining scenes var scene = Circle {
centerX: 100centerY: 100
radius: 50fill: Color.CRIMSONstroke: Color.INDIGO
strokeWidth: 5};
Frame { title: "Circle"content: Canvas { content:scene }
background: Color.BEIGEvisible: true
}
8/14/2019 TD MXC JavaFX Srinivas
30/54
30
GUI Example 1import javafx.gui.*;
var b1 = Button{name: "Button 1" text: "Button 1"}; var b2 = Button{name: "Button 2" text: "Button 2"}; var b3 = Button{name: "Button 3" text: "Button 3"}; var b4 = Button{name: "Button 4" text: "Button 4"};
var p1 = FlowPanel { content: [b1, b2, b3, b4]hgap: 10vgap: 30
}
var f1 = Frame {name: "Frame 1"content: p1width: 400height: 400
visible: true}
8/14/2019 TD MXC JavaFX Srinivas
31/54
31
Scene Graph Nodes - javafx.gui.*
Group
Node
ArcCircle
CubicCurveEllipse
LinePath
PolygonPolylineQuadCurveRectangle
Text
Shape
Transform
AffineRotateScaleShear
Translate
Hbox
Vbox
ComponentView*ImageView
MediaView
8/14/2019 TD MXC JavaFX Srinivas
32/54
32
Scene Graph Effects -javafx.gui.effect.*
Blend Bloom
ColorAdjust...
Flood GaussianBlur
Glow...
MotionBlur...
Source
8/14/2019 TD MXC JavaFX Srinivas
33/54
33
GUI Example 2 var canvas =
Canvas {background: Color.WHITEcontent:Rectangle {
x: bind x1y: bind y1width: bind wheight: bind hfill: bind coloropacity: bind op
onMouseEntered:function(e) { fader.start(); }onMouseExited:
function(e) { fader.stop(); }}
};
8/14/2019 TD MXC JavaFX Srinivas
34/54
34
Animation Basics
8/14/2019 TD MXC JavaFX Srinivas
35/54
35
Animation - javafx.gui.animation.*
actioncanSkip
time
timelines values
KeyFrame
TimeLine
autoReverse
INDEFINITEkeyFramesrepeatCount
runningtoggle
InterPolator
DISCRETEEASEBOTH
EASEINEASEOUTLINEAR
8/14/2019 TD MXC JavaFX Srinivas
36/54
36
Animation var t = Timeline {
repeatCount: bind repautoReverse: bind autoRevCheckBox.selected toggle: bind toggleCheckBox.selected keyFrames: [KeyFrame {
time: 0msvalues: [
x => 0,y => 0]
},
KeyFrame {time: 2000msvalues: [
x => 200 tween interpolate,y => 200 tween interpolate]
}
]};
8/14/2019 TD MXC JavaFX Srinivas
37/54
37
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 :-))
8/14/2019 TD MXC JavaFX Srinivas
38/54
38
Animation Controls var buttons =
FlowPanel {content: [
Button {text: "Start"action: function():Void { t.start(); }
},Button {
text: "Stop"action: function():Void { t.stop(); }
},
Button {text: "Pause"action: function():Void { t.pause(); }
}]
};
8/14/2019 TD MXC JavaFX Srinivas
39/54
39
Media Basics
8/14/2019 TD MXC JavaFX Srinivas
40/54
40
Architectural Overview, JMC
Java Media Components> JmediaPlayer
> A JComponent that provides media playback with user interfacecontrols
> JMediaPane> A JComponent that provided media playback without UI
controls> MediaProvider
> Low level media player that can render into a graphics object or pass raw data into other rendering systems
> Media Class> For getting information about the media
Tracks: Audio Video and SubTitiles currently supported
8/14/2019 TD MXC JavaFX Srinivas
41/54
41
Media in Java
Cross Platform Video Format Support> Encode once, play anywhere> Over time, multiple formats may be supported
> Sun Open Media Stack (OMS) Leverages native platform
> Windows> Play Windows Media via DirectShow> Flash via the ActiveX control
> Mac> Quicktime and Core Audio/Video.
> Linux and Solaris> GStreamer
8/14/2019 TD MXC JavaFX Srinivas
42/54
42
Code Sample: Java Player
class MediaDemo extends JFrame {MediaDemo() {
JmediaPlayer mediaPlayer;try {
mediaPlayer = new JMediaPlayer(new URI("movie.mov"));
} catch (Exception e) {System.out.println("Error opening media" + e);System.exit(0);
}add(mediaPlayer);
mediaPlayer.play();setVisible(true);
} ...
8/14/2019 TD MXC JavaFX Srinivas
43/54
43
Java API
JMediaPlayer, JMediaPane, and MediaProvider contain typical methods for media playback:> play, pause, setRate, setRepeating, setVolume,
setSource etc.> Player and media are separate objects, rather thenhaving play methods on the media.> Better Beans/Swing/NetBeans integration>
More efficient use of objects in typical scenarios
8/14/2019 TD MXC JavaFX Srinivas
44/54
44
Media in JavaFX
Media classes are part of javafx.gui package Media, MediaPlayer and MediaView
> MediaView is a Node> has a MediaPlayer > MediaPlayer has a Media object.
> MediaView may be rotated, translated, sheared, and havefilter 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
8/14/2019 TD MXC JavaFX Srinivas
45/54
45
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 rotateclip: c;rotate: 90;
}
8/14/2019 TD MXC JavaFX Srinivas
46/54
46
Deployment Basics
8/14/2019 TD MXC JavaFX Srinivas
47/54
47
Java SE 6 Update 10
Unification of Java Web Start and applets> Ground-up rewrite of the support for applets in the web
browser
> Applets are no longer executed in a Java virtual machine(JVM) inside the web browser > Instead, a separate JVM process is launched to execute
the applets
> By default, only one JVM is launched> Same resource consumption and sharing properties as theclassic Java Plug-In
> Opportunity to launch more than one JVM
> To support per-applet command-line arguments, heap sizerequests, and more
8/14/2019 TD MXC JavaFX Srinivas
48/54
48
HelloWorld.jnlp
...
8/14/2019 TD MXC JavaFX Srinivas
49/54
49
TestApplet.fximport javafx.gui.*;
Application {content: Canvas {
background: Color.BLACK content: [
Rectangle {width: 50
height: 50fill: Color.CRIMSON
}, Text {content: "Hello World"
x: 25y: 35
fill: Color.WHITEfont: Font { size:32 }
}]
}}
8/14/2019 TD MXC JavaFX Srinivas
50/54
50
test.jnlp (applet)
...
8/14/2019 TD MXC JavaFX Srinivas
51/54
51
test.html
FX Script Applet Test
FX Script Applet Test
8/14/2019 TD MXC JavaFX Srinivas
52/54
52
Summary
We have learned how to Develop Java FXapplications> Use the JavaFX SDK
> Work with NetBeans IDE> Use JavaFX Script projects> Integrate SceneGraph, Animation and media
Deploy Java FX applications> as JNLP> as applets
8/14/2019 TD MXC JavaFX Srinivas
53/54
53
For More Information
http://openjfx.dev.java.net http://javafx.netbeans.org
8/14/2019 TD MXC JavaFX Srinivas
54/54
Thank You!
Raghavan Rags N. [email protected] Microsystems
Top Related