Discussion :

[yvancoyaud]

Bonjour,

Je voudrais mettre un bouton ou une image dans un champ TextInput.
Pour ça j'ai créé une classe actionScript basée sur le spark.components.TextInput.

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
package {
	import spark.components.Image;
	import spark.components.TextInput;
 
	public class InputClear extends TextInput {
		private var clearImage:Image;
		public function InputClear() {
			super();
			clearImage =new Image();
			clearImage.width=10;
			clearImage.height=10;
			clearImage.source ="@Embed('assets/clear.png')";
			this.addChild(clearImage);
		}
	}
}

Le problème vient du "this.addChild(clearImage)" car si je le mets en commentaire, mon champ "textInput" s'affiche, sans l'image bien sûr, si j'enlève le commentaire, rien ne s'affiche plus ni le champ 'texInput' ni l'image.

Une petite aide serait la bien venue...
Merci
YC

[Jim_Nastiq]

Salut,

Tout d'abord avec les composants Spark il faut utiliser la méthode addElement et non plus addChild.

Ensuite, étudies le cycle de vie d'un composant spark, dans ton exemple tu créé l'enfant dans le constructeur, il est préférable de le faire dans une surcharge de la méthode createChildren.

Une fois ces modifs effectuées ca devrait aller mieux, enfin je crois

[yvancoyaud]

Merci de ta réponse.
Effectivement, je rame seulement depuis quelques mois avec flex et je dois faire attention a ce phénomène de 'cycle de vie'.
j'ai donc créé un listener sur la création de mon champ TextInput

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
package {
	import mx.controls.Alert;
	import mx.events.FlexEvent;
	import mx.states.AddChild;
 
	import spark.components.Button;
	import spark.components.Image;
	import spark.components.TextInput;
 
	public class InputClear extends TextInput {
		private var clearButton:Button;
		private var clearImage:Image;
		public function InputClear() {
			super();
			this.prompt="Code client ?";
			this.addEventListener(FlexEvent.CREATION_COMPLETE,createImage)
		}
		public function createImage(event:FlexEvent):void{
			clearImage =new Image();
			clearImage.width=10;
			clearImage.height=10;
			clearImage.source ="@Embed('assets/clear.png')";
			this.addChild(clearImage);
//			this.addElement(clearImage);
 
		}	
	}
}

Je passe bien dans "createImage" et le champ TextInput s'affiche, mais pas l'image. (ça avance !!)
Le "addElement" me génère une erreur de compilation

-1061: Appel à la méthode addElement peut-être non définie, via la référence de type static InputClear.
-clearImage
-Appel à une méthode addElement qui ne semble pas définie

Je pense que l'erreur vient de là.....
Y a-t-il un import spécial à faire pour que ça marche ?

YC

[Jim_Nastiq]

Je te confirme qu'il faut bien utiliser addElement sur les composant spark, en l'état ton code plante. Si tu ne le vois pas c'est que tu n'as pas du installer le flash player debugger... mais impossible de faire un addchild sur un spark cela lève une exception.

Pour le addElement en effet, le compilo rale mais garde à l'esprit que addChild n'est pas possible sur les spark
La façon la plus propre de le faire est de passer par le systeme de skin voici comment :

ta classe ClearInput.as :

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
29
30
31
32
33
34
35
 
package
{
	import flash.events.MouseEvent;
 
	import mx.controls.Alert;
	import mx.events.FlexEvent;
 
	import spark.components.Button;
	import spark.components.Image;
	import spark.components.TextInput;
 
	public class ClearInput extends TextInput
	{
		[SkinPart(required="true")]
		public var clearButton:Button;
		[SkinPart(required="true")]
		public var clearImage:Image;
 
		public function ClearInput() {
			super();
			this.prompt="Code client ?";
		}
 
		override protected function partAdded(partName:String, instance:Object):void
		{
			clearButton.addEventListener(MouseEvent.CLICK, onClickButton);
		}
 
		protected function onClickButton(evt:MouseEvent):void
		{
			Alert.show("Click sur le bouton");	
		}
	}
}

ton skin :

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
 
...
...
...
le code que tu veux garder ou modifier ou supprimer 
    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
    <s:Label id="promptDisplay" maxDisplayedLines="1"
                verticalAlign="middle"
                mouseEnabled="false" mouseChildren="false"
                includeIn="normalWithPrompt,disabledWithPrompt" 
                includeInLayout="false"
                />
	<s:Image id="clearImage" source="@Embed(source='Close-32.png')"/>
	<s:Button id="clearButton"/>
</s:SparkSkin>

ton appli :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<local:ClearInput  skinClass="ClearInputSkin">

[yvancoyaud]

Ok, on peut éliminer le problème en passant par un système de skin. (je n'ai pas encore testé)
Mais, puisque le 'addElement' remplace le 'addChild', comment peut on l'utiliser et que dois-je faire pour que le compilateur ne me jette pas ?

J'ai fait le meme test avec des composant mx, (en employant addChild ) et ça marche très bien. y a-t-il un inconvénient à utiliser des composants 'mx' et 's' dans la même application.

merci de tes réponses.
YC

[Madfrix]

Salut,

concernant la methode addElement, elle n'existe que pour les composant issus de SkinnableContainer. Or, ton TextInput est issu de SkinnableComponent.

En gros, tu as 2 types de composants : les composants conteneurs et les composants non conteneurs.

Il est logique qu'un champs texte (TextInput) ne contienne pas de conteneur car il n'en a pas besoin. Il est donc impossible d'utiliser addElement. Quand à addChild que Jim_Nastiq te conseille fort justement de ne pas utiliser, il a raison car si tu regardes le code de la methode dans SkinnableComponent tu verras que tu as toujours une Error :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
override public function addChild(child:DisplayObject):DisplayObject
{
    throw(new Error(resourceManager.getString("components", "addChildError")));
}

(et addChild n'est pas overrider plus bas dans la hierarchie).

Seule solution : étendre comme te l'a montré Jim_Nastiq le composant et son skin associé ou refaire un composant perso à partir de SkinnableContainer.

[yvancoyaud]

En fait j'ai garder le composant TextInput de mx et ça marche comme je veux.
Quand mon expérience Flex sera plus affirmée, j’essaierai de revoir ce problème.

Merci de vos réponse.
YC