objets différents dans une colonne de datagrid

**Pascale38** · 21/01/2009, 10h12

Bonjour,

et bonne année à tous !

J'aimerai savoir s'il est possible dans une colonne de datagrid, d'avoir pour certaines lignes un composant de type image et pour d'autres de type check box ? Bref, est il possible d'avoir des composants différents dans une colonne ? Et si oui, j'aimerai savoir comment faire bien sûr !!

merci beaucoup,
Pascale38

**Jim_Nastiq** · 21/01/2009, 10h15

les itemRenderer

**Pascale38** · 21/01/2009, 10h34

oui d'accord, mais je ne vois pas comment dans mon item renderer spécifier d'afficher une image dans un cas et une checkbox dans un autre ?

**Jim_Nastiq** · 21/01/2009, 11h03

et bien dans ton itemrenderer tu fais simplement le test qui fait que tu dois affecter une image ou une chackbox

dans la méthode init de mon exemple d'itemRender(cf le billet de mon blog) tu fais ton test et tu créé en AS ton renderer genre (en admettant que tu as un container Canvas monCanvas):

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
 
 
private function init():void
{
       if(data.value == 0)
       {
             var img:Image = new Image();
             ...
             monCanvas.addChild(img);
       }
       else
       {
             var chb:CheckBox = new CheckBox();
             ...
             monCanvas.addChild(chb);
       }
 
}

**Pascale38** · 21/01/2009, 13h17

Je suis en train de mettre en place ta solution et j'ai une petite question concernant le @ devant le nom du chmap du data :
data.@label
quel est sa signification ? j'ai vu cela à plusieurs endroits mais n'ai pas réussi à trouver à quoi cela servait ?
Quand j'essaye d'en mettre un, j'ai l'erreur suivante :
La propriété @ilabel est introuvable...
Peux tu m'éclairer ?
merci !
Pascale38

**Jim_Nastiq** · 21/01/2009, 13h51

il s'agit de l'E4X, pour parser du xml , lorsque tu vois data.@label signifie qu'il récupère la propriété label du noeud xml

dans le cas d'un dataProvider affecter d'une ArrayCollection ce caractère n'a pas lieu d'être

**Pascale38** · 21/01/2009, 15h05

yep merci pour ma culture générale flex !!

voilà déjà un point d'éclairci...
et merci pour ton exemple et ton blog, très très utile !!!

Heu bon maintenant j'ai quelques problèmes avec l'affichage de mon datagrid...
Au premier affichage, j'ai bien mes checkbox et mes images nickel sur les bonnes lignes, mais si jamais je tri sur une colonne, ou si je ferme ma fenêtre et que je la réouvre (mes données restent inchangées) alors là c'est un festival, n'importe quoi s'affiche dans la colonne, ça n'est plus du tout cohérent, je me retrouve par exemple avec 3 checkBox au lieu de 2, avec une image alors qu'il devrait y avoir une checkbox, bref c'est la 4ème dimension

et là j'avoue que je sèche grave...

Si jamais ce genre de problème est connu, voici le code du renderer:

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:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" creationComplete="init()">
	<mx:Script>
		<![CDATA[
		import mx.controls.Image;
		import mx.controls.CheckBox;
 
		private function init():void{
			if(data.validable){
				var chb:CheckBox = new CheckBox();
				chb.selected=data.isSelected;
            	                addChild(chb);
            	                chb.addEventListener(MouseEvent.CLICK, onClick);
			}
			else{
				var img:Image = new Image();
				img.source="../../../../../WebContent/Images/exclam.jpg";
				addChild(img);
							}
       }
       private function onClick(e:MouseEvent):void{
			data.isSelected=!data.isSelected;
		}
        ]]>
    </mx:Script>
 
</mx:VBox>

De plus mon image ne s'affiche pas, pourtant le chemin est bon...

**Pascale38** · 22/01/2009, 09h40

J'ai fait d'autres essais sur un petit projet avec juste un datagrid et une colonne dans laquelle je n'affiche pas toujours la checkbox et j'ai tout le temps le même problème... Sagirait il d'un bug flex ?

**T_bo_** · 22/01/2009, 14h11

Ce n'est pas un bug au contraire flex fait exactement ce que tu lui dit il initialise ton itemrenderer à sa création. Si tu veux que cela suive le changement de tes données appel ta fonction sur l'événement DataChange
(ce point est discuté dans la doc de flex)
De plus comme tu utilise addchild il te faut qlqchose qui le "reverse" je te propose çà comme code :

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
36
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" dataChange="init()">
	<mx:Script>
		<![CDATA[
		import mx.controls.Image;
		import mx.controls.CheckBox;
		
		private function init():void{
                   //je ne suis pas sùr de l'utilité du removeEventListener
                   //ni de son implémentation mais au bénéfice du doute...
                        if(this.getChildByName("chb") != null){
	this.getChildByName("chb").removeEventListener(MouseEvent.CLICK, onClick);
			}
			this.removeAllChildren();
			

			if(data.validable){
				var chb:CheckBox = new CheckBox();
				chb.selected=data.isSelected;
            	                addChild(chb);
            	                chb.addEventListener(MouseEvent.CLICK, onClick);
			}
			else{
				var img:Image = new Image();
				img.source="../../../../../WebContent/Images/exclam.jpg";
				addChild(img);
							}
       }
       private function onClick(e:MouseEvent):void{
			data.isSelected=!data.isSelected;
		}
        ]]>
    </mx:Script>

</mx:VBox>

Pour ton image je ne sais pas vérifie qd mm ton chemin au cas ou

**Pascale38** · 22/01/2009, 14h42

oui super merci, ça marche beaucoup mieux !!!
Je suis bien trop novice dans cette techno, je n'aurai jamais ça trouvée toute seule !! Vraiment merci !

Pour mon image si j'utilise le même chemin mais pas dans le script, cela fonctionne, c'est à dire en faisant cela :

Code :

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

<mx:Image source="@Embed('../../../../../WebContent/Images/exclam.jpg')" />

et bien l'image s'affiche correctement...

C'est vraiment bizarre, surement encore une boulette de ma part ???

**T_bo_** · 22/01/2009, 14h58

Je vote pour la boulette

ton chemin est celui de l'image par rapport à ton composant c'est pour cela que cela marche quand tu "compile" ton image avec l'application (ce que tu fait avec @Embed).
Par contre de la manière dont tu fais appel a ton image dans ton code (sans embed donc mais juste source) tu demande a flash de charger l'image comme le ferait une balise image dans une page html il faut donc que le chemin de ton image soit "relatif" à ton application (a ton swf si tu préfère) une fois publié.

(heu je sens que je suis pas clair donc regarde l'organisation de ton dossier bin-debug et prends le chemin relatif entre ton appli.swf et ton image probablement juste çà ../WebContent/Images/exclam.jpg)

A plus

Ps si un "bon" flexeur pouvait me reseigner sur ce point çà m'intéresse:

Code :

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

1
2
3
4
5
 //je ne suis pas sùr de l'utilité du removeEventListener
 //ni de son implémentation mais au bénéfice du doute...
                        if(this.getChildByName("chb") != null){
	this.getChildByName("chb").removeEventListener(MouseEvent.CLICK, onClick);
			}

merci

**Pascale38** · 22/01/2009, 15h03

si, si tu es très clair, mais j'avais essayé avec et sans embeded : même punition

Par contre ça, ça marche :
je déclare

Code :

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

1
2
3
 
[Embed("../../../../../WebContent/Images/exclam.jpg")]
        private var exclam:Class;

et ensuite je fais :

Code :

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

img.source=exclam;

et mon image s'affiche...
peut être que c'est clair pour les flexeurs, mais pour moi c'est assez mystérieux...
Enfin c'est pas grave je met le post à Résolu !!!
et encore merci !!

**Jim_Nastiq** · 22/01/2009, 15h16

je ne comprend pas ce qui ne fonctionne pas Pascale ... peux tu nous mettre le code qui ne fonctionne pas et que tu ne comprends pas...

cela fonctionne:

Code :

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

1
2
3
4
[Embed("../../../../../WebContent/Images/exclam.jpg")]
private var exclam:Class;
 
img.source=exclam;

Code :

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

1
2
 
img.source="../../../../../WebContent/Images/exclam.jpg";

Code :

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

<mx:Image source="@Embed('../../../../../WebContent/Images/exclam.jpg')" />

Code :

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

<mx:Image source="../../../../../WebContent/Images/exclam.jpg" />

**Pascale38** · 22/01/2009, 15h25

dis tout de suite que je suis pas claire

ça fonctionne:

Code :

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

1
2
3
4
5
 
[Embed("../../../../../WebContent/Images/exclam.jpg")]
private var exclam:Class;
 
img.source=exclam;Code :

ça fonctionne pas:

Code :

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

1
2
 
img.source="../../../../../WebContent/Images/exclam.jpg";

ça fonctionne pas:

Code :

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

1
2
 
img.source="@Embed('../../../../../WebContent/Images/exclam.jpg')";

ça fonctionne:

Code :

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

<mx:Image source="../../../../../WebContent/Images/exclam.jpg" />

ça fonctionne:

Code :

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

<mx:Image source="@Embed('../../../../../WebContent/Images/exclam.jpg')" />

effectivement c'est plus clair comme ça !!!

**Jim_Nastiq** · 22/01/2009, 15h42

tu n'es pas claire tu es Pascale

(désolé j'ai pas résisté)

pour revenir au probleme, ceci devrait fonctionner...

Code :

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

img.source="../../../../../WebContent/Images/exclam.jpg";

dans ton répertoire de sortie(celui ou est compilé ton swf, tu as bien vérifié que par rapport a ton swf ton image se trouve à cet endroit :

../../../../../WebContent/Images/exclam.jpg

**Pascale38** · 22/01/2009, 16h09

Jim tu sors ->[]

le chemin à partir de mon swf donne ça

Code :

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

img.source="../WebContent/Images/exclam.jpg";

j'avais essayé ça aussi, mais ça ne fonctionne pas non plus.

Mais si je suis ton raisonnement, cela veut dire que selon que je suis dans la partie script du mxml ou dans l'autre partie (je ne sais pas comment l'appeler), le chemin relatif à renseigner n'est pas le même ????
Dans le script -> chemin relatif par rapport au swf
Dans une balise <mx Image/> chemin relatif à l'emplacement du fichier source ???
(je sens que je vais encore me faire appeler claire moi

)
J'avoue que je suis un peu perdue...

**T_bo_** · 22/01/2009, 16h23

par curiosité peux tu essayer de garder ce chemin mais de pré-dimmensionné ton composant image.
img.source="../WebContent/Images/exclam.jpg";
img.width= la taille de ton image
etc...