JavaFX
 Paul Bakker
About me
Paul Bakker
                        EJB 3
 Trainer Info Support
                        JSF
 NLJUG speaker       ...
Outline
Video
Deployment
Mobile
Production Suite
Web Services API
One minute intro
JavaFX is Sun’s RIA platform
  Competes with Flex, Flash and Silverlight
A new language
  JavaFX Script
 ...
Platform Support
         MacOS
         Windows
         Linux / Solaris on the way
Runtimes
JRE 6 update 11 recommended
   Performance
   Drag-able applets
   Stability
   Download size
Runs on JRE 5
Video

  Native codec support
  Cross platform FLV
Native codecs
                      Core Video
Video: H.261, H.263, and H.264 codecs
MPEG-1, MPEG-2, and MPEG-4 Video file...
Native Codecs
               DirectShow

Video: Windows Media Video,H264 (as an
update)
Audio: MPEG-1, MP3, Windows Media ...
FXM
Video: On2 VP6
Audio: MP3
Using Video

Media
   MediaPlayer
      MediaView
Media
var
media
=
Media
{



source:
quot;file:///Users/paul/21.aviquot;
}



 MediaPlayer
 var
player
=
MediaPlayer
{
 

...
MediaView
Stage
{




title:
quot;Video
demoquot;




width:
bind
media.width




height:
bind
media.height




scene:
Sce...
Media
        SimpleVideo
        VideoPerformance
Skins
Styling components
using external

                             CSS
style sheets
Skins
Styling components
using external

                              CSS
style sheets




Not a standard feature yet!
A skinnable button

public
class
Button
extends
Control{




public
var
label
:
String;














init
{








skin
...
The Skin
public
class
ButtonSkin
extends
Skin{




public
var
backgroundColor
:
Color
=
Color.BLACK;




public
var
color
...
The CSS
Button
{




backgroundColor:
green;




color:
black;




arcHeight:
0;




arcWidth:
0;
}

Button.rounded
{




...
Deployment
Desktop, Browser and Mobile
No code changes
Device specific hooks
One
root object
              Stage
{
              



title:
quot;Application
titlequot;
              



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




javafx(








{














archive:
...
Applet hooks

Specify drag behavior
extensions:
[








AppletStageExtension
{












onDragStarted:
function()
{

...
JavaScript integration
    Call JavaScript from Java


var
applet
=
FX.getArgument(quot;javafx.appletquot;)
as

java.apple...
<script>
function showProduct(name, description) {
   var titleElement = document.getElementById('productTitle');
   title...
Frame styles

Decorated (standard)
Undecorated
Transparent
Applets
          WindowStyles
          JavaScriptDemo
Animation
 Timeline
  Set of frames
  Controls playing


 KeyFrame
  A moment in time
Defining KeyFrames
KeyFrame {
 time: 1s
 values: [
    imageView.x => 100 tween Interpolator.EASEBOTH
    imageView.y => 10...
Transitions
Predefined animations
   FadeTransition
   ParallelTransition
   PathTransition
   PauseTransition
   RotateTra...
Animation
Mobile
  February 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 PullParser
if(event.qname.name
==
quot;Itemquot;
and
event.type
==



PullParser.START_ELEMENT)
{



product
=
new
Pro...
Web Services
               Amazon Demo
Effects

Effect property at any Node
  Including text, video, and images
Lots of standard effects
  e.g. DropShadow, Blur,...
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 ne...
JavaFX.com
The RIA war
Shameless plug ;-)
2 day JavaFX course now available
  Full JavaFX Script language coverage
  Video
  Web Services
  Anima...
Upcoming SlideShare
Loading in …5
×

JavaFX Advanced

4,330 views
4,072 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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,330
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
310
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×