IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Flex Discussion :

Composant personnalisé dans dataGrid.


Sujet :

Flex

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2004
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Février 2004
    Messages : 35
    Par défaut Composant personnalisé dans dataGrid.
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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é:



    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <mx:DataGridColumn headerText="Média" width="220" itemRenderer="templates.lecteur_multimedia" dataField="urlMedia" />
    Merci d'avance!!

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    Septembre 2003
    Messages
    10
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2003
    Messages : 10
    Par défaut
    Bonjour,

    Peux-tu nous montrer ton itemRender ?

    Merci

  3. #3
    Membre Expert
    Avatar de Jim_Nastiq
    Homme Profil pro
    Architecte, Expert Flex
    Inscrit en
    Avril 2006
    Messages
    2 335
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Architecte, Expert Flex
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2006
    Messages : 2 335
    Par défaut
    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

    Pensez vraiment à effectuer une recherche avant de poster, ici et sur un moteur de recherche! c'est la moindre des choses
    Pensez au tag

    Mon Blog sur la techno Flex
    Ma page sur Developpez.com

    Jim_Nastiq

  4. #4
    Membre averti
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2004
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Février 2004
    Messages : 35
    Par défaut 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 : 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  5. #5
    Membre expérimenté Avatar de samy2525
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    259
    Détails du profil
    Informations personnelles :
    Localisation : France, Hauts de Seine (Île de France)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 259
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  6. #6
    Membre émérite
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    793
    Détails du profil
    Informations personnelles :
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations forums :
    Inscription : Avril 2009
    Messages : 793
    Par défaut
    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.

  7. #7
    Membre chevronné
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    319
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Janvier 2004
    Messages : 319
    Par défaut
    +1 remarque intéressante jylaxx

  8. #8
    Membre averti
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2004
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Février 2004
    Messages : 35
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    private function loadContent(p:Object) {...}
    en
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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!

  9. #9
    Membre émérite
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    793
    Détails du profil
    Informations personnelles :
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations forums :
    Inscription : Avril 2009
    Messages : 793
    Par défaut
    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é...

    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.

Discussions similaires

  1. Réponses: 1
    Dernier message: 04/05/2011, 17h10
  2. Inclure une image png dans un composant personnalisé
    Par jv2759 dans le forum Débuter
    Réponses: 8
    Dernier message: 20/08/2009, 13h51
  3. Réponses: 5
    Dernier message: 24/04/2009, 17h11
  4. Ajouter un composant personnalisé dans la boite à outils
    Par soad dans le forum Windows Presentation Foundation
    Réponses: 3
    Dernier message: 26/01/2009, 20h05
  5. Réponses: 3
    Dernier message: 18/01/2008, 16h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo