Downloaded 92 times
![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)
![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/75/Building-Data-Rich-Interfaces-with-JavaFX-6-2048.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/75/Building-Data-Rich-Interfaces-with-JavaFX-7-2048.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/75/Building-Data-Rich-Interfaces-with-JavaFX-12-2048.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/75/Building-Data-Rich-Interfaces-with-JavaFX-13-2048.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/75/Building-Data-Rich-Interfaces-with-JavaFX-14-2048.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/75/Building-Data-Rich-Interfaces-with-JavaFX-20-2048.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/75/Building-Data-Rich-Interfaces-with-JavaFX-26-2048.jpg)
Uploaded byStephen Chin
Building Data Rich Interfaces with JavaFX
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.
More Related Content
![JavaFX 2.0 With Alternative Languages [Portuguese]](https://cdn.slidesharecdn.com/ss_thumbnails/javafx2-0-braziljugs-translated-111220145135-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Building Data Rich Interfaces with JavaFX
More from Stephen Chin
Building Data Rich Interfaces with JavaFX
- 1. Building Data RichInterfaces with JavaFXStephen ChinInovis
- 2. About the PresenterDirectorSWE Inovis, Inc.Open-Source JavaFX HackerMBABelotti AwardUberScrumMasterXP CoachAgile Portfolio Process SpeakerPro JavaFX AuthorJava ChampionJavaOneRockstarJFXtrasWidgetFXFEST-JavaFXSilicon Valley JavaFX User Group FounderFamily ManMotorcyclist
- 3. 3AGENDAJavaFX Technology StackDataBindingJavaFX 1.3 ControlsControl StylingJavaFX 1.3 LayoutsWeb Service IntegrationJFXtras Data-driven ControlsApropos DemoPro JavaFX Quiz with Prizes!
- 4. JavaFX Technology StackXControlsSwingHandlersXLayoutsWipeJFXtrasProjectControlsLayoutsMediaWeb ServicesBindingCSSJavaFX PlatformJVMSecurityAPIsDeployment…Java Platform
- 5. Evolution of DataBindingJavaFX 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 extensionfor 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 JavaFXBindingPrototype 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 Top10 Features10
- 11. JavaFX 1.3 Top10 4 Features11New ControlsLayout EnhancementsEnhanced CSSPreview FeaturesTOP SECRET
- 12. New Controls inJavaFX 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 inJavaFX 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 LayoutEnhancementsGridLayoutBased 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 SpinnerWebService Integration
- 20. Calling a RESTServiceREST 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.
- 23. XShelfViewHigh PerformanceFeatures:ScrollbarImage TitleReflectionEffectAspect RatioInfinite RepeatIntegrates With JFXtras Data ProvidersAutomatically Updates on Model Changes
- 24.
- 25. XTableViewInsanely ScalableUp to16 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 PortfolioScheduler27
- 28. MarketingSalesFeature selling becomesimpossible (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 Loopsof 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.
- 31. Pro JavaFX 1.3QuizAll 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
- 32.
- 33. Apropos – PortfolioView33
- 34. Apropos – ScopeView34
- 35. Apropos – ResourceView35
- 36. Apropos – AnalyzeView36
- 37. Apropos – RoadmapView37
Editor's Notes
- #5 Mention the XGrid layout got added to the JavaFX Platform.