Voir le flux RSS

tondeurh

Un "Custom Control" en JavaFX

Noter ce billet
par , 28/05/2016 à 17h45 (574 Affichages)
Suite à un réponse faite à un post sur le forum de DVP (http://www.developpez.net/forums/d15...rence-d-forme/)

Ci dessous le code source complet avec le petit programme de test d'un nouveau composant JavaFX, tout est en commentaire dans le code source.

Ce composant est un bouton Custom

Le test ressemble à ceci... Un peu moche le composant !
Nom : 2016-05-28_17h31_33.png
Affichages : 1129
Taille : 33,7 Ko

Code source du programme 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
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
 
package jfxshapetest;
 
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tooltip;
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();
        lb.setStyle("-fx-text-fill:#FF0000;");
 
        //un effet de drop Shadow (exagéré, mais c'est pour la demo)
        DropShadow ds = new DropShadow();
        ds.setOffsetY(3.0);
        ds.setOffsetX(3.0);
        ds.setRadius(8.0);
        ds.setColor(Color.BLACK);
 
        //mon custom control (Bouton perso)
        MonBouton btn=new MonBouton("CLIC ICI!",130,25);
        btn.setEffect(ds);
        //texte en blanc
        btn.setButonColors("#FFFFFF","#999999",Color.DARKBLUE,Color.BLUE,Color.CYAN);
        //btn.setOpacity(0.5);
        btn.setTooltip(new Tooltip("Mon bouton perso!"));
 
        // Handle du bouton perso 1
        btn.setOnMouseClicked((MouseEvent me) -> {
            lb.setText("Mon bouton a été clické!");
            System.out.println("Mon bouton a été clické!");
        });
 
        MonBouton btn2=new MonBouton("FLAT!",130,25);
        btn2.setButonColors("#000000","#FF0000",Color.ALICEBLUE,Color.AZURE,Color.CYAN);
        // Handle du bouton perso 2
        btn2.setOnMouseClicked((MouseEvent me) -> {
            lb.setText("Le bouton FLAT à été préssé!");
        });
 
 
 
          MonBouton btn3=new MonBouton("Frenchy!",100,20);
        btn3.setButonColors("#000000","#FF0000",Color.BLUE,Color.WHITE,Color.RED);
          // Handle du bouton perso 3
        btn3.setOnMouseClicked((MouseEvent me) -> {
            lb.setText("Le bouton Frenchy! à été préssé!");
        });
 
 
          MonBouton btn4=new MonBouton("BIG GREEN!",250,40);
          btn4.setEffect(ds);
        btn4.setButonColors("#FFFFFF","#ADFF2F",Color.YELLOWGREEN,Color.GREEN,Color.YELLOWGREEN);
          // Handle du bouton perso 4
        btn4.setOnMouseClicked((MouseEvent me) -> {
            lb.setText("Le Big GREEN! à été préssé!");
        });
 
 
 
        VBox root = new VBox(15);
        root.setAlignment(Pos.CENTER);
        root.getChildren().addAll(btn,lb,btn2,btn3,btn4);
 
        Scene scene = new Scene(root, 300, 250);
 
        primaryStage.setTitle("Mon custom control!");
        primaryStage.setResizable(false);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
 
}

Code source du control "MonBouton"...

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
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
 
package jfxshapetest;
 
import javafx.scene.control.Control;
import javafx.scene.paint.Color;
 
 
public class MonBouton extends Control  {
    private String title = "";
    MonBoutonSkin skin; //objet skin de mon bouton
 
 
    public MonBouton(String title,double sizeX, double sizeY) {
        //initialise le controle et fait appel au
        //controleur parent de la classe Control
        super();
        //Va creer l'objet skin de mon bouton
        skin=new MonBoutonSkin(this);
        //on affecte le title et sa taille
        this.title = title;
        skin.setSize(sizeX,sizeY);
        skin.setText(title);
        //on affecte le skin à notre bouton...
        setSkin(skin);
 
    }
 
    /**
     * Affecter un autre title a notre bouton
     * @param title
     */
    public void setTitle(String title){
        skin.setText(title);
    }
 
    /**
     * Récuperer le title de notre bouton...
     * @return
     */
    public String getTitle() {
        return title;
    }
 
 
    /**
     * Affecter une couleur de texte à notre bouton
     * @param TitleNormalColor
     * @param TitleActiveColor
     * @param BeginColor
     * @param MiddleColor
     * @param EndColor
     */
    public void setButonColors(String TitleNormalColor, String TitleActiveColor, Color BeginColor, Color MiddleColor, Color EndColor ){
       skin.setNormalStyle("-fx-text-fill:"+TitleNormalColor+";");
       skin.setActiveStyle("-fx-text-fill:"+TitleActiveColor+";");
       skin.setBeginColor(BeginColor);
       skin.setMiddleColor(MiddleColor);
       skin.setEndColor(EndColor);
       skin.redessine();
    }
 
}

Et le code source du Skin du bouton, c'est lui surtout qui dessine le composant et lui donne ses propriétés...


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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
 
package jfxshapetest;
 
import javafx.event.EventHandler;
import javafx.geometry.Pos;
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.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;
 
    String normalStyle="-fx-text-fill:#FFFFFF;";
    String activeStyle="-fx-text-fill:#FF0000;";
    Color beginColor=Color.GRAY;
    Color middleColor=Color.WHITE;
    Color endColor=Color.BLACK;
 
 
    /*******************************
     * Constructeur
     * affecte le control par defaut
     * dessine le controle
     * @param control
     *******************************/
    public MonBoutonSkin(MonBouton control) {
        this.control = control;
        redessine();
    }
 
 
/****************************
 * 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();
	    redessine();
	}
	return this.rootNode;
    }
 
/*****************
 * ne fait rien dans mon cas
 *****************/
    @Override
    public void dispose() {
    }
 
 
/********************
 * Dessiner le bouton
 ********************/
public void redessine() {
//creer le label du btn
if ( lbl == null ) {
    lbl = new Label(text);
    lbl.setStyle(normalStyle);
}
 
//position de translation par rapport au layout
lbl.setTranslateX(1);
lbl.setTranslateY(1);
 
// Creer le path des elements du bouton
Path path = new Path();
Path pathBox=new Path();
MoveTo startPoint = new MoveTo();
double x = 2.0f;
double y = 2.0f;
double controlX;
double controlY;
double height = labelHeight;
startPoint.setX(x);
startPoint.setY(y);
 
//dessine le rectangle du dessous pour donner l'effet 3D
HLineTo topBox=new HLineTo();
x += labelWidth;
topBox.setX(x);
 
VLineTo downBox=new VLineTo();
y+=labelHeight;
downBox.setY(y);
 
HLineTo bottomBox = new HLineTo();
x -= labelWidth;
bottomBox.setX(x);
 
VLineTo endBox = new VLineTo();
endBox.setY(0);
 
pathBox.getElements().add(startPoint);
pathBox.getElements().add(topBox);
pathBox.getElements().add(downBox);
pathBox.getElements().add(bottomBox);
pathBox.getElements().add(endBox);
 
// Creer un jeu de gradient dans le bouton
Stop[] stopsBox = new Stop[] {
    new Stop(0.0, Color.DARKBLUE),
    new Stop(1.0, Color.DIMGREY)
};
LinearGradient lg =new LinearGradient( 0, 0, 0, 1, true, CycleMethod.REFLECT, stopsBox);
pathBox.setFill(lg);
 
//dessiner la boite du dessus
x=0.0f;
y=0.0f;
startPoint.setX(x);
startPoint.setY(y);
 
HLineTo topLine = new HLineTo();
x += labelWidth;
topLine.setX(x);
 
VLineTo downLine=new VLineTo();
y+=labelHeight;
downLine.setY(y);
 
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(downLine);
path.getElements().add(bottomLine);
path.getElements().add(endLine);
 
 
// Creer un jeu de gradient dans le bouton
Stop[] stops = new Stop[] {
    new Stop(0.0, beginColor),
    new Stop(0.5, middleColor),
    new Stop(1.0,endColor)
};
 
lg =new LinearGradient( 0, 0, 1, 1, true, CycleMethod.REFLECT, stops);
path.setFill(lg);
 
//ajouter les éléments au noeud principal (Group)
rootNode.getChildren().setAll(pathBox,path, lbl);
 
//affecter la capture du clic souris sur ce bouton
rootNode.setOnMouseClicked((MouseEvent mc) -> {
    if ( retourClient != null ) retourClient.handle(mc);
    lbl.setStyle(normalStyle);
    });
 
 
rootNode.setOnMouseEntered((MouseEvent me) -> {
    if ( retourClient != null ) retourClient.handle(me);
    lbl.setStyle(activeStyle);
    });
 
rootNode.setOnMouseExited((MouseEvent mr) -> {
    if ( retourClient != null ) retourClient.handle(mr);
    lbl.setStyle(normalStyle);
    });
 
 
    }
 
 
/**************************
 * Affecter le titre du btn
 * @param text
 ***************************/
    public void setText(String text) {
        this.text = text;
        lbl.setText(text);
        lbl.setPrefSize(labelWidth, labelHeight);
        lbl.setAlignment(Pos.CENTER);
 
        // update button
        redessine();
    }
 
    /********************
     * Affecter la taille du btn
     * @param X
     * @param Y
     *******************/
    public void setSize(double X, double Y){
        labelWidth=X;
        labelHeight=Y;
        redessine();
    }
 
 
    public void setActiveStyle(String style){
        activeStyle=style;
    }
 
 
    public void setNormalStyle(String style){
        normalStyle=style;
    }
 
    public void setBeginColor(Color couleur){
        beginColor=couleur;
    }
 
    public void setMiddleColor(Color couleur){
        middleColor=couleur;
    }
 
      public void setEndColor(Color couleur){
        endColor=couleur;
    }
 
/*************************
 * Retourne le controle
 * ici l'objet MonBouton
 * @return
 *************************/
@Override
public MonBouton getSkinnable() {
    return this.control;
}
 
}

Juste pour mémo...

Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog Viadeo Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog Twitter Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog Google Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog Facebook Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog Digg Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog Delicious Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog MySpace Envoyer le billet « Un "Custom Control" en JavaFX » dans le blog Yahoo

Commentaires