Pour commencer nous allons peupler notre DataGrid, pour cela nous allons utiliser un fichier XML qui nous servira de source d'informations. Voici ce fichier:

[xml]
<?xml version="1.0" encoding="utf-8"?>
<root>
   <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>

nous allons donc affecter le dataProvider de notre DataGrid au chargement de l'application, pour cela on catch l'événement creationComplete de l'application:

[xml]
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="onCreationComplete()" 
    layout="absolute"
    viewSourceURL="srcview/index.html" 
    backgroundColor="#62925E">
    
<mx:Style source="assets/style.css" />
<mx:Script>
    <![CDATA[
        private function onCreationComplete():void{
            dgPhotos.dataProvider = xmlPhotos.photo;
        }
    ]]>
</mx:Script>
<mx:XML id="xmlPhotos" source="data.xml"/>
<mx:Panel title="DataGrid Renderer" width="180" height="250" verticalCenter="0" horizontalCenter="0">
    <mx:DataGrid id="dgPhotos" width="100%" >
        <mx:columns>
            <mx:DataGridColumn itemRenderer="dgRenderer"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Panel>
</mx:Application>

Vous noterez que le DataGridColumn utilise la propriété itemRenderer et celle ci pointe vers mon composant MXML qui fera office de renderer pour chaque élément de la liste.

Ce composant dgRenderer, doit contenir tout ce que l'on souhaite afficher pour chaque item. Dans mon cas, je souhaite afifcher un texte avec un logo à sa droite. Cette image doit afficher une popup lors d'un clique. Voila donc mon composant:

[xml]
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            import mx.containers.TitleWindow;
            import mx.events.CloseEvent;
            import mx.core.Application;
            import mx.containers.Panel;
            import mx.managers.PopUpManager;
            
            private var myPopup:TitleWindow;
            
            private function init():void{
                img.addEventListener(MouseEvent.CLICK, onClick);
            }
            
            private function onClick(e:MouseEvent):void{
                myPopup = new TitleWindow();
                myPopup.width = 300;
                myPopup.height = 80;
                myPopup.showCloseButton = true;
                myPopup.title = "Informations";
                myPopup.addEventListener(CloseEvent.CLOSE, onPopupClose);
                
                var monText:Label = new Label();
                monText.htmlText = "Vous avez cliqué sur l'item:<b>"+txtLabel.text+"</b>";
                monText.maxWidth = 300;
                myPopup.addChild(monText);
                
                PopUpManager.addPopUp(myPopup, Application.application as DisplayObject, true);
                PopUpManager.centerPopUp(myPopup);
            }
            
            private function onPopupClose(e:CloseEvent):void{
                PopUpManager.removePopUp(myPopup);
            }
        ]]>
    </mx:Script>
    <mx:Label id="txtLabel" text="{data.@label}" fontWeight="bold" horizontalCenter="0" bottom="0" />    
    <mx:Image id="img" source="{data.@url}" horizontalCenter="0" verticalCenter="0" width="30" height="30" buttonMode="true"/>
</mx:HBox>

Vous voyez qu'il s'agit simplement de mettre dans un container les éléments dont on a besoin, et d'y ajouter la mécanique avec les listeners. La petite astuce réside dans la façon de lier les données au renderer afin d'afficher correctement celles ci. Ici, dans mon fichier xml chaque tag photo contenait deux attributs, label et url, il suffit donc de lier la propriété text du Label à la data label du xml comme ceci text="{data.@label}" et de même pour la source de l'image source="{data.@url}"

Dernier petit truc, pour faire comprendre à l'utilisateur qu'une action se cache sur le click d'une image, on utilise la propriété buttonMode. Ainsi, automatiquement lors du survol de l'imagel e curseur se transforme en main comme pour un lien hypertext classique

Voila donc le résultat escompté (click droit pour les sources)