td mxc javafx srinivas

8/14/2019 TD MXC JavaFX Srinivas

1/54

1

JavaFX : A TechnicalIntroduction

Raghavan Rags N. [email protected] Microsystems

1


2/54


3/54

3

Goal of the Talk

Learn how to write programs usingJavaFX including SceneGraphs, Animation and Media


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


5/54

5

A Basic Java GUI: Not Very Pretty


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


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/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


9/54

9

JavaFX Simplified Architecture

Graphics hardware

Java 2D

Effects, Animation,Media and

and Timing

Project Scene Graph

JavaFX Script Software


10/54


11/54

11

SDK and prerequisite software


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)


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


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


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


16/54

16

First JavaFX Script Application


17/54

17

Language and SceneGraphBasics


18/54

18

Language Highlights

Declarative Syntax First Class Functions Sequences Binding


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


20/54

20

Declarative Syntax - Example

import javafx.gui.*;

Frame {title: "Hello World JavaFXwidth: 200height: 50content: Label {

text: "Hello World"

}visible: true

}


21/54

21

First Class Functions

No anonymous inner classes! Callbacks made easier


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

}


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


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


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


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


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}"} };


28/54

28

GUI Components javafx.gui.*

FrameDialog

Window

ButtonCheckBoxComboBox

LabelList

RadioButtonSlider

ToggleButton

Menu MenuItem TextField

Canvas

BorderPanelFlowPanelGridPanel

Panel


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

}


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}


31/54

31

Scene Graph Nodes - javafx.gui.*

Group

Node

ArcCircle

CubicCurveEllipse

LinePath

PolygonPolylineQuadCurveRectangle

Text

Shape

Transform

AffineRotateScaleShear

Translate

Hbox

Vbox

ComponentView*ImageView

MediaView


32/54

32

Scene Graph Effects -javafx.gui.effect.*

Blend Bloom

ColorAdjust...

Flood GaussianBlur

Glow...

MotionBlur...

Source


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(); }}

};


34/54

34

Animation Basics


35/54

35

Animation - javafx.gui.animation.*

actioncanSkip

time

timelines values

KeyFrame

TimeLine

autoReverse

INDEFINITEkeyFramesrepeatCount

runningtoggle

InterPolator

DISCRETEEASEBOTH

EASEINEASEOUTLINEAR


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]

}

]};


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


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(); }

}]

};


39/54

39

Media Basics


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


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


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);

} ...


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


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


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;

}


46/54

46

Deployment Basics


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


48/54

48

HelloWorld.jnlp

...


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 }

}]

}}


50/54

50

test.jnlp (applet)

...


51/54

51

test.html

FX Script Applet Test

FX Script Applet Test


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


53/54

53

For More Information

http://openjfx.dev.java.net http://javafx.netbeans.org


54/54

Thank You!

Raghavan Rags N. [email protected] Microsystems

td mxc javafx srinivas

Documents