Building Data Rich Interfaces with JavaFX Stephen Chin Inovis - - PowerPoint PPT Presentation

▶
building data rich interfaces with javafx
SMART_READER_LITE
LIVE PREVIEW

Building Data Rich Interfaces with JavaFX Stephen Chin Inovis - - PowerPoint PPT Presentation

Sep 14, 2022 501 likes •888 views

Building Data Rich Interfaces with JavaFX Stephen Chin Inovis SPEAKERS COMPANY LOGO About the Presenter Director SWE Open-Source Inovis, Inc. JavaFX Hacker MBA Pro JavaFX Author Family Man Belotti Award Java Champion Uber

slide-1
SLIDE 1

SPEAKER‘S COMPANY LOGO

Building Data Rich Interfaces with JavaFX

Stephen Chin Inovis

slide-2
SLIDE 2

SPEAKER‘S COMPANY LOGO

About the Presenter

Director SWE Inovis, Inc.

MBA Belotti Award Uber ScrumMaster XP Coach Agile Portfolio Process Speaker

Open-Source JavaFX Hacker

Pro JavaFX Author Java Champion JavaOne Rockstar JFXtras WidgetFX FEST-JavaFX Silicon Valley JavaFX User Group Founder Motorcyclist Family Man

slide-3
SLIDE 3

SPEAKER‘S COMPANY LOGO

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!

slide-4
SLIDE 4

SPEAKER‘S COMPANY LOGO

JavaFX Technology Stack

JFXtras Project

XControls Swing Handlers XLayouts Wipe

JVM Security APIs Deployment … JavaFX Platform

Controls Layouts Media Web Services Binding CSS

slide-5
SLIDE 5

SPEAKER‘S COMPANY LOGO

Evolution of Data Binding

JavaFX Binding Bind Library Property Change Listeners Callbacks

slide-6
SLIDE 6

SPEAKER‘S COMPANY LOGO

Bind Expressions

> Unidirectional: property: bind object.value property: 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!

slide-7
SLIDE 7

SPEAKER‘S COMPANY LOGO

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()

  • nMousePressed: function(e) {

if (e.primaryButtonDown) { medal = medals[(Sequences.indexOf(medals, medal) + 1) mod sizeof medals] } else { FX.exit(); }}}

slide-8
SLIDE 8

SPEAKER‘S COMPANY LOGO

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

slide-9
SLIDE 9

SPEAKER‘S COMPANY LOGO

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 as FXObject).connecting( JavaFxBridge.bind("amount").to("value").withInverse() ); Will be included in the JFXtras 0.8 Release – Feedback on the syntax welcome!

slide-10
SLIDE 10

SPEAKER‘S COMPANY LOGO

JavaFX 1.3 Top 10 Features

10

slide-11
SLIDE 11

SPEAKER‘S COMPANY LOGO

11

1.New Controls 2.Layout Enhancements 4.Enhanced CSS 10.Preview Features

T O P S E C R E T

slide-12
SLIDE 12

SPEAKER‘S COMPANY LOGO

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

slide-13
SLIDE 13

SPEAKER‘S COMPANY LOGO

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

slide-14
SLIDE 14

SPEAKER‘S COMPANY LOGO

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

slide-15
SLIDE 15

SPEAKER‘S COMPANY LOGO

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

slide-16
SLIDE 16

SPEAKER‘S COMPANY LOGO

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

slide-17
SLIDE 17

SPEAKER‘S COMPANY LOGO

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

slide-18
SLIDE 18

SPEAKER‘S COMPANY LOGO

JavaFX 1.3 Layouts – Grid Grow/Fill Example

18

?

slide-19
SLIDE 19

SPEAKER‘S COMPANY LOGO

JUG Prize Spinner

WEB SERVICE INTEGRATION

slide-20
SLIDE 20

SPEAKER‘S COMPANY LOGO

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

slide-21
SLIDE 21

SPEAKER‘S COMPANY LOGO

JUG Prize Spinner - JSONHandler in 3 Steps

public 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 “

  • nDone: function(obj, isSequence): Void {

members = (obj as MemberSearch).results; }} req = HttpRequest { location: rsvpQuery

  • nInput: function(is: java.io.InputStream) {

memberParser.parse(is); }}

1

POJfxO

2

JSONHandler

3

HttpRequest

slide-22
SLIDE 22

SPEAKER‘S COMPANY LOGO

ADVANCED CONTROLS

JFXtras XTable and XShelf

22

slide-23
SLIDE 23

SPEAKER‘S COMPANY LOGO

XShelfView

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

slide-24
SLIDE 24

SPEAKER‘S COMPANY LOGO

JFXtras Data Providers

slide-25
SLIDE 25

SPEAKER‘S COMPANY LOGO

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

slide-26
SLIDE 26

SPEAKER‘S COMPANY LOGO

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

slide-27
SLIDE 27

SPEAKER‘S COMPANY LOGO

APROPOS

Agile Project Portfolio Scheduler

27

slide-28
SLIDE 28

SPEAKER‘S COMPANY LOGO

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

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

slide-29
SLIDE 29

SPEAKER‘S COMPANY LOGO

Product Management Sales Marketing Operations Support Professional Services Development

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

The Three Loops of Software Governance

Internal Technical Debt Loop

External Technical Debt Loop

Enabled Adopted Validated Validated Backlogged Scheduled In Process Deployed

Proposed

Enabled Adopted

  • 1. Dev: Technical debt
  • 2. Operations/Support
  • 3. Marketing/Sales

Bottleneck

slide-30
SLIDE 30

SPEAKER‘S COMPANY LOGO

Apropos Demo

slide-31
SLIDE 31

SPEAKER‘S COMPANY LOGO

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

slide-32
SLIDE 32

SPEAKER‘S COMPANY LOGO

Stephen Chin http://steveonjava.com/ Inovis steve@steveonjava.com tweet: @steveonjava

slide-33
SLIDE 33

SPEAKER‘S COMPANY LOGO

Apropos – Portfolio View

33

slide-34
SLIDE 34

SPEAKER‘S COMPANY LOGO

Apropos – Scope View

34

slide-35
SLIDE 35

SPEAKER‘S COMPANY LOGO

Apropos – Resource View

35

slide-36
SLIDE 36

SPEAKER‘S COMPANY LOGO

Apropos – Analyze View

36

slide-37
SLIDE 37

SPEAKER‘S COMPANY LOGO

Apropos – Roadmap View

37