building data rich interfaces with javafx -...

SPEAKER‘S COMPANYLOGO

Building Data Rich Interfaces with JavaFXStephen ChinInovis


About the Presenter

Director SWE Inovis, Inc.MBABelotti AwardUber ScrumMasterXP CoachAgile Portfolio Process Speaker

Open-Source JavaFX HackerPro JavaFX AuthorJava ChampionJavaOne RockstarJFXtrasWidgetFXFEST-JavaFXSilicon Valley JavaFX User Group Founder

Motorcyclist

Family Man


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!


JavaFX Technology Stack

JFXtras Project

XControls Swing HandlersXLayouts Wipe

JVM Security APIs Deployment …

JavaFX Platform

Controls Layouts Media Web ServicesBinding CSS


Evolution of Data Binding

JavaFX BindingBind LibraryProperty Change ListenersCallbacks


Bind Expressions

> Unidirectional:property: bind object.valueproperty: bind sequence[index]sequence: bind for (v in values) convert(v)

> Bijective:property: bind value with inverse

> Function:public bound function calculateTotal(subtotal, tax) { return subtotal * (1 + tax);}

New in JavaFX 1.3 – All binding is lazy!


Binding to Controls

bound function getScore() {[ ScoreLine {line: "Ski Jumping - Individual Norml"} ScoreLine {line: " "} ScoreLine {line: bind " {%-10s medal.type} "} ScoreLine {line: bind "{%-17s medal.name} {%-3s medal.country} {%3.1f medal.score}"} ]}

def sb = ScoreBoard { lightColor: bind medal.lightColor lines: bind getScore() onMousePressed: function(e) { if (e.primaryButtonDown) { medal = medals[(Sequences.indexOf(medals, medal) + 1) mod sizeof medals] } else { FX.exit(); }}}


Dynamic Binding

JFXtras extension for runtime binding to an existing JavaFX object via reflection.

Example:class ReflectionTarget { public var fieldA:String;}def reflectionTarget = ReflectionTarget {fieldA: “A"}

def mirror = context.mirrorOf(reflectionTarget);def xbind = XBind.bindWithInverse(mirror, mirror.getType().getVariable("fieldA"));xbind.ref = "B";

What is the value of: reflectionTarget.fieldA? 8


Java to JavaFX Binding

Prototype 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 PropertyChangeEvents

JavaFxBridge.bridge(javaModel).to(slider as FXObject).connecting( JavaFxBridge.bind("amount").to("value").withInverse());

Will be included in the JFXtras 0.8 Release – Feedback on the syntax welcome!


JavaFX 1.3 Top 10 Features

10


11

1.New Controls2.Layout Enhancements4.Enhanced CSS10.Preview FeaturesTOP SECRET


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 } ]}}

ChoiceBox

PasswordBox

Horizontal List

Separator

ScrollView


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

TreeView

ToolBar

Menu


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} }}

14Source: Dean Iverson, http://pleasingsoftware.blogspot.com/2010/04/so-whats-it-all-good-for.html


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";}



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 );}



JavaFX 1.3 Layout Enhancements

GridLayout> Based on the JFXtras XGrid> 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


JavaFX 1.3 Layouts – Grid Grow/Fill Example

18

?


JUG Prize Spinner

WEB SERVICE INTEGRATION


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.com\/photos\/member\/1\/4\/b\/a\/member_5333306.jpeg","response":"no","name":"Andres Almiray","comment":"Can't make it :-("}]}


JUG Prize Spinner - JSONHandler in 3 Stepspublic class Member { public var place:Integer; public var photoUrl:String; public var name:String; public var comment:String;}

var memberParser:JSONHandler = JSONHandler { rootClass: "org.jfxtras.jugspinner.data.MemberSearch “ onDone: function(obj, isSequence): Void { members = (obj as MemberSearch).results;}}

req = HttpRequest { location: rsvpQuery onInput: function(is: java.io.InputStream) { memberParser.parse(is);}}

1POJfxO

2JSONHandler

3HttpRequest


ADVANCED CONTROLSJFXtras XTable and XShelf

22


XShelfViewHigh PerformanceFeatures:> Scrollbar> Image Title> Reflection Effect> Aspect Ratio> Infinite RepeatIntegrates With JFXtras Data ProvidersAutomatically Updates on Model Changes


JFXtras Data Providers


XTableViewInsanely Scalable> Up to 16 million rowsExtreme Performance> Pools rendered nodes> Caches images> Optimized scene graphFeatures:> Drag-and-Drop Column Reordering> Dynamic Updating from Model> Automatically Populates Column Headers> Fully Styleable via CSS


XTableView Example – JUG Prize Spinner

def winnerTable = 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


APROPOSAgile Project Portfolio Scheduler

27


Product Management

Sales Marketing

Operations

Support Professional Services

Launch Cycle Time > Dev Cycle Time

Feature selling becomes impossible (Sales Enablement)

Melting Change Managers: 50 changes once a month to 900 changes constantly

Supported Release proliferation

Innovator’s Dilemma

…in the weeds… Development

Source: Based on Gat et al, Reformulating the Product Delivery Process, LSSC Conference, April 2010

The Agile Challenge in End-to-End Context



Product Management

Sales Marketing

Operations

Support Professional Services

Development


The Three Loops of Software Governance

Internal Technical Debt Loop

External Technical Debt Loop

EnabledAdoptedValidated

Validated

Backlogged Scheduled In Process Deployed

Proposed

EnabledAdopted

1. Dev: Technical debt2. Operations/Support3. Marketing/Sales

Bottleneck


Apropos Demo


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


Stephen Chin http://steveonjava.com/Inovis [email protected]

tweet: @steveonjava


Apropos – Portfolio View

33


Apropos – Scope View

34


Apropos – Resource View

35


Apropos – Analyze View

36


Apropos – Roadmap View

37

building data rich interfaces with javafx -...

Documents