Afficher une image dans DataGrid

Version imprimable

Bonjour tout le monde,

En s'appuyant sur le tutoriel de Jim Nastiq, je voudrais afficher une image dans un DataGrid.

Mon souci est : comment afficher l'image dans un column et le texte dans un autre ???

le fichier XML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<root>
	<personne>
			<nom>Franck</nom>
			<prenom>Michael</prenom>
		<adresse rue="rue de la liberation" numero="36" >
		Addresse de Michael Franck
		</adresse>
 
	</personne>	
  <photo label="photos une" url="assets/pics1.png"/>
   <photo label="photos deux" url="assets/pics2.png"/>
   <photo label="photos trois" url="assets/pics3.png"/>
   <photo label="photos quatre" url="assets/pics4.png"/>
   <photo label="photos cinq" url="assets/pics5.png"/>
</root>

Le DataGridColumn pour afficher l'image

Code:

1
2
3
4
5
6
7
8
9
10
11
	<!-- DataGridColumn pour l'image -->
		<mx:DataGridColumn id="selectBox" textAlign="center" dataField="selected"  headerText="" editable="false" rendererIsEditor="true" editorDataField="selected" width="10" >
	<mx:itemRenderer>
			<mx:Component>
			<mx:VBox>
				    <mx:Image id="img" source="{data.@url}" horizontalCenter="0" verticalCenter="0" width="30" height="30" buttonMode="true"/>
 
			</mx:VBox>
			</mx:Component>
		</mx:itemRenderer>
</mx:DataGridColumn>

Ça marche pour l'affichage des images, je n'ai pas de problème avec ça

mais pour afficher le texte dans un deuxième DataGridClumn, ça n'affiche rien et je ne sais pas pourquoi

Code:

1
2
3
4
5
6
7
8
9
10
11
 
			<mx:DataGridColumn id="selectName" textAlign="center" dataField="selected"  headerText="" editable="false" rendererIsEditor="true" editorDataField="selected" width="10" >
	<mx:itemRenderer>
			<mx:Component>
			<mx:VBox>
		<!--		    <mx:Label id="nom" text="{data.@label}" horizontalCenter="0" verticalCenter="0" width="30" height="30" buttonMode="true" />
			-->			
			</mx:VBox>
			</mx:Component>
		</mx:itemRenderer>
</mx:DataGridColumn

Si vous avez des idées ou bien un autre tutoriel.

Merci.

Afficher une image dans DataGrid

Bonjour

Ben, j'ai changé de stratégie, juste je voudrais lire un lien vers une image depuis un fichier XML, et l'afficher c'est à dire l'image dans un DataGridColumn

mon XML

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
<?xml version="1.0" encoding="utf-8"?>
<items>
    <item>
        <name>Thomas</name>
        <city>Paris</city>
        <age>21</age>
 
    <imageURL>assets/pics2.png</imageURL>
 
    </item>
    <item>
        <name>Samantha</name>
        <city>Bordeaux</city>
        <age>21</age>
    <imageURL>assets/pics2.png</imageURL>
 
    </item>
    <item>
        <name>Aurelien</name>
        <city>Limoge</city>
        <age>23</age>
 
    <imageURL>assets/pics2.png</imageURL>
 
    </item>        
</items>

Mon mxml

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="prdtData.send()">
 
<mx:HTTPService id="prdtData" url="produit.xml"/>
<mx:XML id="items" source="produit.xml"/>
<mx:DataGrid x="56" y="250" width="950" dataProvider="{prdtData.lastResult.items.item}">
    <mx:columns >
 
        <mx:DataGridColumn width="10" dataField="name" headerText="Produit name"/>        
 
        <mx:DataGridColumn id="selectBox" textAlign="center" dataField="photo"  headerText="image" editable="false" rendererIsEditor="true" editorDataField="selected" width="10" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                                <mx:Image source="items.item.imageURL" autoLoad="true"  horizontalCenter="0" verticalCenter="0" width="30" height="30" buttonMode="true"/>
 
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
</mx:columns>
 
</mx:DataGrid>
</mx:Application>

voici ce qu'il m'affiche.

http://img269.imageshack.us/img269/7...ageflex.th.png

Des idées ?????

16/12/2009, 16h24
ellene

Question bête mais es tu sûr qu'il arrive à accéder à ce chemin :

Code:

assets/pics2.png

As tu vérifié que ce chemin est correct ?
16/12/2009, 16h28
issamjet

Citation:

Envoyé par ellene

Question bête mais es tu sûr qu'il arrive à accéder à ce chemin :

Code:

assets/pics2.png

As tu vérifié que ce chemin est correct ?

Oui bien sûr, ça marche si je mets un lien statique :

Citation:

<mx:Image source="assets/pics2.png" autoLoad="true" horizontalCenter="0" verticalCenter="0" width="30" height="30" buttonMode="true"/>

Il m'affiche la même image sur toutes les lignes et c'est normal, mais en lui donnant l'URL pour l'image depuis le XML, il ne m'affiche rien.

Autre question pourquoi as tu un dataField = "photo" dans ton code ? tu n'as pas de champs photo dans ton xml.

Code:

1
2
3
4
5
6
7
8
9
10
<mx:DataGridColumn id="selectBox" textAlign="center" dataField="photo"  headerText="image" editable="false" rendererIsEditor="true" editorDataField="selected" width="10" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                                <mx:Image source="items.item.imageURL" autoLoad="true"  horizontalCenter="0" verticalCenter="0" width="30" height="30" buttonMode="true"/>
 
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

16/12/2009, 18h29
jylaxx

1- dataField="imageURL"
2- supprimer source dans Image ou au pire lui donner la valeur source="{data.imageURL}"

Citation:
Envoyé par ellene
Autre question pourquoi as tu un dataField = "photo" dans ton code ? tu n'as pas de champs photo dans ton xml.
Code:

1 2 3 4 5 6 7 8 9 10 <mx:DataGridColumn id="selectBox" textAlign="center" dataField="photo" headerText="image" editable="false" rendererIsEditor="true" editorDataField="selected" width="10" > <mx:itemRenderer> <mx:Component> <mx:VBox> <mx:Image source="items.item.imageURL" autoLoad="true" horizontalCenter="0" verticalCenter="0" width="30" height="30" buttonMode="true"/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn>
Citation:

1- dataField="imageURL"
2- supprimer source dans Image ou au pire lui donner la valeur source="{data.imageURL}"

Merci pour vos réponses, le problème persiste toujours, j'arrive à afficher les images seules, à partit du XML bien sûr, ou bien le champ text seul, mais les deux en même temps, toujours rien.

Je ne sais pas exactement, mais ça me parait que c'est un problème de DataProvider

Quand je mets

Code:

dataProvider="{prdtData.lastResult.items.item}"

ça me permet d'afficher le texte

sinon pour afficher l'image je dois mettre
Code:

1 2 dataProvider="{items.item.imageURL}
et dans ce cas, je n'arrive plus à afficher le text dans le premier column.

Étrange.

16/12/2009, 23h03
ellene
Tu devrais plutôt essayer ceci :
Code:

1 2 dataProvider="{prdtData.lastResult.item}"
Je crois qu'il n'est pas nécessaire d'appeler l'élément racine (items). Si tu mets les dataField comme il faut ensuite sur chaque colonne, je crois que c'est bon.
17/12/2009, 10h02
issamjet
Citation:
Envoyé par ellene

Tu devrais plutôt essayer ceci :

Code:

1 2 dataProvider="{prdtData.lastResult.item}"

Je crois qu'il n'est pas nécessaire d'appeler l'élément racine (items). Si tu mets les dataField comme il faut ensuite sur chaque colonne, je crois que c'est bon.
Bonjour

Comme ça il m'affiche un DataGrid vide 8O
17/12/2009, 10h48
ellene

Tu utilises l'objet XML ou HTTPService ? car je vois les deux dans ton code.
Il faut utiliser l'un ou l'autre mais pas les deux.
Si tu veux le XML essaie :

Code:

dataProvider="{items.item}"

si ca ne fonctionne remet à nouveau ton code corrigé pour qu'on y voit plus clair.

Bonjour

Merci Ellene,

Enfin c'est résolu

j'ai utilisé un arraycollection comme intermédiaire entre le XML et le DataGrid pour ceux qui sont intéressés, voici le code

tout d'abord le XML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<greg>
<item>
	<Artist>Pavement </Artist>
	<Album>Slanted and Enchanted </Album>
	<Price>11.99 </Price>
	<Cover> assets/slanted.jpg</Cover>
 
</item>
 
<item>
	<Artist> Pavement</Artist>
	<Album> Brighten the Corners</Album>
	<Price>11.99 </Price>
	<Cover> assets/brighten.jpg</Cover>
</item>
 
</greg>

le ItemRender : RendererDGImage.mxml

Code:

1
2
3
4
5
6
7
<?xml version="1.0"?>
<!-- itemRenderers\myComponents\RendererDGImage.mxml -->
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
   horizontalAlign="center" >
 
   <mx:Image id="albumImage" height="175" source="{data.Cover}"/>
</mx:HBox>

Enfin l'interface greg.mxml

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
<?xml version="1.0"?>
<!-- itemRenderers\MainDGImageRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" >
 
<mx:XML id="greg" source="greg.xml" />
 
   <mx:Script>
       <![CDATA[
           import mx.collections.ArrayCollection;
           import mx.utils.ArrayUtil;
		import mx.rpc.xml.SimpleXMLDecoder;
		import mx.collections.ArrayCollection;
			public var externalXML:XML ;
 
	public var array:Array = new Array();			
			public var list:ArrayCollection = new ArrayCollection() ;
           [Bindable]
           private var initDG:ArrayCollection = new ArrayCollection([
               {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99, Cover: 'assets/slanted.jpg'},
               {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99, Cover: 'assets/brighten.jpg'}]);
 
               public function init():void{
 
                var xml:XMLDocument = new XMLDocument( greg );
 
	    var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
	    var data:Object = decoder.decodeXML( xml );
	     array = ArrayUtil.toArray( data.greg.item );
 
	 myGrid.dataProvider = array ;
 
//               	externalXML = new XML(greg);
//				var i:XML;
//				for each (i in externalXML.children())
//				{
//					list.addItem(i);
//				}
 
               }
 
       ]]>
   </mx:Script>
 
   <mx:DataGrid id="myGrid"        dataProvider="{array}" variableRowHeight="true">
       <mx:columns>
           <mx:DataGridColumn dataField="Artist"/>
           <mx:DataGridColumn dataField="Album"/>
           <mx:DataGridColumn dataField="Cover" itemRenderer="myComponents.RendererDGImage"/>
           <mx:DataGridColumn dataField="Price"/>
       </mx:columns>
   </mx:DataGrid>
</mx:Application>

Ça marche pour moi, c'est vous avez eu de soucis n'hésitez pas à revenir vers moi.

Jet.