Discussion :

[G4uthier]

Bonjour,

j'aimerais afficher dans mon treemap des images à la place du texte. (treemap composant : http://code.google.com/p/flex2treemap/)
J'ai essayé comme ceci, mais ca ne fonctionne pas:

Code :

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

1
2
3
4
5
6
7
8
9
 
<toolbox:TreeMap id="tree" dataProvider="{ArrayVideo}"
labelField="titre"  width="902" height="451" y="0" x="0" >
                <toolbox:leafRenderer>
                        <mx:Component>
                                        <mx:Image source="image" />
                        </mx:Component>
                </toolbox:leafRenderer>
</toolbox:TreeMap>

erreur:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
TypeError: Error #1034: Echec de la contrainte de type*: conversion de YoutubeVideo_inlineComponent1@2a7bb0b1 en com.flextoolbox.controls.treeMapClasses.ITreeMapLeafRenderer impossible.
	at com.flextoolbox.controls::TreeMap/getLeafRenderer()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1661]
	at com.flextoolbox.controls::TreeMap/refreshBranchChildRenderers()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1639]
	at com.flextoolbox.controls::TreeMap/commitProperties()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1463]
	at mx.core::UIComponent/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5807]
	at mx.managers::LayoutManager/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:539]
	at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:689]
	at Function/http://adobe.com/AS3/2006/builtin::apply()
	at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8628]
	at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8568]

On m'a dit que Image n' implementer pas l'interface ITreeMapLeafRenderer.

Savez vous comment je dois procéder?


Merci

[ellene]

Je te conseille de créer un composant à part pour ton itemRenderer. Ce qui va donner :

1- Création de l'item renderer composant.MonComposant avec implémentation de l'interface voulu :

Code :

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

1
2
3
4
5
6
7
8
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” implements=”com.flextoolbox.controls.treeMapClasses.ITreeMapLeafRenderer”>

<!-- ici ton code, image ... -->

</mx:Canvas>

2- Tu l'ajoutes à ta TreeMap et le tour est joué normalement

Code :

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

1
2
3
4
 
<toolbox:TreeMap id="tree" dataProvider="{ArrayVideo}"
labelField="titre"  width="902" height="451" y="0" x="0" 
leafRenderer="composant.MonComposant">

[G4uthier]

malhereusement ca ne fonctionne pas j'ai maintenant cette erreur la au lancement de mon appli :

Code :

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

1
2
3
4
5
6
7
8
9
10
ypeError: Error #1034: Echec de la contrainte de type*: conversion de myComponents::monComposant@3edd00a1 en com.flextoolbox.controls.treeMapClasses.ITreeMapLeafRenderer impossible.
	at com.flextoolbox.controls::TreeMap/getLeafRenderer()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1661]
	at com.flextoolbox.controls::TreeMap/refreshBranchChildRenderers()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1639]
	at com.flextoolbox.controls::TreeMap/commitProperties()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1463]
	at mx.core::UIComponent/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5807]
	at mx.managers::LayoutManager/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:539]
	at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:689]
	at Function/http://adobe.com/AS3/2006/builtin::apply()
	at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8628]
	at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8568]

je deviens fou avec ce treemap

[ellene]

Tu as bien implémenter comme je l'ai mis dans l'exemple précédent ?

[G4uthier]

oui j'ai creer un composant

Code :

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

1
2
3
4
5
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
	  <mx:Image source="{data.image}"/>	
</mx:Canvas>

et dans mon code j'ai ca

Code :

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

1
2
3
4
 
<toolbox:TreeMap id="tree" dataProvider="{ArrayVideo}"
	labelField="titre"  width="902" height="451" y="0" x="0" 
	leafRenderer="myComponents.monComposant">

[ellene]

Il te manque un partie que tu n'as pas vu dans le code que je t'ai donnée, je le met en gras tu va peut être mieux voir :

Code :

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

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" implements=”com.flextoolbox.controls.treeMapClasses.ITreeMapLeafRenderer”>
	  <mx:Image source="{data.image}"/>	
</mx:Canvas>

Si tu n'implémentes ITreeMapLeafRenderer comme il le veut, c'est normal qu'il rale.

[G4uthier]

Merci grace à toi j'avance
mais en rajoutant ceci il me dit:

Code :

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

1
2
3
 
1044: La méthode d'interface get selected de l'espace de nom com.flextoolbox.controls.treeMapClasses:ITreeMapItemRenderer n'est pas implémentée par la classe myComponents:monComposant.	YoutubeVideo/src/myComponents	monComposant.mxml	line 2	1250166955422	12080
1044: La méthode d'interface set selected de l'espace de nom com.flextoolbox.controls.treeMapClasses:ITreeMapItemRenderer n'est pas implémentée par la classe myComponents:monComposant.	YoutubeVideo/src/myComponents	monComposant.mxml	line 2	1250166955423	12081

impossible de compiler :/

[ellene]

Et ben il te faut définir le getter selected maintenant. Et il y a probablement autres choses à implémenter aussi, je te conseille de regarder la documentation pour voir ce qu'il te faut définir et à quoi ça sert : http://www.flextoolbox.com/component...documentation/

[G4uthier]

suis-je sur la bonne piste parce que je dois t'avouer que je suis un peu dépassé ...

mon code:

Code :

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

1
2
3
<toolbox:TreeMap id="tree" dataProvider="{ArrayVideo}"
	labelField="titre"  width="902" height="451" y="0" x="0" 
	leafRenderer="myComponents.renderers">

mon package mycomponents :

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
 
// ActionScript file
package myComponents {
 
 
      import mx.controls.Image;
      import mx.controls.listClasses.IListItemRenderer;
      import mx.core.UIComponent;
      import mx.events.FlexEvent;
      import com.flextoolbox.controls.treeMapClasses.*;
      import mx.controls.Alert;
 
      public class renderers extends UIComponent implements ITreeMapLeafRenderer
      {	
		  public function renderers()
           {
           		super();
            }     	
 
			// Internal variable for the property value.
 
			private var _data:Object;
			  // Make the data property bindable.
 
			[Bindable("dataChange")]
			 // Define the getter method.
			public function get selected():Boolean{
				return _data;
			}
 
		    public function set selected(value:Boolean):void {
		    	_data = value;
				 dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		    }
 
			public function get data():Object {
		        return _data;
		    }
		    // Define the setter method, and dispatch an event when the property
 
		    // changes to support data binding.
 
		    public function set data(value:Object):void {
		        _data = value;
		        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		    }
 
		      	public var editImg:Image; 
 
 
				override protected function createChildren():void {  
						//Alert.show("salut");
		               super.createChildren();  
		               editImg = new Image();  
		               editImg.source =  data.image;  
		              // editImg.width = editImg.height = 16;  
		               addChild(editImg);    
		         }  
	}
}

parce qu'il me dit que j'accede à une propriété qui n'existe pas au lancement de mon appli:

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
 
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
	at myComponents::renderers/createChildren()[/Users/gauthierchretien/Documents/Flex Builder 3/YoutubeVideo/src/myComponents/renderers.as:54]
	at mx.core::UIComponent/initialize()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5370]
	at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5267]
	at mx.core::UIComponent/addChild()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:4969]
	at com.flextoolbox.controls::TreeMap/getLeafRenderer()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1663]
	at com.flextoolbox.controls::TreeMap/refreshBranchChildRenderers()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1639]
	at com.flextoolbox.controls::TreeMap/commitProperties()[/Users/josh/Development/ActionScript 3/projects/flextreemap/output/flextreemap/source/com/flextoolbox/controls/TreeMap.as:1463]
	at mx.core::UIComponent/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5807]
	at mx.managers::LayoutManager/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:539]
	at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:689]
	at Function/http://adobe.com/AS3/2006/builtin::apply()
	at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8628]
	at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8568]

[ellene]

Donc finalement tu passes par ActionScript.
Il dit que tu as un objet null ligne 54 maintenant ... Ben il faut regarder ligne 54. Je ne sais pas trop là.
Ton data est peut être null ...
Si tu utilises Flex Builder, utilises le mode debug pour voir ce qui ne va pas.

[EDIT]
Les noms de classe commencent par convention en majuscule.
[/EDIT]

[ellene]

Normalement en MXML, tu devrais avoir quelque chose comme ça :

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" implements=”com.flextoolbox.controls.treeMapClasses.ITreeMapLeafRenderer”>
<mx:Script>
 
<![CDATA[
 
// definition du get et set data
 
// definition du get et set selected
 
 ]]>
</mx:Script>
 
      <mx:Image source="{data.image}"/>    
</mx:Canvas>

Je pense que ça serai plus simple en MXML.

[G4uthier]

CA MARCHE !!!!!!!!!
Merci ellene tu es trop forte

voici le 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
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
// ActionScript file
package myComponents {
 
 
      import com.flextoolbox.controls.treeMapClasses.*;
 
      import flash.text.TextField;
      import mx.controls.Alert;
      import mx.controls.Image;
      import mx.core.UIComponent;
      import mx.events.FlexEvent;
 
      public class renderers extends UIComponent implements ITreeMapLeafRenderer
      {	
		  public function renderers()
           {
           		super();
            }     	
 
			// Internal variable for the property value.
 
			private var _data:Object;
			  // Make the data property bindable.
 
			[Bindable("dataChange")]
			 // Define the getter method.
			public function get selected():Boolean{
				return _data;
			}
 
		    public function set selected(value:Boolean):void {
		    	_data = value;
				 dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		    }
 
			public function get data():Object 
			{
			    return _data;
		    }
		    // Define the setter method, and dispatch an event when the property
 
		    // changes to support data binding.
 
		    public function set data(value:Object):void {
		    	//Alert.show(value.image.toString());
		    	 _data = value;
		        editImg.source=value.image;
		        test.text=value.titre;
		        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		    }
 
		      	public var editImg:Image; 
		      	public var test:TextField; 
 
				override protected function createChildren():void {  
					    super.createChildren();  
		               editImg = new Image();  
		               editImg.width = editImg.height = 100;  
		               addChild(editImg);   
		               test = new TextField(); 
		               addChild(test);   
		         }  
	}
}

C'était possible de faire ca en mxml? des getter et des setter?

[ellene]

Je pense, regarde l'exemple juste en haut. Je pense que ça doit être quelque chose comme ça.

N'oublie pas le tag Résolu

[G4uthier]

Merci je vais essayer de cette facon.
Oui je sais pour les noms de classe mais quand j'ai voulu la modifier son nom flex builder m'a jeté :/