JavaFX overview

1. JavaFX - Rich GUIs Made Easy Carol McDonald Technology Evangelist

4. User Input

5. Animation

6. Media

8. Summary and References

9. Overview of the JavaFX SDK

11. Multiple devices JavaFX is THE platform for creating and delivering Rich Internet Application s across all the screens of your life

13. Things You Can Build with JavaFX

16. Demo: JavaFX Sample Apps from javafx.com

18. Everything in JavaFX script is an expression

19. All blocks are expressions

20. The last line is the result println(“ Hello World ”) The result of the println expression is null

22. Facilitates rapid GUI development

23. Integrates with and Leverages Java Platform

25. Example of JavaFX Application Stage { title: "circle" width: 240 height: 200 scene : { content : [ Circle { centerX: 50 centerY: 50 radius: 50 fill: Color.RED } ] } } Stage Scene content Circle Stage class defines the container window, size and title Scene class defines the content to be displayed in the window

26. Example of JavaFX Application import javafx.scene.Scene; import javafx.scene.shape.Circle; import javafx.stage.Stage; Stage { scene: { content: [ Circle { centerX: 50 centerY: 50 radius: 50 fill: Color.RED } ] } }

27. Demo: http://www.javapassion.com/handsonlabs/javafx_lang/#Exercise_1

28. JavaFX Technology Stack Java2D java.awt.* SceneGraph com.sun.scenario.scenegraph.* com.sun.scenario.animation.* com.sun.scenario.effects.* JavaFX Script Programming Language javafx.gui.* javafx.gui.effect.* javafx.animation.* Java APIs script Swing javax.swing.* Note: JavaFX Script programs can call any Java APIs

29. (Some) Language Features

33. Number / Integer – byte, short, int, long, BigInteger

34. Boolean

35. Void

37. Declaring Classes // This class extends a Java interface public class FooModel extends TableModel { ... } // This class defines two variables and a function public class Location { public var x:Number; public var y:Number; public function move(newX:Number, newY:Number):Void { x = newX; y = newY; } }

38. Basic JavaFXScript Class class HelloWorldNode extends CustomNode { public var text:String; public override function create() : Node { return Text { x: 10 , y: 50 font: Font { size: 50 } content: bind text } }; } Syntax is Java-like with shades of JavaScript

40. Similar to JavaScript

41. variable: initial-value

45. When the value of the variable changes , the code is executed

46. Similar to PropertyChangeListener //oldValue is optional var text on replace oldValue { println(“Old value = '{oldValue}'”); println(“New value = '{text}'”); } text = “Hello” //prints Old value = '' //prints New value = 'Hello'

47. Graphical Objects * * The fun stuff

48. JavaFX Stage Scene Stage is the top level container window Scene is a drawing surface container that holds the scene graph nodes. content holds JavaFX graphical elements which define the graphical content of the application.

49. JavaFX Scene Graph Programming Model (cont.) top level container window container that holds the scene graph nodes

52. Events – mouse, keyboard, node updates

53. Animation – varying properties over time

54. Group – Node Container 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

55. JavaFX Architecture Models a JavaFX application Java 2D Effects Project Scene Graph

57. Clip – displaying only part of the node based on a geometric shape

58. Effect – type of effect, eg. blurring, shadowing, to apply

59. Events – mouse, keyboard

60. Opacity – setting the translucency

61. List is not exhaustive

64. Very similar to text Circle { centerX: 70, centerY: 70 radius: 50 fill: Color.PINK stroke: Color.RED strokeWidth: 3 strokeDashArray: [ 7 ] strokeDashOffset: 2 }

67. Example – ShapeIntersect var rectangle = Rectangle { x:10 y:20 width:140 height:70 fill:Color.LIGHTBLUE stroke:Color.BLUE arcHeight:20 arcWidth:20 strokeWidth:3} var diamond = Polygon { points:[90,90, 110,70, 130,90, 110,110 ] fill:Color.LIGHTPINK stroke:Color.RED strokeWidth: 3} var newShape = ShapeIntersect { translateX:170 fill: Color.LIGHTGREEN stroke: Color.GREEN strokeWidth: 3 //Union of the 2 shapes a: [ rectangle diamond ] }

70. Example – Path Path { fill: Color.LIGHTGRAY stroke: Color.GRAY strokeWidth: 3 elements: [ MoveTo { x: 15 y: 15 }, ArcTo { x: 50 y: 10 radiusX: 20 radiusY: 20 sweepFlag: true}, ArcTo { x: 70 y: 20 radiusX: 20 radiusY: 20 sweepFlag: true}, ArcTo { x: 50 y: 60 radiusX: 20 radiusY: 20 sweepFlag: true}, ArcTo { x: 20 y: 50 radiusX: 10 radiusY: 5 sweepFlag: false }, ArcTo { x: 15 y: 15 radiusX: 10 radiusY: 10 sweepFlag: true}, ] effect: Lighting{light: DistantLight{azimuth: 90}} }

73. Fit within a specific width/height

74. When fit on Image level, keeps smaller image in memory myImageView = ImageView { image: Image { url: "file:///..."} }

75. Images ImageView = ImageView { clip: Rectangle { y: 30 x: 50 width: 350 height: 100 } image: Image { url: "file:///..."} }

76. JavaFX Catalog client

77. JavaFX Stage Scene // Application User Interface var stageContent: Node[]; stageContent = [bgImage, nextButton, backButton, titleText, thumbImageViewGroup, fullImageView ]; def stage = Stage { title: "Pet Catalog" width: 201 height: 201 scene : Scene { content : Group { content: bind stageContent } fill: Color.TRANSPARENT } }

78. JavaFX Stage Scene var stageContent: Node[]; stageContent = [bgImage, nextButton, backButton, titleText, thumbImageViewGroup, fullImageView ]; def stage = Stage { title: "Pet Catalog" width: 201 height: 201 scene : Scene { content : Group { content: bind stageContent } fill: Color.TRANSPARENT } }

81. ColorAdjust

82. GaussianBlur

83. Glow

84. Reflection

85. more...

86. Example: DropShadow Text { effect: DropShadow { offsetY: 3 color: Color.GREEN radius: 20.0 }; ... }, Circle { effect: DropShadow { offsetX: 10 offsetY: 20 color: Color.BLUE radius: 30.0 } ... }

87. Some Effects Supported In JavaFX effect: SepiaTone { level: 0.5 } effect: Glow { level: 0.7 } effect: GaussianBlur { input: SepiaTone { level: 0.5 } radius: 10.0 } effect: Reflection { fraction: 0.7 } Original image

88. Lighting Effect effect: Lighting{ surfaceScale: 7 light: DistantLight{ azimuth: 90 elevation: 30 } } effect: Lighting{ surfaceScale: 7 light: SpotLight { x: 0 y :0 z: 50 pointsAtX: 10 pointsAtY: 10 pointsAtZ: 0 color: Color.YELLOW } }

89. Demo: DropShadow, http://www.javapassion.com/handsonlabs/javafx_guibasics/index.html#7.1 DropShadow with Binding, http://www.javapassion.com/handsonlabs/javafx_customnode/index.html EffectsPlayground http://javafx.com/samples/EffectsPlayground/index.html

90. Interactions

92. Example – Handling Events var rectangle:Rectangle = Rectangle { x: 20, y: 10 width: 150, height: 70 arcWidth: 50, arcHeight: 50 fill : Color.LIGHTBLUE stroke: Color.ROYALBLUE strokeWidth: 3 onMouseEntered : function( e: MouseEvent ):Void { rectangle. fill = Color.WHITESMOKE; } onMouseExited : function( e: MouseEvent ):Void { rectangle.fill = Color.LIGHTBLUE; } } Changing the color of the rectangle

93. Example – Handling Events var sx:Number = 0; var dx:Number = 0; var sy:Number = 0; var dy:Number = 0; var rectangle:Rectangle = Rectangle { x: bind dx y: bind dy width: 150 height: 70 arcWidth: 50, arcHeight: 50 fill: Color.LIGHTBLUE stroke: Color.ROYALBLUE strokeWidth: 3 cursor : Cursor.HAND onMousePressed : function( e: MouseEvent ) :Void { sx = e.dragX - dx; sy = e.dragY - dy; } onMouseDragged : function( e: MouseEvent ) :Void { dx = e.dragX - sx; dy = e.dragY - sy; } } Dragging an object around the screen

94. Demo: Simple Sketch gui2_interaction_Sketch_basic_3steps http://www.javapassion.com/handsonlabs/javafx_guibasics2/#1.3

98. Need to specify the node to perform the transition on

100. FadeTransition – opacity

101. TranslateTransition – move a node along a straight line

102. PathTransition – move an object along a defined path

103. ScaleTranstion – grows or shrinks a node

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

105. Demo: Transitions http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_1 http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_2

109. Demo: simple animation http://www.javapassion.com/handsonlabs/javafx_animation/

110. Example – expanding Circle var cRadius; var circle: Circle = Circle { centerX: 300, centerY: 300 radius: bind cRadius fill: Color.LIGHTBLUE onMousePressed: function( e: MouseEvent ):Void { tRadius.playFromStart(); } } Stage { scene: Scene { content: [circle] } }

111. Example – Defining Key Frames var tRadius : Timeline = Timeline { keyFrames: [ KeyFrame { //start point time: 0s values: [ cRadius => 30 ] } KeyFrame { //end point time: 5s values: [ cRadius => 300 tween Inter polator.LINEAR ] } ] } movement from the beginning to the end states Interpolator calculates the states that occur between animation frames 0s 1s 2s 3s 4s 5s 6s Key value radius = 30 radius = 300 Keyframes How the value changes over time

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

113. Example – expanding Circle var cRadius:Number = 30; var tRadius :Timeline = Timeline { keyFrames: [ at(3s) { cRadius => 200 tween Interpolator.LINEAR} ] }; var circle: Circle = Circle { centerX: 300, centerY: 300 radius: bind cRadius fill: Color.LIGHTBLUE onMousePressed: function( e: MouseEvent ):Void { tRadius.playFromStart(); } }

114. Example – Animating an Object var x : Number=0; Timeline { keyFrames: [ at (7s) { x => 387.0 tween Interpolator.LINEAR} ] }.play(); Path{ ... translateX: bind x ...}

115. Demo: Building “Picture Display” Step by Step http://www.javapassion.com/handsonlabs/javafx_customnode/index.html

116. Work with Restful Web Services

117. RESTful Catalog Service JavaFX client JAX-RS, JAXB, JPA DB Registration Application JAX-RS class JavaFX client JAXB class Entity Class ItemsConverter Item ItemsResource

118. Article on SDN

119. RESTful Pet Catalog Web Service http://petstore/catalog/resources/items/ HTTP GET Response XML items <item> <imageurl>http://host/catalog/images/anthony.jpg</imageurl> <name>Friendly Cat</name> <price>307.10</price> <productid>feline01</productid> </item> Server Client Addressable Resources Web Container

121. Need to specify the location and the HTTP method

123. JavaFX HttpRequest function loadImageMetadata() { var start=page * 9; var request: HttpRequest = HttpRequest { location: &quot; http://localhost:8080/catalog/resources/items/ &quot; method: HttpRequest.GET onInput: function(input: java.io.InputStream) { var parser = PhotoPullParser{}; photos = parser.parse(input) ; } onDone: function() { updateImages() ; } } request.enqueue(); } Performs HTTP GET on url catalog/items

126. Direct the parser with parser.forward() and parser.seek( QName{name:&quot;child&quot;} )

127. JavaFX Parser public class PhotoPullParser { public function parse(input: InputStream): Photo[] { var photos: Photo[]; var photo: Photo; def parser = PullParser { input: input onEvent: function(event: Event) { if (event.type == PullParser.START_ELEMENT ) { if(event.qname.name == &quot;item&quot; and event.level == 1) { photo = Photo { }; } } else if (event.type == PullParser.END_ELEMENT ) { if( event.qname.name == &quot; item &quot; and event.level == 1) { insert photo into photos; } else if( event.qname.name == &quot; imagethumburl &quot; and event.level == 2){ photo.imagethumburl = event.text; } ... } } } parser.parse(); return photos; } <item> <imageurl>http://y.jpg</imageurl> <name>Friendly Cat</name> ... </item>

128. Media

131. Zero configuration,

132. support whatever the native platform (Windows, Mac, …) supports

133. Integration with JavaFX scenegraph

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

135. Demo: Media

136. Deployment

138. Carol McDonald Technology Evangelist [email_address]