Introduction to JavaFX with Richard Bair
-
Upload
stephen-chin -
Category
Technology
-
view
2.301 -
download
7
description
Transcript of Introduction to JavaFX with Richard Bair
![Page 1: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/1.jpg)
Richard BairSun Microsystems, Inc.
Introduction to JavaFXA rich client platform for all screens
![Page 2: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/2.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Introduction to JavaFX
• JavaFX is the next generation client stack for the Java Platform> Consumer & Enterprise> Consistent cross-device API and development model
• Designed for high performance graphics on desktop, mobile, tv> Leverages OpenGL, Direct3D, SSE3 when possible on any target device> Ground-up rewrite of fonts, image handling, rasterization
• Designed for multi-language support> Java> JavaFX Script> more...
2
![Page 3: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/3.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Outline
• JavaFX Script – a new programming language• JavaFX scene graph• User interface controls• Styling• Charts• Layout• Developer tools
3
![Page 4: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/4.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
What is JavaFX Script?
![Page 5: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/5.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
“DSL for the care and feeding of the Scenegraph”
![Page 6: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/6.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Null Pointer-less Language
![Page 7: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/7.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Expression Language
![Page 8: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/8.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Object Oriented
![Page 9: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/9.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
JVM Language
![Page 10: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/10.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Strongly Typed
![Page 11: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/11.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Type Inference
![Page 12: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/12.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Javascript / Scala like syntax
![Page 13: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/13.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Why A New Language?
• A programming language is not about telling the computer what to do, but instead is about expressing the programmer’s intent.
• A programming language needs to embody new, higher-level concepts and to abstract away irrelevant detail. (Brooks 1993, HOPL-II keynote)
• JavaFX Script is tightly integrated with, and works extremely effectively with the JavaFX runtime and scenegraph
• Itʼs fun!
13
![Page 14: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/14.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
println(“Hello, world!”)
![Page 15: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/15.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
def PI = 3.14159265;
![Page 16: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/16.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
var name = “Richard”;
![Page 17: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/17.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
var name:String;name = “Richard”;
![Page 18: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/18.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Primitive types from Java:> Boolean, Integer, Long, String, ...> New: string interpolation expressions
– println("The value of x is {x}");• Object references (similar to Java)• Number• Duration• Sequences
Data Types
18
![Page 19: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/19.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Sequences
• An ordered collection of objects• Sequences are flat — they do not nest• A sequence cannot be null (but it can be empty)
var numbers = [3, 1, 4, 1, 5];insert [9, 2, 6] into numbers;delete numbers[2];
19
![Page 20: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/20.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Expressions, For-Loops, and Sequences
• Every “statement” is actually an expression that has a value
• The value of a for-loop is a sequence of values from its body
var b = if (a >= 0) a else -a;
for (x in [1..5]) { x * x}
[1, 4, 9, 16, 25]
20
![Page 21: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/21.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Classes, Mixins, and APIs
• Classes are normal classes similar to Java classes• Mixin classes like Java interfaces
> Can include function implementations> Can include variable declarations and initial values
• Extending classes> At most one normal superclass> Arbitrary number of mixin classes
21
![Page 22: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/22.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Concise “declarative” syntax for object creation• A series of variable:initial-value pairs• Can be used on public and public-init variables• Can be nested arbitrarily
> Useful for creating scene graph structures
Object Literals
var rect = Rectangle { x: 10 y: 20 width: 30 height: 40}
22
![Page 23: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/23.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Object Literals and Binding
var leftMargin = 472;
var r1 = Rectangle { x: bind leftMargin ...};
var r2 = Rectangle { x: bind leftMargin ...}
when leftMargin changes the x-value of both Rectangles
changes
23
![Page 24: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/24.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
JavaFX Library API Style
• The x, y, width, height variables on Rectangle are public!> What about encapsulation? Enforcing invariants?
• No getters> Variables can be public-read
• No setters> Variables are public and have a trigger
• No constructors> Variables are public-init allowing use in object literals
• Few listeners and callbacks> State variables exposed (public, public-init, or public-read)> This allows binding on them
24
![Page 25: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/25.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
public var x1;public var x2;public-read var width = bind x2 - x1;
public var radius = 10 on replace { diameter = 2 * radius}
Binds and Triggers
25
![Page 26: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/26.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Outline
• JavaFX Script – a new programming language• JavaFX scene graph• User interface controls• Styling• Charts• Layout• Developer tools
26
![Page 27: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/27.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Data structure which represents all visual elements• Easily reference any visual element in the app and manipulate it• Comprised of Nodes
> Leaf Nodes (shapes, images, text, etc)> Parent Nodes (Groups, Containers, etc)
Scenegraph
27
![Page 28: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/28.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Group
Image
Media
Group
Circle
28
![Page 29: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/29.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Scenegraph Sample
Group { content: [ ImageView { } Group { content: [ Circle { }, MediaView { } ] } ]}
29
Group
Image
Media
Group
Circle
![Page 30: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/30.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Group• CustomNode• Container• Control• Line• Path• Rectangle• ImageView
• MediaView• Text• more...
Nodes
30
![Page 31: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/31.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Image represents an in-memory bitmap> loaded via URL, from jar
• ImageView Node contains an Image• Both ImageView and Image can scale
> Preserve ratio> Fit within a specific width/height
ImageView
31
![Page 32: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/32.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• x, y, TextOrigin• Fonts can be specified on Text• Supports multiline text• By default, text positioned such that (x, y) is left baseline
Text Node
32
![Page 33: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/33.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Example(0, 0)
(0, -10)
![Page 34: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/34.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Any Node can have an Effect• Many standard built in
> Blend modes> Bloom> DisplacementMap> DropShadow> ColorAdjust> BoxBlur> Glow> Reflection> InnerShadow> more...
Effects
34
![Page 35: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/35.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• JavaFX supports both visual and audio media• Cross platform JavaFX Media file (fxm, mp3)• Also plays native formats (mov, wmv)• Media class represents a media file• MediaPlayer plays a Media file• MediaView is the Node which displays the Media
Media
35
![Page 36: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/36.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Animation is a key feature of every rich graphics application platform• There are two supported animation types in JavaFX
> Keyframe animations> Transitions
Animation
36
![Page 37: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/37.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
KeyFrame Animation
• KeyFrame: specifies that a variable should have...> a particular value> at a particular time
• Timeline> Modifies values of variables specified by KeyFrames> Doesn’t necessarily do any animation itself
• How is animation actually done?> Arrange for a KeyFrame to modify an interesting Node variable
– x, rotate, opacity, fill, ...
37
![Page 38: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/38.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
var text = Text {x: 50y: 80content: "Hello, world!"rotate: 30
}
Timeline {keyFrames: at (4s) { text.rotate => 210.0 }
}.play();
KeyFrame Animation Setup
38
![Page 39: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/39.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
• Predefined, single-purpose animations> Fade, Path, Pause, Rotate, Scale, Translate> Can specify to, from, and by values
• Container transitions:> Parallel, Sequential> Can be nested arbitrarily
Transitions
39
![Page 40: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/40.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
DEMO – Simple Scene Graph
40
![Page 41: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/41.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Outline
• JavaFX Script – a new programming language• JavaFX scene graph• User interface controls• Styling • Charts• Layout• Developer tools
41
![Page 42: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/42.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
JavaFX UI Controls
• Simple• Useful• Rich
42
![Page 43: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/43.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Architecture
Control
Behavior
Skin
43
![Page 44: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/44.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Light color controls on almost white background
Dark color buttons on toolbar
44
![Page 45: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/45.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Controls in JavaFX
• Button• ToggleButton• RadioButton• CheckBox• Slider• Label• ScrollBar• Hyperlink• ProgressIndicator• ProgressBar
• TextBox• ListView• TreeView• PasswordBox• ChoiceButton• MenuButton• SplitMenuButton• Menus• ToolBar• ScrollView
• Multiline TextBox• Horizontal ListView• Popup• Tooltip
45
![Page 46: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/46.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Button
• action:function()• Example:
Button { text: “Cancel” action: function() { println(“I’ve been clicked!”); }}
46
![Page 47: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/47.jpg)
• progress:Number (0..1)• progress bar is-a progress indicator• Example:
var task = HttpRequest { ... }ProgressIndicator { progress: bind task.percentDone }
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Progress Indicator
47
![Page 48: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/48.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
TextBox
• text:String• promptText:String• font:Font• action:function()• Example:
var t:TextBox = TextBox { promptText: “Search” action: function() { startSearch(t.text); t.text = “”; }}
48
![Page 49: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/49.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Multiline TextBox
• columns:Integer• lines:Integer• multiline:Boolean• Example:
var t:TextBox = TextBox { columns: 30 lines: 10 multiline: true}
49
![Page 50: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/50.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
List View
• Horizontal or Vertical• Massively Scalable• Custom Cells• Dynamically variable row height• Example:
ListView { items: [“Apples”, “Oranges”, “Bananas”] cellMaker: function() { ListCell { ... } }}
50
![Page 51: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/51.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
DEMO – UI Controls
51
![Page 52: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/52.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Outline
• JavaFX Script – a new programming language• JavaFX scene graph• User interface controls• Styling • Charts• Layout• Developer tools
52
![Page 53: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/53.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Styling
• Easy and Powerful (CSS)• Highly Customized (fxz)• Complete Control (code)
53
![Page 54: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/54.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Styling
• Easy and Powerful (CSS)• Highly Customized (fxz)• Complete Control (code)
54
![Page 55: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/55.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Styling
55
![Page 56: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/56.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Styling
• CSS is our strategy for styling• Caspian is our default CSS stylesheet• CSS is fast, and works on mobile, desktop, and tv• Stick to the spirit of HTML CSS
> but do not be bound by it
56
![Page 57: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/57.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Styling
• Break control skins in styleable parts• In some ways similar to HTML CSS’s Box• Rectangle with independently rounded corners
> or any arbitrary path• Can have multiple
> background fills> background images> border strokes> border images
57
![Page 58: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/58.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Styling
58
![Page 59: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/59.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
59
![Page 60: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/60.jpg)
![Page 61: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/61.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
61
ScrollBar Thumb Track Left Button Right Button
Left Arrow Right Arrow
![Page 62: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/62.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Outline
• JavaFX Script – a new programming language• JavaFX scene graph• User interface controls• Styling• Charts• Layout• Developer tools
62
![Page 63: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/63.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Charts
• A basic set of charts for everyday use> Simple> Customizable
• To provide tools to help you build your own charts
63
![Page 64: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/64.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Pie Chart
64
![Page 65: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/65.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
PieChart {
title: "Sample Pie"
data: [
PieChart.Data {
label: "Apples" value: 34
action: function(){ Alert.inform("Clicked") }
},
PieChart.Data { label: "Oranges" value: 27 },
PieChart.Data { label: "Bananas" value: 16 },
PieChart.Data { label: "Grapes" value: 50 },
PieChart.Data { label: "Cherries" value: 6 },
PieChart.Data { label: "Strawberry" value: 5 },
PieChart.Data { label: "Raspberry" value: 7 }
]
}
Sample Pie
65
![Page 66: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/66.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Bar Chart
66
![Page 67: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/67.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Line Chart
67
![Page 68: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/68.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Area Chart
68
![Page 69: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/69.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Scatter Chart
69
![Page 70: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/70.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Bubble Chart
70
![Page 71: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/71.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
3D Bar Chart
71
![Page 72: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/72.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
3D Pie Chart
72
![Page 73: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/73.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Outline
• JavaFX Script – a new programming language• JavaFX scene graph• User interface controls• Styling• Charts• Layout• Developer tools
73
![Page 74: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/74.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Layout Containers
• Container-based layout• Container is-a Node• Built-in Containers in 1.2
> Stack: stack all content nodes on top of each other> HBox: lay out content horizontally> VBox: lay out content vertically> Flow: layout out content either horizontally or vertically and line wrap> Panel: Customizable layout container
74
![Page 75: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/75.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Flow Sample
Flow { width: 800 height: 600 content: for (img in images) { ImageView { image: img } }}
75
![Page 76: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/76.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Developer Tools
• NetBeans with JavaFX plug-in> Syntax highlighting> Code completion> SDK integration
• Eclipse, IntelliJ• JavaFX Production Suite
> Imports artwork from content creation tools> ... into the scenegraph as a Node
• JavaFX Authoring Tool> Creating JavaFX Content> Built completely on top of JavaFX and UI Controls
76
![Page 77: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/77.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Developer-Designer Workflow
77
![Page 78: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/78.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
DEMO – JavaFX Production Suite
78
![Page 79: Introduction to JavaFX with Richard Bair](https://reader034.fdocuments.net/reader034/viewer/2022052315/55561c70d8b42ae0238b518e/html5/thumbnails/79.jpg)
2009 Sun Microsystems, Incorporated. All Rights Reserved.
A rich client platform for all screens
Call To Action
• fxexperience.com• Visit javafx.com
> Download JavaFX SDK + NetBeans> See demos> Download example code> Read tutorials, FAQs, white papers, documentation> Browse API Documentation
Thank You!
79