Flex treemap afficher image

Version imprimable

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:

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:

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

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:

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”>  </mx:Canvas>
2- Tu l'ajoutes à ta TreeMap et le tour est joué normalement :aie:
Code:

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

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

Code:

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 :aie:

13/08/2009, 14h26
ellene

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

oui j'ai creer un composant

Code:

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:

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

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:

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.

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

Code:

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 :/

13/08/2009, 14h54
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/

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

mon code:

Code:

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:

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:

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]

13/08/2009, 15h31
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]

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

Code:

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.

CA MARCHE !!!!!!!!! :yaisse2::yaisse2::kill::yaisse::pingoin2:
Merci ellene tu es trop forte :ccool:

voici le code:

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
// 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?

13/08/2009, 16h10
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 ;)
13/08/2009, 16h21
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é :/