ݺߣ

ݺߣShare a Scribd company logo

Extreme Gui Makeover

?
?
Hendrik Ebbers
Hendrik Ebbers

This document provides an overview of control styling in JavaFX. It discusses the infrastructure of a control, including the Control, Skin, and Behavior classes. It then covers CSS styling rules like selectors, properties, and values. Specific CSS topics like SVG support and selector types like ID, class, and pseudo-class are explained. The document concludes with an advertisement for a book on mastering JavaFX controls.

1 of 17
Downloaded 19 times
E X T R E M E G U I M A K E O V E R
A B O U T U S Hendrik Ebbers @hendrikEbbers Anton Epple @monacotoni Gerrit Grunwald @hanSolo_
C O N T E N T ? Control Infrastructure ? CSS Basics ? Demo Time
I N F R A S T R U C T U R E O F A C O N T R O L C O N T R O L C L A S S S K I N C L A S S B E H AV I O R C L A S S C S S Data model Layout Interaction Style
C O N T R O L C L A S S represents the component in the scene button.setText(?JavaFX Button); model of the component
S K I N C L A S S Rectangle Shape Text Shape Layout / Size
B E H AV I O R C L A S S public void mousePressed(MouseEvent e) { Button button = getControl(); button.arm(); } Control instance
C S S #round-button { -fx-font-family : "Impact"; -fx-background-color : darkred, orange, lightgray; -fx-background-insets : 0, 3, 5; -fx-text-fill : red; }
I N F R A S T R U C T U R E O F A C O N T R O L C O N T R O L C L A S S S K I N C L A S S B E H AV I O R C L A S S C S S Define data Style the instances only for custom controls private API
Demo Time
C S S S T Y L I N G style
C S S S T Y L I N G style
C S S R U L E S #round-button { -fx-text-fill : black; -fx-background-color : red; } selector property value
S E L E C T O R T Y P E S #round-button ! ! .round-buttons ! ! .round-buttons:focused ! ! .extreme-button:focused.square.number ID class pseudo class combine them
S V G S U P P O R T #power-icon { -fx-scale-shape : false; -fx-shape : "M 863 170 L 863 178 C 863 ; } SVG Path
M A S T E R I N G J AVA F X 8 C O N T R O L S O R A C L E P R E S S Sorry for the ad
Demo Time

More Related Content

Extreme Gui Makeover

  • 1. E X T R E M E G U I M A K E O V E R
  • 2. A B O U T U S Hendrik Ebbers @hendrikEbbers Anton Epple @monacotoni Gerrit Grunwald @hanSolo_
  • 3. C O N T E N T ? Control Infrastructure ? CSS Basics ? Demo Time
  • 4. I N F R A S T R U C T U R E O F A C O N T R O L C O N T R O L C L A S S S K I N C L A S S B E H AV I O R C L A S S C S S Data model Layout Interaction Style
  • 5. C O N T R O L C L A S S represents the component in the scene button.setText(?JavaFX Button); model of the component
  • 6. S K I N C L A S S Rectangle Shape Text Shape Layout / Size
  • 7. B E H AV I O R C L A S S public void mousePressed(MouseEvent e) { Button button = getControl(); button.arm(); } Control instance
  • 8. C S S #round-button { -fx-font-family : "Impact"; -fx-background-color : darkred, orange, lightgray; -fx-background-insets : 0, 3, 5; -fx-text-fill : red; }
  • 9. I N F R A S T R U C T U R E O F A C O N T R O L C O N T R O L C L A S S S K I N C L A S S B E H AV I O R C L A S S C S S Define data Style the instances only for custom controls private API
  • 11. C S S S T Y L I N G style
  • 12. C S S S T Y L I N G style
  • 13. C S S R U L E S #round-button { -fx-text-fill : black; -fx-background-color : red; } selector property value
  • 14. S E L E C T O R T Y P E S #round-button ! ! .round-buttons ! ! .round-buttons:focused ! ! .extreme-button:focused.square.number ID class pseudo class combine them
  • 15. S V G S U P P O R T #power-icon { -fx-scale-shape : false; -fx-shape : "M 863 170 L 863 178 C 863 ; } SVG Path
  • 16. M A S T E R I N G J AVA F X 8 C O N T R O L S O R A C L E P R E S S Sorry for the ad