Associer une CSS à un nœud

Version imprimable

Bonjour,

J’essaye d'associer un sélecteur CSS à un nœud (TabPane). J’ai bien lu qu’il y avait 3 manières (http://java.developpez.com/faq/javaf...s-sur-un-noeud). Mais dans mon cas, le TabPane est Parent (si je peux dire). Et donc, si je souhaite associer la css à ce TabPane (et non à la scène), la css est malgré tout appliquée à tous mes nœuds enfants.
Si je souhaite utiliser l’id ou la classe de style, je ne vois pas comment je peux faire car ma css contient plusieurs blocs de règles pour le TabPane. De plus, elle contient des blocs de règles pour les Tab.

CSS :
Code:

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 .tab-pane .tab-header-area .tab-header-background{ -fx-opacity: 0; } .tab { -fx-background-color: GAINSBORO; } .tab:selected { -fx-background-color: ORANGE; } .tab .tab-label { -fx-alignment: CENTER; -fx-text-fill: #828282; -fx-font-size: 12px; -fx-font-weight: bold; } .tab:selected .tab-label { -fx-alignment: CENTER; -fx-text-fill: WHITE; } .tab{ /*-fx-background-insets: 0 1 0 1,0,0;*/ -fx-background-insets: 0, 0 0 1 0; } .tab-pane:top *.tab-header-area { -fx-border-color: ORANGE; -fx-border-width: 0 0 5 0; }
Quelqu'un peut m'aider ?

Merci d'avance

03/08/2016, 23h51
bouye
Chaque nœud Parent dispose d'une méthode getStyleSheets() pour ajouter une(des) feuille(s) de style a ce parent.
Sinon ca se resoud aussi tres bien en ajoutant un styleClass propre a ce nœud.

Code:

getStyleClass().add("mon-style-de-classe");
Code:

1 2 3 .mon-style-de-classe { [...] }
Aussi si c'est une classe custom qui hérite de Region tu peux surcharger getUserAgentStylesheet() pour définir une feuille de style par défaut qui sera chargée et initialisée lorsque le nœud est instancié (elle s'applique donc AVANT celle de la scène).

Oui, pas de problème quand c'est un cas 'simple'.
Mais dans le cas où il y a plusieurs sélecteurs par définition de style comme ici :
Code:

1 2 3 .tab-pane .tab-header-area .tab-header-background { -fx-opacity: 0; }
comment fait-on ?

Ceci, par exemple, ne fonctionne pas :
Code:

1 2 tabPane.getStyleClass().add("mainTabPane"); tab.getStyleClass().add("mainTab");
Code:

1 2 3 .mainTabPane mainTab-header-area mainTab-header-background{ -fx-opacity: 0; }

Tes sélecteurs CSS sont mal nommés :

Code:

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
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final TabPane tabPane1 = createTabPane();
        final TabPane tabPane2 = createTabPane();
        tabPane2.getStyleClass().add("my-tab-pane");
        final SplitPane root = new SplitPane();
        root.setStyle("-fx-background-color: green;");
        root.getItems().setAll(tabPane1, tabPane2);
        final Scene scene = new Scene(root);
        final Optional<URL> cssURL = Optional.ofNullable(getClass().getResource("Main.css"));
        cssURL.ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setScene(scene);
        primaryStage.setWidth(500);
        primaryStage.setHeight(500);
        primaryStage.show();
    }
 
    private TabPane createTabPane() {
        final TabPane result = new TabPane();
        IntStream.range(0, 5)
                .mapToObj(index -> new Tab(String.valueOf(index)))
                .forEach(result.getTabs()::add);
        return result;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Code:

1
2
3
.my-tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

04/08/2016, 23h54
sportman1969
Non, si j'effectue ça :
Code:

1 2 3 4 .my-tab-pane .tab-header-area .tab-header-background { -fx-opacity: 0; }
la zone tab-header-area et tab-header-background de mes autres TabPane sont également modifié par ma CSS, ce que je ne souhaite pas.
05/08/2016, 01h59
bouye

Comme l'exemple que j'ai posté, et que visiblement tu n'as pas testé, le montre ce n'est pas possible sauf si tu as fait l'erreur de donner exactement le même style de classe a tes autres TabPane :aie:
05/08/2016, 17h26
sportman1969

1 pièce(s) jointe(s)

Si si j'ai testé mais chez moi, ça n'a aucun effet :

Pièce jointe 217252

Naturellement, je commets peut être une erreur (c'est pour cela que je viens sur le forum :D) !
De plus, comme on peut voir dans mon code css de mon premier message, ma css contient plusieurs définitions de style pour mon TabPane (et sur les Tab) ce qui complique l'histoire.
06/08/2016, 01h44
bouye

1 pièce(s) jointe(s)

Ce n'est pas normal. Ce que tu devrais avoir :

Pièce jointe 217269

Quelle version de JavaFX utilises-tu ?
Vérifies que tu utilises bien le CSS que j'ai fourni (le tien contenait des erreurs).
06/08/2016, 21h08
sportman1969

Non, j'ai recopié ton code CSS.
Pour la version de javaFX, j'ai le JDK 1.8.0_102, JavaFX n'est t'il pas inclus dans le JDK ?
06/08/2016, 23h02
bouye

Nous avons donc la même version. Si le soucis ne vient pas du CSS et pas du code (recopie directe aussi j'imagine) c'est donc que le CSS ne s'applique pas car tu n'as pas mis les fichiers dans le même package ou que tu l'as mal nommé (voir avec le débogueur : cssURL vaut sans doute Optional.empty()). Quel IDE et quel OS utilises-tu ? Comment as-tu placé tes fichiers dans l’arborescence de ton projet ?

Note : pour moi Windows 10 + NetBeans 8.1.

1 pièce(s) jointe(s)

Il semblerait que ce soit ton code qui ne fonctionne pas chez moi.
Voici les changements que j'ai effectué (sans modifier le css) :

Code:

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
 
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
//        final TabPane tabPane1 = createTabPane();
//        final TabPane tabPane2 = createTabPane();
        final TabPane tabPane1 = new TabPane();
        final TabPane tabPane2 = new TabPane();
        final Tab tab1 = new Tab("1");
        final Tab tab2 = new Tab("2");
        final Tab tab3 = new Tab("3");
        final Tab tab4 = new Tab("4");
        tabPane2.getStyleClass().add("my-tab-pane");
        tabPane1.getTabs().addAll(tab1, tab2);
        tabPane2.getTabs().addAll(tab3, tab4);
        final SplitPane root = new SplitPane();
        root.setStyle("-fx-background-color: green;");
        root.getItems().setAll(tabPane1, tabPane2);
        final Scene scene = new Scene(root);
        final Optional<URL> cssURL = Optional.ofNullable(getClass().getResource("Main.css"));
        cssURL.ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setScene(scene);
        primaryStage.setWidth(500);
        primaryStage.setHeight(500);
        primaryStage.show();
    }
 
    private TabPane createTabPane() {
        final TabPane result = new TabPane();
        IntStream.range(0, 5)
                .mapToObj(index -> new Tab(String.valueOf(index)))
                .forEach(result.getTabs()::add);
        return result;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

et ça donne ceci :

Pièce jointe 217342

Je suis sous Win 8 et NetBeans 8.0.2

07/08/2016, 23h44
bouye

Tu te rends bien compte j’espère que vu que ce que tu as posté n'as de différent que ce qui concerne la partie qui gère création des deux TabPane, et que cette partie est grosso-modo identique a ce que j'avais écris, ce n'est pas suffisant en soit pour expliquer une telle différence de comportement :roll: Et donc que forcement il y avait un truc que tu faisais mal avant........................................................................

Enfin bon... :roll:
08/08/2016, 07h54
paesportcomputing

Je m'en rends bien compte mais c'est ce qui ne fonctionne pas puisque je n'ai changé que ça !

Bien à toi.
08/08/2016, 21h08
sportman1969

Sorry, je ne recompilais pas après chaque modification apportée à mon css.
Mais ça ne résout quand même pas mon problème car dans mon programme, mon second TabPane est enfant de mon premier TabPane qui seul devrait être modifié par ma css.
Alors, qu'est-ce que j'entends pas enfant. Dans mon code, mon premier TabPane contient (mainTabPane.getTabs().add(splitPane)) un SplitPane. Et ce dernier contient (splitPane.getItems().addAll(..., tabPane)) mon deuxième TabPane (qui ne doit pas être modifié par ma css).

Un dessin vaut mieux qu'un long discours :

Code:

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
 
import java.net.URL;
import java.util.Optional;
import java.util.stream.IntStream;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.SplitPane;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
//        final TabPane tabPane1 = createTabPane();
//        final TabPane tabPane2 = createTabPane();
        final TabPane tabPane1 = new TabPane();
        final TabPane tabPane2 = new TabPane();
        final TabPane tabPane3 = new TabPane();
        final Tab tab1 = new Tab("1");
        final Tab tab2 = new Tab("2");
        final Tab tab3 = new Tab("3");
        final Tab tab4 = new Tab("4");
        final Tab tab5 = new Tab("5");
        final Tab tab6 = new Tab("6");
        tabPane2.getStyleClass().add("my-tab-pane");
        tabPane1.getTabs().addAll(tab1, tab2);
        tabPane2.getTabs().addAll(tab3, tab4);
        tabPane3.getTabs().addAll(tab5, tab6);
        tab4.setContent(tabPane3);
        final SplitPane root = new SplitPane();
        root.setStyle("-fx-background-color: green;");
        root.getItems().setAll(tabPane1, tabPane2);
        final Scene scene = new Scene(root);
        final Optional<URL> cssURL = Optional.ofNullable(getClass().getResource("Main.css"));
        cssURL.ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setScene(scene);
        primaryStage.setWidth(500);
        primaryStage.setHeight(500);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

08/08/2016, 23h47
bouye

1 pièce(s) jointe(s)
Effectivement je me suis fait aussi avoir par ce genre de choses de temps a autres.

Ceci devrait mieux fonctionner pour le coup :
Code:

1 2 3 .my-tab-pane > .tab-header-area .tab-header-background { -fx-opacity: 0; }
Yeah, pour une fois que j'ai réussi a utiliser la règle > correctement :king::yaisse2:

Pièce jointe 217461

1 pièce(s) jointe(s)

Je croyais enfin la solution trouvée mais visiblement ça ne s'applique pas au Tab :( :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .my-tab-pane > .tab-header-area .tab-header-background { -fx-opacity: 0; } .my-tab-pane > .tab { -fx-background-color: GAINSBORO; } .my-tab-pane > .tab:selected { -fx-background-color: ORANGE; }
Pièce jointe 217517

1 pièce(s) jointe(s)

Oui c'est le genre de choses qui m’énerve bien avec cette règle ; des fois je ne comprends pas bien pourquoi elle s'applique... ou pas.
N'oublie pas que tu peux aussi donner un style de classe aux onglets eux-mêmes :
Code:

1 2 tab3.getStyleClass().add("my-tab"); tab4.getStyleClass().add("my-tab");
Code:

1 2 3 4 5 6 7 8 9 10 11 .my-tab-pane > .tab-header-area .tab-header-background { -fx-opacity: 0; } .my-tab-pane .my-tab { -fx-background-color: GAINSBORO; } .my-tab-pane .my-tab:selected { -fx-background-color: ORANGE; }
Pièce jointe 217543

10/08/2016, 20h21
sportman1969

Ouf, là tout est OK.

Je te remercie pour ta patiente, sans toi, je n'aurais jamais trouvé !

Bàt.