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.
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
D...
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 in...
C S S
#round-button {
-fx-font-family : "Impact";
-fx-background-color : darkred,
orange,
lightgray;
-fx-background-insets...
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
D...
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.n...
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
Nächste SlideShare
Wird geladen in …5
×

Extreme Gui Makeover

2.201 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

×