Building Data Rich Interfaces with JavaFX
Download as PPTX, PDF2 likes2,372 views
This document summarizes Stephen Chin's presentation on building data rich interfaces with JavaFX. The presentation covered the JavaFX technology stack including controls, layouts, styling, and data binding. It demonstrated new controls in JavaFX 1.3 like ChoiceBox and PasswordBox. It also showed how to style controls using CSS and integrate JavaFX with web services. Finally, it presented the JFXtras project and its advanced data-driven controls like XTableView for building large data applications with JavaFX.
![Bind ExpressionsUnidirectional:property: bindobject.valueproperty: bindsequence[index]sequence: bindfor (v in values) convert(v)Bijective:property: bindvalue with inverseFunction:public bound function calculateTotal(subtotal, tax) { return subtotal * (1 + tax);}New in JavaFX 1.3 – All binding is lazy!](https://image.slidesharecdn.com/jazoon-buildingdatarichinterfaceswithjavafx-100602100305-phpapp02/85/Building-Data-Rich-Interfaces-with-JavaFX-6-320.jpg)
![Binding to ControlsboundfunctiongetScore() {[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(); }}}](https://image.slidesharecdn.com/jazoon-buildingdatarichinterfaceswithjavafx-100602100305-phpapp02/85/Building-Data-Rich-Interfaces-with-JavaFX-7-320.jpg)
![New Controls in JavaFX 1.3var 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 } ]}}PasswordBoxSeparatorChoiceBoxScrollViewHorizontalList](https://image.slidesharecdn.com/jazoon-buildingdatarichinterfaceswithjavafx-100602100305-phpapp02/85/Building-Data-Rich-Interfaces-with-JavaFX-12-320.jpg)
![Preview Controls in JavaFX 1.3MenuBar { 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}" }]}}MenuBarMenuToolBarTreeView](https://image.slidesharecdn.com/jazoon-buildingdatarichinterfaceswithjavafx-100602100305-phpapp02/85/Building-Data-Rich-Interfaces-with-JavaFX-13-320.jpg)
![Styling ControlsVBox { spacing: 20nodeHPos: 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} }}14Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html](https://image.slidesharecdn.com/jazoon-buildingdatarichinterfaceswithjavafx-100602100305-phpapp02/85/Building-Data-Rich-Interfaces-with-JavaFX-14-320.jpg)
![Calling a REST ServiceREST URL:http://api.meetup.com/rsvps.json/event_id={eventId}&key={apiKey}Output:{ "results": [ {"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 :-("}]}](https://image.slidesharecdn.com/jazoon-buildingdatarichinterfaceswithjavafx-100602100305-phpapp02/85/Building-Data-Rich-Interfaces-with-JavaFX-20-320.jpg)
![XTableView Example – JUG Prize SpinnerdefwinnerTable = XTableView {rowType: Member {}.getJFXClass(); rows: bind winners columns: columns // optionalrowHeight: 50 // optional}columns = [XTableColumn{displayName: "#"id: "place"prefWidth: 10 renderer: TextRenderer {} }XTableColumn{displayName: "Photo" id: "photoUrl"prefWidth: 30renderer: ImageRenderer {missing: placeholderplaceholder: placeholder} }XTableColumn{displayName: "Name"id: "name"prefWidth: 300renderer: TextRenderer {}}]26](https://image.slidesharecdn.com/jazoon-buildingdatarichinterfaceswithjavafx-100602100305-phpapp02/85/Building-Data-Rich-Interfaces-with-JavaFX-26-320.jpg)
Building Data Rich Interfaces with JavaFX
- 1. Building Data Rich Interfaces with JavaFXStephen ChinInovis
- 2. About the PresenterDirector SWE Inovis, Inc.Open-Source JavaFX HackerMBABelotti AwardUberScrumMasterXP CoachAgile Portfolio Process SpeakerPro JavaFX AuthorJava ChampionJavaOneRockstarJFXtrasWidgetFXFEST-JavaFXSilicon Valley JavaFX User Group FounderFamily ManMotorcyclist
- 3. 3AGENDAJavaFX Technology StackData BindingJavaFX 1.3 ControlsControl StylingJavaFX 1.3 LayoutsWeb Service IntegrationJFXtras Data-driven ControlsApropos DemoPro JavaFX Quiz with Prizes!
- 4. JavaFX Technology StackXControlsSwingHandlersXLayoutsWipeJFXtras ProjectControlsLayoutsMediaWeb ServicesBindingCSSJavaFX PlatformJVMSecurityAPIsDeployment…Java Platform
- 5. Evolution of Data BindingJavaFX BindingBind LibraryProperty Change ListenersCallbacks
- 6. Bind ExpressionsUnidirectional:property: bindobject.valueproperty: bindsequence[index]sequence: bindfor (v in values) convert(v)Bijective:property: bindvalue with inverseFunction:public bound function calculateTotal(subtotal, tax) { return subtotal * (1 + tax);}New in JavaFX 1.3 – All binding is lazy!
- 7. Binding to ControlsboundfunctiongetScore() {[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 BindingJFXtras 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 BindingPrototype by Johannes Schneider:http://blog.cedarsoft.com/Java to JavaFXPropertyChangeEvents: Just make your Java Bean fire PropertyChangeEvents whenever a property has changedJavaFX to JavaVariable Setter: The corresponding setter of your Java object is calledPropertyChangeEvents: JavaFX binding updates trigger PropertyChangeEventsJavaFxBridge.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 Features10
- 11. JavaFX 1.3 Top 10 4 Features11New ControlsLayout EnhancementsEnhanced CSSPreview FeaturesTOP SECRET
- 12. New Controls in JavaFX 1.3var 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 } ]}}PasswordBoxSeparatorChoiceBoxScrollViewHorizontalList
- 13. Preview Controls in JavaFX 1.3MenuBar { 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}" }]}}MenuBarMenuToolBarTreeView
- 14. Styling ControlsVBox { spacing: 20nodeHPos: 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} }}14Source: 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";}15Source: 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 );}16Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html
- 17. JavaFX 1.3 Layout EnhancementsGridLayoutBased on the JFXtrasXGridIn the JavaFX Preview PackageFillControls how Nodes expand to take available spaceGrow/ShrinkControls how available space is allocated between competing NodesPriority values:NEVERSOMETIMESALWAYS17
- 18. JavaFX 1.3 Layouts – Grid Grow/Fill Example18?
- 19. JUG Prize SpinnerWeb Service Integration
- 20. Calling a REST ServiceREST URL:http://api.meetup.com/rsvps.json/event_id={eventId}&key={apiKey}Output:{ "results": [ {"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 :-("}]}
- 21. JUG Prize Spinner - JSONHandler in 3 Stepspublicclass 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: rsvpQueryonInput: function(is: java.io.InputStream) {memberParser.parse(is);}}1POJfxO2JSONHandler3HttpRequest
- 22. Advanced ControlsJFXtrasXTable and XShelf22
- 23. XShelfViewHigh PerformanceFeatures:ScrollbarImage TitleReflection EffectAspect RatioInfinite RepeatIntegrates With JFXtras Data ProvidersAutomatically Updates on Model Changes
- 25. XTableViewInsanely ScalableUp to 16 million rowsExtreme PerformancePools rendered nodesCaches imagesOptimized scene graphFeatures:Drag-and-Drop Column ReorderingDynamic Updating from ModelAutomatically Populates Column HeadersFully Styleable via CSS
- 26. XTableView Example – JUG Prize SpinnerdefwinnerTable = XTableView {rowType: Member {}.getJFXClass(); rows: bind winners columns: columns // optionalrowHeight: 50 // optional}columns = [XTableColumn{displayName: "#"id: "place"prefWidth: 10 renderer: TextRenderer {} }XTableColumn{displayName: "Photo" id: "photoUrl"prefWidth: 30renderer: ImageRenderer {missing: placeholderplaceholder: placeholder} }XTableColumn{displayName: "Name"id: "name"prefWidth: 300renderer: TextRenderer {}}]26
- 27. APROPOSAgile Project Portfolio Scheduler27
- 28. MarketingSalesFeature selling becomes impossible (Sales Enablement)Launch Cycle Time > Dev Cycle TimeMelting Change Managers: 50 changes once a month to 900 changes constantlyProduct ManagementOperationsDevelopment…in the weeds…Professional ServicesSupportInnovator’s DilemmaSupported Release proliferationSource: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010The Agile Challenge in End-to-End Context
- 29. The Three Loops of Software GovernanceDev: Technical debtOperations/SupportMarketing/SalesProposedMarketingSalesValidatedAdoptedEnabledInternal Technical Debt LoopProduct ManagementOperationsScheduledBackloggedIn ProcessDevelopmentDeployedExternal Technical Debt LoopBottleneckProfessional ServicesSupportValidatedEnabledAdoptedSource: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010
- 30. Apropos Demo
- 31. Pro JavaFX 1.3 QuizAll Binding in JavaFX is ____Answer: LazyThe New Controls in JavaFX 1.3 Are: ____, ____, and ____Answer: ChoiceBox, PasswordBox, ScrollView, SeparatorOr preview: Menu, Tree, ToolbarThe JavaFX Preview Grid was contributed by the _____ projectAnswer: JFXtras31
- 33. Apropos – Portfolio View33
- 34. Apropos – Scope View34
- 35. Apropos – Resource View35
- 36. Apropos – Analyze View36
- 37. Apropos – Roadmap View37
Editor's Notes
- #5: Mention the XGrid layout got added to the JavaFX Platform.