java fx 2.0 - a developer's guide
DESCRIPTION
A University talk about JavaFX 2.0 doTRANSCRIPT
![Page 1: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/1.jpg)
JavaFX 2.0 – A Java Developer's Guide
Stephen Chin Chief Agile Methodologist, GXS http://steveonjava.com @steveonjava
Peter Pilgrim Oracle Java Champion http://www.xenonique.co.uk/blog/ @peter_pilgrim
![Page 2: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/2.jpg)
Meet the Presenters
Stephen Chin @steveonjava
Motorcyclist
Family Man
Peter Pilgrim @peter_pilgrim
Football, Music & Partner
![Page 3: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/3.jpg)
This is a Participatory Session!
> Every now and then we will say something interesting… and it will go out in a tweet.
> Follow @steveonjava to watch the tweets and retweet the ones you like to your followers
> Feel free to create your own tweets using the hash tags "#JavaFX #Devoxx"
> We have some goodies for folks who play. J
3
![Page 4: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/4.jpg)
http://blogs.oracle.com/chrisoliver/entry/epitaph 4
At the end of the day, on the one hand we have computer systems, and on the other, people. Connecting them together, and allowing people to interact with computer systems in a compelling way, requires graphical user interfaces
Chris Oliver, Creator of F3
![Page 5: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/5.jpg)
JavaFX 2.0 Platform
Immersive Desktop Experience Combining the Best of JavaFX and Web Technologies > Leverage your Java skills with modern
JavaFX APIs
> Integrate Java, JavaScript, and HTML5 in the same application
> New graphics stack takes advantage of hardware acceleration for 2D and 3D applications
> Integrate in Swing applications using JFXPanel
> User your favorite IDE: NetBeans, Eclipse, IntelliJ, etc.
![Page 6: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/6.jpg)
Demo Video Fracture
![Page 7: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/7.jpg)
Headline News
> RT @Stephan007: The #JavaOne11 channel on #Parleys passed 51.800 views! Most viewed: "Introduction to #JavaFX 2.0", close to 11,000 - @JavaFX4You, 9th November 2011
> The most interesting announcement came when Oracle demoed both Java and JavaFX applications running on a Windows tablet, an iPad, and a "Linux-based tablet". - Eric Bruno, Dr Dobbs Journal, 5th October 2011
7
![Page 8: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/8.jpg)
Platform Support
> Windows fully supported l For 3D you need one of the supported graphics
cards (ATI, NVidia, Intel) > Mac OS X preview available > Linux Planned for end of 2012
8
![Page 9: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/9.jpg)
Windows OS Requirements
Operating System (32-Bit and 64-Bit) Browsers (32-Bit and 64-Bit) Windows XP Home and Professional with Service Pack 3
Internet Explorer 7 and 8 Chrome
Windows Vista Home Basic, Home Premium, Business, and Ultimate with Service Pack 2
Internet Explorer 7, 8, and 9 Firefox 3.5, 3.6, and 4 Chrome
Windows 7 Home Premium, Professional, and Ultimate
Internet Explorer 8 and 9 Firefox 3.5, 3.6, and 4 Chrome
9
![Page 10: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/10.jpg)
Supported Graphics Cards
Graphics Card Supported Graphics Processing Units (GPUs)
NVIDIA Mobile GPUs: GeForce 8M and 100M series or higher, NVS 2100M series or higher, and Mobility Quadro FX 300M series or higher Desktop GPUs: GeForce 8 and 100 series or higher Workstation GPUs: Quadro FX 300 series or higher
ATI Mobile GPUs: Mobility Radeon HD 3000, 4000, and 5000 series Desktop GPUs: Radeon HD 2400, 3000, 4000, 5000, and 6000 series
Intel Mobile GPUs: GMA 4500MHD and GMA HD Desktop GPUs: GMA 4500 and GMA HD
10
![Page 11: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/11.jpg)
Building JavaFX Applications
> Deploys in the browser or on desktop > Pure Java APIs > Includes builders for declarative construction > Alternative languages can also be used for
simpler UI creation l GroovyFX l ScalaFX l Visage
11
![Page 12: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/12.jpg)
Hello Devoxx (Java Version)
public class HelloDevoxx extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Hello Devoxx"); Group root = new Group(); Scene scene = new Scene(root, 400, 250, Color.ALICEBLUE); Text text = new Text(); text.setX(105); text.setY(120); text.setFont(new Font(30)); text.setText("Hello Devoxx"); root.getChildren().add(text); primaryStage.setScene(scene); primaryStage.show(); } }
12
19 Lines 425 Characters
![Page 13: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/13.jpg)
Hello Devoxx (Builder Version)
public void start(Stage primaryStage) { primaryStage.setTitle("Hello Devoxx"); primaryStage.setScene(SceneBuilder.create() .width(400) .height(250) .fill(Color.ALICEBLUE) .root( GroupBuilder.create().children( TextBuilder.create() .x(105) .y(120) .text("Hello Devoxx") .font(new Font(30)) .build() ).build() ) .build()); primaryStage.show(); }
13
25 Lines 418 Characters
![Page 14: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/14.jpg)
Hello Devoxx (GroovyFX Version)
GroovyFX.start { primaryStage -‐> def sg = new SceneGraphBuilder() sg.stage( title: 'Hello Devoxx', show: true) { scene( fill: aliceblue, width: 400, height: 250) { text( x: 105, y: 120, text: "Hello Devoxx" font: "30pt") } } }
14
17 Lines 190 Characters
![Page 15: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/15.jpg)
Hello Devoxx (ScalaFX Version)
object HelloDevoxx extends JFXApp { stage = new Stage { title = "Hello Devoxx" width = 400 height = 250 scene = new Scene { fill = BLUE Text { x = 105 y = 120 text = "Hello Devoxx" font = Font(size: 30) } } } }
15
16 Lines 163 Characters
![Page 16: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/16.jpg)
Hello Devoxx (Visage Version)
Stage { title: "Hello Devoxx" width: 400 height: 250 scene: Scene { fill: BLUE content: Text { x: 105 y: 120 text: "Hello Devoxx" font: Font {size: 30pt} } } }
16
14 Lines 129 Characters
![Page 17: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/17.jpg)
Architecture of JavaFX 2.0
Java Virtual Machine
Java2D Open GL D3D
Prism Glass WinTk
Media Engine
Web Engine
JavaFX Public API
Quantum Toolkit
![Page 18: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/18.jpg)
Properties, Lists, Binding 18
JavaFX 2.0 Fundamentals
![Page 19: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/19.jpg)
JavaFX 2.0 Properties
> Primitive Properties > Object Properties > FX List Collection Properties
> Properties are:
l Observable l Lazy l Type Safe
19
![Page 20: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/20.jpg)
Properties in Java
public class Person { private StringProperty firstName; public void setFirstName(String val) { firstNameProperty().set(val); } public String getFirstName() { return firstNameProperty().get(); } public StringProperty firstNameProperty() { if (firstName == null) firstName = new SimpleStringProperty(this, "firstName"); return firstName; } }
20
Property Declaration
![Page 21: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/21.jpg)
Properties in Java
public class Person { private StringProperty firstName; public void setFirstName(String val) { firstNameProperty().set(val); } public String getFirstName() { return firstNameProperty().get(); } public StringProperty firstNameProperty() { if (firstName == null) firstName = new SimpleStringProperty(this, "firstName"); return firstName; } }
21
Setter Method (Convenience)
![Page 22: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/22.jpg)
Properties in Java
public class Person { private StringProperty firstName; public void setFirstName(String val) { firstNameProperty().set(val); } public String getFirstName() { return firstNameProperty().get(); } public StringProperty firstNameProperty() { if (firstName == null) firstName = new SimpleStringProperty(this, "firstName"); return firstName; } }
22
Getter Method (Convenience)
![Page 23: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/23.jpg)
Properties in Java
public class Person { private StringProperty firstName; public void setFirstName(String val) { firstNameProperty().set(val); } public String getFirstName() { return firstNameProperty().get(); } public StringProperty firstNameProperty() { if (firstName == null) firstName = new SimpleStringProperty(this, "firstName"); return firstName; } }
23
Property Fetcher (Lazy Construction)
![Page 24: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/24.jpg)
Properties in Java
public class Person { private StringProperty firstName; public void setFirstName(String val) { firstNameProperty().set(val); } public String getFirstName() { return firstName == null ? null : firstNameProperty().get(); } public StringProperty firstNameProperty() { if (firstName == null) firstName = new SimpleStringProperty(this, "firstName"); return firstName; } }
24
Even Lazier…
![Page 25: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/25.jpg)
Properties in Java
public class Person { private StringProperty firstName; public void setFirstName(String val) { firstNameProperty().set(val); } public String getFirstName() { return firstName == null ? "Peter" : firstNameProperty().get(); } public StringProperty firstNameProperty() { if (firstName == null) firstName = new SimpleStringProperty(this, "firstName", "Peter"); return firstName; } }
25
With initial value
![Page 26: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/26.jpg)
Undirectional, Bidirectional and Lazy binding in Java
Demo Properties
![Page 27: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/27.jpg)
Listeners
> Change Listener l Observable, old value, new value
> Invalidation Listeners l Observable
27
![Page 28: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/28.jpg)
Property Listener Example
IntegerProperty temperature = new SimpleIntegerProperty(0); temperature.setOnChangeListener( new ChangeListener<Number>() { public void change( ObservableValue<? Extends Number> ov, Number newValue, Number oldValue) System.out.printf(“%f %f %f”, ov.doubleValue(), oldValue.doubleValue(), newValue.doubleValue() } ); temperature.set(2); temperature.set(4);
28
![Page 29: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/29.jpg)
Hey Ho! This is all just to say:
var temperature: Integer = 23 on replace oldValue { println("temperature={temperature}, oldValue={oldValue}"); } // Visage (previously JavaFX Script)
29
![Page 30: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/30.jpg)
JavaFX 2.0 Observable Lists
> Extends java.util.List > Includes addListener/removeListener
> For bulk operations use: l addAll l removeAll l setAll
> Sort with l FXCollections.sort()
30
![Page 31: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/31.jpg)
List Change Listener
list.addListener(new ListChangeListener<Item>() { public void onChanged(Change<Item> c) { while (c.next()) { if (c.wasPermutated()) { for (int i = c.getFrom(); i < c.getTo(); i++) { int newLoc = getPermutation(i); // handle move (a.k.a. sort) } } else { for (Item removed : c.getRemoved()) { // handle removal } for (Item added : c.getAddedSubList()) { // handle addition } }}}});
31
![Page 32: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/32.jpg)
JavaFX 2.0 Observable Maps
> Extends java.util.Map > Includes addListener() / removeListener()
> MapChangeListener l Supports add() / remove() l Can get associated:
l Key l Old Value l New Value
32
![Page 33: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/33.jpg)
Binding in JavaFX 2.0
> One of the most important features of JavaFX 1.3 and prior
> Now supported via an API (that works with Observable Properties)
> Can handle most cases quite elegantly and with full type safety
33
![Page 34: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/34.jpg)
Binding in JavaFX 2.0
Infix Addition/Subtraction/Multiplication/Division:
heightProperty().bind(rect1.heightProperty().add(rect2.heightProperty()));
Aggregate Operators:
widthProperty().bind(Bindings.max(rect1.widthProperty(), rect2.widthProperty(), rect3.widthProperty()));
Conditional Expressions:
strokeWidthProperty().bind(Bindings.when(hover).then(4).otherwise(0));
Bidirectional Binding:
heightProperty().bindBidirectional(rect1.heightProperty());
34
![Page 35: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/35.jpg)
Life is like a bowl of cherries
Demo Image Fracture
![Page 36: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/36.jpg)
“The Scene-graph is King.”
36
![Page 37: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/37.jpg)
Image
Image View 1
Image View 2
Image View 3
Image View 4
Image View Node
37
![Page 38: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/38.jpg)
Media Player
Media View 1
Media View 2
Media View 3
Media View 4
Media
38
![Page 39: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/39.jpg)
Breaking Glass
1. Divide a bounded area into four triangles 2. Are we there yet? 3. For each triangle
A. Choose a random side and split it to two rectangles
B. Recursive descend the two triangles (step 2)
39
![Page 40: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/40.jpg)
Controls
10 / 10 Break
![Page 41: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/41.jpg)
Button Control
> Simple Button Control > Add and remove click event handler > Support Cascading Style Sheets
41
![Page 42: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/42.jpg)
Button Code
public class ButtonDemo extends AbstractDevoxxApplication { public void initialiseScene(Group root) { VBox vbox = VBoxBuilder.create(). spacing(25).layoutX(25).layoutY(25).build(); root.getChildren().add(vbox); Button red = ButtonBuilder.create() .text("Red").style("-‐fx-‐base: red;").build(); Button yellow = ButtonBuilder.create() .text("Yellow").style("-‐fx-‐base: blue;") .build(); Button green = ButtonBuilder.create() .text("Green").style("-‐fx-‐base: green;") .build(); vbox.getChildren().addAll(red,yellow,green); } /* … */ }
42
![Page 43: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/43.jpg)
TextField Control
> One line entry text field control > Set OnAction event handler > Can listen to individual key events > Support Cascading Style Sheets
43
![Page 44: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/44.jpg)
TextField Demo
public class TextDemo extends AbstractDevoxxApplication { public void initialiseScene(Group root) { VBox vbox = VBoxBuilder.create().spacing(25) .layoutX(25).layoutY(25).build(); root.getChildren().add(vbox); TextField red = TextFieldBuilder.create() .text("Red Devoxx") .style("-‐fx-‐base: red; -‐fx-‐font-‐size: 48pt; ") .build(); TextField green = TextFieldBuilder.create() .text("Green Devoxx") .style("-‐fx-‐base: green; -‐fx-‐font-‐size: 24pt; ") .build(); vbox.getChildren().addAll(red,green); } /*…. */ }
44
![Page 45: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/45.jpg)
ListView Control
> Displays a list of items > Reuses cells for performance > Default cell renderer can
display Strings > For other object types
l Create custom CellFactory
45
![Page 46: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/46.jpg)
ListView Code
public void initialiseScene(Group root) { VBox vbox = VBoxBuilder.create()
.spacing(25).layoutX(25).layoutY(25).build(); root.getChildren().add(vbox); final ListView<String> listView =
new ListView<String>(); listView.setItems(FXCollections.observableArrayList( "Manchester City", "Manchester United", "Newcastle United", "Chelsea", "Tottenham Hotspur", "Liverpool", /* … */ ));
listView.getSelectionModel() .setSelectionMode(SelectionMode.MULTIPLE); vbox.getChildren().addAll(listView); } /*…*/ }
46
![Page 47: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/47.jpg)
TreeView Control
> Displays a tree view of items > Can dynamically populate as
tree is expanded > Default cell renderer can
display Strings > For other object types
l Create custom CellFactory
47
![Page 48: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/48.jpg)
TreeView Code
public void initialiseScene(Group root) { /*…*/ TreeView treeView = TreeViewBuilder.<String>create().root( TreeItemBuilder.<String>create().value("JVM Languages").children( TreeItemBuilder.<String>create().value("Static").children( new TreeItem<String>("Scala"), new TreeItem<String>("Java"), new TreeItem<String>("Visage"), /*…*/ ).build(), TreeItemBuilder.<String>create().value("Dynamic").children( new TreeItem<String>("Clojure"), new TreeItem<String>("Groovy"), /*…*/ ).build(), /*…*/ ).build() ).build(); /*…*/ } 48
![Page 49: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/49.jpg)
ToolBar Demo
> Toolbar displays items horizontally or vertically > Handles arbitrary number of items > Can add any node to the toolbar, including
custom nodes > Automatic adds an overflow hint if cannot display
all toolbar items
49
![Page 50: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/50.jpg)
Toolbar Code
public class ToolBarDemo extends AbstractDevoxxApplication { public void initialiseScene(Group root) { /*…*/ ToggleGroup amFm = new ToggleGroup(); ToolBar toolBar = ToolBarBuilder.create().items( new Label("Volume"), new Slider(), new ToggleButton("Loudness"), RadioButtonBuilder.create() .text("AM").toggleGroup(amFm).build(), RadioButtonBuilder.create() .text("FM").toggleGroup(amFm).build(), new Button("Tune") ).build(); vbox.getChildren().addAll(toolBar); }}
50
![Page 51: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/51.jpg)
Progress Bars and Indicators
> Progress Bars can be laid out vertically and horizontally
> Progress Indicator is a circular widget
> Progress Bar and Indicator can be indefinite
> Double property 0.0 <= x <= 1.0
51
![Page 52: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/52.jpg)
Progress Bar/Indicator Code
VBoxBuilder.create().spacing(10) .alignment(Pos.CENTER).children( new ProgressBar(), new ProgressBar(.25), new ProgressIndicator(.75) ).build()
52
![Page 53: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/53.jpg)
Accordion Control
> Accordion is a space saving components
> Accordian accept only TitledPanes
> Each TitledPane managed one scenegraph node
> Can choose the titled pane expanded by default
53
![Page 54: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/54.jpg)
Accordion Code
String imageUrl = new Image(ResizableImageViewDemo.class. getResource("images/Squirrel.jpg").toExternalForm(); Accordion accordion = AccordionBuilder.create().panes( new TitledPane("Button", new Button("Regular")), new TitledPane("ToggleButton", new ToggleButton("Toggle")), imagePane = new TitledPane("SquirrelImage", ImageViewBuilder.create().image(imageUrl, 500, 500, true, true, false) ).build() ) ).build()
54
![Page 55: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/55.jpg)
TabPane Control
> Alternative space saving component > Choose a side for the Tab > Each manages one component node > Tab pane has two modes:
l floating l recessed
55
![Page 56: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/56.jpg)
TabPane Code
Accordion accordion; TitledPane imagePane; TabPane tabPane = TabPaneBuilder.create().tabs( TabBuilder.create().text("Progress").content( /* Progress Tab Here */ ).build(), TabBuilder.create().text("Accordion").content( /* Accordion Tab Here */ ).build() ).build(); accordion.setExpandedPane(imagePane); vbox.getChildren().addAll(tabPane);
56
![Page 57: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/57.jpg)
JavaFX Components
57
![Page 58: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/58.jpg)
Pens, papers and inks, first!
58
![Page 59: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/59.jpg)
A component is an encapsulation that binds a set of nodes with the operations that act on those nodes
59
![Page 60: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/60.jpg)
Component Types
> Non-Resizable l javafx.scene.shape.Shape l javafx.scene.Group
> Resizable l javafx.scene.layout.Pane l javafx.scene.layout.Region l javafx.scene.layout.Control
60
![Page 61: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/61.jpg)
Group based
> Particularly using the JavaFX primitive nodes under javafx.scene.shape.*;
> Design is not meant to be resized > Layout is fixed at construction / initialisation time
61
![Page 62: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/62.jpg)
Region based
> Region is the sub class of javafx.scene.Parent > Adds the ability to resize a node, layout a
particular set of children
62
![Page 63: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/63.jpg)
Control based
> Allows particular subclass of Region that permits skinning of node with a stylesheet
> You need 3 classes l The Control java.scene.control.Control
l The Skinnable java.scene.control.Skinnable
l The Behaviour com.sun.javafx.scene.control.BehaviorBase
63
![Page 64: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/64.jpg)
Control based contd
> See JFXtras.org for more examples of skinnable components written for JavaFX 2.0
> Define CSS file referencing a Skin class > A Skin is a Region (JavaFX 2.0) com.sun.javafx.scene.control.BehaviorBase com.sun.javafx.scene.control.SkinBase
64
![Page 65: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/65.jpg)
Skins are StackPanes
> SkinBase is a type of StackPane > A StackPane is a Region > Idea of shuffling a deck of cards and only showing
one
65
![Page 66: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/66.jpg)
Layout Children Method
void layoutChildren()
> Layout all of the children of a Region based component
> Compute the preferred width and height of the children (first)
> May cache those values internally as part of the component or use Constraints
66
![Page 67: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/67.jpg)
Layout Boundaries
> SDK will make a request to find the best width and height for your component.
> Your component must do the same for its children > Implement at least computePrefWidth and
computePrefHeight methods!
67
![Page 68: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/68.jpg)
Layout Methods
protected double computePrefHeight(double w) { return child.prefHeight(w) + 2 *ht; } protected double computePrefWidth(double h) { return child.prefWidth(h) + 2 * wt; }
68
![Page 69: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/69.jpg)
Pedantic Complete
Implement the other four methods too > computeMinWidth(v) > computeMinHeight(v) > computeMaxWidth(v) > computeMaxHeight(v)
69
![Page 70: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/70.jpg)
Demo Custom Border Layout
![Page 71: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/71.jpg)
Writing JavaFX Containers
![Page 72: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/72.jpg)
Event Input on Node
> Mouse Events fall under the pointer iteraction (single) l Clicked, Entered, Exited, Pressed, Dragged,
Released, Wheel l Target Entered, Target Exited
> Key Events l Clicked, Pressed, Released
![Page 73: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/73.jpg)
Event Input on Node
> It is possible to consume an event and stop it bubbling further down the scene-graph hierarchy
> You can block a component from event interaction > Using clever tricks (opaque shape) you can
implement dialog / focus / modal behaviour
![Page 74: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/74.jpg)
Layout Secrets
![Page 75: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/75.jpg)
75
Reuse SDK Methods
![Page 76: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/76.jpg)
Some SDK Methods
> Region#layoutInArea() > Region#positionInArea() > Node#resize() > Node#resizeRelocate()
![Page 77: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/77.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
![Page 78: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/78.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
![Page 79: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/79.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
![Page 80: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/80.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
![Page 81: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/81.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
A B
D E
C
![Page 82: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/82.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
![Page 83: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/83.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
![Page 84: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/84.jpg)
> AnchorPane > BorderPane > VBox/HBox > FlowPane > StackPane > TilePane > GridPane
Built-in Layouts
![Page 85: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/85.jpg)
Demo Box Container Pane
![Page 86: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/86.jpg)
Tips
> When Dragging a Node prefer to translate (X,Y) > When Laying Out a Node prefer to set the position
with layoutX, layoutY > Given steady state conditions you can swap
layout (X,Y) for translation (X,Y)
![Page 87: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/87.jpg)
Tips 2
> Use blocking boolean flags to prevent conflict when you animating children in a container
> If you are unsure about MT concurrency you can always use AtomicBoolean
> Prefer JavaFX Properties
![Page 88: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/88.jpg)
88
Displaying HTML in JavaFX
![Page 89: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/89.jpg)
Displaying HTML in JavaFX
public class WebViewDemo extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage stage) { WebView webView = new WebView(); webView.getEngine().load("http://devoxx.com"); Scene scene = new Scene(webView); stage.setScene(scene); stage.setTitle("Web View Demo"); stage.show(); }}
89
![Page 90: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/90.jpg)
For more info on Web/HTML5…
Moving to the Client – JavaFX and HTML5 Stephen Chin Kevin Nilson Thursday 10:50 AM, Room 7
90
10 / 10 Break
![Page 91: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/91.jpg)
JavaFX With Groovy
![Page 92: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/92.jpg)
Features of Groovy
> Modern language l Closures l AST Transforms l Strongly typed dynamic language
> Tight integration with Java l Very easy to port from Java to Groovy
> Declarative syntax with GroovyFX Builders l Familiar to Groovy and JavaFX Script developers
![Page 93: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/93.jpg)
Java vs. GroovyFX DSL
public class HelloStage extends Application { public void start(Stage stage) { stage.setTitle("Hello Stage"); stage.setWidth(600); stage.setHeight(450); Scene scene = new Scene(); scene.setFill(Color.LIGHTGREEN); Rectangle rect = new Rectangle(); rect.setX(25); rect.setY(40); rect.setWidth(100); rect.setHeight(50); rect.setFill(Color.RED); scene.setRoot(new Group(rect)); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(HelloStage.class, args); } }
GroovyFX.start { stage -‐> def sg = new SceneGraphBuilder(stage) sg.stage(title: “Hello Stage”, width: 600,
height: 450) { scene(fill: groovyblue) { rectangle(x: 25, y: 40, width: 100,
height: 50, fill: red) } } }
93
21 Lines 430 Characters
8 Lines 180 Characters
![Page 94: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/94.jpg)
Disappearing Circles in Groovy
def sg = new SceneGraphBuilder() def hc = { hover -‐> hover ? 4 : 0 } sg.stage(title: 'Vanishing Circles', show: true) { scene(fill: black, width: 800, height: 600) { 50.times { circle(centerX: rand(800), centerY: rand(600), radius: 150, stroke: white, strokeWidth: bind('hover', converter: hc)) { fill rgb(rand(255), rand(255), rand(255), 0.2) effect boxBlur(width: 10, height: 10, iterations: 3) } } } }
94
![Page 95: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/95.jpg)
Disappearing Circles in Groovy
def sg = new SceneGraphBuilder() def hc = { hover -‐> hover ? 4 : 0 } sg.stage(title: 'Vanishing Circles', show: true) { scene(fill: black, width: 800, height: 600) { 50.times { circle(centerX: rand(800), centerY: rand(600), radius: 150, stroke: white, strokeWidth: bind('hover', converter: hc)) { fill rgb(rand(255), rand(255), rand(255), 0.2) effect boxBlur(width: 10, height: 10, iterations: 3) } } } }
95
Builder for GroovyFX scene graphs
![Page 96: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/96.jpg)
Disappearing Circles in Groovy
def sg = new SceneGraphBuilder() def hc = { hover -‐> hover ? 4 : 0 } sg.stage(title: 'Vanishing Circles', show: true) { scene(fill: black, width: 800, height: 600) { 50.times { circle(centerX: rand(800), centerY: rand(600), radius: 150, stroke: white, strokeWidth: bind('hover', converter: hc)) { fill rgb(rand(255), rand(255), rand(255), 0.2) effect boxBlur(width: 10, height: 10, iterations: 3) } } } }
96
Declarative Stage definition
![Page 97: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/97.jpg)
Disappearing Circles in Groovy
def sg = new SceneGraphBuilder() def hc = { hover -‐> hover ? 4 : 0 } sg.stage(title: 'Vanishing Circles', show: true) { scene(fill: black, width: 800, height: 600) { 50.times { circle(centerX: rand(800), centerY: rand(600), radius: 150, stroke: white, strokeWidth: bind('hover', converter: hc)) { fill rgb(rand(255), rand(255), rand(255), 0.2) effect boxBlur(width: 10, height: 10, iterations: 3) } } } }
97
Inline property definitions
![Page 98: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/98.jpg)
Disappearing Circles in Groovy
def sg = new SceneGraphBuilder() def hc = { hover -‐> hover ? 4 : 0 } sg.stage(title: 'Vanishing Circles', show: true) { scene(fill: black, width: 800, height: 600) { 50.times { circle(centerX: rand(800), centerY: rand(600), radius: 150, stroke: white, strokeWidth: bind('hover', converter: hc)) { fill rgb(rand(255), rand(255), rand(255), 0.2) effect boxBlur(width: 10, height: 10, iterations: 3) } } } }
98
Bind to properties
![Page 99: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/99.jpg)
Disappearing Circles in Groovy
def sg = new SceneGraphBuilder() def hc = { hover -‐> hover ? 4 : 0 } sg.stage(title: 'Vanishing Circles', show: true) { scene(fill: black, width: 800, height: 600) { 50.times { circle(centerX: rand(800), centerY: rand(600), radius: 150, stroke: white, strokeWidth: bind('hover', converter: hc)) { fill rgb(rand(255), rand(255), rand(255), 0.2) effect boxBlur(width: 10, height: 10, iterations: 3) } } } }
99
Sequence Creation Via Loop
![Page 100: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/100.jpg)
Properties in Java
public class Person {! private StringProperty firstName;! public void setFirstName(String val) { firstNameProperty().set(val); }! public String getFirstName() { return firstNameProperty().get(); }! public StringProperty firstNameProperty() { ! if (firstName == null) ! firstName = new SimpleStringProperty(this, "firstName");! return firstName; ! }! ! private StringProperty lastName;! public void setLastName(String value)
{ lastNameProperty().set(value); }! public String getLastName() { return lastNameProperty().get(); }! public StringProperty lastNameProperty() { ! if (lastName == null) // etc.! } !}!
100
![Page 101: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/101.jpg)
Properties in GroovyFX
public class Person {! @FXBindable String firstName; ! @FXBindable String lastName;!}!
101
![Page 102: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/102.jpg)
Properties in GroovyFX
public class Person {! @FXBindable String firstName; ! @FXBindable String lastName = “Smith”;!}!
102
Optional initializers
![Page 103: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/103.jpg)
Properties in GroovyFX
public class Person {! @FXBindable String firstName; ! @FXBindable String lastName = “Smith”;!}!!def p = new Person()!def last = p.lastName!p.firstName = “Agent”!!
103
Get and set values
![Page 104: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/104.jpg)
Properties in GroovyFX
public class Person {! @FXBindable String firstName; ! @FXBindable String lastName = “Smith”;!}!!def p = new Person()!def last = p.lastName!p.firstName = “Agent”!!textField(text: bind(p.lastNameProperty()))!!
104
Access underlying property for binding
![Page 105: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/105.jpg)
Binding in GroovyFX
@FXBindable class Time { Integer hours Integer minutes Integer seconds Double hourAngle Double minuteAngle Double secondAngle public Time() { // bind the angle properties to the clock time hourAngleProperty().bind((hoursProperty() * 30.0) +
(minutesProperty() * 0.5)) minuteAngleProperty().bind(minutesProperty() * 6.0) secondAngleProperty().bind(secondsProperty() * 6.0) } }
105
![Page 106: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/106.jpg)
Animation in GroovyFX
timeline(cycleCount: Timeline.INDEFINITE, autoReverse: true) {
at (1000.ms) { change(rect1, 'x') to 200 tween ease_both change rect2.yProperty() to 200 tween linear } }.play()
106
![Page 107: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/107.jpg)
Animation in GroovyFX
timeline(cycleCount: Timeline.INDEFINITE, autoReverse: true) {
at (1000.ms) { change(rect1, 'x') to 200 tween ease_both change rect2.yProperty() to 200 tween linear } }.play()
107
Easy animation syntax: at (duration) {keyframes}
![Page 108: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/108.jpg)
Animation in GroovyFX
timeline(cycleCount: Timeline.INDEFINITE, autoReverse: true) {
at (1000.ms) { change(rect1, 'x') to 200 change rect2.yProperty() to 200 } }.play()
108
Key frame DSL
![Page 109: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/109.jpg)
Animation in GroovyFX
timeline(cycleCount: Timeline.INDEFINITE, autoReverse: true) {
at (1000.ms) { change(rect1, 'x') to 200 tween ease_both change rect2.yProperty() to 200 tween linear } }.play()
109
Optional easing
![Page 110: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/110.jpg)
Event Listeners in GroovyFX
> Supported using the built-in Closure syntax > Optional arguments for event objects
110
onMouseClicked { e -‐> timeline { at(3.s) { change e.source.radiusProperty() to 0 }
}.play() }
![Page 111: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/111.jpg)
Event Listeners in GroovyFX
Supported using the built-‐in Closure syntax Optional arguments for event objects
111
Compact syntax {body}
onMouseClicked { MouseEvent e -‐> timeline { at(3.s) { change e.source.radiusProperty() to 0 }
}.play() }
![Page 112: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/112.jpg)
Event Listeners in GroovyFX
Supported using the built-‐in Closure syntax Optional arguments for event objects
112
Optional event parameter {event -> body}
onMouseClicked { MouseEvent e -‐> timeline { at(3.s) { change e.source.radiusProperty() to 0 }
}.play() }
![Page 113: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/113.jpg)
TableView in Java
113
ObservableList<Person> items = ... TableView<Person> tableView = new TableView<Person>(items); TableColumn<Person,String> firstNameCol = new TableColumn<Person,String>("First Name"); firstNameCol.setCellValueFactory( new Callback<CellDataFeatures<Person, String>, ObservableValue<String>>() { public ObservableValue<String> call(CellDataFeatures<Person, String> p) { return p.getValue().firstNameProperty(); } }); tableView.getColumns().add(firstNameCol);
![Page 114: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/114.jpg)
TableView in GroovyFX
114
def dateFormat = new SimpleDateFormat("yyyy-‐MM-‐dd"); tableView(items: persons) { tableColumn(property: "name", text: "Name", prefWidth: 150) tableColumn(property: "age", text: "Age", prefWidth: 50) tableColumn(property: "gender", text: "Gender", prefWidth: 150) tableColumn(property: "dob", text: "Birth", prefWidth: 150, type: Date, converter: { from -‐> return dateFormat.format(from) }) }
![Page 115: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/115.jpg)
Layout in Java
115
TextField urlField = new TextField(“h_p://www.google.com”); HBox.setHgrow(urlField, Priority.ALWAYS); HBox hbox = new HBox(); hbox.getChildren().add(urlField); WebView webView = new WebView(); VBox.setVgrow(webView, Priority.ALWAYS); VBox vbox = new VBox(); vbox.getChildren().addAll(hbox, webView);
![Page 116: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/116.jpg)
Layout in GroovyFX
116
sg.stage(title: "GroovyFX WebView Demo", show: true) { scene(fill: groovyblue, width: 1024, height: 800) { vbox { hbox(padding: 10, spacing: 5) { textField(“http://www.yahoo.com”, hgrow: "always") button("Go”) } webView(vgrow: "always") } } }
![Page 117: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/117.jpg)
Layout in GroovyFX
117
![Page 118: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/118.jpg)
Layout in GroovyFX
118
gridPane(hgap: 5, vgap: 10, padding: 25) {! columnConstraints(minWidth: 50, halignment: "right")! columnConstraints(prefWidth: 250)! label("Send Us Your Feedback", font: "24pt sanserif", ! row: 0, columnSpan: GridPane.REMAINING, halignment: "center",! margin: [0, 0, 10])!! label("Name: ", row: 1, column: 0)! textField(promptText: "Your name", row: 1, column: 1, hgrow: 'always')!! label("Email:", row: 2, column: 0)! textField(promptText: "Your email", row: 2, column: 1, hgrow: 'always')!! label("Message:", row: 3, column: 0, valignment: "baseline")! textArea(row: 3, column: 1, hgrow: "always", vgrow: "always")!! button("Send Message", row: 4, column: 1, halignment: "right")!}!
![Page 119: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/119.jpg)
Layout in GroovyFX
119
![Page 120: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/120.jpg)
GroovyFX Supports…
120
![Page 121: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/121.jpg)
GroovyFX Supports…
121
![Page 122: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/122.jpg)
122
JavaFX With Scala
![Page 123: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/123.jpg)
What is Scala
> Started in 2001 by Martin Odersky > Compiles to Java bytecodes > Pure object-oriented language > Also a functional programming language
2001 • Scala Started
2003/2004 • Scala v1.0
2006 • Scala v2.0
2011 • Scala 2.9.0 (latest)
123
![Page 124: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/124.jpg)
Why Scala?
> Shares many language features with JavaFX Script that make GUI programming easier: l Static Type Checking – Catch your errors at compile
time l Closures – Wrap behavior and pass it by reference l Declarative – Express the UI by describing what it
should look like
> Scala also supports Type Safe DSLs! l Implicit Conversions – type safe class extension l Operator Overloading – with standard precedence rules l DelayedInit / @specialized – advanced language
features
124
![Page 125: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/125.jpg)
Java vs. Scala DSL
public class HelloStage extends Application { public void start(Stage stage) { stage.setTitle("Hello Stage"); stage.setWidth(600); stage.setHeight(450); Scene scene = new Scene(); scene.setFill(Color.LIGHTGREEN); Rectangle rect = new Rectangle(); rect.setX(25); rect.setY(40); rect.setWidth(100); rect.setHeight(50); rect.setFill(Color.RED); scene.setRoot(new Group(rect)); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(HelloStage.class, args); } }
object HelloJavaFX extends JFXApp { stage = new Stage { title = "Hello Stage" width = 600 height = 450 scene = new Scene { fill = LIGHTGREEN content = Seq(new Rectangle { x = 25 y = 40 width = 100 height = 50 fill = RED }) } } }
125
21 Lines 430 Characters
17 Lines 177 Characters
![Page 126: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/126.jpg)
Disappearing Circles in ScalaFX
object DisappearingCircles extends JFXApp { stage = new Stage { title = "Disappearing Circles" width = 800 height = 600 scene = new Scene { fill = BLACK content = for (i <-‐ 0 until 50) yield new Circle { centerX = random * 800 centerY = random * 600 radius = 150 fill = color(random, random, random, 0.2) effect = new BoxBlur(10, 10, 3) } } } }
![Page 127: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/127.jpg)
Disappearing Circles in ScalaFX
object DisappearingCircles extends JFXApp { stage = new Stage { title = "Disappearing Circles" width = 800 height = 600 scene = new Scene { fill = BLACK content = for (i <-‐ 0 until 50) yield new Circle { centerX = random * 800 centerY = random * 600 radius = 150 fill = color(random, random, random, 0.2) effect = new BoxBlur(10, 10, 3) } } } }
127
Base class for JavaFX applications
![Page 128: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/128.jpg)
Disappearing Circles in ScalaFX
object DisappearingCircles extends JFXApp { stage = new Stage { title = "Disappearing Circles" width = 800 height = 600 scene = new Scene { fill = BLACK content = for (i <-‐ 0 until 50) yield new Circle { centerX = random * 800 centerY = random * 600 radius = 150 fill = color(random, random, random, 0.2) effect = new BoxBlur(10, 10, 3) } } } }
128
Declarative Stage definition
![Page 129: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/129.jpg)
Disappearing Circles in ScalaFX
object DisappearingCircles extends JFXApp { stage = new Stage { title = "Disappearing Circles" width = 800 height = 600 scene = new Scene { fill = BLACK content = for (i <-‐ 0 until 50) yield new Circle { centerX = random * 800 centerY = random * 600 radius = 150 fill = color(random, random, random, 0.2) effect = new BoxBlur(10, 10, 3) } } } }
129
Inline property definitions
![Page 130: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/130.jpg)
Disappearing Circles in ScalaFX
object DisappearingCircles extends JFXApp { stage = new Stage { title = "Disappearing Circles" width = 800 height = 600 scene = new Scene { fill = BLACK content = for (i <-‐ 0 until 50) yield new Circle { centerX = random * 800 centerY = random * 600 radius = 150 fill = color(random, random, random, 0.2) effect = new BoxBlur(10, 10, 3) } } } }
130
Sequence Creation Via Loop
![Page 131: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/131.jpg)
Binding in Scala
Infix Addition/Subtraction/Multiplication/Division:
height <== rect1.height + rect2.height Aggregate Operators:
width <== max(rect1.width, rect2.width, rect3.width) Conditional Expressions:
strokeWidth <== when (hover) then 4 otherwise 0 Compound Expressions:
text <== when (rect.hover || circle.hover && !disabled) then textField.text + " is enabled" otherwise "disabled"
131
![Page 132: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/132.jpg)
Animation in Scala
val timeline = new Timeline { cycleCount = INDEFINITE autoReverse = true keyFrames = for (circle <-‐ circles) yield at (40 s) { Set( circle.centerX -‐> random * stage.width, circle.centerY -‐> random * stage.height ) } } timeline.play();
132
![Page 133: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/133.jpg)
Animation in Scala
val timeline = new Timeline { cycleCount = INDEFINITE autoReverse = true keyFrames = for (circle <-‐ circles) yield at (40 s) { Set( circle.centerX -‐> random * stage.width, circle.centerY -‐> random * stage.height ) } } timeline.play();
133
JavaFX Script-like animation syntax: at (duration) {keyframes}
![Page 134: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/134.jpg)
Animation in Scala
val timeline = new Timeline { cycleCount = INDEFINITE autoReverse = true keyFrames = for (circle <-‐ circles) yield at (40 s) { Set( circle.centerX -‐> random * stage.width, circle.centerY -‐> random * stage.height ) } } timeline.play();
134
Operator overloading for animation syntax
![Page 135: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/135.jpg)
Animation in Scala
val timeline = new Timeline { cycleCount = INDEFINITE autoReverse = true keyFrames = for (circle <-‐ circles) yield at (40 s) { Set( circle.centerX -‐> random * stage.width tween EASE_BOTH, circle.centerY -‐> random * stage.height tween EASE_IN ) } } timeline.play();
135
Optional tween syntax
![Page 136: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/136.jpg)
Event Listeners in Scala
> Supported using the built-in Closure syntax > Optional arguments for event objects > 100% type-safe
136
onMouseClicked = { Timeline(at(3 s){radius-‐>0}).play() }
![Page 137: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/137.jpg)
Event Listeners in Scala
Supported using the built-‐in Closure syntax Optional arguments for event objects 100% type-‐safe
137
Compact syntax {body}
onMouseClicked = { Timeline(at(3 s){radius-‐>0}).play() }
![Page 138: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/138.jpg)
Event Listeners in Scala
Supported using the built-‐in Closure syntax Optional arguments for event objects 100% type-‐safe
138
Optional event parameter {(event) => body}
onMouseClicked = { (e: MouseEvent) => Timeline(at(3 s){radius-‐>0}).play() }
![Page 139: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/139.jpg)
About Project Visage
> Visage project goals: l Compile to JavaFX Java APIs l Evolve the Language (Annotations, Maps, etc.) l Support Other Toolkits
> Come join the team! > For more info: http://visage-lang.org/
139
> “Visage is a domain specific language (DSL) designed for the express purpose of writing user interfaces.”
![Page 140: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/140.jpg)
How about JavaFX on… Visage
Stage { title: "Hello Stage" width: 600 height: 450 scene: Scene { fill: Color.LIGHTGREEN content: Rectangle { x: 25 y: 40 width: 100 height: 50 fill: Color.RED } } }
140
![Page 141: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/141.jpg)
How about JavaFX on… Visage
Stage { title: "Hello Stage" width: 600 height: 450 scene: Scene { fill: Color.LIGHTGREEN content: Rectangle { x: 25 y: 40 width: 100 height: 50 fill: Color.RED } } }
141
![Page 142: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/142.jpg)
How about JavaFX on… Visage
Stage { title: "Hello Stage" width: 600 height: 450 Scene { fill: Color.LIGHTGREEN Rectangle { x: 25 y: 40 width: 100 height: 50 fill: Color.RED } } }
142
![Page 143: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/143.jpg)
Visage is JavaFX Script++
> Default Parameters > New Literal Syntax For:
l Angles – 35deg, 4rad, 1turn l Colors – #DDCCBB, #AA33AA|CC l Lengths – 5px, 2pt, 3in, 4sp
> Null-check Dereference l var width = rect!.width
> Built-in Bindable Maps (coming soon!) l var fruitMap = ["red" : apple, "yellow" : banana] l var fruit = bind fruitMap["red"]
143
![Page 144: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/144.jpg)
Visage and JavaFX 2.0 are made for each other…
> Enhanced Binding l Retains lazy evaluation properties with additional
expressive power > Integrated Collections
l Sequences and Maps automatically convert between JavaFX Observable Lists/Maps
> Built-in Animation Syntax l Ties into JavaFX animation subsystem l Provides consistent, clean APIs
144
![Page 145: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/145.jpg)
Conclusion
> You can write JavaFX applications in pure Java
> JavaFX is also usable in alternate languages
> You can get improved support using DSL libraries l GroovyFX l ScalaFX
> Or a dedicated UI JVM Language l Visage
![Page 146: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/146.jpg)
Pro JavaFX 2 Platform Coming Soon!
> Coming 1st Quarter 2012 > All examples rewritten in
Java > Covers the new JavaFX 2.0
APIs > Will includes ScalaFX,
GroovyFX, and Visage
146
![Page 147: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/147.jpg)
147
Professional Services
[email protected] JavaFX 2.0 in Enterprises Financial Services in London Training with Consultancy Technical Leadership
![Page 148: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/148.jpg)
JavaFX 2.0 – A Java Developer's Guide
Stephen Chin Chief Agile Methodologist, GXS http://steveonjava.com @steveonjava
Peter Pilgrim Oracle Java Champion http://www.xenonique.co.uk/blog/ @peter_pilgrim
Thank You
![Page 149: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/149.jpg)
Attributions
All images are Creative Commons (CC) License from Flickr.com – “You must attribute the source and you cannot change the content” Tim Ellis http://www.flickr.com/photos/tim_ellis/ Lego Basics http://www.flickr.com/photos/tim_ellis/338755101/sizes/l/ *PaysImaginaire* http://www.flickr.com/photos/nevrlndtink/ Variable Plastic Bag http://www.flickr.com/photos/nevrlndtink/232906118/sizes/m/ ~Deiby http://www.flickr.com/photos/deiby/ Expression http://www.flickr.com/photos/deiby/5489382677/sizes/l/ Lisa Sinclair http://www.flickr.com/photos/plumandjello/ fruit http://www.flickr.com/photos/plumandjello/2333263539/sizes/l/ Nerovivo http://www.flickr.com/photos/dominik99/ http://www.flickr.com/photos/dominik99/407716865/sizes/z/in/photostream/
![Page 150: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/150.jpg)
Attributions
All images are Creative Commons (CC) License from Flickr.com – “You must attribute the source and you cannot change the content” .Guilty http://www.flickr.com/photos/roll_initiative/ Arbitrary Function Generator http://www.flickr.com/photos/roll_initiative/3278642272/ Loop Oh Rupert Grazer http://www.flickr.com/photos/loop_oh/ Pattern at the Senckenberg Museum in Frankfurt am Main / Germany. http://www.flickr.com/photos/loop_oh/4571485915/ Lili Vieira de Carvalho, Vancouver, Canada http://www.flickr.com/people/lilivc/ Composition of Bowls http://www.flickr.com/photos/lilivc/367582911/sizes/l/ Mykl Roventine http://www.flickr.com/people/myklroventine/ 19/365 Game Over http://www.flickr.com/photos/myklroventine/3210068573/sizes/l/ superciliousness / Bentley Smith http://www.flickr.com/people/superciliousness/ 200510 carpenter's tools - inside the workman's shed - all his old tools
http://www.flickr.com/photos/superciliousness/57486288/
![Page 151: Java FX 2.0 - A Developer's Guide](https://reader035.vdocument.in/reader035/viewer/2022081800/5550ededb4c905387d8b5125/html5/thumbnails/151.jpg)
Attributions
All images are Creative Commons (CC) License from Flickr.com – “You must attribute the source and you cannot change the content” You’ve got a fast car http://www.flickr.com/photos/coreforce/5910961411/ Core Force http://www.flickr.com/photos/coreforce/ GAME AT MARBLES http://www.flickr.com/photos/9619972@N08/928099769/sizes/l/in/photostream/ (Author unknown, from an antique children's boo Lucs Game http://www.flickr.com/photos/9619972@N08/928099769/ just.Luc http://www.flickr.com/people/9619972@N08/ DIY Easel http://www.flickr.com/photos/68888883@N00/2744696593/in/photostream/ Judy of the Woods http://www.flickr.com/people/68888883@N00/