Extreme Gui Makeover

2,081 views

Published on

Slides of the JavaFX "Extreme Gui Makeover" Session at JAX 2014.

Published in: Software, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,081
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Extreme Gui Makeover

  1. 1. E X T R E M E G U I M A K E O V E R
  2. 2. A B O U T U S Hendrik Ebbers @hendrikEbbers Anton Epple @monacotoni Gerrit Grunwald @hanSolo_
  3. 3. C O N T E N T • Control Infrastructure • CSS Basics • Demo Time
  4. 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. 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. 6. S K I N C L A S S Rectangle Shape Text Shape Layout / Size
  7. 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. 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. 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
  10. 10. Demo Time
  11. 11. C S S S T Y L I N G style
  12. 12. C S S S T Y L I N G style
  13. 13. C S S R U L E S #round-button { -fx-text-fill : black; -fx-background-color : red; } selector property value
  14. 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. 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. 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
  17. 17. Demo Time

×