JavaFX Advanced
45
JavaFX Paul Bakker
-
Upload
paul-bakker -
Category
Technology
-
view
3.661 -
download
0
description
Presentation about the features of JavaFX. See how to use video, different deployment types, JavaScript integration, annimations and more. Demo's not included.
Transcript of 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
