Composant personnalisé dans dataGrid.

Version imprimable

Bonjour à tous et à toutes,
Je développe actuellement une application flex permettant d'administrer une carte google map. Ainsi on peut créer des nouveaux points auxquels on peut lier des medias (photo(s), vidéo). Autrement dit mes points stockés dans un fichier xml et sont représenter comme ci-dessous :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <point id="614FCC01-8836-A084-FFCF-2F960819B727"> <type>Image</type> <categorie>faune</categorie> <longitude>-0.31058900292970204</longitude> <latitude>42.98590553566259</latitude> <isOnBandeau>false</isOnBandeau> <description>desc5</description> <detail>desc5</detail> <urlMini>http://localhost:8888/Googlemap/img/barre_slider.png</urlMini> <urlMedia> <media>barre2_hover.png</media> </urlMedia> </point>
Ou urlMedia peut contenir une/plusieurs media images, ou un seul media vidéo.

Jusqu'ici tout va bien. Ensuite, pour avoir un aperçu des points, j'utilise un datagrid qui résume pour chaque point (un point par ligne) toutes les infos sur celui-çi, voici un screenshot pour plus de clarté:

http://www.imageshotel.org/images/an...endatagrid.png

Comme vous pouvez le voir sur ce screen, j'ai ajouté un composant pour chaque point qui permet de lire la vidéo de celui-çi, ou de voir la/les image(s) associés. Il fonctionne correctement au démarrage.
Cependant si j'ouvre plusieurs composant aperçu en même temps, que cela modifie la taille de mon datagrid de façon à ce que la barre de scroll verticale apparaisse mes ennuis commences! En effet si je descend avec le scroll de manière à ce qu'un block aperçu ne soit plus visible les images ou vidéos de celui-ci se mélange entre les différents composant. Par exemple une image d'un point va se retrouver dans l'aperçu d'un autre point, bref tout se mélange. Etant donnée que chaque composant d'aperçu est une nouvelle instance de mon composant comment est il possible que les valeurs des sources (des images et vidéos) passe d'un composant à un autre?
Bon j'espère avoir été clair car le problème n'est pas évident à décrire, si vous avez besoin d'une source particulière, d'autres screenshot ou n'importe quoi qui peut vous servir pour m'aider dans la résolution de ce problème n'hésitez pas à me demander!
Autre information, pour lier mon composant à mon dataGrid j'utilise un itemRenderer comme ci-dessous:

Code:

<mx:DataGridColumn headerText="Média" width="220" itemRenderer="templates.lecteur_multimedia" dataField="urlMedia" />

Merci d'avance!!

12/05/2009, 13h04
Juwau

Bonjour,

Peux-tu nous montrer ton itemRender ?

Merci ;)
12/05/2009, 13h42
Jim_Nastiq

comportement que tu peux peut être contourner en empêchant l'ouverture de plusieurs aperçu simultanément, non?
As tu tenté de faire du debug pas à pas pour voir exactement ce qu'il se passe. vérifie tout tes instances de ton player, des renderers, ... difficile de t'aider à distance sur ce genre de soucis en fait :?

Merci de vos réponses!

Tout d'abord pour répondre à ta remarque Jim_Nastiq, j'ai pensé à empêcher l'ouverture de plusieurs aperçu simultanément mais je ne vois pas comment accéder à mes composants une fois chargée dans mon DataGrid depuis l'application parente sachant que l'itemRenderer est chargé seul, sans que je "l'instancie" ou ne l'ajoute manuellement! Sinon cela me semble la meilleure façon de faire pour l'instant. D'ailleur si quelqu'un peut me dire comment accéder aux propriétés de mes composants je suis preneur.
Enfin Juwau voici mon itemRenderer, je ne l'avais pas posté car cela fait quand même un bon bout de code ^^, merci d'avance

Coté AS3, les deux principales fonctions qui gère l'ouverture et l'ouverture du media

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
/**
		 * 	Directives d'importations
		 */ 
		import mx.controls.VideoDisplay;
		import mx.events.VideoEvent;
		import mx.controls.Alert ;
		import mx.utils.UIDUtil;
		import gs.*;
 
		/**
		 * variables
		 */ 
		private var _id:String = UIDUtil.createUID();
		private var isOpen:Boolean = false;
		[Bindable]
		private var vid:VideoDisplay ;
		[Bindable]
		private var tabImg:Array = new Array;
		[Bindable]
		private var gal:Image = new Image;
		[Bindable]
		private var img:Image = new Image;
		private var _localAdress:String = "http://localhost:8888/GoogleMap/";
		/**
		 * 	Fonctions
		 */ 
 
		private function init():void {
			ecran.height = 0;
			this.height = 56;
			//this.loadContent(data);
		}
                // gère l'ouverture et la fermeture du composant
		private function onClick(event:MouseEvent):void {
			if (!this.isOpen) {
				TweenMax.to(ecran, 1, {height:200});
				TweenMax.to(this, 1, {height:256,onComplete:loadContent,onCompleteParams:[data]});
				//TweenMax.to(this, 1, {height:256});
				TweenMax.to(myBox, 1, {height: 24});
				prec.enabled = true;
				suiv.enabled = true;
				play.enabled = true;
				pause.enabled = true;
				icone.source = this._localAdress +"ressources/petit.png";
				modText.text = "Fermer";
				this.isOpen = true;
			}
			else {
				TweenMax.to(ecran, 1, {height:0});
				TweenMax.to(this, 1, {height:32});
				TweenMax.to(myBox, 1, {height: 0});
				prec.enabled = false;
				suiv.enabled = false;
				play.enabled = false;
				pause.enabled = false;
				icone.source = this._localAdress + "ressources/grand.png";
				modText.text = "Ouvrir";
				this.isOpen = false;
			}
 
		}
		//fonction qui charge le contenu dans le visionneur, apellé après qu'il soit ouvert
		private function loadContent (p:Object):void {
			//Alert.show(p.type);
			var type:String = p.type ;
			var conte:XMLList = p.urlMedia as XMLList;
			var xml:XML;
			switch (type) {
				case 'Image':
					try {this.ecran.removeChildAt(0);} catch (e:Error) {}
					this.img = new Image();
					this.img.id = UIDUtil.createUID();
					this.img.width = 190;
					this.img.height = 190;
					xml = XML("<urlMedia>" + conte.media + "</urlMedia>");
					this.img.source = this._localAdress + "img/" +xml.toString()+ "?forcerefresh=" + new Date().getTime();
					this.ecran.addChild(this.img);
					prec.enabled = false;
					suiv.enabled = false;
					play.enabled = false;
					pause.enabled = false;
					break;
				case 'Vidéo': 
					try {this.ecran.removeChildAt(0);} catch (e:Error) {}
					this.vid = new VideoDisplay;
					this.vid.id = UIDUtil.createUID();
					this.vid.width = 190;
					this.vid.height = 190;
					xml = XML("<urlMedia>" + conte.media + "</urlMedia>");
					this.vid.source = this._localAdress + "img/" +xml.toString()+ "?forcerefresh=" + new Date().getTime();
					this.vid.addEventListener(VideoEvent.READY,stopVid);
					this.ecran.addChild(this.vid);
					prec.enabled = false;
					suiv.enabled = false;
					play.enabled = true;
					pause.enabled = true;
					break;
				case 'Gallerie' : 
					try {this.ecran.removeChildAt(0);} catch (e:Error) {}
					prec.enabled = true;
					suiv.enabled = true;
					play.enabled = false;
					pause.enabled = false;
					this.gal = new Image ;
					this.gal.id = UIDUtil.createUID();
					tabImg = new Array;
					this.gal.width = 190;
					this.gal.height = 190;
					var i:Number = 0;
					for each (var x:XML in conte.media) {
						tabImg[i] =  x.toString();
						i++;
					}
					this.gal.source = this._localAdress +"img/" + tabImg[0]+ "?forcerefresh=" + new Date().getTime();
					this.ecran.addChild(this.gal);
					break;
				case 'Texte' : break;
			}
 
		}

Partie mxml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<mx:Canvas  creationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="32"><mx:HBox id='myBox' width="200" horizontalGap="1" horizontalAlign="center" height="0" bottom="0">
		<mx:Button id='prec' click="prevImg(event)" label="&lt;" width="32" height="22" textAlign="left" fillAlphas="[1.0, 1.0]" fillColors="[#686E0A, #A3AF1F]"/>
		<mx:Button id='pause' click='pauseVid(event)' label="||" height="22" width="38" textAlign="left" fillAlphas="[1.0, 1.0]" fillColors="[#686E0A, #A3AF1F]"/>
		<mx:Button id='play' click='playVid(event)' label="Play" height="22" textAlign="left" fontWeight="bold" width="53" fillAlphas="[1.0, 1.0]" fillColors="[#686E0A, #A3AF1F]"/>
		<mx:Button id='suiv' click="nextImg(event)" label="&gt;" width="34" height="22" textAlign="left" fillAlphas="[1.0, 1.0]" fillColors="[#686E0A, #A3AF1F]"/>
	</mx:HBox>
	<mx:Canvas id='container' width="200" height="23" top="0" left="0" backgroundColor="#A3AF1F" borderStyle="inset" borderColor="#686E0A">
		<mx:Label x="147" y="1" id='modText' click="onClick(event)"  text="Ouvrir" fontWeight="bold" color="#363229"/>
		<mx:Label x="5" y="1" text="Aperçu" color="#363229"/>
		<mx:Image id='icone' x="134" y="6" width="12" height="12" source="http://localhost:8888/GoogleMap/ressources/grand.png"/>
	</mx:Canvas>
	<mx:Canvas x="0" id='ecran' y="28" width="200" height="0" borderStyle="inset" borderColor="#A3AF1F">
	</mx:Canvas>
</mx:Canvas>

Voila, en tout cas merci de vous pencher sur le problème et je comprend que le problème soit difficile à résoudre à distance! Merci

Variable Global

Bonsoir anfalsh, en faite j'ai eu le meme probleme que toi en faite toutes tes composant de base comme Image, Label, et tous ce que tu veux sont declarer comme etant des variable Globale, il est vrai qu'on utilise un ItemRenderer on est sencé avoir des reference differente a chaque fois, et c'est le cas, cependant Flex ne gere pas super bien qu'on tu as des itemRenderer Compliqué ou bien tu as bcp d'element dans un dataGrid, pour ca il faut que tu créer tes element au moment ou tu override la fonction createChildrern en gro tu aura un truc comme ca
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 private img1 : Image; private img2 : Image; override protected function createChilden ():void{ img1 : new Image (); img2 : new Image (); super.createChilderen ; addChild(img1); addChild(img2); }
// comme ca tu es sur que Flex ne melangera pas les reference

voila j'espere que ca va t'aider

Samy

12/05/2009, 22h43
jylaxx

Flex gère un cache d'instances d'ItemRenderer qui sont réutilisés dans la grille en fonction de sa taille. Il n'y a pas une instance d'ItemRenderer par ligne de la grille.
Le problème ressemble à la réutilisation d'un ItemRenderer dans son état précédent. Il semble donc que la procédure d'initialisation ne soit pas exécutée au bon moment.
Je ne sais pas si c'est l'origine du problème mais ce peut être une piste si elle n'a pas été déjà explorée.
13/05/2009, 10h03
Kantizbak

+1 remarque intéressante jylaxx
13/05/2009, 10h15
anfalsh

Merci samy2525 pour ta réponse elle semble m'avoir mis sur la bonne piste, cependant j'ai un peu de difficulté avec la définition de la fonction createChildren. D'après ce que j'ai lu sur internet la fonction est appelée lorsque on ajoute un sous composant dans un composant, donc si en gros il faudrait que je modifie ma fonction

Code:

private function loadContent(p:Object) {...}

en

Code:

override protected function createChilden ():void{...}

???
Je pense avoir mal compris car qu'est ce qui va déclencher cette fonction? comment mes images ou vidéos vont se rajouter? Enfin voila je suis un peu perdu j'ai beau cherché des exemples pour createChildren mais je ne vois pas comment l'adapter à mon cas.

En ce qui concerne ta réponse jylaxx tu parle de l'initialisation de mon composant lors de son ajout dans le dataGrid? Comment je peut agir sur ce paramètre? En tout cas mon erreur semble bien venir de l'état antérieur de mon composant merci de ta remarque.

Merci d'avance de votre aide!
13/05/2009, 13h34
jylaxx

Tout d'abord l'utilisation des itemRenderer n'est pas la chose la plus simple de Flex. Il est donc important de bien comprendre comment cela fonctionne avec un ItemRenderer simple avant d'en utiliser un compliqué...

Citation:

Rappel:
About the item renderer and item editor life cycle
Flex creates instances of item renderers and item editors as needed by your application for display and measurement purposes. Therefore, the number of instances of an item renderer or item editor in your application is not necessarily directly related to the number of visible item renderers. Also, if the list control is scrolled or resized, a single item renderer instance may be reused to represent more than one data item. Thus, you should not make assumptions about how many instances of your item renderer and item editor are active at any time.

Because Flex can reuse an item renderer, ensure that you fully define its state. For example, you use a CheckBox control in an item renderer to display a true (checked) or false (unchecked) value based on the current value of the data property. A common mistake is to assume that the CheckBox control in the item renderer is always in its default state of unchecked. Developers then write an item renderer to inspect the data property for a value of true and set the CheckBox control to checked if found.

However, you must take into account that the CheckBox may already be checked. So, you must inspect the data property for a value of false, and explicitly uncheck the control if it is checked.

Ton ItemRenderer doit comporter une propriété data dont les attributs doivent être associés aux composants de rendu par des bind.
C'est cette propriété qui est modifiée à chaque fois que l'ItemRenderer est utilisé.
Difficile d'aller plus loin sans avoir une vision totale de la classe de rendu.
13/05/2009, 14h11
anfalsh

Ok, en tout cas merci de tes efforts et de tes explication, je vais effectivement me pencher plus en profondeur sur le fonctionnement des itemRenderer ce qui me permettra peut être de corriger ce problème.
Anfalsh.

ItemRenderer

Bonsoir tous le monde, avant tous je veux juste poser une question est ce que quelqu'un sait comment rajouter la balise Bouton car j'ai recu un mail du modérateur en me disant il faut rajouter la balise bouton j'ai pas trop compris ???

sinon revenons à nos probleme, si j'ai bien compris tu as un dataGrid dans lequel tu affiche des images vidéo et autres choses, j'imagine aussi que tu as définit une classes AS du style MonItemRenderer qui aura l'utilité de t'afficher les images ou les vedio dans une collone donné du DataGrid car le dataGrid de base ne peut pas le faire.

donc en premier lieu ta classe MonItemRenderer doit etendre un conteneur, dans d'autres cas cen'est pas obligé par exemple tu veux rajouter un checkBox pour les elements de ta dataGrid ben tu etends directement la class CheckBox, bref

dans ton cas on va dire tu va etendre HBox
Code:

1 2 - comment les données sont passés à ton ItemRenderer ????
il y a un attribut qui s'appelle data se dernier peu contenir n'importe qu'elle type d'objet donc pour recevoir les données d'une ligne tu doit overrider la fonction set data en gros tu aurra ca
Code:

1 2 3 4 5 6 7 8 9 override function set data(value : Object):void{ if(value){ // value represente une lige de ta dataGrid donc tu peut recuperer l'image ou la vedio que tu veux afficher } super.data; }
- maintenant on va construire notre affichage sachant que je vais afficher des images je vais creer un objet Image en global et l'instancier juste aux moment ou je veux le rajouter a mon composant ItemRenderer

donc j'aurai un truc comme ca
private var img : Image; je reprend le set data
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 override function set data(value : Object):void{ if(value){ // value represente une lige de ta dataGrid donc tu peut recuperer l'image ou la vedio que tu veux afficher imagine que la dataProvider de ton DataGrid est une collection d'objetc de type MyObject ce dernier contient des attribut qui renseigne l'url des images qu'on va nomé source // a ce niveau je vais faire comme ca var obj : MyObject = value as MyObject; if(obj){ // à ce moment j'affecte l'url de l'image qu je veux afficher au composant image de mon ItemRenderer img.source = obj.source } } super.data; }
Code:

1 2 3 4 5 6 7 8 9 10 override protected function createChildren ():void{ // c'est ici que j'initialise mon objet image // c'est sur que tout le temps tu aura des references defirentes et dans ce cas la tu aura pas la problematique que tu as eu img = new Image(); super.createChildren (); // je rajoute mon image à mon ItemRenderer qui est en meme temps une Hbox car il etends La Hbox addChild(img) }
et voila j'espere que j'etais un peu claire

Bon courage

13/05/2009, 21h57
ellene

Ce n'est pas la balise bouton mais CODE (ça correspond au # dans les petites icônes quand tu écris un message.
Par exemple pour le message que tu viens de poster :
- clique sur le bouton Editer
- sélectionne ton code et clique sur le bouton CODE (#) et tu verras ton code sera nettement plus sympa ;).
13/05/2009, 22h01
samy2525

Merci ellene

Merci ellene, c'est vrai c'est nettement plus sympa

:yaisse2:
14/05/2009, 16h12
T_bo_

sur ton composant (mxml) rajoute un listener sur dataChange qui relance ta fonction init() (qui se charge de passe à ton composant les differentes valeur des objets soit : dataChange="init()" ou loadContent. Cela pourrait bien résoudre ton soucis en repeuplant ton composant avec les data de la ligne qu'ils occupent.
Car pour l'instant ils recuperent "data" que sur le creation complete il ne sont donc pas regenerer quand tu scroll vu que flex les recycle.
18/05/2009, 10h34
anfalsh

Merci à tous pour vos propositions, j'ai fais une pause dans cette partie de mon projet car il y avait d'autre priorité, cependant je note avec soins toutes vos remarques, T_bo_ j'ai essayer ta technique, cela empêche la chargement de mon media dans mon composant Aperçu, mais je n'ai pas approfondi la chose, peut être dois je modifier certaines choses pour que cela marche. samy2525 je n'ai pas créé de classe as3 pour mon composant, j'ai utilisé un nouveau composant mxml donc mon as3 ce trouve dans la balise <mx:script ...>, j'essayerais donc ta solution qui m'a l'air très intéressante! Je vous tiendrez au courant de l'évolution. Merci à tous de votre aide. Anfalsh