Presentation on Data Rich Interfaces in JavaFX given at Jazoon 2010.

1. Building Data Rich Interfaces with JavaFX Stephen Chin Inovis

2. About the Presenter Director SWE Inovis, Inc. Open-Source JavaFX Hacker MBA Belotti Award UberScrumMaster XP Coach Agile Portfolio Process Speaker Pro JavaFX Author Java Champion JavaOneRockstar JFXtras WidgetFX FEST-JavaFX Silicon Valley JavaFX User Group Founder Family Man Motorcyclist

3. 3 AGENDA JavaFX Technology Stack Data Binding JavaFX 1.3 Controls Control Styling JavaFX 1.3 Layouts Web Service Integration JFXtras Data-driven Controls Apropos Demo Pro JavaFX Quiz with Prizes!

4. JavaFX Technology Stack XControls Swing Handlers XLayouts Wipe JFXtras Project Controls Layouts Media Web Services Binding CSS JavaFX Platform JVM Security APIs Deployment … Java Platform

5. Evolution of Data Binding JavaFX Binding Bind Library Property Change Listeners Callbacks

6. Bind Expressions Unidirectional: property: bindobject.value property: bindsequence[index] sequence: bindfor (v in values) convert(v) Bijective: property: bindvalue with inverse Function: public bound function calculateTotal(subtotal, tax) { return subtotal * (1 + tax);} New in JavaFX 1.3 – All binding is lazy!

7. Binding to Controls boundfunctiongetScore() {[ ScoreLine {line: "Ski Jumping - Individual Norml"} ScoreLine {line: ""} ScoreLine {line: bind" {%-10smedal.type} "} ScoreLine {line: bind"{%-17smedal.name} {%-3smedal.country} {%3.1fmedal.score}"} ]} defsb = ScoreBoard { lightColor: bindmedal.lightColor lines: bindgetScore() onMousePressed: function(e) { if(e.primaryButtonDown) { medal = medals[(Sequences.indexOf(medals, medal) + 1) modsizeof medals] } else{ FX.exit(); }}}

8. Dynamic Binding JFXtras extension for runtime binding to an existing JavaFX object via reflection. Example: classReflectionTarget { publicvarfieldA:String; } defreflectionTarget = ReflectionTarget {fieldA: “A"} defmirror = context.mirrorOf(reflectionTarget); defxbind = XBind.bindWithInverse(mirror, mirror.getType().getVariable("fieldA")); xbind.ref = "B"; What is the value of: reflectionTarget.fieldA? 8

9. Java to JavaFX Binding Prototype by Johannes Schneider:http://blog.cedarsoft.com/ Java to JavaFX PropertyChangeEvents: Just make your Java Bean fire PropertyChangeEvents whenever a property has changed JavaFX to Java Variable Setter: The corresponding setter of your Java object is called PropertyChangeEvents: JavaFX binding updates trigger PropertyChangeEvents JavaFxBridge.bridge(javaModel).to(slider asFXObject).connecting(JavaFxBridge.bind("amount").to("value").withInverse()); Will be included in the JFXtras 0.8 Release – Feedback on the syntax welcome!

10. JavaFX 1.3 Top 10 Features 10

11. JavaFX 1.3 Top 10 4 Features 11 New Controls Layout Enhancements Enhanced CSS Preview Features TOP SECRET

12. New Controls in JavaFX 1.3 var list = ["apples", "bananas", "oranges", "pears", "cabbage"]; ScrollView { width: 250 height: 250 managed: false node: VBox { padding: Insets {top: 10, left: 10, bottom: 10, right: 10} spacing: 10 content: [ PasswordBox {promptText: "enter password"} Separator {} ChoiceBox { items: list } ListView { vertical: false items: list } ]}} PasswordBox Separator ChoiceBox ScrollView HorizontalList

13. Preview Controls in JavaFX 1.3 MenuBar { menus: for (i in [0..4]) Menu { text: "Menu {i}" items: for (j in [0..4]) MenuItem { text: "Menu Item {j}" } } } ToolBar { items: for (i in [0..4]) Button {text: "Button {i}"} } TreeView { root: TreeItem { expanded: true data: "Root" children: for (i in [0..4]) [ TreeItem { data: "Item {i}" }]}} MenuBar Menu ToolBar TreeView

14. Styling Controls VBox { spacing: 20 nodeHPos: HPos.CENTER content: [ Text {content: "Default Styling"} Button {text: "Button"} CheckBox {text: "CheckBox", selected: true} Slider {value: 50} ] layoutInfo: LayoutInfo { margin: Insets {bottom: 20, top: 20, left: 20, right: 20} } } 14 Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html

15. Styling Controls – Button/CheckBox .button { -fx-base: dodgerblue; -fx-shape: "M 50,30 m 0,25 a 1,1 0 " "0,0 0,-50 a 1,1 0 1,0 0,50"; -fx-scale-shape: false; } .check-box:selected *.label { -fx-text-fill: red } .check-box:selected *.mark { -fx-background-color: red; -fx-shape: "M 0,0 H1 L 4,4 7,0 H8 V1 L 5,4 8,7" "V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z"; } 15 Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html

16. Styling Controls – Slider .slider *.track { -fx-base: derive( goldenrod, 50% ); } .slider *.thumb { -fx-shape: "M 50,5 L 37,40 5,40 30,60 20,95 " "50,75 80,95 70,60 95,40 63,40 Z"; -fx-background-color: derive(goldenrod,-50%), goldenrod; -fx-background-radius: 0, 0; -fx-background-insets: 0, 2; -fx-padding: 10; -fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 ); } 16 Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html

17. JavaFX 1.3 Layout Enhancements GridLayout Based on the JFXtrasXGrid In the JavaFX Preview Package Fill Controls how Nodes expand to take available space Grow/Shrink Controls how available space is allocated between competing Nodes Priority values: NEVER SOMETIMES ALWAYS 17

18. JavaFX 1.3 Layouts – Grid Grow/Fill Example 18 ?

19. JUG Prize Spinner Web Service Integration

20. Calling a REST Service REST URL: http://api.meetup.com/rsvps.json/event_id={eventId}&key={apiKey} Output: { "results": [ {"zip":"94044","lon":"-122.48999786376953","photo_url":"http:photos1.meetupstatic.comphotosmember14bamember_5333306.jpeg","response":"no","name":"Andres Almiray","comment":"Can't make it :-("} ]}

21. JUG Prize Spinner - JSONHandler in 3 Steps publicclass Member { publicvarplace:Integer; publicvarphotoUrl:String; publicvarname:String; publicvarcomment:String; } varmemberParser:JSONHandler = JSONHandler { rootClass: "org.jfxtras.jugspinner.data.MemberSearch “ onDone: function(obj, isSequence): Void { members = (objasMemberSearch).results; }} req = HttpRequest { location: rsvpQuery onInput: function(is: java.io.InputStream) { memberParser.parse(is); }} 1 POJfxO 2 JSONHandler 3 HttpRequest

22. Advanced Controls JFXtrasXTable and XShelf 22

23. XShelfView High Performance Features: Scrollbar Image Title Reflection Effect Aspect Ratio Infinite Repeat Integrates With JFXtras Data Providers Automatically Updates on Model Changes

24. JFXtras Data Providers

25. XTableView Insanely Scalable Up to 16 million rows Extreme Performance Pools rendered nodes Caches images Optimized scene graph Features: Drag-and-Drop Column Reordering Dynamic Updating from Model Automatically Populates Column Headers Fully Styleable via CSS

26. XTableView Example – JUG Prize Spinner defwinnerTable = XTableView { rowType: Member {}.getJFXClass(); rows: bind winners columns: columns // optional rowHeight: 50 // optional } columns = [ XTableColumn{ displayName: "#" id: "place" prefWidth: 10 renderer: TextRenderer {} } XTableColumn{ displayName: "Photo" id: "photoUrl" prefWidth: 30 renderer: ImageRenderer { missing: placeholder placeholder: placeholder } } XTableColumn{ displayName: "Name" id: "name" prefWidth: 300 renderer: TextRenderer {} }] 26

27. APROPOS Agile Project Portfolio Scheduler 27

28. Marketing Sales Feature selling becomes impossible (Sales Enablement) Launch Cycle Time > Dev Cycle Time Melting Change Managers: 50 changes once a month to 900 changes constantly Product Management Operations Development …in the weeds… Professional Services Support Innovator’s Dilemma Supported Release proliferation Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010 Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010 The Agile Challenge in End-to-End Context

29. The Three Loops of Software Governance Dev: Technical debt Operations/Support Marketing/Sales Proposed Marketing Sales Validated Adopted Enabled Internal Technical Debt Loop Product Management Operations Scheduled Backlogged In Process Development Deployed External Technical Debt Loop Bottleneck Professional Services Support Validated Enabled Adopted Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010

30. Apropos Demo

31. Pro JavaFX 1.3 Quiz All Binding in JavaFX is ____ Answer: Lazy The New Controls in JavaFX 1.3 Are: ____, ____, and ____ Answer: ChoiceBox, PasswordBox, ScrollView, Separator Or preview: Menu, Tree, Toolbar The JavaFX Preview Grid was contributed by the _____ project Answer: JFXtras 31

32. Stephen Chinhttp://steveonjava.com/ Inovissteve@steveonjava.com tweet: @steveonjava

33. Apropos – Portfolio View 33

34. Apropos – Scope View 34

35. Apropos – Resource View 35

36. Apropos – Analyze View 36

37. Apropos – Roadmap View 37