Post on 11-Apr-2017
Enterprising JavaFXRichard & Jasper (and Tor!)
Sun Microsystems
ww
w.d
evox
x.co
m
Overall presentation goal
Show that JavaFX can rock in the enterprise!
ww
w.d
evox
x.co
m
Speaker’s qualifications
Core Engineers on JavaFX at Sun Microsystems
Jasper is the design wizard for FX and author of the Charts API
Richard is API design lead for FX, UI Controls lead, and key scenegraph developer
Both write lots of cool stuff
ww
w.d
evox
x.co
m
Threading
All data access should occur on background thread
JavaFX Script is currently single threadedNever create JavaFX objects on a background thread!
Use the Task APISubclass from JavaTaskBase
ww
w.d
evox
x.co
m
Task
Create the task
Initialize callbacks
Bind to state you want to observe
Start it
ww
w.d
evox
x.co
m
Read-only Variables
started
stopped
failed
succeeded
done
percentDone
ww
w.d
evox
x.co
m
JavaTaskBase
Used for all custom Tasks
create():RunnableFuture*
ww
w.d
evox
x.co
m
Writing a Custom Task
Step 1: Subclass from JavaTaskBase
Step 2: Create a Java implementation peer
Step 3: Callback from the peer to the task on completion
Step 4: Create FX objects, do FX work on the FX thread
Step 1: Subclass
public class LoginTask extends JavaTaskBase { public-init var username:String; public-init var password:String;
public-read var token:String; }
Step 2: Create Peer
public class LoginTaskImpl implements RunnableFuture { private JiraSoapService jira; private String username; private String password; String token;
public LoginTaskImpl(JiraSoapService jira, String username, String password) { this.jira = jira; this.username = username; this.password = password; }
public void run() throws Exception { token = jira.login(username, password); } }
Step 3: Callback
public class LoginTask extends JavaTaskBase, FinishedHandler { ... var impl:LoginTaskImpl;
override protected function create():RunnableFuture { impl = new LoginTaskImpl(jira, this, username, password) } }
Step 3: Callbackpublic class LoginTaskImpl implements RunnableFuture { ... private FinishedHandler handler;
public LoginTaskImpl(JiraSoapService jira, FinishedHandler handler, String username, String password) { ... this.handler = handler; }
public void run() throws Exception { token = jira.login(username, password); handler.backgroundWorkFinished(); } }
Step 4: FX
public class LoginTask extends JavaTaskBase, FinishedHandler { ... override public function backgroundWorkFinished():Void { FX.deferAction(function():Void { token = impl.token; }); } }
Control
Behavior
Skin
The Design
ww
w.d
evox
x.co
m
Controls :: The FamilyButton
ToggleButton
RadioButton
CheckBox
Slider
Label
Hyperlink
ProgressIndicator
ProgressBar
TextBox
ListView
TreeView*
PasswordBox*
ChoiceButton*
MenuButton*
SplitMenuButton*
Menus*
ToolBar*
ScrollBar*
ScrollView*
Multiline TextBox*
Horizontal ListView*
Popup*
Tooltip*
ww
w.d
evox
x.co
m
Controls :: The FamilyButton
ToggleButton
RadioButton
CheckBox
Slider
Label
Hyperlink
ProgressIndicator
ProgressBar
TextBox
ListView
TreeView*
PasswordBox*
ChoiceButton*
MenuButton*
SplitMenuButton*
Menus*
ToolBar*
ScrollBar*
ScrollView*
Multiline TextBox*
Horizontal ListView*
Popup*
Tooltip*
ww
w.d
evox
x.co
m
Progress Indicator
Small circular progress indicator
Bind directly to task.percentDone
Example:
var task = CustomTask { ... } ProgressIndicator { progress: bind task.percentDone }
ww
w.d
evox
x.co
m
TextBox
Single or Multiline (single style) text input
Useful for building other controlslike a search box
Example: var t:TextBox = TextBox { promptText: “Search” action: function() { startSearch(t.text); t.text = “”; } }
ww
w.d
evox
x.co
m
ListView
Horizontal or Vertical
Massively Scalable
Custom CellsDynamically variable row heights
Animated cells
Standard ListView
var list = ListView { items: [“Apples”, “Oranges”, “Pears”] }
Custom Cell
var list = ListView { items: [“Apples”, “Oranges”, “Pears”] cellFactory: function() { ListCell { node: ... } } }
ww
w.d
evox
x.co
m
Cell
Cell has 3 layersBackground
Node
Foreground
Specialize any of these 3 layers
ListCell, TreeCell, TableCell
ww
w.d
evox
x.co
m
Styling
Easy and Powerful (CSS)
Highly Customized (fxz)
Complete Control (code)
ww
w.d
evox
x.co
m
Styling
Easy and Powerful (CSS)
Highly Customized (fxz)
Complete Control (code)
CSS
ww
w.d
evox
x.co
m
CSS
CSS is our strategy for styling. If you use our UI Controls, you use CSS.
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
ww
w.d
evox
x.co
m
Regions
Break control skins in stylable parts
In some ways similar to HTML CSS’s Box but not that same
Can be Rectangle with independently rounded corners or any arbitrary path
Can have multiple background fills, background images, border strokes and border images
Regions: Background Fills
Regions: Stroke Borders
Regions: ScrollBar
ScrollBar RegionThumb RegionTrack RegionLeft Button Region Right Button Region
Left Arrow Region Right Arrow Region
ww
w.d
evox
x.co
m
JavaFX Authoring Tool
Lead Engineer: Tor Norbye
Tool for creating JavaFX Content
Built completely on top of JavaFX and Controls
ww
w.d
evox
x.co
m
Summary
JavaFX is serious about the enterpriseit is what we do
Many additional controls coming in next release
Extensive support for styling controls
ww
w.d
evox
x.co
m
Thanks for your attention!
http://fxexperience.com
http://javafx.com