JavaFX Internal

7/30/2019 JavaFX Internal

1/63

JavaFX RIA for allscreens of your life


2/63

JavaFX is for graphical Java applications across

all devices.


3/63

Demo


4/63

Internet Trends

Introduction

Motivation

The Bigger Picture

JavaFX PlatformCompiler, Graphics, Media, Animation, Webservices, Tools

Java Platform & JavaFX

Agenda


5/63

Internet Trends


6/63

Expanding

Community

Java

developers

Script

programmersVisual

designers

Pro

gramming

(Java)skills

Community

size

Professionals

Hobbyist


7/63

Highly productive scripting language to create rich mediaand interactive content

Common APIs across devices

Scales from small devices to powerful desktops

Brings rich media and graphical APIs to Java

Simplifies building graphical consumer and enterpriseapplications

Leverages the Java platform's Benefits

Introduction to

JavaFX


8/63

Why does it take a long time to write GUI programs?

Why does it seem easier to write web apps than Swing programs?

Focus on Rapid UI Development

Building and running of media/content- rich Java clients

application much easier

Scripting - Acceptance as a development environment

Growing community of Script Developers and Designers

More productive by making Swing and Java 2D API

accessible to a much the script programmer

Motivation


9/63

Big Picture


10/63

FIRST PRIZE: Sony Ericcson Mobile Phone

2 SECOND PRIZES: CANON DIGITAL Camera

10 THIRD PRIZES: Ipod Nano

T-Shirts for all contest submissions A Certificate from Sun Microsystems for all contest submitters

Registration will open soon !!


11/63

JavaFX Script

- The Language


12/63

Object Oriented Declarative and Procedural

Integrates with Java

Static Typing and Type Inference

Automatic Data Binding

JavaFX Script


13/63

Hello World in JavaFX

Stage {

scene: Scene {

content: Text {

x: 10

y: 50

font: Font { size: 20 }

fill: Color.RED

content: "Hello World"

}}

}


14/63

Boolean

Short, Integer, Long

Number Float

Double

String Duration

Primitive Data Types


15/63

Arithmetic + - / * *= /= += -=

mod

Unary ++ -- not

Logical and or not

Relational

= == != > >= <


16/63

Script Variablesdef numTwo = 2;

var result;

var value: Integer = 0;

- Var value can be assigned/changed anytime

- Def will have the initial value and remains a constant

- Compiler infers the type automatically

var result = 1.0; // compiler will infer Number OR

var result = 1; // compiler will infer Integer

Functions in FX

public function add(numOne: Integer, numTwo: Integer): Integer { }println (add (10, 20)); // Invoking the function

// String Concatenation

def name = 'Joe';

var s = Hello {name} // s = 'Hello Joe'


17/63

Object Literals

function run (args: String[]) { }// Similar to main() in Java

- Compiler provides default no-arg run() method (with certain exceptions)

- Object declarations can be separated by comma or white-space or semi-colon

- Semi-colon mandatory for function declarations

var x = Rectangle { x: 0, y: 0, width: 100, height: 100, fill: Color.RED }

Rectangle { x: 10, y: 10, width: 200, height: 200, fill: Color.BLUE }

Nested object creations

var gr: Group = Group {content : Circle { centerX: 100 centerY: 100 radius: 200 fill: Color.GREEN }

}

gr.opacity = 0.5 // Accessing a member of group instance


18/63

ExpressionsIF Expression

if (age < 5 ) { ticketPrice = 0; }

else if (age < 12 or age > 65) { ticketPrice = 5; }else { ticketPrice = 10; }

FOR Expression

var days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];

for (day in days) {

println(day);

}

// Resulting sequence squares the values from the original sequence.var squares = for (i in [1..10]) i * i; //seq of size 10

WHILE Expression

var count = 0;

while (count < 10) { }- tr , catch, finall same as Java

A M di i


19/63

TYPE - I

Var Variable declaration

Def Can not be assigned, Can not be overridden, can be bound

TYPE - II

No specifier Script Access (within .fx file)

Public Accessible everywhere

Protected package and subclasses

Package Within the package only

TYPE - III

Public-read Public read access but write acess decided by the one of the above

public-init can be initialized, read but can not be assigned or bound

I, II, III can be combined in various orders

Example: public-readable protected var i: Integer = 10;

Access Modi iers


20/63

bind is a way to tie the value of one variable to the

value of an expression

binding must be defined when the variable isinitialized

bindings are statically compiled

bound variables cannot be set manually

Very handy to keep an application's GUI in sync withits underlying data.

Bi-directional binding using 'with inverse'

Binding a function

Bind


21/63

Using Bind

public class Distance {public var x1:Number;

public var x2:Number;

// Whenever x2 or x1 changes, distance will be updated

// Binding can be used for invariants

public var distance:Number = bind x2 - x1;

}

var d = Distance {};

// **Runtime Error Can not assign to a bound var**

d.distance = 100

var length: Number = bind distance with inverse


22/63

Sequences

// A sequence of one can omit the bracketsvar names:String[] = Richard;

// Empty sequences are not null

var names:String[];println(sizeof names);// prints 0

// elements are accessed by index 0 to (sizeof -1)

var names = [Jasper, Richard, Martin];

var martin = names[2];

// and you can populate a sequence using a for loop

var hellos = for (i in [1..3]) { Hello #{i} }


23/63

Sequences Cont..// Inserting items into a sequence

var names:String[] = Richard;

insert Jasper into names;

// Inserting before a certain index

insert Martin before names[1];

// Inserting after a certain index

insert Duke after names[1];

// Deleting from the sequence

delete Duke from names;

//Deleting the entire Array

delete names;

T i


24/63

Arbitrary blocks of code that attach to variables and executewhenever the variable's value changes

var exit = false on replace oldValue {

println("Old Value: {oldValue}");

println("New Value: {exit}");

if (exit) doCleanup();

};

exit = true;

'oldValue' - OPTIONAL. Returns old value (name could beanything) if specified.

Trigger gets called twice in the above case once for 'false'initialization and once for 'true'

Triggers


25/63

FX Script may or may not have a class defined in it. (UnlikeJava).

You can define vars, functions outside of the class as well.

You can define a new class or extend a class or interface

public class HelloFX //extends HelloWorld {

override var x: Number = 10.0

override function foo() {}

init { } // works like a constructor

}

Define a run() method

File Name need not be same as class name

Class Definitions


26/63

Java within JavaFXimport javax.swing.*;

import java.awt.event.*;

var button = new JButton("Click Me");

var frame = new JFrame("Swing FX App");

frame.add(button);

var al = ActionListener {

override function actionPerformed (ae: ActionEvent) {

println("Button Clicked");

}};

button.addActionListener (al);

frame.setSize(200, 200);

frame.setVisible(true);


27/63

Graphics


28/63

Nodes are represented in a graph structure SceneGraph

SG - Vector-based, device-independent representation

of the data to be rendered (Java Layer) Declare where you want things

Let the system figure out how to draw them

Built-in support for Animations, Effects, smartrepainting, Lights, Transformations

Free-form shaped and Translucent windows

Graph is set on a Scene, Scene is set in a Stage

Graphics


29/63

Scene Graph


30/63

Canvas upon which the Scene Graph is displayed

Can set multiple CSS Stylesheets

Can set background color (or set to null)

Can set scene width / height

Scene


31/63

Top-level container for the scene

Contains only one Scene

Can set Stage width / height Potentially represented by:

JFrame on desktop

JApplet on web page

SVG player on mobile

Stage


32/63

Shapes - Rectangle Arc Circle Ellipse Line, PathPolygon Text ..

Stroke strokeWidth fill

Transformations Rotation, Scale, Shear, Translate

Building Blocks

NORMAL ROTATE SHEAR


33/63

Colors

150+ built in colors (all the HTML & CSS built invalues)

Color.web(#aabbcc), Color.web(blue),

Color.rgb(128, 222, 21)

Paint

Linear and Radial Gradience

Colors & Paints


34/63

ImageView node shows images

Image can load images in FG thread or BG thread

Both ImageView and Image can scale Preserve ratio

Fit within a specific width/height

When fit on Image level, keeps smaller image in

memory

Images


35/63

Effects are placed on Nodes

Many standard built in DropShadow

GaussianBlur

Glow

Bloom

Reflection

more...

Effects


36/63

Input Events

Key, Mouse and Focus Events

Attribute driven event handling

Supported across all types of nodes Group, shape, text, image

var bgRect: Rectangle = Rectangle {

x: 0 y: 0 width: 240 height: 320

onMouseClicked: function (me: MouseEvent) { }

onMousePressed: function (me: MouseEvent) { }

onMouseReleased: function (me: MouseEvent) { }

onKeyPressed: function (ke: KeyEvent) { }

onKeyReleased: function (ke: KeyEvent) { }

onKeyTyped: function (ke: KeyEvent) { }

. . .

}


37/63

Media


38/63

JavaFx supports media (audio and video) It uses different libraries for different media formats.

On2 library (Cross Platform) - supports FXM,

FLV(Sun defined FLV subset) and MP3 formats. DirectShow library (Windows) - supports

MP3,WMV,WAV,AVI and ASF formats.

CoreVideo library (Mac) - supportsMOV,MP4,MP3,AVI and 3GPP formats.

Formats supported = On2 formats + Native (CoreVideo or

DirectShow)

Media

M di API


39/63

Media API

3 Essential Classes

Media - Represents a media source.

MediaPlayer - Represents the controls for playing media

(play, pause, stop, currentTime, stopTime, rate).

MediaView UI component for viewing the media.

Supports all Node attributes (transformations, effects,

fading, etc.)

Media can have multiple, parallel tracks

Video Track, Audio Track, Subtitle Track


40/63

Media Sample

Stage {

scene: Scene {

content: MediaView {

mediaPlayer: MediaPlayer {

media: Media{ source: "{__DIR__}/sample.wmv" }

autoPlay: true

}

}

}

}

__DIR__ - A built-in variable that represents the location of class files


41/63

Animation


42/63

Animation is a key feature of every rich graphicsapplication platform

There are two supported animation types in JavaFX

Keyframe Animations

Transitions

Animation


43/63

A general purpose animation mechanism for JavaFX Uses a concept of a timeline and keyframes specifying

values at given times

Built in the language syntax - can animate any variable

tween keyword and custom interpolators

autorepeat + autoreverse behavior

Actions

Nested timelines

Keyframe Animation

Hello World Sample


44/63

Hello World Samplevar op: Number = 1.0;

var text:Text = Text {

x: 10 y: 50font: Font {size: 36}

fill:Color.RED

content:"Hello World!"

opacity: bind op

}

var t:Timeline = Timeline {

autoReverse: true repeatCount: Timeline.INDEFINITE

keyFrames: [

KeyFrame { time: 5s values: op => 0.0 tween Interpolator.LINEAR }

]}

t.playFromStart();

// Add text to a scene and add scene to the stage here


45/63

Precanned, single purpose animations

Translation/Rotation/Scale/Fade/Pause

by values

Animation along a path

Containers: Parallel

Sequential

Transitions

T iti A i ti


46/63

Transition AnimationVar circle: Circle = Circle { centerX: 10 centerY: 10 radius: 50 fill: Color.RED }

var fadeTransition = FadeTransition {duration: 10s node: circle

fromValue: 1.0 toValue: 0.2


}

var rotTransition = RotateTransition {duration: 10s node: circle

fromValue: 0 toValue: 360


}

var pathTransition = PathTransition {duration: 10s node: circle

path: AnimationPath.createFromPath(Rectangle { x: 200 y: 200 width: 100, height:

100 }

autoReverse: true repeatCount: 4

}


47/63

WebServices


48/63

Power of the Java Platform

XML / JSON Parsers

Asynchronous HTTP Requests

Invoke RESTful Web Services

RSS / ATOM support

JavaFX WebServices


49/63

Design in process

Uses a single programming model for asyncservices

Due for JavaOne 2009

Both read (RSS & ATOM) and publish (ATOM)

RSS / ATOM Feed


50/63

Webservices Example

def request = HttpRequest {location: "http://rss.news.yahoo.com/rss/world"

// The content of a response can be accessed in the onInput callback function.

onInput: function(is: java.io.InputStream) {

// use input stream to access content here

try {// parse the content

} finally {

is.close();

}

}

onDone: function() { println("done") }

}

request.enqueue();

C t


51/63

... Cont ...var total;

var title;

def parser = PullParser {documentType: PullParser.XML;

input: anInputStreamThatContainsXML;

onEvent: function(event: Event) {

if (event.type == PullParser.START_ELEMENT) {

if (event.qname.name == "ResultSet" and event.level == 0) {

total = event.getAttributeValue(QName{name:"totalResultsAvailable"});}

} else if (event.type == PullParser.END_ELEMENT) {

if (event.qname.name == "Title" and event.level == 2) {

title = event.text;

}

}}

}

parser.parse();

parser.input.close();

println("results: {total}, title: {title}");


52/63

Tools


53/63

Developer Tool Netbeans 6.5 Sophisticated IDE for building, previewing, and debugging FX

applications.

Drag and drop palette to quickly add FX objects

Comes with its own set of samples and best practices

JavaFX Production Suite plugins for Adobe Photoshop CS3 and Adobe

Illustrator CS3 Store Graphics Assets in JavaFX (FXZ)

SVG Converter - convert SVG graphics into JavaFX Script

(FXZ)

Graphics Viewer to view FXZ files

JavaFX Tools


54/63

JavaFX Workflow


55/63

Miscellaneous

P fil I f


56/63

Common Profile APIs

Tagged as 'Common' / 'Common Conditional'

Works across devices

Desktop Profile APIs

Destop Extensions ex: Effects

Tagged as 'Desktop'

Works only on Desktop

Choose the right APIs based on target

audience

Profile Info

Deployment


57/63

Set JAVA_HOME (6u7 min, 6u12 recommended)

Set JAVAFX_HOME (JavaFX SDK 1.0.1 or 1.1)

Set path to JavaFX executables (sdk/bin)

compile - javafxc (ex: javafxc hello.fx)

run javafx (ex: javafx hello)

JavaFX Packager

javafxpackager -src -appClass -res

-profile [MOBILE/DESKTOP] -sign (for applets) -pack200 -draggable

For deploying the application as an Applet or as a Midlet onmobile or as a JNLP application on JavaWebStart

'dist' created with necessary executables

Deployment

Draggable Applets


58/63

Allows the user to bring together desktop andbrowser experience

Applets can be dragged out of the browser if you

are using jdk 6u10+ with FF3 or IE6/7

Press 'ALT', click on the applet and drag it out.

The browser can be closed and applets can be run

independent of the browser

Create shortcuts on the desktop for the applet tolaunch it independent of the browser

Draggable Applets


59/63

Summary JavaFX 1.0 SDK provides the APIs necessary for building

creative applications

Future updates to JavaFX

1.1 release around Februrary 2009

1.5 release around June 2009

JavaFX 1.0 Production Suite allows you to use professionalgraphics in your apps

J J FX


60/63

Java vs JavaFX

JavaFX does not replace Java SE/ME The Java Platform is the foundation of JavaFX

JavaFX is part of the Java Eco-system

Allows for both to evolve appropriately to support theirdifferent business models and drivers

JavaFX teams are customers of the Java Platform teams

Meeting these requirements may require extensions to

the Java Platform

Java Platform Extensions may or may not sediment into a

Java Platform release.


61/63

Try JavaFX Today!javafx.com

javafx.com


62/63

Register yourself !! Provide an Abstract for a creative, rich application using JavaFX by March'

1st 2009

Develop your app once your abstract is approved and submit by March'

31st

Best Apps will be featured in javafx.com with your profile

Win cool prizes and be a pioneer in JavaFX technology !!

Registration will open soon !!


63/63

THANK YOU !!

Q & A

- Praveen Mohan

- Srinivas Mandalika

- Elancheran Subramanian
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]

Documents

JavaFX Internal