BeJUG JavaFx In Practice

JavaFX in practice

Jo Voordeckers
jo.voordeckers@pursuit.be

Thursday 28 May 2009 1

About the speaker
‣ 2002 .. 2005 - Partner at Imagine-IT

‣ 2006 .. 2007 - Senior Software Engineer at Dolmen

‣ 2007 .. 2008 - Technical Project Leader at Dolmen

‣ 2008 - Founder Pursuit Consulting

‣ Independent Java EE and RIA contractor & consultant

‣ Speaker at:

‣ JavaOne, Devoxx, BeJUG, IT Works, SAI


Agenda
‣ Introduction ‣ Applying all the above

‣ JavaFX Script Language ‣ Media

‣ Scene graph ‣ Remote Services

‣ JavaFX Production Suite ‣ Browser Integration

‣ Styling ‣ Deployment

‣ Animation ‣ Tips and tricks

‣ Transformations ‣ Future of JavaFX

‣ Effects ‣ References

‣ Clipping ‣ Q&A


JavaFX Platform


JavaOne’08 keynote demo ParleysFX


Java’s issues as RIA platform
‣ Slow

‣ 10 - 30s for cold startup

‣ graphic performance

‣ applets often crash browser

‣ Difﬁcult

‣ Java2D

‣ Swing - MVC (without binding & properties)

‣ Dated look & feel

‣ No built-in animation, effect

‣ No decent media support

‣ 10MB Plugin


The answer to RIA on the JVM
‣ Java 6u10 ‣ JavaFX
‣ Browser Plugin v2.0 ‣ JavaFX Scripting language

‣ Hardware rendering ‣ Keyframe Animations

‣ Modularized Java Runtime ‣ Effects

‣ Quick-starter ‣ Media Codecs

‣ Designer tools


Declarative and procedural
‣ JavaScript Object literal Notation (JSON)

‣ Java like procedural syntax

Stage {
title: quot;BEJUG DEMOquot;
scene: Scene {
width: 200
height: 200
def t:Text = Text {
x: 50
y: 50
content: quot;Click Mequot;
onMouseClicked: function(e) {
service.registerClick();
t.content = quot;Thanks!quot;;
}
}
content: t
}
}


Data types

JavaFX Java
String java.lang.String
Boolean java.lang.Boolean
Number java.lang.Number
Integer java.lang.Integer
Object java.lang.Object
Void java.lang.Void
Duration -

var s:String = “hello”;
var b:Boolean = true;
var n:Number = 0.4;
var i:Integer = 99;
var o:Object = new java.util.Date();
var d:Duration = 10ms;


Defining variables
‣ var

‣ defines a regular variable

‣ def

‣ defines a constant variable through initial assignment

‣ value can change through binding!!

‣ Statically typed

‣ Compiler can infer the type

var result;
def numOne = 100;
def numTwo = bind result;


Access modiﬁers

JavaFX script, variable, function access modifiers
Default, script read/write
Package, package read/write
Protected, package + subclass read/write
Public, read/write from anywhere
Public-read, read from anywhere, write from script by default, combine with
package or protected
Public-init, public-read + init from anywhere
var s:String = quot;defaultquot;;
package var s:String = quot;packagequot;;
protected var s:String = quot;protectedquot;;
public var s:String = quot;publicquot;;
public-read var s:String = quot;public-readquot;;
protected public-read var s:String = quot;protected write
public-readquot;;
public-init var s:String = quot;public-initquot;;


Sequences
‣ Dynamic array

‣ Powerful list comprehension and manipulation

for (fooItem in foos where fooItem.bar == true) {
var i = indexof fooItem;
println(“Foo with bar at index {i} of {sizeof foos}”);
}

foosWithoutBar = foos[foo|foo.bar == false];
// Creates new sequence based on the condition

insert foo in foos; // Insert object foo into sequence
insert bar before foos[3]; // Insert object bar at position 4
delete foos[0]; // Remove the first object from sequence
reverse foos; // Reverses the objects in foos
Sequences.sort(foos); // Equivalent of java.util.Collections


Functions & closures
‣ Executable block of code

‣ Return value from last expression (Void)

‣ First-class objects: “closures”

‣ Bound - Function

public class FilterableList {

public-init var list:Object[];

public function filter(predicate : function(o:Object):Boolean) {

list = list[item|predicate(item)];
}

}

function run(__ARGS__ : String[]) { } // Java main() equivalent


Multiple Inheritance
‣ No interfaces, use abstract classes

‣ JavaFX class can extend multiple JavaFX classes

‣ ** will get replaced by mixins in the near future

‣ JavaFX class can implement multiple Java interfaces

‣ JavaFX class can extend 1 Java class (no varargs, enums, generics)

public abstract class Clickable extends CustomNode {

public abstract function onClick():Void;

}

public class ListBox extends AbstractList, Clickable {
// TODO implement java.util.AbstractList.get(),
// Clickable.onClick(), CustomNode.create()
}


Binding
‣ Bi-directional binding (with inverse)

var x:Integer;

Stage {
title : quot;BEJUG DEMOquot;
scene: Scene { width: 400, height: 200
content: [
Text { x: 20 y: 20
content: bind quot;Location X = {x}quot;
},
Rectangle { width: 20 height: 20 fill: Color.BLUE
x: bind x
y: 50
onMouseDragged: function(e:MouseEvent) {
x = (e.dragAnchorX + e.dragX as Integer) - 10;
}
}
]
}
}


Bound functions
var x:Integer;

bound function percentage():Integer {
x * 100 / s.width as Integer;
}

var s:Stage = Stage {
content: [
Text { x: 20 y: 20
content: bind quot;Location X = {x}, % = {percentage()}quot;
},
Rectangle { width: 20 height: 20 fill: Color.BLUE
x: bind x, y: 50
}
}
]
}
}


Triggers
var x:Integer on replace oldVal {
if (x < 25) { x = 25; }
else if (x > 75) { x = 75; }
};

Stage {
content: [
Text { x: 20, y: 20, content: bind quot;Location X = {x}quot; },
Rectangle { width: 20, height: 20, fill: Color.BLUE
x: bind x, y: 50
}
}
]
}
}


Bind for
class CoolList extends CustomNode {

public var list:String[];

override public function create():Node {
Group {
content:
bind for (item in list) Group {
translateY: 25 * indexof item
content: [
Rectangle {
fill: Color.BLUE
width: bind s.width
height: 20
},
Text { x: 10, y: 15, content: item }
]
}
}
}
}
var s:Stage = Stage { title : quot;BEJUG DEMOquot;
content: CoolList { list: [ quot;Firstquot;, quot;Secondquot;, quot;Lastquot; ] }
}
}


Init and postinit
‣ No support for constructors

‣ Closest equivalent: optional init and postinit function blocks

‣ ** postinit might get removed in future releases

public class MyControl extends Control {
public var myVar:Number;
override var skin = MyControlSkin{};
// initialized before myVar
}

public class MyControl extends Control {
public var myVar:Number;
postinit {skin = MyControlSkin{}; }
// initialized after myVar
}


Exceptions - throw, try, catch, ﬁnally
‣ JavaFX support Java exceptions

if (foo == null)

throw new RuntimeException(“Foo is null”);

try {

connectAndDisplayShoppingList();

} catch (e: Exception) {

showErrorMessage(e);

} finally {

closeConnection();

}


Magic variables
‣ __ARGS__ command line arguments

‣ function run(__ARGS__ : String[]): java.lang.Object { }

‣ __DIR__ Java URI to the directory of the current script

‣ __FILE__ Java URI to the current script (class ﬁle)

‣ __PROFILE__ Proﬁle the runtime is using:

‣ desktop, mobile, browser

‣ Often used to reference packaged (JAR) resources

‣ Image { url: quot;{__DIR__}images/close.pngquot; } cache: true }


Getting started SceneGraph

‣ Stage - Hybrid Application and/or Applet container

‣ Style (Shaped Windows)
Group
‣ Opacity

‣ Applet drag events
Overview Presentation
‣ Position & Size Panel ViewPanel

‣ Title

‣ Close-action Collapsible
Panel
‣ Scene - Root of the scene graph

‣ “Graph data structure that holds
Left Right Collapse
Splitter
‣ Container Container Button
the spatial representation (Group) (Group)
(Rectangle)
(Shape)

‣ of the graphical scene”
TopLists Presentations
Panel Panel
(HBox) (HBox)


Node’s most interesting properties
‣ transforms or: ‣ hover

‣ translateX/Y ‣ onMouseXXX

‣ scaleX/Y ‣ onKeyXXX

‣ rotateX/Y ‣ boundsInLocal, boundsInParent,
boundsInScene
‣ effect
‣ blocksMouse
‣ visible
‣ clip
‣ opacity
‣ id
‣ cache
‣ styleClass


CustomNode
public class MyButton extends CustomNode {

override public function create():Node {
Group {
content: [
Rectangle {
width: 200, height: 40, arcHeight: 10, arcWidth: 10
fill: LinearGradient {
startX: 0, endX: 0, startY: 0, endY: 1
stops: [
Stop { color: Color.BLACK, offset: 0 },
Stop { color: Color.BLUE, offset: 1 },
]
}
},
Text {
x: 100, y: 10, textOrigin: TextOrigin.TOP
content: quot;Buttonquot;
fill: Color.WHITE, textAlignment: TextAlignment.CENTER
} ]
}
}

}


Production Suite
‣ Produces FXD ﬁles (FXZ = zipped)

‣ Adobe Photoshop plugin

‣ Adobe Illustrator plugin

‣ SVG to FXD converter

‣ FXD Viewer

‣ Integrate into JavaFX

‣ UIStub

‣ FXDLoader


JavaFX in style
Rectangle {
arcWidth: 10;
arcHeight: 10;
}
.bg {
fill: #ccccff;
stroke: #333399;
}

var stylesheets : String = “{__DIR__}default.cssquot;;
Stage {
scene: Scene {
stylesheets: bind stylesheets
}
}

Rectangle {
x: 10 y: 70 width: 200 height: 50 fill: Color.RED
styleClass: quot;bgquot;
}

Thread on forum has more details: http://forums.sun.com/thread.jspa?threadID=5357325&tstart=0


Animations
def t2 = Timeline {
‣ First class citizen in JavaFX autoReverse: true
repeatCount: 10
keyFrames: [
at (0s) {
‣ Key-frame based r2 => 0
},
‣ Interpolators at (1s) {
r2 => 150 tween
‣ Callback functions Interpolator.EASEBOTH
},
]
‣ Timeline can be nested!
};

‣ Interpolates: numbers, colors, shapes (morphing)

‣ + any class that extends Interpolatable !!


Transformations
‣ Afﬁne transformations supported on all Node objects

‣ Translate

‣ Rotate

‣ Scale

‣ Shear

‣ PerspectiveTransform

‣ NOT an afﬁne transform!

‣ @see Effects


Effects
‣ One or more inputs (Effect chaining)

‣ Effect Types

‣ Reﬂection

‣ PerspectiveTransform Text {
effect: Reflection {
‣ Glow input: MotionBlur { angle: 180 }
}
‣ Blur translateX: 20
translateY: 20
‣ DropShadow content: quot;BeJUG JavaFX in practicequot;
fill: Color.RED
font: Font { name: quot;Verdanaquot;, size: 20 }
‣ ColorAdjust
},

‣ @see JavaFX.com EffectsPlayground DEMO by Chris Campbell


Clipping
‣ Think “digital scissors”

‣ Intersection of clip shape

‣ and Node deﬁnes the visual

‣ portion of the Node

‣ Often used to slide a group of Nodes out of the scene

Rectangle {
width: 100, height: 100
fill: Color.BLUE
clip: Circle {
centerX: 75, centerY: 75, radius: 50
}
}


Building a website menu
‣ Combines following JavaFX functionality

‣ Binding

‣ For-each

‣ CustomNode

‣ Timeline

‣ KeyFrames

‣ Interpolators

‣ Effects

‣ DropShadow

‣ Node Clipping


Media in JavaFX
‣ Easy to play video and audio content

‣ MediaView

‣ Effects, Transformations, Animations, Clipping

‣ MediaPlayer

‣ Streaming, progressive download, buffering, seeking, ...

‣ There is a business case for media!


Media support


MediaPlayer in 10 lines
‣ MediaPlayer - Controller

‣ MediaView - View

‣ Media - Model

‣ Don’t use {__DIR__} media playing from JAR URI’s not supported!

def mp:MediaPlayer = MediaPlayer {
media: Media { source: quot;file:/path/to/movie.movquot; }
}
content: [
MediaView { mediaPlayer: mp, fitWidth: 400, fitHeight: 200
onMouseClicked: function(e) {
if (mp.status == mp.PLAYING) mp.stop() else mp.play();
}
},
]


Browser integration
‣ JavaScript calling into JavaFX

public function setColor(red: Number, green: Number, blue: Number) : Void {
color = Color { red: red, green: green, blue: blue };
}

public function run(args: String[]) {
Stage {
scene: Scene {
fill: Color.DARKGRAY
content: [
Circle {
centerX : 125
centerY : 125
radius: 100
fill: bind color
}
]
}
}
}

var app = document.getElementById(quot;myAppletquot;);
app.script.setColor(1.0, 0.0, 0.0);


Browser integration
‣ JavaFX calling into JavaScript

‣ DOM manipulation through org.w3c.dom.html.HTMLDocument

import javafx.stage.AppletStageExtension;

// Show a document in a new browser window
AppletStageExtension.showDocument(quot;http://my.company.com/quot;);

// Show a document in a frame of the current browser window
AppletStageExtension.showDocument(quot;http://my.company.com/quot;, quot;LEFT_FRAMEquot;);

AppletStageExtension.eval(quot;someJavaScriptFunction()quot;);

var window: netscape.javascript.JSObject =
FX.getArgument(quot;javafx.appletquot;) as netscape.javascript.JSObject;
// Now can interact with the JSObject APIs and call JavaScript
// functions, etc. defined in the window scope


JavaFX Application Architecture
JavaFX Controls and Components

Models (JavaFX or Java)

Controller (JavaFX or Java)

Communication Layer (JavaFX or Java)

Façade exposing the Services

Enterprise Services (Spring beans / EJB)

Database or Integration Layer


Remote Services
‣ RemoteTextDocument

‣ PullParser

‣ Restful XML & JSON services

‣ Support linear mode forward, seek, …

‣ JFXtras - http://jfxtras.org/

‣ JSONHandler

‣ JFXWorker

‣ Whatever you like as long as it runs on the JVM!


RemoteTextDocument
‣ Fetches remote document asynchronously in a String

‣ document

‣ done

‣ failed

‣ canceled

var remoteTextDocument:RemoteTextDocument = RemoteTextDocument {
url: quot;http://api.flickr.com/services/feeds/photos_public.gnequot;;
}

var doc:String = bind remoteTextDocument.document on replace {
if (remoteTextDocument.done)
java.lang.System.out.println(quot;doc = {doc}quot;);
}


PullParser with XML
override function onPullEvent(event : Event) : Void {
if (quot;Resultquot;.equals(event.qname.name) and event.level == 1) {
total = event.getAttributeValue(
QName{name:quot;totalResultsAvailablequot;});
}
}

def pullParser = PullParser {
documentType: PullParser.XML;
onEvent: onPullEvent
}

def httpRequest : HttpRequest = HttpRequest {
method: HttpRequest.GET
location: “http://url.to/service”
onInput: function(is: InputStream) {
try {
pullParser.input = is; pullParser.parse();
} finally { is.close(); }
}
}

httpRequest.enqueue();


JFXtras JFXWorker
‣ Leverages SwingWorker for background task execution

‣ desktop proﬁle

‣ Required when not using JavaFX asynchronous API’s!

‣ Call into any Java communication API or library

‣ JAX-*
var listData:Object;
‣ Java RMI def myWorker = JFXWorker {

‣ Spring Remoting / WS inBackground: function():Object {
return service.call();
}
‣ AMF onDone: function(result:Object) {
listData = result;
}
}
myWorker.start();


JFXtras JSONHandler
‣ Glassﬁsh v2 + Jersey JAX-RS Sample (with CustomerDB)

‣ Implement JavaFX counterpart of Java entities

‣ Implement JSONHandler

‣ Call JSONHandler.parse();

var customers:Customer[];

def handler:JSONHandler = JSONHandler {
url: quot;http://localhost:8080/CustomerDB/resources/customers/quot;
rootClass: quot;jaxrs.CustomerResultquot;
onDone: function(result:Object, isSequence:Boolean) {
customers = (result as CustomerResult).customer;
}
}


Deployment
‣ Deployment toolkit

‣ JavaScript library hosted at java.com

‣ Autodetects & installs correct Java version

<html>
<script src=quot;http://java.com/js/deployJava.jsquot;></script>
<script>
var attributes = {codebase:'http://yourdomain.com/YourApplet',
code:'javafx.application.Applet.class',
archive:'YourApplet.jar, javafxrt.jar, Scenario.jar, javafxgui.jar’,
width:500, height:500, java_arguments:'-Djnlp.packEnabled=true'};
var parameters = {quot;ApplicationClassquot;: quot;com.yourdomain.YourAppletquot;,
quot;draggablequot;:quot;truequot;};
var version = '1.6.0' ;
deployJava.runApplet(attributes, parameters, version);
</script>
</html>


JNLP
‣ Since 6u10 also for applets

‣ Library dependencies

‣ eg: JavaFX runtime

‣ Runtime settings

‣ Memory

‣ Commandline arguments

‣ Native libraries

‣ Security settings

‣ Escape browser sandbox


Tips and tricks
‣ Wrap custom components in a ‣ Pre-scale Images
Group ( Image.width, Image.height )

‣ Comment logical parts of the ‣ Background loading
SceneGraph
‣ Integer instead of Number
‣ Avoid unnecessary bindings
‣ Use javafx.util.Sequences
‣ Cache complex components
( Node.cache: true ) ‣ Use Java code for the heavy
lifting
‣ Transparent Rectangle to
capture mouse events ‣ Avoid the non-common proﬁle
classes (eg: Swing components)
‣ Small Scene graph


What to expect
‣ JavaFX 1.5 (released at JavaOne ’09)

‣ Skinnable native JavaFX components (common proﬁle)

‣ JavaFX “Designer’s Tool”

‣ JavaFX Runtime improvements (bugs, performance, documentation)

‣ Netbeans plugin improvements (bugs and features)

‣ Java App Store (aka Project Vector)

‣ Future

‣ Mixins instead of multiple inheritance

‣ Mac OS X Java 6 “update 10”

‣ Linux & Solaris media support!?


Resources
‣ http://JavaFX.com

‣ 50+ samples with source code

‣ Tutorials and JavaFX API’s

‣ Netbeans SDK with JavaFX

‣ JavaFX editor and sample applications

‣ JavaFX Production Suite

‣ http://JFXpert.com

‣ Many tutorials by “PRO JavaFX Platform” author Jim Weaver

‣ http://jfxstudio.wordpress.com

‣ 70+ samples from the community


Q & A


BeJUG JavaFx In Practice

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Destaque

Destaque (10)

Semelhante a BeJUG JavaFx In Practice

Semelhante a BeJUG JavaFx In Practice (20)

Último

Último (20)

BeJUG JavaFx In Practice