Introduction into JavaFX

New and Cool: JavaFX
Eugene Bogaart
Solution Architect
Sun Microsystems

1

Sun Confidential: Internal Only 2

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


A Basic Java GUI: Not Very Pretty


Samples
• Vancouver Medal app
• Simon's Book example
• JavaFX Widget set


JavaFX Platform Architecture

FX Applications

Device FXScript
Media Specific Core Scene runtime
WebKit
Players APIs APIs Graph
Ad
FX Player
Media
VM Compiler
Installer
Codecs

Device OS


JavaFX Script Basics
• Declarative, statically-typed scripting language
• Facilitates rapid GUI development
• Many cool, interesting language features
• Runs on the Java Virtual Machine
• Deployment options same as Java programs
> Applet, Application, WebStart
• Fully utilizes Java class libraries behind the scenes
• For content designers and media engineers


Basic JavaFXScript Class
Syntax is Java-like with shades of JavaScript

class HelloWorldNode extends CustomNode {
public var text:String;
public override function create(): Node {
return Text {
x: 10, y: 50
font: Font {
size: 50
}
content: “Hello World”
}
};
}


Class Definition
Address class definition: The Address class declares
street, city, state, and zip instance variables all of type
String
class Address {
var street: String;
var city: String;
var state: String;
var zip: String;
}

Declaring an Object Literal
• In the JavaFX Script language, an object instance can
be created with an object literal (unlike Java)
• Example: The first word (Address) specifies the type of
object, class, that you are creating.
Address {
street: "1 Main Street"; // separated by semi colons
city: "Santa Clara";
state: "CA";
zip: "95050";
}

Nested Literal Declaration
• Nesting Address object inside Customer object
def customer = Customer {
firstName: "John";
lastName: "Doe";
phoneNum: "(408) 555-1212";
address: Address {
street: "1 Main Street";
city: "Santa Clara";
state: "CA";
zip: "95050";
}
} Sun Confidential: Internal Only 11

Sequences
• Sequences
var time:Duration[] = [1s, 5s, 10s];
var days = [1..31];
• Insert, delete, membership and reverse
insert 20s into time;
delete 31 from days;
var revDays = Sequences.reverse(days);

• Slice via range and predicate
var oddDays = days[n | (n mod 2) == 1];
var firstThree = time[0..<3];


Binding
• 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, etc...
• bind “with inverse” when 2-way is needed


Bound
var scale = 1.0;
// makePoint is a bound function. It will be invoked even when a value of
// non-function-arugment such as scale changes. If you remove bound
// keyword, then, the change of the value of scale does not invoke the function
bound function makePoint(xPos : Number, yPos : Number) : Point {
Point {
x: xPos * scale
y: yPos * scale
}
}
class Point {
var x : Number;
var y : Number;

Bound (cont)
// Code in the previous slide
// The bind keyword, placed just before the invocation of
// makePoint, binds the newly created Point object (pt) to the outcome of the
// makePoint function.
var myX = 3.0;
var myY = 3.0;
def pt = bind makePoint(myX, myY);
println(pt.x); // 3.0
myX = 10.0;
scale = 2.0;


Trigger
• Triggers facilitates the catching and handling of data
modification events.
var x : String;
var y = bind x;
• Can be re-written using triggers in a equivalent manner:
var x : String on replace {
y = x;
}
• Trigger for tracing variable changes:
var x : String on replace {
y = x;
Println(“X == {x}”);

Many more
Why Declarative Syntax for Building


GUI?

• Because the structure of declared objects in the
code reflects the visual structure of the scene
graph, and this enables you to understand and
maintain the code easily.
• The order of elements you declare in the code
matches the order in which they appear in the
application.


Scene Graph Nodes: javafx.gui.*
Node

ComponentView* Group Shape
ImageView HBox Arc
HBox
MediaView VBox Circle
VBox
CubicCurve
Ellipse
Transform Line
Affine Path
Rotate Polygon
Scale Polyline
Shear QuadCurve
Translate Rectangle
Text

Effects: javafx.gui.effects.*
Effect
DisplacementMap
Blend
PerspectiveTransform Light
Bloom
InvertMask
Glow
ColorAdjust DistanceLight
Lighting
SepiaTone PointLight
Flood
Reflection SpotLight
GaussianBlur
Shadow
MotionBlur
InnerShadow
DropShadow


Effects
• Effects On Images Demo


Some Effects Supported In JavaFX
effect: SepiaTone { level: 0.5 }

effect: Glow { level: 0.7 }
Original image

effect: GaussianBlur {
input: SepiaTone {
level: 0.5 }
radius: 10.0
}

effect: Reflection {
fraction: 0.7
}


Lighting Effect
effect: Lighting{
surfaceScale: 7
light: DistantLight {
azimuth: 90
elevation: 30
}
}
effect: Lighting{
surfaceScale: 7
light: SpotLight {
x: 0 y :0 z: 50
pointsAtX: 10
pointsAtY: 10
pointsAtZ: 0
}
}


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
• Functions: start(), stop(), pause(),
resume()
• Properties: autoReverse, repeatCount,
toggle


Example – Defining Key Frames
Timeline {
keyFrames: [
KeyFrame {
time: 0s
values: [ radius => 30 ]
}
KeyFrame {
time: 5s
values: [
radius => 300 tween Interpolator.LINEAR
]
} Key value How the value changes over time
]
}
radius = 30 radius = 300

0s 1s 2s 3s 4s 5s 6s
Keyframes Sun Confidential: Internal Only 25

Animation
• Animating TimeLines Sample


JavaFX Media 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
> Lightweight rendering

Streaming Media
• Simple Stream Media Sample


JavaFX Media Example
var media = Media{source: ”movie.mov”};
var player = MediaPlayer{media: media, autoPlay:true};

var mediaView = MediaView{
// To enable audio only, don't create MediaView
MediaView{
mediaPlayer: player,
onMouseClicked: function(e) { // Play/pause control
if (player.paused) {
player.play();
} else {
player.pause();
}
}
rotate: 90; // Rotate
}


JavaFX NetBeans IDE Plugin
• Available for NetBeans 6.1 and later
> Current NB=6.8
• Supports conventional development cycle
> edit, compile, run, test
> Also has preview mode (avoid compile/run)
• Specific project type for JavaFX
• Automatic installation of JavaFX SDK
• Editor supports code completion, drag and drop of
components


Further Information
• openjdk.java.net
• www.javafx.com
• www.sun.com/javafx
• openjfx.org
• learnjavafx.typepad.com


More info


Summary
• Java continues to evolve
• JDK7 driving changes in the platform
• JavaFX providing a RIA platform built on Java
• More to come...


Q&A
Presenter’s Name
first.last@sun.com

34

Introduction into JavaFX

More Related Content

Similar to Introduction into JavaFX

More from Eugene Bogaart

Recently uploaded

Introduction into JavaFX