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
![Page 1: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/1.jpg)
GuiGarage
![Page 2: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/2.jpg)
Let s get wet
AquaFX and best practices for skinning JavaFX controls
,
![Page 3: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/3.jpg)
About us
@hendrikEbbers
@etteClaudette
www.guigarage.com
![Page 4: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/4.jpg)
What Hendrik thought about the
title...
![Page 5: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/5.jpg)
What Claudine thought....
![Page 6: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/6.jpg)
Content
AquaCSS
Flat
Elements
Style
![Page 7: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/7.jpg)
AquaFX
![Page 8: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/8.jpg)
What exactly is this?
native look and feel for OS Xfor all default controlsruns on cross platform
Skin for JavaFX
only for development...
![Page 9: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/9.jpg)
AquaFX Controls
![Page 10: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/10.jpg)
AquaFX Controls
![Page 11: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/11.jpg)
See them in action!
written in JavaFX
Can you find the difference?
VS
![Page 12: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/12.jpg)
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
![Page 13: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/13.jpg)
AquaFX.style();
How can I use it?
Yeah!
![Page 14: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/14.jpg)
Architecture Basics
SkinControl styles
CSSus
esdefines
that‘s the way for JavaFX
![Page 15: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/15.jpg)
Aquatecture
ButtonSkin
Button
Aqua CSS
AquaButtonSkin
extends
defines
uses
styles
JavaFX API AquaFX API
global Stylesheet is defined in Application
Context
![Page 16: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/16.jpg)
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 ;)
![Page 17: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/17.jpg)
Styler as problem-solver!
only an extract
AquaFx.createButtonStyler().
setSizeVariant(ControlSizeVariant.SMALL).
style(myButton);
![Page 18: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/18.jpg)
Styler how-to
get the stylerall accessible via AquaFX-Facade
choose your stylesomething like style
apply it to your controlit‘s in your hand!
![Page 19: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/19.jpg)
what happens?
the styler adds CSS-classes to the control
and makes them special
![Page 20: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/20.jpg)
An exampleStyle your TextField as a SearchField
Supports all statesSupports the behavior
![Page 21: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/21.jpg)
Demo
![Page 22: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/22.jpg)
Flatter
![Page 23: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/23.jpg)
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
![Page 24: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/24.jpg)
Default Controls
we plan to support all of them
![Page 25: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/25.jpg)
oh, only a boring new skin...
touch and desktop behaviorexclusive controls
Nope! Flatter will be more
exclusive skinsstill work in
progress
![Page 26: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/26.jpg)
AvatarView
show avatarsalways have a cool ratiousable for login etc.
style me by css
![Page 27: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/27.jpg)
OverlayPane
an additional layer for your appuse it for dialogs & popupsblur your app in background
remember JLayer?
![Page 28: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/28.jpg)
Demo
![Page 29: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/29.jpg)
CSS 101
-fx
![Page 30: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/30.jpg)
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
![Page 31: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/31.jpg)
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
![Page 32: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/32.jpg)
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&
![Page 33: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/33.jpg)
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
![Page 34: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/34.jpg)
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...}
![Page 35: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/35.jpg)
Enrich your skin by Properties
use StyleableProperty in the skin
customize your skin by CSS
more flexibility and easy usage
![Page 36: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/36.jpg)
Properties
use StyleableObjectProperty
bind those properties with CSS
TextField.alignmentProperty()TextField.prefColumnCountProperty()Labeled.fontProperty()Labeled.lineSpacingProperty()
JFX Controls as
examples
![Page 37: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/37.jpg)
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
![Page 38: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/38.jpg)
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
![Page 39: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/39.jpg)
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;
}
![Page 40: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/40.jpg)
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
![Page 41: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/41.jpg)
StyleManageroh, no control
or skin
![Page 42: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/42.jpg)
What‘s this?
we think it‘s time to get some help(er API) for skinning
![Page 43: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/43.jpg)
Oldschool stuff
UIManager.setLookAndFeel(...)UIManager.getSystemLookAndFeel()
swing style API
remember this?
![Page 44: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/44.jpg)
JavaFXStylemanger
Switch styles easy at runtime
Find best style for system
Add special control skins to style
usingSPI
![Page 45: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/45.jpg)
Change the style
from Modena to AquaFX
StyleManager.style(AquaFXStyle.class)
![Page 46: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/46.jpg)
AquaFXRatingPlugin extends ApplicationStylePlugin {
String getUniqueStyleName() {...}
int getWeight() {...}
URL[] getCssUrls() {...}
}
Control Plugin
css files of the plugin
name of the style
![Page 47: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/47.jpg)
Demo
![Page 48: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/48.jpg)
AquaFX Elements
![Page 49: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/49.jpg)
“What if I hate blue?“
choose your favorite color!
![Page 50: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/50.jpg)
ElementsStyle-variations of Aqua
for people who need some colors
aquafire earth air
![Page 51: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/51.jpg)
How to use
simple, huh?
AquaFX.setFireStyle();
AquaFX.setEarthStyle();
AquaFX.setWindStyle();
![Page 52: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/52.jpg)
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
![Page 53: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/53.jpg)
Demo
![Page 54: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/54.jpg)
Still some time left
ok then...
![Page 55: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/55.jpg)
One las
t
C
ontrol
![Page 56: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/56.jpg)
Cause the kids l ve it
![Page 57: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/57.jpg)
EmojiFlow
Use Emojis in your textcompletely based on unicodesupport different emoji sets
![Page 58: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/58.jpg)
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
![Page 59: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/59.jpg)
That‘s all?
EmojiView control for one simple emojiJava Enum with all supported EmojisDefault control panels to add Emojis
![Page 60: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/60.jpg)
Emojis are licensed
by Apple
so we provide a plugin structure
The Problem:
![Page 61: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/61.jpg)
Demo
![Page 62: Let's get wet! Best practices for skinning JavaFX Controls](https://reader033.vdocument.in/reader033/viewer/2022052619/5560b57ed8b42a033c8b49c1/html5/thumbnails/62.jpg)
KEEPCALM
AND
CARRY ONCODING