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

[Gaaaga]

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]

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 :

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]

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]

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 :

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]

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 :

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]

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]

OUps la, en fait non !

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

Code :

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 :

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]

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]

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]

ce genre de truc ca t'irais?

Code :

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]

yop !

il me manque le inner2...

[Jim_Nastiq]

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

[Gaaaga]

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 :

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]

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]

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]

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]

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 !!!!!!!