intro to javafx & widget fx

Stephen Chin

During the Day Senior Manager at

Inovis, Inc. Agile Practitioner

(XP/Scrum) Large-Scale B2B

Enterprise Java Systems

Evenings & Weekends Open-Source Hacker,

Project Leader JFXtras WidgetFX

Author of the upcoming Pro JavaFX book with: Jim Weaver Weiqi Gao

http://steveonjava.com/

Introducing JavaFX

Origins of JavaFX

Originally developed by Christopher Oliver

Called F3 for “Form Follows Function”

Used Piccolo as the Underlying Scene Graph

Why Another Language?

Portability Across Devices Smaller Footprint Performance Can Be Tuned

UI Programming Accelerators Declarative Syntax Bind Triggers

RIA Competition Flash/Flex Silverlight

About the JavaFX Language It is an object-oriented language It is a functional language It is an expression language It supports a declarative style

suitable for GUI programming It supports data binding It is a statically typed, compiled

language with basic type inference capabilities

It can leverage the vast number of Java libraries

JavaFX Crash Course

Hello Earthrise(Thanks to Jim Weaver for this sample)

Creating a Stage

Stage { title: "Hello Earthrise" scene: Scene { …some code omitted… }}

Adding a Scene

scene: Scene { content: [ ImageView { …some code omitted… }, Group { …some code omitted… } ]}

Displaying Images

ImageView { image: Image { url: "http://www.nasa.gov/images/content/" "54427main_MM_image_feature_102_jw4.jpg" }},

Displaying Text in a GroupGroup {

translateX: 50 translateY: 180 content: [ textRef = Text { translateY: 100 textOrigin: TextOrigin.TOP textAlignment: TextAlignment.JUSTIFY wrappingWidth: 380 content: "Earthrise at Christmas: " …some code omitted… fill: Color.rgb(187, 195, 107) font: Font.font("SansSerif", FontWeight.BOLD, 24); } ] clip: Rectangle { width: 430 height: 85 }}

Animating Graphics

var transTransition = TranslateTransition { duration: 60s node: bind textRef toY: -700 interpolate: Interpolator.LINEAR repeatCount: Timeline.INDEFINITE}

The Finished Product…

<demo>

JavaFX API Documentation

JavaFX Language Reference

The JavaFX Desktop Widget Platform

WidgetFX

WidgetFX Features

Open-Source WidgetFX is a fully open-source widget platform (widgets

themselves can be licensed commercially). Cross-Platform Support

WidgetFX runs on all major platforms including Windows XP/Vista, Linux, and Mac OS X.

One-Click Installation WidgetFX takes advantage of Java Web Start to provide

one-click installation and automatic updates of the dock and widgets.

Rich Desktop Applications WidgetFX leverages the full power of Java and JavaFX

providing a very rich library of graphics, animation, and media capabilities.

Embedded Flash Widgets Easy migration path for developers currently using Flash

or Flex.

Built-in Widgets

Clock Skinnable via CSS

Slide Show Configurable Directory, Speed, & Filter

Web Feed Supports Atom and all RSS flavors

Dock Features

Drag to desktop Resize widgets (option for fixed aspect

ratio) Per widget transparency Widget settings saved on restart Toggle dock always-on-top Launch on start-up Multi-monitor support Dock and widgets can be styled via CSS

Movie Widget Tutorial

Widget Properties

Name Type Inherited From

Description

width Number Resizable Initial width of the widget

height Number Resizable Initial height of the widget

aspectRatio

Number Widget If set, defines a fixed aspect ratio for the widget width and height

skin Skin Control Renders the widget to the scene graph, can have CSS properties for styling

Widget Definition

var widget: Widget;widget = Widget { width: 640 height: 352 aspectRatio: bind player.media.width /

player.media.height skin: Skin { scene: Group { content: bind player } }}

Load the Media

var source = "http://projavafx.com/movies/elephants-dream-640x352.flv ";

var player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height}

Run as Application

Run in Widget Runner

How the Widget Runner Works

Test widgets standalone Identical behavior to production Two ways to launch:

Automatic Execution Run your widget as a Web Start application

Direct Execution Create a launch url with the following

structure:http://widgetfx.org/dock/runner.jnlp?arg=<widgetUrl>

Widget Configuration Properties

Class Name Type Description

BooleanProperty Boolean This class allows you to persist sequences of Booleans

BooleanSequenceProperty

Boolean[]

This class allows you to persist sequences of Booleans

IntegerProperty Integer This class allows you to persist Integers

IntegerSequenceProperty

Integer[] This class allows you to persist sequences of Integers

LongProperty Long This class allows you to persist Longs

LongSequenceProperty

Long[] This class allows you to persist sequences of Longs

NumberProperty Number This class allows you to persist Numbers

NumberSequenceProperty

Number[]

This class allows you to persist sequences of Numbers

StringProperty String This class allows you to persist Strings

StringSequenceProperty

String[] This class allows you to persist sequences of Strings

Widget Configuration

widget = Widget { ... configuration: Configuration { properties: [ StringProperty { name: "source" value: bind source with inverse } ] scene: Scene {} // defined in the next code

fragment }}

Widget Config Dialog

scene: Scene { content: Grid { rows: row([ Text { content: "Source URL:“ }, TextBox { columns: 30, value: bind source with inverse } ]) }}

Add an On-Replace Triggervar player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height} on replace =oldPlayer { oldPlayer.player.stop();}

Widget Configuration (demo)

Community Written Widgets Disk Space

Pär Dahlberg World Clock

Ludovic Audio Config / Presentation Cube

Jim Weaver

Utilities and Add-ons for JavaFX

JFXtras

JFXtras Highlights

Dialogs Layouts

JFXtras Grid MigLayout (new in 0.3!)

Testing Declarative Supports Behavior Driven Development (BDD) Fluent (ala. Hamcrest, Fest Assert)

Shape Support Thanks to Andres Almiray (jSilhouette)

Asynchronous Worker You deserve your share of rope!

Grid SampleJFXDialog {

title: “Grid Sample"

packed: true

scene: ResizableScene {

content: Grid {

var list = SwingList {

items: for (i in [1..10]) SwingListItem {

text: "List item {i}";

}

}

rows: [

row([Text {content: "Two Text Boxes:"}, TextBox {}, TextBox {}]),

row([Text {content: "List:"}, Cell {content: list, hspan: 3}])

Grid Sample (output)

MigLayout SampleStage {

title: "MigLayout Basic Test"

scene: Scene {

width: 300, height: 200

content: MigLayout {

layout: "fill"

columns: "[]30[]"

rows: "[]30[]"

migContent: [

Text {

font: Font { size: 24 }

content: "Row Number One"

},

MigNode {

constraints: "grow, span, wrap",

node: Rectangle {

width: 20

height: 20

fill: Color.CORNFLOWERBLUE

MigLayout Sample (output)

Unit Test Sample 1

Test { say: "Sequence Utils" test: [ Test { say: "should add numbers" do: function() { SequenceUtil.sum([10.4,

20.3]); } expect: closeTo(30.7)

Unit Test Sample 2

Test {

say: "We should be able to convert from"

var canonicalJavaFXPoint = Point2D {x: 1, y: 2};

var canonicalJavaPoint = new java.awt.Point(1, 2);

test: [

Test {

say: "a JavaFX point to a Java point"

do: function() {

GeometryUtil.pointToJava(canonicalJavaFXPoint);

}

expect: [

instanceOf("java.awt.geom.Point2D"),

equalTo(canonicalJavaPoint)

]

},

Unit Test Sample (parameterized)Test { say: "should be able to multiply“ test: [ for (i in [0..9]) { Test { assume: that(i*1.5, closeTo(floor(i*1.5))) say: "{i} x 1.5 without a decimal" do: calculator.multiply(i, 1.5) expect: equalTo("{(i*1.5) as Integer}") } } ]}.perform();

Shape Support

New Shapes: Almond Arrow Asterisk Astroid Balloon Cross Donut Fan Lauburu MultiRoundRectangle Rays RegularPolygon ReuleauxTriangle RoundPin Star Triangle

Shape Support (demo)

Other JFXtras Goodies

JFXObject Convenience method for reflection

JFXException Declaratively define JavaFX exceptions

Geometry Utilities pointToJava/JavaFX, rectangleToJava/JavaFX

Sequence Utilities sum, concat, join, characterSequence

ResizableScene no more binding to stage/scene bounds

Native Menus AWT Menus and Popups

JavaFX Puzzlers

FX

Puzzler 1

What will this program display?:

Text { textOrigin: TextOrigin.TOP font: Font.font(null, 36) content: “the news” “paper in the hand” “bag was bent”}

Output:

Puzzler 2

What does this print out?var cars = [ ["z3", "m3", "x5"], ["a4", "r8", "tt"]];println("bmw: {cars[0]}");println("audi: {cars[1]}");

bmw: z3audi: m3

Answer:

Puzzler 3

What does this print out?

var list = [1 3 -5]for (num in list) { println(“Element {indexof num} is {num}”);}

Element 0 is 1Element 1 is -2

Answer:

(Thanks to Weiqi Gao for this puzzler)

Puzzler 4 What does this print out?var baseball = ["giants", "mets", "yankees"];var football = ["49ers", "raiders", "giants"];var teams = [ baseball football ["sharks", "rangers", "devils"]];for (team in teams) { println("Team: {team}");}

Main.fx:6: Sorry, I was trying to understand an expression but I got confused when I saw ',' which is a punctuation character. ["sharks", "rangers", "devils"]

Answer: Compilation Error!

Wrapping Things Up…

JFXtras Future Roadmap…

More Layouts Custom Components (pure JavaFX) Graphing and Charting Much more…

WidgetFX Future Roadmap…

Browser Integration (D&D) Widget Community Site Mobile Widgets

And a Book…

Will be shipped by JavaOne

Chapters on: Mobile

Development Advanced

Layouts Back-end

Integration WidgetFX/JFXtras