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

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