Extreme Gui Makeover

  • 922 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
922
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 10. Demo Time
  • 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
  • 17. Demo Time