Probleme de CornerRadius (non pris en compte par les elements contenus)

**Gaaaga** · 13/05/2008, 18h13

Bonjour,

Alors, GROS probleme, je definis un component avec un cornerradius et border etc mais les elements a l'interieur de ce component ne prennent pas en compte ce cornerradius (je trouve ca tout bonnement hallucinant)

Quelqu'un a une solution a ce probleme fort desagreable ???

Mon code :

<mx:VBox verticalScrollPolicy="off" width="100%" cornerRadius="20" dropShadowEnabled="true" dropShadowColor="#000000" borderStyle="solid" borderThickness="0.5" backgroundColor="#FFFFFF">

<mx:VBox height="100" backgroundColor="#C2C4C9"/>

</mx:VBox>

c'est le background qui pose soucis, sans backGround, no soucy.. hallucinant qd meme !!!!

**Jim_Nastiq** · 14/05/2008, 09h38

Salut,

dans ton exemple(d'ailleurs utilise la balise code pour afficher du code c'est tres rapidement illisible!), tu donnes le style dans la balise mxml donc il s'applique a ton composant mxml VBox... ce n'est pas la meilleur facon de faire.

Il faut savoir que le MXML est une surcouche qui est en fait ensuite traduite en AS3 , donc tout ce que tu peux faire en MXML est faisable en AS3 , le soucis du MXML c'est que finalement on peut avoir l'impression de confondre les évènements,des styles et des propriétés(3 choses différentes).

je te conseille donc d'utiliser une feuille de style ou bien directement la balise style dans ton code mxml,

cet exemple toutes tes VBox seront du meme style si tu veux des différences utilise la la propriété styleName :

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
 
<mx:Style>
VBox{
	cornerRadius:20;
	dropShadowEnabled:true; 
	dropShadowColor:#000000;
	borderStyle:solid; 
	borderThickness:0.5; 
	backgroundColor:#FFFFFF;
}
</mx:Style>
<mx:VBox verticalScrollPolicy="off" width="100%" >
 
<mx:VBox height="100" />
 
</mx:VBox>

**Sthocs** · 14/05/2008, 10h01

Salut,
J'ai également eu des problèmes avec le cornerRadius, des fois il est bien pris en compte, des fois non... Ca dépend des autres attributs présents sur l'objet j'ai l'impression.

**Gaaaga** · 14/05/2008, 20h18

Hello !!!

Merci pour les infos et conseils que je vais suivre a la lettre.. Par contre, j'ai adapte mon code avec le style et le probleme est tjs le meme : si les elements contenus n'ont pas le meme backgroundcolor, le cornerRadius n'est pas "cascade"

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
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox{
	cornerRadius:20;
	dropShadowEnabled:true; 
	dropShadowColor:#000000;
	borderStyle:solid; 
	borderThickness:0.5; 
	backgroundColor:#000000;
}
</mx:Style>
<mx:VBox verticalScrollPolicy="off" height="100%" width="100%">
 
<mx:HBox height="100" width="100%" backgroundColor="#ffffff"/>
 
<mx:HBox height="100" width="100%" backgroundColor="#000000"/>
 
</mx:VBox>	
</mx:WindowedApplication>

**Jim_Nastiq** · 15/05/2008, 09h48

ton élèment enfant est un HBox donc il ne prend pas en compte les propriétés de style du parent forcement...

essai ceci :

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
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox{
	cornerRadius:20;
	dropShadowEnabled:true; 
	dropShadowColor:#000000;
	borderStyle:solid; 
	borderThickness:0.5; 
	backgroundColor:#000000;
}
HBox{
	cornerRadius:20;
}
</mx:Style>
<mx:VBox verticalScrollPolicy="off" height="100%" width="100%">
 
<mx:HBox height="100" width="100%" backgroundColor="#ffffff"/>
 
<mx:HBox height="100" width="100%" backgroundColor="#000000"/>
 
</mx:VBox>	
</mx:WindowedApplication>

**Gaaaga** · 19/05/2008, 09h45

Merci pour le trick Nastik, mais ca ne marche tjs pas comme je le voudrais...

Le hic, c'est que j'ai bien le cornerRadius, mais j'en ai "trop" :

Comme on peut le voir entre les 2 hbox, il me met un cornerRadius que je ne veux pas, je voudrais une ligne droite entre les 2...

**Gaaaga** · 19/05/2008, 09h53

OUps la, en fait non !

Avec ce code (le dernier que tu m'as propose Jim):

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
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox{
	cornerRadius:20;
	dropShadowEnabled:true; 
	dropShadowColor:#000000;
	borderStyle:solid; 
	borderThickness:0.5; 
	backgroundColor:#000000;
}
HBox{
	cornerRadius:20;
}
</mx:Style>
<mx:VBox verticalScrollPolicy="off" height="100%" width="100%">
 
<mx:HBox height="100" width="100%" backgroundColor="#ffffff"/>
 
<mx:HBox height="100" width="100%" backgroundColor="#000000"/>
 
</mx:VBox>	
</mx:WindowedApplication>

J'obtiens ceci :

donc on peut voir que la premiere Hbox (qui a un backgroundColor different de la Vbox parente) ne prend pas en compte le cornerRadius.

Alors qu'avec le meme code sans imposer de backgroundColor a la Vbox parente, aucun des elements enfants (les hbox) n'a de cornerRadius...

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
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox{
	cornerRadius:20;
	dropShadowEnabled:true; 
	dropShadowColor:#000000;
	borderStyle:solid; 
	borderThickness:0.5; 
}
HBox{
	cornerRadius:20;
}
</mx:Style>
<mx:VBox verticalScrollPolicy="off" height="100%" width="100%">
 
<mx:HBox height="100" width="100%" backgroundColor="#ffffff"/>
 
<mx:HBox height="100" width="100%" backgroundColor="#000000"/>
 
</mx:VBox>	
</mx:WindowedApplication>

**Jim_Nastiq** · 19/05/2008, 13h00

Euh , rappel moi ce que tu souahites...

tu veux une Vbox(le parent) avec des angles arrondies et a l'intérieur une Hbox avec des angles non-arrondies?? j'suis un peu perdu sur ce que tu souhaites

sinon pour le backgroundColor met le dans le style plutot que dans la balise mxml

**Gaaaga** · 19/05/2008, 13h33

Coucou !

Ouais, ca devient complicado, la, donc je rappelle ce que je veux :

En fait, je veux une VBox avec bords arrondies, et que les elements interieurs prennent en compte ce cornerRadius sur leur extremite. Donc en gros ce que je voudrais c'est presque ca :

sauf qu'il faudrait que les bords haut droite et haut gauche de la premiere HBox (la blanche) soit arrondis. Et ce serait parfait...

(en tout cas, merci Jim Nastik de t'interresser autant a mon pb...)

**Jim_Nastiq** · 19/05/2008, 14h17

ce genre de truc ca t'irais?

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox{
	cornerRadius:20;
	dropShadowEnabled:true; 
	dropShadowColor:#000000;
	borderStyle:solid; 
	borderThickness:0.5; 
	background-color: #000000;
}
.inner{
	background-color: #FFFFFF;
}
</mx:Style>
<mx:VBox verticalScrollPolicy="off" height="100%" width="100%">
 
<mx:VBox height="100" width="100%" styleName="inner"/>
 
<mx:VBox height="100" width="100%" styleName="inner2"/>
 
</mx:VBox>	
</mx:Application>

**Gaaaga** · 19/05/2008, 14h28

yop !

il me manque le inner2...

**Jim_Nastiq** · 19/05/2008, 14h39

comment ca il te manque le inner2 ?? c'est a toi de mettre le style que tu veux pour inner2

**Gaaaga** · 19/05/2008, 14h47

Je n'ai jms ete aussi proche du but, malheureusement... tjs un pb : entre les 2 VBox enfants, ils reste ce corner radius que je ne veux pas :

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
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
VBox{
	cornerRadius:20;
	dropShadowEnabled:true; 
	dropShadowColor:#000000;
	borderStyle:solid; 
	borderThickness:0.5; 
	background-color: #000000;
	vertical-gap: 0;
}
.inner{
	background-color: #FFFFFF;
}
 
.inner2{
	background-color: #000000;
}
</mx:Style>
	<mx:VBox verticalScrollPolicy="off" width="100%">
 
	<mx:VBox height="100" width="100%" styleName="inner"/>
 
	<mx:VBox height="100" width="100%" styleName="inner2"/>
 
	</mx:VBox>	
</mx:WindowedApplication>

**Jim_Nastiq** · 19/05/2008, 16h36

attends... tu veux un corner radius uniquement sur les 2 coins hauts de ton Vbox inner et uniquement sur les 2 coins bas de ton VBox inner2 ,c'est bien ca?

regarde les propriétés de style du genre top-left-radius(et cie...) ou un truc dans le genre, je ne me souviens plus du nom exact , ceci te permet plutot que de définir un angle identique pour chaque coins ,un angle particulier pour chacun d'eux

**Gaaaga** · 19/05/2008, 16h50

Envoyé par Jim_Nastiq

attends... tu veux un corner radius uniquement sur les 2 coins hauts de ton Vbox inner et uniquement sur les 2 coins bas de ton VBox inner2 ,c'est bien ca?

exactement !

Envoyé par Jim_Nastiq

regarde les propriétés de style du genre top-left-radius(et cie...) ou un truc dans le genre, je ne me souviens plus du nom exact , ceci te permet plutot que de définir un angle identique pour chaque coins ,un angle particulier pour chacun d'eux

Malheureusement, les seules proprietes de style d'un VBox (par exemple) concernant le radius est le cornerRadius...
cf http://livedocs.adobe.com/flex/2/lan...ners/VBox.html

**Jim_Nastiq** · 19/05/2008, 17h04

ok mauvais souvenir alors...
tu peux donc soit ecrire ton propre composant en dérivant de la classe VBox afin d'obtenir une dissociation des angles ou bien forcer le cornerradius à o pour tes 2 VBox inner et inner2 et je pense que ca pourrait coller(j'ai pas testé)

**Gaaaga** · 19/05/2008, 17h09

Envoyé par Jim_Nastiq

ok mauvais souvenir alors...
tu peux donc soit ecrire ton propre composant en dérivant de la classe VBox afin d'obtenir une dissociation des angles

ouais, ca apparait etre la seule solution (et encore, il faut le faire...) mais ce serait trop complique s'il fallait que je fasse ca pour chaque composant .. donc pour l'instant statu quo et attente de changement de design (pasque c'est pas tout ca, hein !)

Envoyé par Jim_Nastiq

ou bien forcer le cornerradius à o pour tes 2 VBox inner et inner2 et je pense que ca pourrait coller(j'ai pas testé)

vient de tester et ca ne marche pas, ca met effectivement le cornerRadius a 0 mais pour tous les angles..

En tout cas, merci bcp pour ton aide !!!!!!!

Probleme de CornerRadius (non pris en compte par les elements contenus)

Flex

Discussions similaires

Partager

Partager