Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaFX Advanced

4,682 views

Published on

Presentation about the features of JavaFX. See how to use video, different deployment types, JavaScript integration, annimations and more. Demo's not included.

  • Be the first to comment

JavaFX Advanced

  1. 1. JavaFX Paul Bakker
  2. 2. About me Paul Bakker EJB 3 Trainer Info Support JSF NLJUG speaker Seam Java Magazine author JavaFX Spring Hibernate Flex
  3. 3. Outline Video Deployment Mobile Production Suite Web Services API
  4. 4. One minute intro JavaFX is Sun’s RIA platform Competes with Flex, Flash and Silverlight A new language JavaFX Script Declarative UI programming
  5. 5. Platform Support MacOS Windows Linux / Solaris on the way
  6. 6. Runtimes JRE 6 update 11 recommended Performance Drag-able applets Stability Download size Runs on JRE 5
  7. 7. Video Native codec support Cross platform FLV
  8. 8. Native codecs Core 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
  9. 9. Native Codecs DirectShow Video: Windows Media Video,H264 (as an update) Audio: MPEG-1, MP3, Windows Media Audio, MIDI
  10. 10. FXM Video: On2 VP6 Audio: MP3
  11. 11. Using Video Media MediaPlayer MediaView
  12. 12. Media var
media
=
Media
{ 


source:
quot;file:///Users/paul/21.aviquot; } MediaPlayer var
player
=
MediaPlayer
{ 



media:
media 



autoPlay:true }
  13. 13. MediaView Stage
{ 



title:
quot;Video
demoquot; 



width:
bind
media.width 



height:
bind
media.height 



scene:
Scene
{ 







content:
MediaView
{ 











mediaPlayer:
player 







} 



} }
  14. 14. Media SimpleVideo VideoPerformance
  15. 15. Skins Styling components using external CSS style sheets
  16. 16. Skins Styling components using external CSS style sheets Not a standard feature yet!
  17. 17. A skinnable button public
class
Button
extends
Control{ 



public
var
label
:
String; 



 



 



init
{ 







skin
=
ButtonSkin{} 



} }
  18. 18. The Skin public
class
ButtonSkin
extends
Skin{ 



public
var
backgroundColor
:
Color
=
Color.BLACK; 



public
var
color
:
Color
=
Color.WHITE; 



public
var
arcHeight
:
Number
=
20; 



public
var
arcWidth
:
Number
=
20; 



var
button
:
Button
=
bind
control
as
Button; 



init
{ 







scene
=
{ 















....
//
Draw
the
control’s
UI
  19. 19. The CSS Button
{ 



backgroundColor:
green; 



color:
black; 



arcHeight:
0; 



arcWidth:
0; } Button.rounded
{ 



arcHeight:
20; 



arcWidth:
20; }
  20. 20. Deployment Desktop, Browser and Mobile No code changes Device specific hooks
  21. 21. One root object Stage
{ 



title:
quot;Application
titlequot; 



width:
250 



height:
80 



scene:
Scene
{ 







content:
[] 




 



} }
  22. 22. Applet <script
src=quot;http://dl.javafx.com/dtfx.jsquot;></script> <script> 



javafx( 







{ 













archive:
quot;JavaFXDemo.jarquot;, 













draggable:
true, 













width:
800, 













height:
600, 













code:
quot;awsdemo.AmazonBrowserquot;, 













name:
quot;JavaFXDemoquot; 







} 



); </script>
  23. 23. Applet hooks Specify drag behavior extensions:
[ 







AppletStageExtension
{ 











onDragStarted:
function()
{ 















 











} 







} 



]
  24. 24. JavaScript integration Call JavaScript from Java var
applet
=
FX.getArgument(quot;javafx.appletquot;)
as
 java.applet.Applet; var
window
:
JSObject
=
JSObject.getWindow(applet); window.call(quot;showProductquot;,
 [product.name,
product.description]);
  25. 25. <script> function showProduct(name, description) { var titleElement = document.getElementById('productTitle'); titleElement.innerHTML = name; var detailsElement = document.getElementById('productDetails'); detailsElement.innerHTML = description; } </script> <h1 id=quot;productTitlequot;></h1> <div id=quot;productDetailsquot;></div>
  26. 26. Frame styles Decorated (standard) Undecorated Transparent
  27. 27. Applets WindowStyles JavaScriptDemo
  28. 28. Animation Timeline Set of frames Controls playing KeyFrame A moment in time
  29. 29. Defining KeyFrames KeyFrame { time: 1s values: [ imageView.x => 100 tween Interpolator.EASEBOTH imageView.y => 100 tween Interpolator.EASEBOTH ] action: function() { println(“Action executed”); } }
  30. 30. Transitions Predefined animations FadeTransition ParallelTransition PathTransition PauseTransition RotateTransition ScaleTransition
  31. 31. Animation
  32. 32. Mobile February 2009 Write Once, Run Everywhere
  33. 33. Not supported Effects (reflection etc.) Opacity Video
  34. 34. Mobile
  35. 35. Production Suite Designer => Developer Workflow
  36. 36. Web Services HTTPRequest REST style services PullParser JSON & XML
  37. 37. Web Service call Enqueue HTTP Request Handle input Parse input Handle ‘events’
  38. 38. XML PullParser if(event.qname.name
==
quot;Itemquot;
and
event.type
==


 PullParser.START_ELEMENT)
{ 


product
=
new
Product(); } else
if(event.qname.name
==
quot;Titlequot;)
{ 


product.title
=
event.text; } else
if(event.qname.name
==
quot;Itemquot;
and
event.type
==
 PullParser.END_ELEMENT)
{ 


insert
product
into
products; }

  39. 39. Web Services Amazon Demo
  40. 40. Effects Effect property at any Node Including text, video, and images Lots of standard effects e.g. DropShadow, Blur, InnerShadow, Reflection, SepiaTone
  41. 41. Current problems No components! No layout managers No selectable text
  42. 42. 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?
  43. 43. JavaFX.com
  44. 44. The RIA war
  45. 45. Shameless plug ;-) 2 day JavaFX course now available Full JavaFX Script language coverage Video Web Services Animations Custom components Production Suite

×