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


Published on

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

Published in: Technology

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

  1. 1. GuiGarage
  2. 2. Let s get wet AquaFX and best practices for skinning JavaFX controls ,
  3. 3. About us @hendrikEbbers @etteClaudette www.guigarage.com
  4. 4. What Hendrik thought about the title...
  5. 5. What Claudine thought...
  6. 6. Content Aqua CSS Flat Elements Style
  7. 7. AquaFX
  8. 8. 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...
  9. 9. AquaFX Controls
  10. 10. AquaFX Controls
  11. 11. See them in action! written in JavaFX Can you find the difference? VS
  12. 12. 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
  13. 13. AquaFX.style(); How can I use it? Yeah!
  14. 14. Architecture Basics SkinControl styles CSS uses defines that‘s the way for JavaFX
  15. 15. Aquatecture ButtonSkin Button Aqua CSS AquaButtonSkin extends defines uses styles JavaFX API AquaFX API global Stylesheet is defined in Application Context
  16. 16. 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 ;)
  17. 17. Styler as problem-solver! only an extract AquaFx.createButtonStyler(). setSizeVariant(ControlSizeVariant.SMALL). style(myButton);
  18. 18. 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!
  19. 19. what happens? the styler adds CSS-classes to the control and makes them special
  20. 20. An example Style your TextField as a SearchField Supports all states Supports the behavior
  21. 21. Demo
  22. 22. Flatter
  23. 23. 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
  24. 24. Default Controls we plan to support all of them
  25. 25. oh, only a boring new skin... touch and desktop behavior exclusive controls Nope! Flatter will be more exclusive skins still work in progress
  26. 26. AvatarView show avatars always have a cool ratio usable for login etc. style me by css
  27. 27. OverlayPane an additional layer for your app use it for dialogs & popups blur your app in background remember JLayer?
  28. 28. Demo
  29. 29. CSS 101
  30. 30. 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
  31. 31. 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
  32. 32. 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 &
  33. 33. 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
  34. 34. 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... }
  35. 35. Enrich your skin by Properties use StyleableProperty in the skin customize your skin by CSS more flexibility and easy usage
  36. 36. Properties use StyleableObjectProperty bind those properties with CSS TextField.alignmentProperty() TextField.prefColumnCountProperty() Labeled.fontProperty() Labeled.lineSpacingProperty() JFX Controls as examples
  37. 37. 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
  38. 38. 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
  39. 39. 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; }
  40. 40. 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
  41. 41. StyleManager oh, no control or skin
  42. 42. What‘s this? we think it‘s time to get some help(er API) for skinning
  43. 43. Oldschool stuff UIManager.setLookAndFeel(...) UIManager.getSystemLookAndFeel() swing style API remember this?
  44. 44. JavaFX Stylemanger Switch styles easy at runtime Find best style for system Add special control skins to style using SPI
  45. 45. Change the style from Modena to AquaFX StyleManager.style(AquaFXStyle.class)
  46. 46. AquaFXRatingPlugin extends ApplicationStylePlugin { String getUniqueStyleName() {...} int getWeight() {...} URL[] getCssUrls() {...} } Control Plugin css files of the plugin name of the style
  47. 47. Demo
  48. 48. AquaFX Elements
  49. 49. “What if I hate blue?“ choose your favorite color!
  50. 50. Elements Style-variations of Aqua for people who need some colors aqua fire earth air
  51. 51. How to use simple, huh? AquaFX.setFireStyle(); AquaFX.setEarthStyle(); AquaFX.setWindStyle();
  52. 52. 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
  53. 53. Demo
  54. 54. Still some time left ok then...
  55. 55. O ne last Control
  56. 56. Cause the kids l ve it
  57. 57. EmojiFlow Use Emojis in your text completely based on unicode support different emoji sets
  58. 58. 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
  59. 59. That‘s all? EmojiView control for one simple emoji Java Enum with all supported Emojis Default control panels to add Emojis
  60. 60. Emojis are licensed by Apple so we provide a plugin structure The Problem:
  61. 61. Demo