Discussion :

[guatto]

Bonsoir tout le monde,

je cherchais depuis peu un moyen pour remplacer mes "Controls" par quelque chose de plus (modifiable), alors j'ai eu l'idée de créer mes propres "Controls" à l'aide des formes "Shapes" et grâce au "css", seulement j'ai un petit souci, il y a des bouts de code qui ne s'appliquent pas aux formes comme dans mon cas les bordures "Borders", plus exactement, lorsque je veux afficher qu'un coté, voici ce que j'ai testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
-fx-border-color: transparent transparent red transparent;

ce code fonctionne très bien sur un Layout ou un Control mais pas sur une Shape, donc ma question est : y a t'il un moyen de réaliser ce que je veux faire pour une forme ?

Merci de bien vouloir m'aider !

[bouye]

Il faut distinguer deux grande familles de nœuds :

• Les nœuds basiques : Text, Shape, Rectangle, etc. Ces nœuds n'ont que des propriétés basiques :
  
  • -fx-fill; pour 1 couleur (ici quand je vais dire couleur ça peut dire couleur ou gradient ou texture) de remplissage.
  • -fx-stroke + quelques sélecteurs CSS liés pour 1 couleur de bordure.
• Les nœuds construits sur Region : tous les gestionnaires de mise en page et tous les contrôles. Ces nœuds peuvent être décorés de plusieurs façons (dont certaines peuvent être mixées entre elles) :
  
  • -fx-background-color et sélecteurs CSS liés permet de spécifier 1..n couches de couleurs de fond (opaque, si on spécifie une couleur translucide ou transparente on voit bien sur la couleur de la bordure précédente celle-ci au travers, les couches de couleur sont simplement rendues les unes par dessus les autres dans l'ordre de leur déclaration). La plupart des contrôles de base de l'API (ex: Button, etc.) utilise ce sélecteur pour leur LnF (la bordure de focus, la fausse bordure externe, la fausse bordure interne, la couleur de fond sont en fait toutes spécifiées par ce sélecteur). Pour le décalage entre couches c'est -fx-background-insets.
  • -fx-border-color et sélecteurs CSS liés permet de spécifier 1..n couches de couleurs de bordure qui vient se dessiner par dessus le fond du nœud.
  • -fx-background-image et sélecteurs CSS liés permet de spécifier 1..n couches d'images de fond.
  • -fx-border-image et sélecteurs CSS liés permet de spécifier 1..n couches d'images de bordure. Voir aussi -fx-border-image-slice pour faire du 9-slicing (pas testé pour le moment).
  • -fx-shape et sélecteurs CSS liés permet de spécifier un chemin au format SVG qui remplacera la forme rectangulaire de la région.

plus d'info sur : https://docs.oracle.com/javase/8/jav...ef.html#region

Quelques exemples :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.button1 {
    -fx-background-color: black, lightgray;
    -fx-background-insets: 0px, 1px;
    -fx-background-radius: 5px, 4px;
}
.button1:hover {
    -fx-background-color: black, lightgray;
    -fx-background-insets: 0px, 5px 10px 5px 10px;
    -fx-background-radius: 0px, 0px;
    -fx-background-radius: 5px 0px 5px 0px, 4px 0px 4px 0px;
}
.button2 {
    -focus-color: transparent;
    -border-color: black;
    -fill-color: lightgray;
    -fx-background-color: -focus-color, -border-color, -fill-color;
    -fx-background-insets: -1.5px, 0px, 1px;
    -fx-background-radius: 6.5px, 5px, 4px;
}
.button2:hover {
    -fill-color: white;
}
.button2:focused {
    -focus-color: cornflowerblue;
}
.button2:pressed {
    -fill-color: gray;
}
.banner {
    -fx-background-color: #5AC2DD;
    -fx-background-image: url("SlideHeader-1.png"), url("SlideHeader-2.png");
    -fx-background-position: left, right;
    -fx-background-repeat: no-repeat, no-repeat;
}
.star-button {
    -outer-border-color: linear-gradient(from 0% 0% to 100% 100%, goldenrod 0%, darkgoldenrod 100%);
    -inner-border-color: lightgoldenrodyellow;
    /*-fill-color: linear-gradient(from 0% 0% to 100% 100%, lightgoldenrodyellow 0%, yellow 10%, gold 50%, gold 75%, orange 100%);*/
    -fill-color: radial-gradient(center 100% 100%, radius 100%, orange 10%, gold 25%, gold 50%, yellow 80%, lightgoldenrodyellow 100%);
    -fx-shape: "m 330,365.21935 c -6.20565,4.97745 -97.52794,-42.69418 -105.47409,-42.31493 -7.94615,0.37925 -94.31316,56.53157 -100.96465,52.16776 -6.65149,-4.36381 10.46679,-105.9478 7.6506,-113.38785 C 128.39568,254.24429 48.302777,189.4564 50.397583,181.78197 52.49239,174.10753 154.39435,158.9968 160.6,154.01935 c 6.20565,-4.97745 43.07253,-101.170885 51.01868,-101.550136 7.94615,-0.379251 53.80675,91.865796 60.45824,96.229606 6.65149,4.36381 109.52937,9.70089 112.34556,17.14093 2.81618,7.44004 -70.74237,79.56135 -72.83717,87.23579 C 309.4905,260.74997 336.20565,360.2419 330,365.21935 Z";    
    -fx-background-color: -outer-border-color, -inner-border-color, -fill-color;
    -fx-background-insets: 0px, 5px, 10px;
}
.star-button:hover {
    -fx-scale-x: 1.2;
    -fx-scale-y: 1.2;
}
.star-button:focused {
    -outer-border-color: cornflowerblue;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
package cssregion;
 
import java.net.URL;
import java.util.Optional;
import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
 
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final Region button1 = new Region();
        button1.setPrefSize(100, 50);
        button1.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
        button1.getStyleClass().add("button1");
        button1.setFocusTraversable(true);
        button1.setOnMouseClicked(mouseEvent -> button1.requestFocus());
        final Region button2 = new Region();
        button2.setPrefSize(100, 50);
        button2.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
        button2.getStyleClass().add("button2");
        button2.setFocusTraversable(true);
        button2.setOnMouseClicked(mouseEvent -> button2.requestFocus());
        final Region banner = new Region();
        banner.setPrefHeight(50);
        banner.setMaxHeight(Region.USE_PREF_SIZE);
        banner.getStyleClass().add("banner");
        final Region starButton = new Region();
        starButton.setPrefSize(100, 100);
        starButton.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
        starButton.getStyleClass().add("star-button");
        starButton.setFocusTraversable(true);
        starButton.setOnMouseClicked(mouseEvent -> {
            starButton.requestFocus();
            final RotateTransition anim = new RotateTransition(Duration.seconds(1.5), starButton);
            anim.setByAngle(360);
            anim.playFromStart();
        });
        final VBox root = new VBox();
        root.setPadding(new Insets(10));
        root.setSpacing(10);
        root.getChildren().addAll(button1, button2, banner, starButton);
        final Scene scene = new Scene(root, 800, 400);
        final Optional<URL> cssURL = Optional.ofNullable(getClass().getResource("test.css"));
        cssURL.ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setTitle("Test");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Ici :

• Pour la bannière, on a une couleur de fond et deux images (une collée sur le bord gauche et une autre collée sur le bord droit de la forme) quand on étire la bannière, les deux images s’éloignent et font apparaitre la couleur de fond. Comme les images sont des PNG transparents, elles se superposent de manière naturelles entre elles et la couleur de fond.
• Pour l’étoile, il s'agit bien d'une Region dont on a changé la forme et non pas d'une image bitmap quelconque. La forme SVG est directement du copier/coller de la valeur d de la forme dans Inkscape (Menu File -> XML Editor... -> sélectionner la forme dans l'arborescence pour les détails).

En faisant quelques tests il y a quelques mois, j'avais vu que -fx-shape et certaines options de répétitions ou de stretch d'images ne fonctionnent pas trop bien ensemble.

[guatto]

Bonjour,

D'abord merci pour ce tutoriel sur les nœuds, (j'ai du chemin à faire pour tout assimiler ), ce que j'ai retenu c'est que les formes sont limités dans la personnalisation contrairement à ce que je croyais par rapport aux contrôles, mais malgré cela j'aimerais si possible savoir s'il y a l'équivalent des "Border" dans les formes autre que les "Stroke" vu que celui-ci n'offre pas grandes choses, la raison c'est que j'aime beaucoup travailler avec les formes, s'il n'y a aucun moyen donc je serais obligé de me tourner vers les Contrôles !

voici ce que j'essaye de faire (Shape-Thickness(Hide-Side)) :



Merci bien pour votre aide !

[bouye]

Ce n'est pas tant que cela soit infaisable avec des Shape mais cela demanderai beaucoup trop de programmation pour peu de résultat. C'est juste beaucoup plus rapide avec des Region :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.my-button {
    -bottom-border-color: black;
    -top-border-color: linear-gradient(from 0% 0% to 0% 100%, #38528B 10%, black 10%);
    -outer-shadow-color: rgba(0, 0, 0, 0.85);    
    -inner-shadow-color: rgba(255, 255, 255, 0.33);
    -text-shadow-color: black;
    -inner-fill-color: #4061A7;
    -visible-side-color: #1F3052;
    -fx-pref-width: -1;
    -fx-pref-height: -1;
    -fx-background-color: -bottom-border-color, -visible-side-color;
    -fx-background-insets: 0px 0px -7px 0px, 0px 0px -6px 0px;
    -fx-background-radius: 6px, 5px;
    -fx-effect: dropshadow(three-pass-box, -outer-shadow-color, 5, 0, 0, 2);
}
.my-button:hover {
    -inner-fill-color: derive(#4061A7, 20%);
}
.my-button:pressed {
    -inner-fill-color: derive(#4061A7, -20%);
    -fx-padding: 5px 0px 0px 0px;    
    -fx-background-insets: 10px 0px -2px 0px, 11px 0px -1px 0px;
}
.my-button .top {
    -fx-pref-width: -1;
    -fx-pref-height: -1;
    -fx-padding: 3px 10px 7px 10px;
    -fx-effect: innershadow(three-pass-box, -inner-shadow-color, 10, 0, 0, 0);    
    -fx-background-color: -top-border-color, -inner-fill-color;
    -fx-background-insets: 0px, 1px;
    -fx-background-radius: 5px, 4px;
}
.my-button .label {
    -fx-text-fill: white;
    -fx-font-size: 1.2em;
    -fx-font-weight: bolder;
    -fx-effect: dropshadow(three-pass-box, -text-shadow-color, 2, 0, 0, -1);
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package cssregion2;
 
import java.net.URL;
import java.util.Optional;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import org.scenicview.ScenicView;
 
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final StackPane myButton = new StackPane();
        myButton.setId("myButton");
        myButton.getStyleClass().add("my-button");
        myButton.setFocusTraversable(true);
        final StackPane buttonBorder = new StackPane();
        buttonBorder.setId("top");
        buttonBorder.getStyleClass().add("top");
        myButton.getChildren().add(buttonBorder);
        final Label text = new Label("Download");
        buttonBorder.getChildren().add(text);
        final AnchorPane root = new AnchorPane();
        root.getChildren().add(myButton);
        myButton.relocate(50, 50);
        final Scene scene = new Scene(root, 300, 250);
        final Optional<URL> cssURL = Optional.ofNullable(getClass().getResource("test.css"));
        cssURL.ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setTitle("Test");
        primaryStage.setScene(scene);
        primaryStage.show();
        ScenicView.show(root);
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

J'ai utilisé deux Region ici au lieu de 1 seule car tu as deux effets sur le bouton :

• Une ombre externe noire sur tout le bouton ;
• Une ombre interne blanche uniquement sur le dessus du bouton.

Il n'aurait pas été possible de faire cela avec une seule Region.

[tondeurh]

Bonjour,

D'abord merci pour ce tutoriel sur les nœuds, (j'ai du chemin à faire pour tout assimiler ), ce que j'ai retenu c'est que les formes sont limités dans la personnalisation contrairement à ce que je croyais par rapport aux contrôles, mais malgré cela j'aimerais si possible savoir s'il y a l'équivalent des "Border" dans les formes autre que les "Stroke" vu que celui-ci n'offre pas grandes choses, la raison c'est que j'aime beaucoup travailler avec les formes, s'il n'y a aucun moyen donc je serais obligé de me tourner vers les Contrôles !

voici ce que j'essaye de faire (Shape-Thickness(Hide-Side)) :



Merci bien pour votre aide !

Bonjour,

Pour réaliser ce type d'éléments, il faut créer un "Custom control" en JavaFX

Exemple de code assez simple et explicite...

Programme principal de test
JfXShapeTest.java

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
package jfxshapetest;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
 
/**
 *
 * @author tondeur-h
 */
public class JfXShapeTest extends Application {
 
    @Override
    public void start(Stage primaryStage) {
 
         //un Label de Test
        Label lb=new Label();
 
        //un effet de drop Shadow (exagéré, mais c'est pour la demo)
        DropShadow ds = new DropShadow();
        ds.setOffsetY(10.0);
        ds.setOffsetX(10.0);
        ds.setRadius(8.0);
        ds.setColor(Color.BLACK);
 
        //mon custom control (Bouton perso)
        MonBouton btn=new MonBouton("CLIC ICI!",100,50);
        btn.setEffect(ds);
        //texte en blanc
        btn.setLblColor("-fx-text-fill:#FFFFFF;");
 
        // Handle du bouton perso
        btn.setOnMouseClicked((MouseEvent me) -> {
            lb.setText("Mon bouton a été clické!");
            System.out.println("Mon bouton a été clické!");
        });
 
 
        VBox root = new VBox(15);
        root.getChildren().addAll(btn,lb);
 
        Scene scene = new Scene(root, 300, 250);
 
        primaryStage.setTitle("Mon bouton");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

La classe MonBouton qui étant la classe Control (je crée ici un nouveau control JavaFx)
MonBouton.java

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
package jfxshapetest;
 
import javafx.scene.control.Control;
 
public class MonBouton extends Control  {
    private String titre = "";
    MonBoutonSkin skin;
 
 
    public MonBouton(String title,double sizeX, double sizeY) {
        super();
        skin=new MonBoutonSkin(this);
        this.titre = title;
        skin.setText(title);
        skin.setSize(sizeX,sizeY);
         setSkin(skin);
    }
 
    public void setLblColor(String style){
       skin.lbl.setStyle(style);
    }
}

Le code source qui permet d'implémenter le skin du bouton (son affichage finalement!)
MonBoutonSkin.java

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
package jfxshapetest;
 
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.control.Skin;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.HLineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.scene.shape.VLineTo;
 
public class MonBoutonSkin implements Skin<MonBouton> {
    static final double LONG_POINTE = 5;
 
    MonBouton control;
    String text = "";
 
    Group rootNode = new Group();
    Label lbl = null;
    int direction = MyBtnInterface.RIGHT;
    EventHandler retourClient = null;
    double labelWidth;
    double labelHeight;
 
 
    /*******************************
     * Constructeur
     * affecte le control par defaut
     * dessine le controle
     * @param control
     *******************************/
    public MonBoutonSkin(MonBouton control) {
        this.control = control;
        draw();
    }
 
 
/****************************
 * Retourne l'objet Node du noeud en cours
 * ne doit jamais être null
 * @return
 ****************************/
    @Override
    public Node getNode() {
     if (this.rootNode == null) {
	    this.rootNode = new Group();
	    draw();
	}
	return this.rootNode;
    }
 
/*****************
 * ne fait rien dans mon cas
 *****************/
    @Override
    public void dispose() {
 
    }
 
 
/********************
 * Dessiner le bouton
 ********************/
private void draw() {
 
//creer le label du btn
if ( lbl == null ) lbl = new Label(text);
 
//taille et position de trnaslation par rapport au layout
labelWidth=100.0;
labelHeight=25.0;
lbl.setTranslateX(10);
lbl.setTranslateY(3);
 
// Creer le path des elements du bouton
Path path = new Path();
MoveTo startPoint = new MoveTo();
double x = 0.0f;
double y = 0.0f;
double controlX;
double controlY;
double height = labelHeight;
startPoint.setX(x);
startPoint.setY(y);
 
HLineTo topLine = new HLineTo();
x += labelWidth;
topLine.setX(x);
 
// Courbe du haut
controlX = x + LONG_POINTE;
controlY = y;
x += 10;
y = height / 2;
QuadCurveTo quadCurveTop = new QuadCurveTo();
quadCurveTop.setX(x);
quadCurveTop.setY(y);
quadCurveTop.setControlX(controlX);
quadCurveTop.setControlY(controlY);
 
// courbe du bas
controlX = x - LONG_POINTE;
x -= 10;
y = height;
controlY = y;
QuadCurveTo quadCurveBott = new QuadCurveTo();
quadCurveBott.setX(x);
quadCurveBott.setY(y);
quadCurveBott.setControlX(controlX);
quadCurveBott.setControlY(controlY);
 
HLineTo bottomLine = new HLineTo();
x -= labelWidth;
bottomLine.setX(x);
 
VLineTo endLine = new VLineTo();
endLine.setY(0);
 
path.getElements().add(startPoint);
path.getElements().add(topLine);
path.getElements().add(quadCurveTop);
path.getElements().add(quadCurveBott);
path.getElements().add(bottomLine);
path.getElements().add(endLine);
 
 
// Creer un jeu de gradient dans le bouton
Stop[] stops = new Stop[] {
    new Stop(0.0, Color.DARKSEAGREEN),
    new Stop(1.0, Color.SLATEGREY)
};
LinearGradient lg =new LinearGradient( 0, 0, 0, 1, true, CycleMethod.REFLECT, stops);
path.setFill(lg);
 
//ajouter les éléments au noeud principal (Group)
rootNode.getChildren().setAll(path, lbl);
 
//affecter la capture du clic souris sur ce bouton
rootNode.setOnMouseClicked((MouseEvent mc) -> {
    if ( retourClient != null )
        retourClient.handle(mc);
        });
    }
 
 
/**************************
 * Affecter le titre du btn
 * @param text
 ***************************/
    public void setText(String text) {
        this.text = text;
        lbl.setText(text);
 
        // update button
        draw();
    }
 
    /********************
     * Affecter la taille du btn
     * @param X
     * @param Y
     *******************/
    public void setSize(double X, double Y){
        labelWidth=X;
        labelHeight=Y;
    }
 
 
/*************************
 * Retourne le controle
 * ici l'objet MonBouton
 * @return
 *************************/
@Override
public MonBouton getSkinnable() {
    return this.control;
}
 
}

Cela donne un bouton de ce type auquel on peut ajouter des effets (effet d'ombre ici), et appliquer du CSS également (couleur blanche sur le titre du bouton), jouer sur l'opacité avec la méthode setOpacity(double) hérité de la classe Control, ajouter un tooltip avec setToolTip(), et toutes les méthodes applicables à un objet Control (en bref!)



Reste plus qu'a adapter la méthode draw() avec des Shapes pour dessiner les contrôles dont tu a besoins.

Cdlt.

[bouye]

Sympa tient. Mais Control est a un niveau plus élevé que Region puisqu'il introduit la gestion des Skin.

Note : dès qu'un contrôle étend la classe Control, pour éviter de hard coder la skin dans la classe, on peut utiliser le sélecteur CCS -fx-skin en indiquant le nom complet de la classe skin. On peut alors surcharger la méthode getUserAgentStylesheet() du contrôle pour retourner une feuille de style par défaut. Cette feuille de style par défaut décrivant l'apparence à minima du contrôle et pointant sur le skin par défaut bien sûr. Cela permet après au programmeur lambda de fournir sa propre skin, si besoin, en la spécifiant via ce sélecteur dans la feuille de style de l'application.

Hum faudra un jour que je finisse le blog post ou je décrivais comment changer un Slider en un gros bouton rond qui tourne sur lui-même (comme sur une radio ou panneau de contrôle sonore) juste en changeant sa skin.

[tondeurh]

Sympa tient. Mais Control est a un niveau plus élevé que Region puisqu'il introduit la gestion des Skin.

Note : dès qu'un contrôle étend la classe Control, pour éviter de hard coder la skin dans la classe, on peut utiliser le sélecteur CCS -fx-skin en indiquant le nom complet de la classe skin. On peut alors surcharger la méthode getUserAgentStylesheet() du contrôle pour retourner une feuille de style par défaut. Cette feuille de style par défaut décrivant l'apparence à minima du contrôle et pointant sur le skin par défaut bien sûr. Cela permet après au programmeur lambda de fournir sa propre skin, si besoin, en la spécifiant via ce sélecteur dans la feuille de style de l'application.

Hum faudra un jour que je finisse le blog post ou je décrivais comment changer un Slider en un gros bouton rond qui tourne sur lui-même (comme sur une radio ou panneau de contrôle sonore) juste en changeant sa skin.

Oui effectivement, c'est une solution intéressante également surtout pour l'utilisateur qui peut proposer ses propres skin en CSS, curieux de lire ton prochain billet sur ce sujet.

Cdlt.

[bouye]

Ah tien justement en regardant le code source de Slider tu peux surcharger la méthode createDefaultSkin() (définie dans Control) pour charger le skin par défaut (ce qui évite de le mettre dans le constructeur comme tu as fais) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@Override 
protected Skin<?> createDefaultSkin() {
    return new SliderSkin(this);
}

[guatto]

Bonjour

la solution est dans le code de "Bouye", merci & à toi aussi "tondeurh". Problème résolu !