let's get wet! best practices for skinning javafx controls
DESCRIPTION
Slides of the JavaFX talk about AquaFX and skinning on JavaOne 2013 by Hendrik Ebbers and Claudine ZillmannTRANSCRIPT
GuiGarage
Let s get wet
AquaFX and best practices for skinning JavaFX controls
,
About us
@hendrikEbbers
@etteClaudette
www.guigarage.com
What Hendrik thought about the
title...
What Claudine thought....
Content
AquaCSS
Flat
Elements
Style
AquaFX
What exactly is this?
native look and feel for OS Xfor all default controlsruns on cross platform
Skin for JavaFX
only for development...
AquaFX Controls
AquaFX Controls
See them in action!
written in JavaFX
Can you find the difference?
VS
Cool!Where can I buy it?
You can‘t - because it‘s freewww.aquafx-project.com
<dependency> <groupId>com.aquafx-project</groupId> <artifactId>aquafx</artifactId></dependency>
it is on maven central
AquaFX.style();
How can I use it?
Yeah!
Architecture Basics
SkinControl styles
CSSus
esdefines
that‘s the way for JavaFX
Aquatecture
ButtonSkin
Button
Aqua CSS
AquaButtonSkin
extends
defines
uses
styles
JavaFX API AquaFX API
global Stylesheet is defined in Application
Context
Tune an app to OS X..
OS X has more controls than JavaFXyup!
How can I handle this in AquaFX?Oh, we have additional controls
And what with different sizes?Come on, dude ;)
Styler as problem-solver!
only an extract
AquaFx.createButtonStyler().
setSizeVariant(ControlSizeVariant.SMALL).
style(myButton);
Styler how-to
get the stylerall accessible via AquaFX-Facade
choose your stylesomething like style
apply it to your controlit‘s in your hand!
what happens?
the styler adds CSS-classes to the control
and makes them special
An exampleStyle your TextField as a SearchField
Supports all statesSupports the behavior
Demo
Flatter
We have another UI
a really flat skinit‘s as simple as it can bemade for touchmade for pi
50% cause 50% of us use it
Default Controls
we plan to support all of them
oh, only a boring new skin...
touch and desktop behaviorexclusive controls
Nope! Flatter will be more
exclusive skinsstill work in
progress
AvatarView
show avatarsalways have a cool ratiousable for login etc.
style me by css
OverlayPane
an additional layer for your appuse it for dialogs & popupsblur your app in background
remember JLayer?
Demo
CSS 101
-fx
classes & pseudo classes
.button { -fx-border-width: 1px;}
.button:focused { -fx-border-width: 2px;}
class defines the look for a Control
defines the look for a
state of Control
hierarchies.button { -fx-border-width: 1px;}
.menu-bar .button { -fx-border-width: 0px; -fx-background-color: transparent;}
.menu-bar > .button { -fx-background-color: transparent;}
defines the look for a hierarchical Control
defines the look for a
state of textarea
Use global definitions
.root { -base-color: rgb(252.0, 240.0, 237.0);}
.label { -fx-text-fill: -base-color;}
.label:show-mnemonics > .mnemonic-underline { -fx-stroke: -fx-text-base-color;}
define them
use them&
use derive(...)-base-color: rgb(252.0, 240.0, 237.0);
-fx-background-color: derive(-base-color, 50%)
define your base color
second color
depends on it
this gives you different shades
Define a skin
.button { -fx-skin:"com.aquafx.skin.AquaButtonSkin";}
Now you can completely freak out in Java code
class AquaButtonSkin extends SkinBase { // this is where the magic happens...}
Enrich your skin by Properties
use StyleableProperty in the skin
customize your skin by CSS
more flexibility and easy usage
Properties
use StyleableObjectProperty
bind those properties with CSS
TextField.alignmentProperty()TextField.prefColumnCountProperty()Labeled.fontProperty()Labeled.lineSpacingProperty()
JFX Controls as
examples
Style your app
Application.setUserAgentStylesheet(„myStyle.css“);
replace the complete style with your own
StyleManager.getInstance().addUserAgentStylesheet(fName);
add your style to the current one ... and overwrite what you
want to change
Style a control
control.setStyle(„-fx-background-color: red“);
control.getStyleClass().add("custom-comp");
.custom-comp { -fx-background-color: red;}
Don‘t use CSS in Java
Use style classes
easily bind Java and CSS
LimitationsSometimes you don‘t have a chance
You can‘t do everything with CSSEffect chaining Animations
but you can export
the inner properties
to CSS. custom-comp {
-animation-start-color: red;-animation-end-color: blue;-animation-duration: 360;
}
ConclusionAll in all, this is the part for really good eyes and hard work
have a look at
the JavaFX
CSS Reference Guide and
guigarage.com
StyleManageroh, no control
or skin
What‘s this?
we think it‘s time to get some help(er API) for skinning
Oldschool stuff
UIManager.setLookAndFeel(...)UIManager.getSystemLookAndFeel()
swing style API
remember this?
JavaFXStylemanger
Switch styles easy at runtime
Find best style for system
Add special control skins to style
usingSPI
Change the style
from Modena to AquaFX
StyleManager.style(AquaFXStyle.class)
AquaFXRatingPlugin extends ApplicationStylePlugin {
String getUniqueStyleName() {...}
int getWeight() {...}
URL[] getCssUrls() {...}
}
Control Plugin
css files of the plugin
name of the style
Demo
AquaFX Elements
“What if I hate blue?“
choose your favorite color!
ElementsStyle-variations of Aqua
for people who need some colors
aquafire earth air
How to use
simple, huh?
AquaFX.setFireStyle();
AquaFX.setEarthStyle();
AquaFX.setWindStyle();
Behind the scenes
.button { -fx-border-width: 1.0; -fx-background-color: blue;}
.button { -fx-background-color: green;}
here comes the magic:
Aqua CSS
Fire CSS which
overrides Aqua
Demo
Still some time left
ok then...
One las
t
C
ontrol
Cause the kids l ve it
EmojiFlow
Use Emojis in your textcompletely based on unicodesupport different emoji sets
How to use it?
Like a Label
EmojiFlow flow = new EmojiFlow();flow.setText(„Hi „ + (char)0xF47D + „! Cool“)
it is a unicode character
Hi ! Cooluses TextFlow
internally
That‘s all?
EmojiView control for one simple emojiJava Enum with all supported EmojisDefault control panels to add Emojis
Emojis are licensed
by Apple
so we provide a plugin structure
The Problem:
Demo
KEEPCALM
AND
CARRY ONCODING