• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Let's get wet! Best practices for skinning JavaFX Controls

Let's get wet! Best practices for skinning JavaFX Controls



Slides of the JavaFX talk about AquaFX and skinning on JavaOne 2013 by Hendrik Ebbers and Claudine Zillmann

Slides of the JavaFX talk about AquaFX and skinning on JavaOne 2013 by Hendrik Ebbers and Claudine Zillmann



Total Views
Views on SlideShare
Embed Views



14 Embeds 4,997

http://www.guigarage.com 4903
http://guigarage.de 28
https://twitter.com 14
http://guigarage.net 13
http://cloud.feedly.com 11
http://www.guigarage.de 7
http://www.box-fx.com 6
http://box-fx.com 4
http://translate.googleusercontent.com 3
http://plus.url.google.com 2
http://www.guigarage.net 2
http://feedly.com 2
https://www.google.fr 1
http://guigarage.com.netzcheck.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Let's get wet! Best practices for skinning JavaFX Controls Let's get wet! Best practices for skinning JavaFX Controls Presentation Transcript

    • 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 Aqua CSS Flat Elements Style
    • AquaFX
    • What exactly is this? native look and feel for OS X for all default controls runs 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 free www.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 CSS uses defines 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 JavaFX yup! 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 styler all accessible via AquaFX-Facade choose your style something like style apply it to your control it‘s in your hand!
    • what happens? the styler adds CSS-classes to the control and makes them special
    • An example Style your TextField as a SearchField Supports all states Supports the behavior
    • Demo
    • Flatter
    • We have another UI a really flat skin it‘s as simple as it can be made for touch made 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 behavior exclusive controls Nope! Flatter will be more exclusive skins still work in progress
    • AvatarView show avatars always have a cool ratio usable for login etc. style me by css
    • OverlayPane an additional layer for your app use it for dialogs & popups blur your app in background remember JLayer?
    • Demo
    • CSS 101
    • 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
    • Limitations Sometimes you don‘t have a chance You can‘t do everything with CSS Effect chaining Animations but you can export the inner properties to CSS . custom-comp { -animation-start-color: red; -animation-end-color: blue; -animation-duration: 360; }
    • Conclusion All 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
    • StyleManager oh, 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?
    • JavaFX Stylemanger Switch styles easy at runtime Find best style for system Add special control skins to style using SPI
    • 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!
    • Elements Style-variations of Aqua for people who need some colors aqua fire 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...
    • O ne last Control
    • Cause the kids l ve it
    • EmojiFlow Use Emojis in your text completely based on unicode support 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 ! Cool uses TextFlow internally
    • That‘s all? EmojiView control for one simple emoji Java Enum with all supported Emojis Default control panels to add Emojis
    • Emojis are licensed by Apple so we provide a plugin structure The Problem:
    • Demo