Presented at Devoxx 2009 for the JavaFX Univerity Session. Also available online at Parleys.com.

1. The JavaFX Platform – A Java Developer’s Guide Stephen Chin Inovis, Inc.

2. About Your Presenter Director SWE, Inovis, Inc. Open-Source JavaFX Hacker MBA Belotti Award UberScrumMaster XP Coach Agile Evangelist WidgetFX JFXtras FEST-JavaFX Piccolo2D Java Champion JavaOneRockstar JUG Leader Pro JavaFX Author 2 Family Man Motorcyclist

3. LearnFX and Win at Devoxx Tweet to answer: @projavafxcourse your-answer-here 3

4. Part 1 - JavaFX Crash Course var x = ['x','o','v','e','d','x']; insert x[5] before x[0]; println("{reverse x[0..<]}"); @projavafxcourse answer

7. Hello Devoxx!: Creating a Stage Stage { title: "Hello Devoxx!" scene: Scene { content: [ "..." ] } } 6 var x = ['x','o','v','e','d','x']; insert x[5] before x[0]; println("{reverse x[0..<]}"); @projavafxcourse answer

8. Hello Devoxx!: Displaying Images ImageView { image: Image { url: "http://www.javoxx.com/download/attachments/1706305/Devoxx09.jpg" } opacity: .5 } 7 var x = ['x','o','v','e','d','x']; insert x[5] before x[0]; println("{reverse x[0..<]}"); @projavafxcourse answer

9. Hello Devoxx!: RSS Feed varitems:Item[]; RssTask { interval: 30s; location: "http://search.twitter.com/search.rss?q=devoxx" onItem: function(item) { insert item into items; } }.start(); 8

10. Hello Devoxx!: VBox Layout vartextBox:VBox; textBox = VBox { layoutX: 40 layoutY: 40 spacing: 20 content: "..." } 9

11. Hello Devoxx!: Displaying Text content: bind for (item in items) { Text { textOrigin: TextOrigin.TOP textAlignment: TextAlignment.JUSTIFY wrappingWidth: 520 font: Font.font(null, FontWeight.BOLD, 18) content: item.title } } 10

12. Hello Devoxx!: Animating Graphics vartransTransition = TranslateTransition { duration: 2m node: bind textBox fromY: 600 toY: -4000 interpolator: Interpolator.LINEAR repeatCount: Timeline.INDEFINITE } transTransition.play(); 11

13. Hello Devoxx!: Playing Audio ? MediaPlayer { autoPlay: true repeatCount: MediaPlayer.REPEAT_FOREVER media: Media { source: "http://blogs.sun.com/roller/resources/dcb/Java.mp3" } } 12

14. 13 Hello Devoxx! Demo

15. Resource: JavaFX API Documentation 14 http://java.sun.com/javafx/1.2/docs/api/

16. 15 Part 2 - Comparing JavaFX and Java var x = ['x','o','v','e','d','x']; insert x[5] before x[0]; println("{reverse x[0..<]}"); @projavafxcourse answer

17. Language Similarities Java is… Statically typed Compiled to bytecodes Runs on the JVM Has a large library JavaFX is… Statically typed Compiled to bytecodes Runs on the JVM Can call Java libraries 16

18. Language Differences 17

19. Integrating JavaFX and Java Calling Java from JavaFX Can call Java interface or classes directly Automatic conversion to and from Arrays and Collections Can even extend Java interfaces and classes Calling JavaFX from Java Easiest way is to create a Java interface that JavaFX extends Can invoke JavaFX as a script and get results back 18

20. Datatype Support 19

22. Underflows/Overflows will fail silently, producing inaccurate results

24. Access Modifiers 22

25. Data Binding A variable or a constant can be bound to an expression var x = bind a + b; The bound expression is remembered The dependencies of the expression is watched Variable is updated Regular binding: when dependencies change values Lazy binding: when the variable is accessed var x = bind lazy a+ b; 23

26. What Bind Updates var x = bind if(a) then b else c x is updated if a or b or c changes var x = bind for (i in [a..b]) { i * i } Not everything is recalculated If a = 1 and b = 2, x is [1, 4] If b changes to 3, only the added element is calculated 24 1 4 9

27. Binding to Expressions Binding to a block Bound block may contain any number of defs followed by one expression Dependencies of block is backtraced from the expression Binding to function invocation expression Regular function: dependencies are parameters Bound function: backtraced from final expression inside function 25

28. Binding to Object Literals var a = 3; var b = 4; var p = bind Point { x: a, y: b }; var q = bind Point { x: bind a, y: b }; var r = bind Point { x: bind a, y: bind b }; When a changes: p gets a new instance of Point q and r keep the old instance with a new x value r will never get a new instance of Point (the outer bind in r is useless) 26

29. Binding to Functions Stage { def cModel = CircleModel {}; varsliderRef:Slider; scene: Scene { content: [ Circle { radius: bind cModel.diameter / 2 }, Text { content: bind "Diameter: {%3.0f cModel.diameter}" }, Text { content: bind "Area: {%3.2f cModel.getArea()}" }, sliderRef = Slider { value: bind cModel.diameter with inverse }]}} 27 class CircleModel { vardiameter:Number; bound function getArea():Number { Math.PI * Math.pow(diameter / 2, 2); } } http://learnjavafx.typepad.com/weblog/javafx_app_deployment/

30. JavaFX Sequences Represents collections of homogeneous data A fundamental container data type Rich set of language facilities Contributor to declarative syntax Automatic conversion to and from Java Arrays and Collections 28

31. Creating Sequences Explicit sequence expression [1, 3, 5, 7, 9] Elements are separated by commas Comma may be omitted if element ends with brace 29 1 3 5 7 9

32. Creating Sequences Numeric sequence with range expressions: [1..10] Can have a step: [1..10 step 2] [0.0..0.9 step 0.1] Can be decreasing: [10..1 step -3] Beware of step that goes opposite direction: [10..1] is [] Exclusive right end [1..<5] 30 1 2 3 4 5 6 7 8 9 10 1 3 5 7 9 0 .1 .2 .3 .4 .5 .6 .7 .8 .9 10 7 4 1 1 2 3 4

33. Getting Information from Sequences ints = [1, 3, 5, 7, 9] sizeofintsis 5 ints[0] is 1, ints[1] is 3, ..., ints[4] is 9 ints[-1] is 0 (default value of Integer), so is ints[5] For a sequence of objects, the default is null 31 1 3 5 7 9 [0] [1] [2] [3] [4]

34. Getting Slices From Sequences ints = [1, 3, 5, 7, 9] ints[0..2] is [1, 3, 5] ints[0..<2] is [1, 3] ints[2..] is [5, 7, 9] ints[2..<] is [5, 7] ints[2..0], ints[-2..-1], ints[5..6] are all []s 32 1 3 5 7 9 [0] [1] [2] [3] [4]

35. Getting Subsets from Sequences ints = [1, 3, 5, 7, 9] ints[k | k > 6] is: [7, 9] (k > 6 is a condition) ints[k | indexof k < 2] is: [1, 3] ints[k | k > 10] is: [] 33 1 3 5 7 9 [0] [1] [2] [3] [4]

36. Inserting into Sequences ints = [1, 3, 5, 7, 9] insert 20 into ints insert 30 before ints[2] insert 40 after ints[4] insert [50, 60] into ints 34 1 3 5 7 9 1 3 5 7 9 20 1 3 5 7 9 20 30 1 3 5 7 9 20 30 40 1 3 5 7 9 20 30 40 50 60

37. Deleting from Sequences ints = [1, 3, 5, 7, 9] delete 7 from ints delete ints[0] delete ints[0..1] delete ints: ints becomes [] 35 1 3 5 7 9 1 3 5 7 9 1 3 5 9 3 5 9 9

38. Sequence Puzzlers FX What is the size of this sequence: [1..10 step -1] What does this evaluate to: [10..<20 step 2][k|k>17] What is the size of this sequence: sizeof [20..1 step -3] 36 1 A: 0 2 A: [18] 3 A: 1

39. Reference: JavaFXRefCard 37 http://refcardz.dzone.com/refcardz/

40. Demo by Tor Norbye 38 JavaFX Builder Tool ?

41. 39 JavaFX 1.2 Layouts

42. JavaFX 1.2 Custom Layouts Container Panel Both Extend Parent Container creates layouts by extension Panel creates layouts by declaration 40

43. Who is My Representative? 41 Web Service Integration

44. Calling a REST Service REST URL: http://whoismyrepresentative.com/getall_mems.php?zip=90210&output=json Output: { "results": [ { "type": "rep", "name": "Henry A. Waxman", "party": "D", "state": "CA", "district": "30", "phone": "(202) 225-3976", "office": "2204 Rayburn", "link": "http://www.henrywaxman.house.gov/" } ]} 42

45. Making an HttpRequest req = HttpRequest { method: HttpRequest.GET location: url onInput: parseResponse onDone: function() { if (req.responseCode != 200) { message = req.responseMessage; } else if (sizeof senators == 0 and sizeof representatives == 0) { message = "No members found for {zipcode}"; } } onException: function(ex: java.lang.Exception) { println("Exception: {ex.getClass()} {ex.getMessage()}"); } } req.start(); 43

46. Using the Pull Parser while (parser.event.type != PullParser.END_DOCUMENT) { parser.seek( "type" ); if (parser.event.type == PullParser.START_VALUE) { parser.forward(); if (parser.event.text == "rep") { var rep = Representative{} parseMemberOfCongress( rep, parser ); insert rep into representatives; } else if (parser.event.text == "sen" ) { varsen = Senator{} parseMemberOfCongress( sen, parser ); insert sen into senators; } } } 44

47. JavaFX Mobile Development

48. JavaFX Mobile Advantages Write Once, Run Anywhere Desktop, Mobile, Set-top Boxes (future) Large Embedded Base Built on top of Java ME platform Wide Range of Devices Runs on Feature Phones, Smart Phones Currently available for Windows Mobile devices

49. JavaFX Mobile Constraints Screen Size Your application has to be capable of adapting to different screen sizes as small as 320 by 240. Common Profile Mobile applications are limited to the JavaFX APIs that are part of the Common Profile, which is a subset of the Desktop Profile. Performance Mobile applications run on much less powerful devices, so they have less CPU and memory resources available to work with.

50. Developing for the Common Profile

51. Changes to Improve Hello Devoxx! It runs as is with no changes, but was not designed for the mobile format. We can do better: Replace all hard-coded sizes with a bind Scale the background image to the screen size Put an error up on network failure The improved version also works on the desktop. 49

52. Mobile Demo Hello Devoxx!

53. JavaFX How-To’s 51 http://javafx.com/learn/howto.jsp

54. 52 JFXtras – Open Source JavaFXAddons http://jfxtras.org/

55. JFXtras Grid 53 Row Row

56. JFXtras Grid XGrid { effect: Reflection {} border: 20 vgap: 12 hgap: 12 rows: bind [ row([text, progressBar]), row([navigator, mediaGrid]) ] } 54

57. Media Explorer Example 55

58. JFXtras Borders 56

59. JFXtras Borders Function: override function create() { XTitledBorder { id: "imageTitle“ title: file.getName() content: XFrameBorder { id: "imageFrame“ node: XImageView { preserveRatio: true smooth: true image: bind image } } } } CSS: #imageTitle { position: "bottom"; justification: "center"; font: bold 12pt Serif; text-color: #000060; } #imageFrame { border-left-width: 12; border-top-width: 12; border-bottom-width: 20; border-right-width: 12; background-fill: #00007020; } 57

60. JFXtras Borders 58

61. 59 MigLayout for JavaFX

62. 60 Flexible Grid-Based Layout Flow Wrap

63. MigLayout Constraints “wrap” “fill” “flowy” “gap” MigLayout { constraints: “fill, wrap” // to be continued } 61

64. MigLayout { constraints: "fill, wrap" columns: "[][]" rows: "[][]4mm[]push[]" content: [ Label { text: "Email" layoutInfo: nodeConstraints( "ax right" ) } TextBox { layoutInfo: nodeConstraints( "growx, pushx" ) } Label { text: "Password" layoutInfo: nodeConstraints( "ax right" ) } TextBox { layoutInfo: nodeConstraints( "growx, pushx" ) } Button { text: "Login" layoutInfo: nodeConstraints( "skip, right" ) } Label { text: "This text is 'pushed' to the bottom" layoutInfo: nodeConstraints( "span" ) } ] } 62

65. JFXtras Shapes 63 Almond Intersection of two circles (VesicaPiscis) centerX, centerY, width Arrow Arrow shape x, y, width, height, depth, rise Asterisk Asterisk with rounded corners centerX, centerY, width, radius, beams, roundness AstroidHypocloid with four cusps centerX, centerY, radius Balloon Rectangular shape with a tab x, y, width, height, arc, anglePosition, tabWidth, tabHeight, tabLocation, tabDisplacement Cross Symmetrical cross shape centerX, centerY, width, radius, roundness Donut Regular polygon with a hole centerX, centerY, innerRadius, outerRadius, sides Lauburu Four comma-shaped heads centerX, centerY, radius Continued…

66. JFXtras Shapes (continued) 64 MultiRoundRectangle Rectangle with configurable corners x, y, width, height, topLeftWidth/Height, topRightWidth/Height, bottomLeftWidth/Height, bottomRightWidth/Height Rays Multiple rays extend from center centerX, centerY, rays, radius, extent, rounded RegularPolygon Polygon with equal sides centerX, centerY, sides, radius ReuleauxTriangle Curved triangle shape centerX, centerY, radius RoundPin Cone with rounded top centerX, centerY, height, radius Star2 Multipoint star centerX, centerY, innerRadius, outerRadius, count ETriangle Equilateral triangle x, y, width ITriangle Isosceles triangle x, y, width, height RTriangle Right triangle x, y, width, height, anglePosition

67. JFXtras Shapes 65

68. Sphere Challenge 66 Andres Almiray’s Weblog http://www.jroller.com/aalmiray/entry/griffon_gfxbuilder_fxbuilder_side_by “The following snapshot shows a couple of spheres drawn with GfxBuilder and FxBuilder, can you guess which one is which? … This is by no means a post to bash JavaFX rather to point out some of its deficiencies” -- Andres Almiray (taken completely out of context)

69. Sphere Challenge – JavaFX Response Composition: RadialGradient for the Sphere Three additional RadialGradients for the light sources A blurred shadow underneath Features: All Bound/Relative Coordinates Configurable – Base, Ambient, Specular, Shine Colors Shadow Size and Height Uses New JFXtrasColorUtil Library JavaFX Caching for High Performance 67 Will be shipped with JFXtras 0.6

70. JFXtras Spheres Demo 68

71. JFXtras Shelf 69

72. The JavaFX Desktop Widget Platform WidgetFX

73. WidgetFX Origins 71

74. 72 Why WidgetFX Matters

75. Movie Widget Tutorial

76. Widget Properties 74

77. Widget Definition var widget: Widget; widget = Widget { width: 640 height: 352 aspectRatio: bind player.media.width / player.media.height content: bind player } 75

78. Load the Media var source = "http://projavafx.com/movies/ elephants-dream-640x352.flv"; var player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height } 76

79. Run in Widget Runner 77

80. Widget Configuration Properties 78

81. Widget Configuration widget = Widget { ... configuration: Configuration { properties: [ StringProperty { name: "source“ value: bind source with inverse } ] scene: Scene {…} // see next page } } 79

82. Widget Config Dialog Scene { content: XGrid { rows: row([ Text { content: "Source URL:“ }, TextBox { columns: 30, value: bind source with inverse } ]) } } 80

83. Add an On-Replace Trigger var player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height } on replace =oldPlayer { oldPlayer.player.stop(); } 81

84. Widget Configuration (demo) 82

85. WidgetFX Contest Results! 3rd Place Infix WeatherWidget Larry Dickson 2nd Place RadioFX Yannick Van Godtsenhoven 1st Place ScreenshotFX Pär Dahlberg 83

86. JavaFXpert RIA Exemplar Challenge "Create an application in JavaFX that exemplifies the appearance and behavior of a next-generation enterprise RIA (rich internet application)". Grand Prize: $2,000 USD (split between a two-man graphics artist and application developer team) Deadline: 10 January, 2010 For more info: http://learnjavafx.typepad.com/ 84

87. LearnFX and Win at Devoxx 85

88. Thursday’s Question HttpRequest { location: http://steveonjava.com/ onResponseMessage: function(m) { println(m); FX.exit() }}.start(); Launch LearnFX from my blog: http://steveonjava.com/ Or tweet @projavafxcourse answer 2:00PM Room 8 (right here!) 86

89. Sneak Preview of Thursday’s Session 87

90. 88 Thank You Stephen Chin http://steveonjava.com/ Tweet: steveonjava Thanks to my co-authors, Jim, Weiqi , and Dean for content included in this talk!