Upload
stephen-chin
View
1.821
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Into to JavaFX & WidgetFX as presented to the Silicon Valley JUG on 2/17.
Citation preview
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