let's get wet! best practices for skinning javafx controls

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