Create a Simple Photo Gallery in Flex

Creat a New mxml file:

Album.mxml

<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:igor=”*” xmlns:mx=” http://www.adobe.com/2006/mxml” layout=”absolute”> <mx:Model id=”photos” source=”album.xml”/> <mx:DataGrid backgroundAlpha=”0″ showHeaders=”false” id=”list” dataProvider=”{photos.item}” x=”340″ y=”59″> <mx:columns> <mx:DataGridColumn itemRenderer=”photoTemplate”/> </mx:columns> </mx:DataGrid> <mx:Label x=”340″ y=”33″ text=”List of Images”/> <mx:Image source=”{list.selectedItem}” x=”24″ y=”59″ width=”258″ height=”202″/> </mx:Application> photoTemplate.mxml <?xml version=”1.0″ encoding=”utf-8″?> <mx:Image source=”{data.item}” top=”4″ bottom=”4″ right=”4″ left=”4″ width=”50″ height=”50″ xmlns:mx=” http://www.adobe.com/2006/mxml> album.xml <?xml version=”1.0″?> <root> <item>photos/photo_01.jpg</item> <item>photos/photo_02.jpg</item> <item>photos/photo_03.jpg</item> <item>photos/photo_04.jpg</item> <item>photos/photo_05.jpg</item> <item>photos/photo_06.jpg</item> <item>photos/photo_01.jpg</item> <item>photos/photo_02.jpg</item> <item>photos/photo_03.jpg</item> <item>photos/photo_04.jpg</item> </root> In the project there must be a folder named with “photos” which contains photographs photo_01.jpg photo_02.jpg photo_03.jpg photo_04.jpg photo_05.jpg photo_06.jpg