Feuille de style - Désactiver l'héritage

Version imprimable

16/10/2012, 14h12
Tony49

Feuille de style - Désactiver l'héritage

J'ai un panel dans lequel se trouve un textfield.

J'ai une feuille de style externe dans laquelle j'ai déclaré.

.maclass{
-fx-effect: dropshadow( three-pass-box , #08c , 5, 0.5 , 1 , 1 );
}

Lorsque j'applique .maclass à mon panel automatiquement le textfield qui se trouve à l'intérieure de mon panel hérite du style.

Je souhaite trouver un moyen pour que mon textfield n'hérite pas de ce style.

Quelqu'un peut il m'aider?
17/10/2012, 00h25
bouye

Ce n'est pas un problème d’héritage du style.

Ici, le problème vient du fait que ton effet est appliqué sur le noeud parent et que l'effet s'applique sur les parties non-opaques de ce noeud et donc, dans le cas d'un conteneur dont la couleur de fond est transparente, l'effet apparaitra sous tous ses sous-composants.
C'est le comportement normal.
Si ton panel avait une couleur de fond opaque ou translucide, l'effet n'apparaitrait que sur sa bordure (et éventuellement tout ce qui en dépasse).

PS : pour tout ce qui est graphique, penser a ajouter des captures d’écrans pour expliciter vos problèmes. C'est généralement bien plus parlant qu'un vague descriptif.
17/10/2012, 07h05
bouye

Un petit bémol par rapport a ce que j'ai écrit juste au dessus : je viens de passer dans la 2.2.3 et j'ai des erreurs d'affichage que je n'avais pas avant (2.2.0) et donc ca peut aussi venir de la. Mais ca serait plus facilement vérifiable avec un screenshot.
19/10/2012, 08h45
Tony49

Merci pour cette réponse, j'ai fait quelques essais. Effectivement lorsque le background de mon panel possède une couleur les composants qui se trouvent à l'intérieur n'hérite plus de l'effet shadow. Je posterais ce week end une capture d'écran.

Finalement mon problème reste entier : ce que je souhaite faire c'est avoir un panel avec un fond transparent et une bordure effet shadow. Puis je souhaite déposer dans ce panel des composants (label, textfield, etc...) qui eux ne doivent pas avoir d'effet shadow.
19/10/2012, 14h34
bouye

Dans ton panel (root) met un second panel (panel1, vide) qui fait la même taille, sera placé sous tes autres contrôles et sur lequel tu mets le shadow.
19/10/2012, 20h09
Tony49

C'est la transparence qui pose problème.

http://imageshack.us/photo/my-images/546/screen1nik.png

J'ai biensure essayé de mettre un panel,... en vain.

1 pièce(s) jointe(s)

Moi ça semble fonctionner OK :

Pièce jointe 104287

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?scenebuilder-background-color 0x000000ff?>
<?scenebuilder-stylesheet NeonUI.css?>
 
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Pane prefHeight="200.0" prefWidth="200.0" styleClass="outer-border-pane" AnchorPane.bottomAnchor="100.0" AnchorPane.leftAnchor="100.0" AnchorPane.rightAnchor="100.0" AnchorPane.topAnchor="100.0" />
    <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" styleClass="hbox" AnchorPane.bottomAnchor="100.0" AnchorPane.leftAnchor="100.0" AnchorPane.rightAnchor="100.0" AnchorPane.topAnchor="100.0">
      <children>
        <Label text="Label" HBox.hgrow="NEVER" />
        <TextField prefWidth="200.0" text="TextField" HBox.hgrow="NEVER" />
      </children>
    </HBox>
  </children>
</AnchorPane>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.root {
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -base-color: #005EE2;
    -effect-color: #0097E2;
}
.hbox {
    -fx-spacing: 20;
}
.label {
    -fx-text-fill: -base-color;
}
.text-field {
    -fx-text-fill: -base-color;
    -fx-background-color: null;
    -fx-border-color: -base-color;
    -fx-border-width: 1.5;
}
.outer-border-pane {
    -fx-border-color: -base-color;
    -fx-border-width: 1.5;
    -fx-effect: dropshadow(three-pass-box, -effect-color, 20, 0, 0, 0);
}

23/10/2012, 13h53
Tony49

Bonjour,
Merci pour ton exemple.
Cela fonctionne car le panel n'est pas parent de la hbox.
En ce qui me concerne je ne peux pas retenir cette solution car je souhaite que mes composants soit a l'intérieur du panel afin d'appliquer à l'ensemble des effets de transition, rotation etc...

Merci quand même.
23/10/2012, 21h54
bouye

Ce qui est toujours faisable en appliquant ces transformations au top parent commun aux deux. Je ne vois pas où est le problème.

Sans utiliser une telle composition, ce que tu veux faire est infaisable sauf en skinnant le parent avec une bitmap au lieu d'y appliquer un effet "live".