The document provides an overview of JavaFX, a platform for building rich internet applications. It discusses JavaFX's scripting language, graphical elements like text, shapes and images, effects, user interactions, and animation capabilities. Transitions and keyframe animation are described as two approaches for animating nodes over time in JavaFX applications. Examples are given for common tasks like handling events, dragging objects, and animating property changes.

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

2. Agenda JavaFX Script Language Overview

3. Advanced features Graphics

4. User Input

5. Animation

6. Media

7. Work with Restful Web Services JavaFX Application Deployment

8. Summary and References

9. Overview of the JavaFX SDK

10. JavaFX Vision * Rich Clients

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

12. Targeting Developer/Designer Workflow Working together with graphic designers to conceptualize the interface Sean Wani (Graphic Designer)‏ Karl May (Mashup author/builder)‏ Amy Lewis (Suburban wife/mom)‏ Tom Hammer (Media Editor)‏ Saloni Sarin (Creative Director)‏ Livleen (Student)‏ Samir Arora (Business Professional)‏ Adam Nielson (Web Master)‏ Wayne Stidolph (Programmer)‏ Rich Internet Apps + content Across desktop, mobile, TV, car Creative Community Consumers

13. Things You Can Build with JavaFX

14. Simple Video Player Incorporating video in your application is as simple as creating an instance of this component, setting a few variables and including a link to your video source.

15. 3-D Display Shelf With the PerspectiveTransform The PerspectiveTransform built into JavaFX can be used to easily create 3-D effects

16. Demo: JavaFX Sample Apps from javafx.com

17. JavaFX Script JavaFX Script source files are called “scripts”

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

21. JavaFX Script Programming Language Declarative, statically-typed scripting language

22. Facilitates rapid GUI development

23. Integrates with and Leverages Java Platform

24. Runs on Java™ Virtual Machine Deployment options same as Java programs

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

30. Declarations Variables

31. Constants var fred:Number; def PI:Number = 22 / 7; Data Types If not specified => compiler infers the correct type var s = “Hello World” ;

32. var i = 10; Garden variety type String

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

34. Boolean

35. Void

36. Data Types Durations – 1ms , 2s , 4m , 8h A function can be a variable var doExit = function():Void { System.exit(0); }; doExit(); //executed when invoked Functions

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

39. Object Literal class Point { var x : Integer; var y : Integer; function show() { println("Point {x}, {y}") } } //instance of object literal var myPoint = Point {x: 12, y: 9} def yourPoint = Point {x: 22, y: 19} myPoint.show() declarative syntax for object creation

40. Similar to JavaScript

41. variable: initial-value

42. Sequences Insert, delete var time:Duration [] = [60ms, 60s, 60m, 60h]; var days = [ 1..31 ]; insert 5s into time; delete 31 from days; A Sequence represents an ordered list of objects

43. Data Binding ties the value of a variable to the value of an expression Changes to the bound expression will cause the value to be reapplied to the field var h = 10; var w = 2; //Whenever h or w changes, area updated var area = bind h * w ; println( area ); //prints 20 w =3; println( area ); //prints 30 Eliminates the listener pattern Useful for binding Model to View

44. Triggers Associate a block of code to a variable

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

50. What is a Scene Graph? A hierarchical representation of graphical objects Tree like structure

51. Basis of JavaFX graphics engine Scene graph elements Nodes - leaf: images, text, shapes, custom... Group – Node Container Nodes have: State – visibility, opacity, transformation

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

56. Base Graphical Objects Graphical objects Text, geometric shapes, text, Swing components Some common attributes in nodes Transformation – translate, shear, rotate, scale

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

62. Text Defines a node for displaying text Text { effect: DropShadow { offsetX: -10 offsetY: -10 } font: Font { name: “DirtyBakersDozen” size: 50 } fill: Color.ROYALBLUE stroke: Color.BLUE, strokeWidth: 3 x: 15, y: 80 content: "Hello World" }

63. Geometric Shapes Arc, ellipse, line, polygon, circle, rectangle

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

65. Custom Shapes Two ways of defining custom shapes Combining existing shapes

66. Drawing a totally new shape Combine existing shape with ShapeIntersect or ShapeSubtract Either add or subtract from shape

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 ] }

68. Custom Shapes Two ways of defining custom shapes Combining existing shapes

69. Drawing a totally new shape Draw new shapes with Path and path elements Path elements include MoveTo , ArcTo , HLine , VLine , QuadCurve , etc. Can be manipulated like a regular geometric shape

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}} }

71. Images ImageView node shows images

72. Image represents an in memory Image Both ImageView and Image can scale Preserve ratio

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 } }

79. Effects Effects are placed on Nodes

80. Many standard built in DropShadow