Presentation about JavaFX technology.

1. Tom Mix Campus Ambassadors Sun Microsystems do Brasil [email_address] blogs.sun.com/tommix JavaFX Overview

3. What is & Why JavaFX?

5. What does RIA mean today? Extend RIA, across multiple screens

6. JavaFX Vision JavaFX is THE platform for creating and delivering Rich Internet Application s (RIA) across all the screens of your life JavaFX is Powered by Java

7. Key Features of JavaFX

10. Things You Can Build with JavaFX

14. Demo: JavaFX Sample Apps from javafx.com

15. JavaFX Platform Architecture

16. JavaFX Platform Architecture

17. JavaFX roadmap JavaFX Desktop (Winter 2008) ‏ JavaFX Mobile (Spring 2009) ‏ JavaFX TV (Summer 2009) ‏ Desktop Product Line Mobile Product Line TV Product Line Other Platforms With Partner platforms/OSs

18. JavaFX Script Overview

34. Demo: Hello World ! Group Language http://www.javapassion.com/handsonlabs/5700_javafx_overview.zip

41. Demo: Group Binding and Triggers http://www.javapassion.com/handsonlabs/5701_javafx_lang.zip

42. Using Declarative Syntax (for Creating GUI)

44. JavaFX Architecture Models a JavaFX GUI Java 2D Effects Project Scene Graph

45. Scene Graph: Group Group { transforms: Translate { x:15, y, 15 } content: [ Text { x: 10, y: 50 font: Font: { size: 50 } content: “Hello World” } Circle { centerX: 100, centerY: 100 radius: 40 fill: Color.BLACK } ] } Group Circle Text x:15 y:15

46. Example of JavaFX Application import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.scene.shape.Circle; import javafx.stage.Stage; Stage { title: "My circle" width: 100 height: 100 scene: Scene { content: [ Circle { centerX: 50, centerY: 50 radius: 40 fill: Color.RED } ] } }

47. Demo: Creating Objects Group GUI_Basics http://www.javapassion.com/handsonlabs/5714_javafx_guibasics.zip

48. Effects

50. Effects: DropShadow

55. Demo: DropShadow, gui_simple_effect_DropShadow DropShadow with Binding Group: GUI_2 - gui2_binding_DropShadow_Mouse

56. Effects: PerspectiveTransform

58. JavaFX GUI Basics II: Interaction, Transformation, Binding, Drag and drop, Swing components

60. Interactions

63. Demo: Group GUI_2 gui2_interation_mouse_events gui2_interaction_Sketch_basic_3steps http://www.javapassion.com/handsonlabs/5715_javafx_guibasics2.zip

64. Transformation

71. Bindings with GUI Objects

74. Demo: Transformation gui2_binding_DropShadow_Mouse www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_3

75. Drag and Drop

79. Demo: Drag and Drop www.javapassion.com/handsonlabs/javafx_guibasics2/index.html#Exercise_4

80. Swing Components

82. Animation Support in JavaFX

85. Transitions

88. RotationTransition var rotTransition = RotateTransition { duration: 3s node: node byAngle: 180 repeatCount:4 autoReverse: true } var princess:ImageView = ImageView { image: Image { url: "{__DIR__}princess.png" } onMouseClicked: function( e: MouseEvent ):Void { rotTransition.play(); } }

89. Path Transition var earth :ImageView = ImageView { x: sx y: sy image: Image { url: "{__DIR__}earth.png” } } def path = [ MoveTo { x: sx y: sy} ArcTo { x: 0 y: 200 radiusX: 50 radiusY: 50 sweepFlag: true } ]; var aniPath: PathTransition = PathTransition { node: earth path: AnimationPath.createFromPath( Path {elements: path }) duration: 1500ms } aniPath.playFromStart();

90. Demo: Transitions Group: Animation http://www.javapassion.com/handsonlabs/5718_javafx_animation.zip

91. KeyFrame based Animation

94. Example: Interpolator Based var t = Timeline { keyFrames : [ KeyFrame { time : 0s values : [ tx => 0.0 ] action : function() { … } }, KeyFrame { time : 10s values : [ tx => 700 tween Interpolator.EASEBOTH ] } ] } t. start ();

95. Example – Defining Key Frames Timeline { keyFrames: [ KeyFrame { time: 0s values: [ radius => 30 ] } KeyFrame { time: 5s values: [ radius => 300 tween Interpolator.LINEAR ] } ] } 0s 1s 2s 3s 4s 5s 6s Key value radius = 30 radius = 300 Keyframes How the value changes over time

96. at() (Shorthand notation) keyFrames: [ at(0ms) { radius => 30 } at(500ms) { radius => 300 Interpolate.LINEAR } ] var t = Timeline { ... keyFrames: [ KeyFrame { time: 0ms values: [ radius => 30 ] }, KeyFrame { time: 500ms values: [ radius => 300 tween Interpolator.LINEAR ] } ] };

97. Animation through Binding var opa = 0.0; var street1:ImageView = ImageView { image: Image { url: "{__DIR__}street1.jpg" } opacity: bind opa onMouseClicked: function( e: MouseEvent ):Void { timeline.play(); } } var timeline:Timeline = Timeline { keyFrames: [ KeyFrame { time: 0s values: [ opa => 0.0,] }, KeyFrame { time: 1s values: [ opa => 1.0 tween Interpolator.LINEAR,] } ] }

98. Custom Node

101. Demo: Building “Under the Sea” Step by Step animation_simple_StreetOpacity_3steps Group: Custom Node http://www.javapassion.com/handsonlabs/5717_javafx_customnode.zip

102. Media

107. Example of Creating a Media Player var video:Media = Media { source: "http://..." }; var player:MediaPlayer = MediaPlayer { media: video rate: 1.0 volume: 0.4 }; var view:MediaView = MediaView { mediaPlayer: player x:200 y:200 }; Stage { title: "Media Player" width: 700 height: 700 scene: Scene { content: [view] } }

108. Demo: Media http://javafx.com/samples/SimpleVideoPlayer/index.html

109. Deployment

113. Demo: Draggable Applet

114. JavaFX Production Suite

119. Typical Rich Application Development Context

120. Typical Rich Application Development Workflow

124. FXD Explained

126. FXD Example Group { id: "face" content: [ Circle { id:"background" centerX:40 centerY:40 radius:39 fill:Color.YELLOW stroke:Color.BLACK strokeWidth:3.0}, Circle { centerX:25 centerY:30 radius:5 fill: Color.BLACK}, Circle { centerX:55 centerY:30 radius:5 fill: Color.BLACK}, Line{ startX:32 startY:23 endX:16 endY:15 stroke:Color.BLACK strokeWidth:4.0}, Line{ startX:45 startY:23 endX:61 endY:15 stroke:Color.BLACK strokeWidth:4.0}, QuadCurve { id: "mouth" stroke:Color.BLACK strokeWidth:3.0 fill: Color.TRANSPARENT startX:20 startY:60 endX:60 endY:60 controlX:40 controlY:80 } ] }

127. Demo: Designer/Developer Workflow http://www.javapassion.com/handsonlabs/javafx_productionsuite/#Exercise_1

128. JavaFX Mobile

129. JavaFX Platform Authoring Tools Desktop Runtime Mobile Runtime TV Runtime

132. JavaFX Mobile Application - Packaging JavaFX code Java code JavaFX compiler Java compiler Preverification Static code analysis performance and size optimizations Optionally bundle JavaFX Platform Runtime JAR (CLDC ready code)

136. Demo: JavaFX Mobile http://javafx.com/samples/SimpleVideoPlayerMobile/index.html

138. Thank you !!!