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.

Extreme Gui Makeover

2.229 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software, Technologie, Business
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×