Discussion :

[issamjet]

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 :

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

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

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 :

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

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.

[issamjet]

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 :

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

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



Des idées ?????

[ellene]

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

Code :

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

assets/pics2.png

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

[issamjet]

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

Code :

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

assets/pics2.png

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

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

<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.

[ellene]

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

Code :

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

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>

[jylaxx]

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

[issamjet]

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

Code :

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

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>

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 :

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

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

ça me permet d'afficher le texte

sinon pour afficher l'image je dois mettre

Code :

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

1
2
 
dataProvider="{items.item.imageURL}

et dans ce cas, je n'arrive plus à afficher le text dans le premier column.

Étrange.