Ajouter d'autres States à un spark Button

Version imprimable

29/07/2010, 17h46
Elendhil

Ajouter d'autres States à un spark Button

Il y a t'il un moyen d'ajouter de nouveaux states à un Button en plus de up,down,over,disabled ?
29/07/2010, 18h13
ellene

Il faut que tu surcharges la classe du bouton et que tu rajoutes tes states à l'intérieur.

J'ai essayé en mxml en héritant de Button et en surchargeant la méthode getCurrentSkinState() , mais je vois pas trop ce qu'il faut faire avec cette méthode.

En héritant de SkinableContainer , on a juste à surcharger getCurrentSkinState() en retournant currentState. Mais si on fait ça avec Button , les états de bases ne sont plus disponible pour la Skin.

Enfin de toute manière je pense que je suis pas parti sur la bonne voie. Ce que je cherche à faire c'est modifier le skin du bouton pendant l'état "disabled".

J'ai un Skin perso que j'attribue à un bouton et quand il est dans l'état "disabled" je voudrais changer certains aspects de mon skin à certains moments.

Et je vois pas comment faire , j'ai essayé ce code avec une SkinPart :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 public class ButtonCustom extends Button { [SkinPart(required="false")] public var ellipse:Ellipse; public function ButtonCustom() { super(); } public function changeColorSkinDisabled(color:uint):void{ ellipse.fill = new SolidColor(color); } }
Mais cela ne change pas la couleur de mon ellipse :cry:

Je ne comprend pas très bien ce que tu veux faire ...
Pourrais tu nous montrer le skin de ton bouton et le code du bouton associé ?

Car moi j'aurai imaginé quelque chose comme ça à peu près :

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"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"  
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/halo"  height="300" width="300">     
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
     <s:states>
        <mx:State name="disabled" />
    </s:states>
     <s:Ellipse height="86" width="96" verticalCenter="0" horizontalCenter="0">
        <s:fill>
          <mx:SolidColor color="#FF0000" color.disabled="blue"/>
         </s:fill>
    </s:Ellipse>
     <s:layout>
        <s:BasicLayout/>
    </s:layout>
</s:Skin>

ça ne te conviens pas cette solution ?

Bah le code du bouton c'est celui qui est au dessus rien de plus . En fait c'est pas vraiment un bouton classique. C'est pour un jeu.

En gros mon bouton à 2 images une pour les states over,up,down et une autre pour pour disabled.
Une fois qu'il y a X boutons "disabled" je dois modifier la couleur de l'image de l'état désactivé pour faire briller la tête du petit personnage qui est dessiné.

Pour cela j'ai besoin d'accéder à une partie du skin depuis le bouton.

voila le code du skin :

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
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
 
<?xml version="1.0" encoding="utf-8"?>
 
<s:Skin 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"  
	xmlns:mx="library://ns.adobe.com/flex/halo">
 
	<fx:Metadata> 
		[HostComponent("myPath.ButtonGrid")] 
	</fx:Metadata> 
 
	<fx:Script> 
		<![CDATA[         
			import flash.filters.BitmapFilterQuality;
		]]>        
	</fx:Script> 
 
	<s:states> 
		<s:State name="up" /> 
		<s:State name="over" /> 
		<s:State name="down" /> 
		<s:State name="disabled" />
	</s:states> 
 
	<!-- UP,OVER,DOWN ICON -->
	<s:BitmapImage 
				   id="imageNormal"
				   source="@Embed('assets/imageNormal.png')"
				   top="0"
				   left="0"
				   width="100%" height="100%"
				   includeIn="up,over,down">
 
	</s:BitmapImage>	
 
	<s:Ellipse id="backGroundDisabled" height="{imageDisabled.height-8}" width="{imageDisabled.width-8}"
			   x="{imageDisabled.x+6}" y="{imageDisabled.y+6}"
			   includeIn="disabled">
		<s:fill>
			<s:LinearGradient>
				<s:GradientEntry color="#7b8d9e"  ratio="0"/>
				<s:GradientEntry color="#e0e0e1"  ratio="0.4"/>
				<s:GradientEntry color="#ffffff"  ratio="1"/>
			</s:LinearGradient>
 
		</s:fill>
	</s:Ellipse>
 
	<!-- DISABLE ICON -->
	<s:BitmapImage id="imageDisabled" source="@Embed('assets/imageDisabled.png')" 
				   top="0"
				   left="0"
				   width="100%" height="100%"
				   includeIn="disabled">
	</s:BitmapImage>
 
	<!-- Text SKIN-->
	<s:Label text="{hostComponent.label}"
			 textAlign="center" 
			 verticalAlign="middle" 
			 fontSize="25"
			 fontWeight="bold"
			 fontFamily="Arial"
			 color="0xffffff"
			 horizontalCenter="1" 
			 verticalCenter="1"
			 includeIn="over"
			 >
		<s:filters>
			<s:BlurFilter blurX="8"  blurY="8" quality="{BitmapFilterQuality.HIGH}" />
		</s:filters>	
	</s:Label> 
 
	<s:Label text="{hostComponent.label}"
			 textAlign="center" 
			 verticalAlign="middle" 
			 fontSize="25"
			 fontWeight="bold"
			 fontFamily="Arial"
			 color="0xffffff"
			 horizontalCenter="1" 
			 verticalCenter="1"
			 excludeFrom="disabled">
	</s:Label> 
 
</s:Skin >

Si tu sais comment accéder aux parties du skin depuis le bouton je suis preneur !