Getting Started with JavaFX and WidgetFX

Stephen ChinInovis, Inc.

Keith CombsInovis, Inc.

JavaFX Crash Course

3

Start Here: JavaFX.com

4

Hello Earthrise

5

JavaFX API Docs

JavaFX Mobile Development

JavaFX Mobile Advantages

> Write Once, Run Anywhere Desktop, Mobile, Set-top Boxes (future)

> Large Embedded Base Built on top of Java ME platform

> Wide Range of Devices Runs on Feature Phones, Smart Phones Currently available for Windows Mobile devices

JavaFX Mobile Constraints

> Screen Size Your application has to be capable of running within

a resolution of 320 by 240 or possibly even smaller.> Common Profile

Mobile applications are limited to the JavaFX APIs that are part of the Common Profile, which is a subset of the Desktop Profile.

> Performance Mobile applications run on much less powerful

devices, so they have less CPU and memory resources available to work with.

Developing for the Common ProfilePackage Class(es) Affected Variables and Methods

javafx.ext.swing All All

javafx.reflect All All

javafx.scene Node effect, style

javafx.scene Scene Stylesheets

javafx.scene.effect All All

javafx.scene.effect.light All All

javafx.scene.shape ShapeIntersect All

javafx.scene.shape ShapeSubstract All

javafx.scene.text FontautoKern, embolden, letterSpacing, ligatures, oblique, position

javafx.stage AppletStageExtension All

javafx.util FXEvaluator All

javafx.util StringLocalizer All

Mobile Demos

> Try out the HTC Touch Diamond

Java User Group Spinner Wheel

11

Web Service Integration

12

Calling a REST Service

> REST URL:http://api.meetup.com/rsvps.json/event_id=

{eventId}&rsvp=yes&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 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);}}

13

1POJO

2JSONHandler

3HttpRequest

14

http://jfxtras.org/

rsvpQuery

Silicon Valley JavaFX Users Group

> Free membership> Rockstar presenters> First Event:

Google Campus (Seville Room) Speaker: Richard Bair

Member of the JavaFX Team JavaOne 2009 Rockstar Speaker

December 9th (Tuesday)

15

http://svjugfx.org/

The JavaFX Desktop Widget Platform

WidgetFX

WidgetFX Origins

17

18

Why another desktop widget framework?> Open-Source

But widgets can be licensed commercially> Write Widgets in Java & JavaFX

HTML, CSS, and Javascript are great for websites, but not app development

> Cross-Platform Support Windows XP/Vista, Linux, and Mac OS X.

> One-Click Installation Plus automatic updates of the dock and widgets.

> Robust Security Secure sandbox + signed widgets

Built-in Widgets

> Clock Skinnable via CSS

> Slide Show Configurable Directory, Speed, & Filter

> Web Feed Supports Atom and all RSS flavors

19

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

20

Movie Widget Tutorial

Widget PropertiesName 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.

content Node[] Group Visible children of the widget. Contains a sequence of Nodes.

22

Widget Definition

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

23

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}

24

Run in Widget Runner

25

Widget Configuration PropertiesClass 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

26

Widget Configuration

widget = Widget { ... configuration: Configuration { properties: [ StringProperty { name: "source“ value: bind source with inverse } ] scene: Scene {…} // see next page }}

27

Widget Config Dialog

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

28

Add an On-Replace Trigger

var player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height} on replace =oldPlayer { oldPlayer.player.stop();}

29

Widget Configuration (demo)

30

Widget Development Contest

31

Widget Contest Results

> 3rd Place Infix WeatherWidget Larry Dickson

> 2nd Place RadioFX Yannick Van Godtsenhoven

32

Widget Contest Results

> 1st Place ScreenshotFX Pär Dahlberg

33

Pro JavaFX Book Giveaway!

34

35

Stephen Chinhttp://steveonjava.com/Tweet: steveonjava

Keith Combs

Thank You