javafx advanced

JavaFXPaul Bakker

About me

Paul Bakker Trainer Info Support NLJUG speaker Java Magazine author

EJB 3JSFSeamJavaFXSpringHibernateFlex

Outline

Video

Deployment

Mobile

Production Suite

Web Services API

One minute introJavaFX is Sun’s RIA platform

Competes with Flex, Flash and Silverlight

A new language

JavaFX Script

Declarative UI programming

Platform SupportMacOSWindowsLinux / Solaris on the way

Runtimes

JRE 6 update 11 recommended

Performance

Drag-able applets

Stability

Download size

Runs on JRE 5

Video

Native codec supportCross platform FLV

Native codecsCore Video

Video: H.261, H.263, and H.264 codecs

MPEG-1, MPEG-2, and MPEG-4 Video file formats and associated codecs (such as AVC)Sorenson Video 2 and 3 codecs Audio: AIFF, MP3, WAV,MPEG-4 AAC Audio (.m4a, .m4b, .m4p), MIDI

Native CodecsDirectShow

Video: Windows Media Video,H264 (as an update)

Audio: MPEG-1, MP3, Windows Media Audio, MIDI

FXM

Video: On2 VP6 Audio: MP3

Using Video

MediaMediaPlayer

MediaView

varmedia=Media{source:"file:///Users/paul/21.avi"}

varplayer=MediaPlayer{media:mediaautoPlay:true}

Media

MediaPlayer

Stage{title:"Videodemo"width:bindmedia.widthheight:bindmedia.heightscene:Scene{content:MediaView{mediaPlayer:player}}}

MediaView

MediaSimpleVideoVideoPerformance

CSS

Skins

Styling components using external style sheets

CSS

Skins

Styling components using external style sheets

Not a standard feature yet!

A skinnable button

publicclassButtonextendsControl{publicvarlabel:String;init{skin=ButtonSkin{}}}

The SkinpublicclassButtonSkinextendsSkin{publicvarbackgroundColor:Color=Color.BLACK;publicvarcolor:Color=Color.WHITE;publicvararcHeight:Number=20;publicvararcWidth:Number=20;

varbutton:Button=bindcontrolasButton;

init{scene={....//Drawthecontrol’sUI

The CSS

Button{backgroundColor:green;color:black;arcHeight:0;arcWidth:0;}

Button.rounded{arcHeight:20;arcWidth:20;}

DeploymentDesktop, Browser and Mobile

No code changes

Device specific hooks

Oneroot object

Stage{title:"Applicationtitle"width:250height:80scene:Scene{content:[]}}

Applet<scriptsrc="http://dl.javafx.com/dtfx.js"></script><script>javafx({archive:"JavaFXDemo.jar",draggable:true,width:800,height:600,code:"awsdemo.AmazonBrowser",name:"JavaFXDemo"});</script>

Applet hooks

extensions:[AppletStageExtension{onDragStarted:function(){}}]

Specify drag behavior

JavaScript integration

Call JavaScript from Java

varapplet=FX.getArgument("javafx.applet")asjava.applet.Applet;

varwindow:JSObject=JSObject.getWindow(applet);

window.call("showProduct",[product.name,product.description]);

<script>function showProduct(name, description) {

var titleElement = document.getElementById('productTitle'); titleElement.innerHTML = name;

var detailsElement = document.getElementById('productDetails'); detailsElement.innerHTML = description; }</script>

<h1 id="productTitle"></h1><div id="productDetails"></div>

Frame styles

Decorated (standard)

Undecorated

Transparent

Applets WindowStylesJavaScriptDemo

Animation

Timeline

Set of frames

Controls playing

KeyFrame

A moment in time

Defining KeyFramesKeyFrame { time: 1s values: [ imageView.x => 100 tween Interpolator.EASEBOTH imageView.y => 100 tween Interpolator.EASEBOTH ]

action: function() { println(“Action executed”); }}

Transitions

Predefined animations

FadeTransition

ParallelTransition

PathTransition

PauseTransition

RotateTransition

ScaleTransition

Animation

MobileFebruary 2009

Write Once, Run Everywhere

Not supported

Effects (reflection etc.)

Opacity

Video

Mobile

Production Suite

Designer => Developer

Workflow

Web Services

HTTPRequest

REST style services

PullParser

JSON & XML

Web Service call

Enqueue HTTP Request

Handle input

Parse input

Handle ‘events’

XML PullParserif(event.qname.name=="Item"andevent.type==PullParser.START_ELEMENT){product=newProduct();}

elseif(event.qname.name=="Title"){product.title=event.text;}

elseif(event.qname.name=="Item"andevent.type==PullParser.END_ELEMENT){insertproductintoproducts;}

Web ServicesAmazon Demo

Effects

Effect property at any Node

Including text, video, and images

Lots of standard effects

e.g. DropShadow, Blur, InnerShadow, Reflection, SepiaTone

Current problems

No components!

No layout managers

No selectable text

Road Map

Februari 2009 => JavaFX Mobile 1.0

JavaOne 2009 => Announcing JavaFX 2.0

Winter 2009 => JavaFX 2.0

Complete new component suite

Swing end-of-life?

JavaFX.com

The RIA war

Shameless plug ;-)

2 day JavaFX course now available

Full JavaFX Script language coverage

Video

Web Services

Animations

Custom components

Production Suite