Building Data Rich Interfaces with JavaFX

6,154 views
5,921 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,154
On SlideShare
0
From Embeds
0
Number of Embeds
2,207
Actions
Shares
0
Downloads
89
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Mention the XGrid layout got added to the JavaFX Platform.
  • Building Data Rich Interfaces with JavaFX

    1. 1. Building Data Rich Interfaces with JavaFX<br />Stephen Chin<br />Inovis<br />
    2. 2. About the Presenter<br />Director SWE Inovis, Inc.<br />Open-Source JavaFX Hacker<br />MBA<br />Belotti Award<br />UberScrumMaster<br />XP Coach<br />Agile Portfolio Process Speaker<br />Pro JavaFX Author<br />Java Champion<br />JavaOneRockstar<br />JFXtras<br />WidgetFX<br />FEST-JavaFX<br />Silicon Valley JavaFX User Group Founder<br />Family Man<br />Motorcyclist<br />
    3. 3. 3<br />AGENDA<br />JavaFX Technology Stack<br />Data Binding<br />JavaFX 1.3 Controls<br />Control Styling<br />JavaFX 1.3 Layouts<br />Web Service Integration<br />JFXtras Data-driven Controls<br />Apropos Demo<br />Pro JavaFX Quiz with Prizes!<br />
    4. 4. JavaFX Technology Stack<br />XControls<br />Swing<br />Handlers<br />XLayouts<br />Wipe<br />JFXtras Project<br />Controls<br />Layouts<br />Media<br />Web Services<br />Binding<br />CSS<br />JavaFX Platform<br />JVM<br />Security<br />APIs<br />Deployment<br />…<br />Java Platform<br />
    5. 5. Evolution of Data Binding<br />JavaFX Binding<br />Bind Library<br />Property Change Listeners<br />Callbacks<br />
    6. 6. Bind Expressions<br />Unidirectional:<br />property: bindobject.value<br />property: bindsequence[index]<br />sequence: bindfor (v in values) convert(v)<br />Bijective:<br />property: bindvalue with inverse<br />Function:<br />public bound function calculateTotal(subtotal, tax) { return subtotal * (1 + tax);}<br />New in JavaFX 1.3 – All binding is lazy!<br />
    7. 7. Binding to Controls<br />boundfunctiongetScore() {[<br />ScoreLine {line: "Ski Jumping - Individual Norml"}<br />ScoreLine {line: ""}<br />ScoreLine {line: bind" {%-10smedal.type} "}<br />ScoreLine {line: bind"{%-17smedal.name} {%-3smedal.country} {%3.1fmedal.score}"}<br /> ]}<br />defsb = ScoreBoard {<br />lightColor: bindmedal.lightColor<br /> lines: bindgetScore()<br />onMousePressed: function(e) {<br />if(e.primaryButtonDown) {<br /> medal = medals[(Sequences.indexOf(medals, medal) + 1) modsizeof medals]<br /> } else{<br />FX.exit();<br /> }}}<br />
    8. 8. Dynamic Binding<br />JFXtras extension for runtime binding to an existing JavaFX object via reflection.<br />Example:<br />classReflectionTarget {<br />publicvarfieldA:String;<br />}<br />defreflectionTarget = ReflectionTarget {fieldA: “A"}<br />defmirror = context.mirrorOf(reflectionTarget);<br />defxbind = XBind.bindWithInverse(mirror, mirror.getType().getVariable("fieldA"));<br />xbind.ref = "B";<br />What is the value of: reflectionTarget.fieldA?<br />8<br />
    9. 9. Java to JavaFX Binding<br />Prototype by Johannes Schneider:http://blog.cedarsoft.com/<br />Java to JavaFX<br />PropertyChangeEvents: Just make your Java Bean fire PropertyChangeEvents whenever a property has changed<br />JavaFX to Java<br />Variable Setter: The corresponding setter of your Java object is called<br />PropertyChangeEvents: JavaFX binding updates trigger PropertyChangeEvents<br />JavaFxBridge.bridge(javaModel).to(slider asFXObject).connecting(JavaFxBridge.bind("amount").to("value").withInverse());<br />Will be included in the JFXtras 0.8 Release – Feedback on the syntax welcome!<br />
    10. 10. JavaFX 1.3 Top 10 Features<br />10<br />
    11. 11. JavaFX 1.3 Top 10 4 Features<br />11<br />New Controls<br />Layout Enhancements<br />Enhanced CSS<br />Preview Features<br />TOP SECRET<br />
    12. 12. New Controls in JavaFX 1.3<br />var list = ["apples", "bananas", "oranges", "pears", "cabbage"];<br /> <br />ScrollView {<br />  width: 250<br />  height: 250<br />  managed: false<br />  node: VBox {<br />    padding: Insets {top: 10, left: 10, bottom: 10, right: 10}<br />    spacing: 10<br />    content: [<br />      PasswordBox {promptText: "enter password"}<br />      Separator {}<br />      ChoiceBox {<br />        items: list<br />      }<br />      ListView {<br />        vertical: false<br />        items: list<br />      }<br /> ]}}<br />PasswordBox<br />Separator<br />ChoiceBox<br />ScrollView<br />HorizontalList<br />
    13. 13. Preview Controls in JavaFX 1.3<br />MenuBar {<br /> menus: for (i in [0..4]) Menu {<br /> text: "Menu {i}"<br /> items: for (j in [0..4]) MenuItem {<br /> text: "Menu Item {j}"<br /> }<br /> }<br />}<br />ToolBar {<br /> items: for (i in [0..4]) Button {text: "Button {i}"}<br />}<br />TreeView {<br /> root: TreeItem {<br /> expanded: true<br /> data: "Root"<br /> children: for (i in [0..4]) [<br />TreeItem {<br /> data: "Item {i}"<br /> }]}}<br />MenuBar<br />Menu<br />ToolBar<br />TreeView<br />
    14. 14. Styling Controls<br />VBox {<br /> spacing: 20<br />nodeHPos: HPos.CENTER<br /> content: [<br /> Text {content: "Default Styling"}<br /> Button {text: "Button"}<br />CheckBox {text: "CheckBox", selected: true}<br /> Slider {value: 50}<br /> ]<br />layoutInfo: LayoutInfo {<br /> margin: Insets {bottom: 20, top: 20, left: 20, right: 20}<br /> }<br />}<br />14<br />Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html<br />
    15. 15. Styling Controls – Button/CheckBox<br />.button {<br /> -fx-base: dodgerblue;<br /> -fx-shape: "M 50,30 m 0,25 a 1,1 0 "<br />"0,0 0,-50 a 1,1 0 1,0 0,50";<br /> -fx-scale-shape: false;<br />}<br />.check-box:selected *.label {<br /> -fx-text-fill: red<br />}<br />.check-box:selected *.mark {<br /> -fx-background-color: red;<br /> -fx-shape: "M 0,0 H1 L 4,4 7,0 H8 V1 L 5,4 8,7"<br />"V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";<br />}<br />15<br />Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html<br />
    16. 16. Styling Controls – Slider<br />.slider *.track {<br /> -fx-base: derive( goldenrod, 50% );<br />}<br />.slider *.thumb {<br /> -fx-shape: "M 50,5 L 37,40 5,40 30,60 20,95 "<br />"50,75 80,95 70,60 95,40 63,40 Z";<br /> -fx-background-color: derive(goldenrod,-50%), goldenrod;<br /> -fx-background-radius: 0, 0;<br /> -fx-background-insets: 0, 2;<br /> -fx-padding: 10;<br /> -fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );<br />}<br />16<br />Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html<br />
    17. 17. JavaFX 1.3 Layout Enhancements<br />GridLayout<br />Based on the JFXtrasXGrid<br />In the JavaFX Preview Package<br />Fill<br />Controls how Nodes expand to take available space<br />Grow/Shrink<br />Controls how available space is allocated between competing Nodes<br />Priority values:<br />NEVER<br />SOMETIMES<br />ALWAYS<br />17<br />
    18. 18. JavaFX 1.3 Layouts – Grid Grow/Fill Example<br />18<br />?<br />
    19. 19. JUG Prize Spinner<br />Web Service Integration<br />
    20. 20. Calling a REST Service<br />REST URL:<br />http://api.meetup.com/rsvps.json/event_id={eventId}&key={apiKey}<br />Output:<br />{ "results": [<br /> {"zip":"94044","lon":"-122.48999786376953","photo_url":"http://photos1.meetupstatic.com/photos/member/1/4/b/a/member_5333306.jpeg","response":"no","name":"Andres Almiray","comment":"Can't make it :-("}<br />]}<br />
    21. 21. JUG Prize Spinner - JSONHandler in 3 Steps<br />publicclass Member {<br />publicvarplace:Integer;<br />publicvarphotoUrl:String;<br />publicvarname:String;<br />publicvarcomment:String;<br />}<br />varmemberParser:JSONHandler = JSONHandler {<br />  rootClass: "org.jfxtras.jugspinner.data.MemberSearch “<br />  onDone: function(obj, isSequence): Void {<br />    members = (objasMemberSearch).results;<br />}}<br />req = HttpRequest {<br /> location: rsvpQuery<br />onInput: function(is: java.io.InputStream) {<br />memberParser.parse(is);<br />}}<br />1<br />POJfxO<br />2<br />JSONHandler<br />3<br />HttpRequest<br />
    22. 22. Advanced Controls<br />JFXtrasXTable and XShelf<br />22<br />
    23. 23. XShelfView<br />High Performance<br />Features:<br />Scrollbar<br />Image Title<br />Reflection Effect<br />Aspect Ratio<br />Infinite Repeat<br />Integrates With JFXtras Data Providers<br />Automatically Updates on Model Changes<br />
    24. 24. JFXtras Data Providers<br />
    25. 25. XTableView<br />Insanely Scalable<br />Up to 16 million rows<br />Extreme Performance<br />Pools rendered nodes<br />Caches images<br />Optimized scene graph<br />Features:<br />Drag-and-Drop Column Reordering<br />Dynamic Updating from Model<br />Automatically Populates Column Headers<br />Fully Styleable via CSS<br />
    26. 26. XTableView Example – JUG Prize Spinner<br />defwinnerTable = XTableView {<br />rowType: Member {}.getJFXClass();<br /> rows: bind winners<br /> columns: columns // optional<br />rowHeight: 50 // optional<br />}<br />columns = [<br />XTableColumn{<br />displayName: "#"<br />id: "place"<br />prefWidth: 10<br /> renderer: TextRenderer {}<br /> }<br />XTableColumn{<br />displayName: "Photo"<br /> id: "photoUrl"<br />prefWidth: 30<br />renderer: ImageRenderer {<br />missing: placeholder<br />placeholder: placeholder<br />}<br /> }<br />XTableColumn{<br />displayName: "Name"<br />id: "name"<br />prefWidth: 300<br />renderer: TextRenderer {}<br />}]<br />26<br />
    27. 27. APROPOS<br />Agile Project Portfolio Scheduler<br />27<br />
    28. 28. Marketing<br />Sales<br />Feature selling becomes impossible (Sales Enablement)<br />Launch Cycle Time > Dev Cycle Time<br />Melting Change Managers: 50 changes once a month to 900 changes constantly<br />Product Management<br />Operations<br />Development<br />…in the weeds…<br />Professional Services<br />Support<br />Innovator’s Dilemma<br />Supported Release proliferation<br />Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010<br />Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010<br />The Agile Challenge in End-to-End Context<br />
    29. 29. The Three Loops of Software Governance<br />Dev: Technical debt<br />Operations/Support<br />Marketing/Sales<br />Proposed<br />Marketing<br />Sales<br />Validated<br />Adopted<br />Enabled<br />Internal Technical Debt Loop<br />Product Management<br />Operations<br />Scheduled<br />Backlogged<br />In Process<br />Development<br />Deployed<br />External Technical Debt Loop<br />Bottleneck<br />Professional Services<br />Support<br />Validated<br />Enabled<br />Adopted<br />Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010<br />
    30. 30. Apropos Demo<br />
    31. 31. Pro JavaFX 1.3 Quiz<br />All Binding in JavaFX is ____<br />Answer: Lazy<br />The New Controls in JavaFX 1.3 Are: ____, ____, and ____<br />Answer: ChoiceBox, PasswordBox, ScrollView, Separator<br />Or preview: Menu, Tree, Toolbar<br />The JavaFX Preview Grid was contributed by the _____ project<br />Answer: JFXtras<br />31<br />
    32. 32. Stephen Chinhttp://steveonjava.com/<br />Inovissteve@steveonjava.com<br />tweet: @steveonjava<br />
    33. 33. Apropos – Portfolio View<br />33<br />
    34. 34. Apropos – Scope View<br />34<br />
    35. 35. Apropos – Resource View<br />35<br />
    36. 36. Apropos – Analyze View<br />36<br />
    37. 37. Apropos – Roadmap View<br />37<br />

    ×