Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 f...
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-projec...
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 i...
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 cont...
Styler as problem-solver!
only an extract
AquaFx.createButtonStyler().
setSizeVariant(ControlSizeVariant.SMALL).
style(myB...
Styler how-to
get the styler
all accessible via AquaFX-Facade
choose your style
something like style
apply it to your cont...
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
sti...
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 l...
hierarchies
.button {
-fx-border-width: 1px;
}
.menu-bar .button {
-fx-border-width: 0px;
-fx-background-color: transparen...
Use global definitions
.root {
-base-color: rgb(252.0, 240.0, 237.0);
}
.label {
-fx-text-fill: -base-color;
}
.label:show-...
use derive(...)
-base-color: rgb(252.0, 240.0, 237.0);
-fx-background-color: derive(-base-color, 50%)
define your base col...
Define a skin
.button {
-fx-skin:"com.aquafx.skin.AquaButtonSkin";
}
Now you can completely
freak out in Java code
class Aq...
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.prefColumnCo...
Style your app
Application.setUserAgentStylesheet(„myStyle.css“);
replace the complete style
with your own
StyleManager.ge...
Style a control
control.setStyle(„-fx-background-color: red“);
control.getStyleClass().add("custom-comp");
.custom-comp {
...
Limitations
Sometimes you don‘t have a chance
You can‘t do everything with CSS
Effect chaining
Animations
but you can expor...
Conclusion
All in all, this is the part for really
good eyes and hard work
have a look at the JavaFX
CSS Reference Guide a...
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[] getCssUr...
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;
}
...
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 unicod...
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
KEEP
CALM
AND
CARRY ON
CODING
Nächste SlideShare
Wird geladen in …5
×

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

22.038 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie

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
  62. 62. KEEP CALM AND CARRY ON CODING

×