Image With Title

Question

Hi, how are all of you? I wonder if it is possible to have an Image with Label or Title that display along with the Image itself as a single object.
Thanks
.:.Wahab

Answer 1

Sure. In this example the image path and caption are in an XML file, and I am putting the images in:
1) a HorizontalList
2) a List
3) individual Panels using a Repeater
The images I am using are in a folder "images" under the folder containing MainApp.mxml
--------------- data.xml ---------------------
<?xml version="1.0" encoding="utf-8"?>
<photos>
    <photo>
        <image>images/red30_30.JPG</image>
        <caption>Red Square</caption>
    </photo>
    <photo>
        <image>images/green30_30.JPG</image>
        <caption>Green Square</caption>
    </photo>
    <photo>
        <image>images/blue30_30.JPG</image>
        <caption>Blue Square</caption>
    </photo>
    <photo>
        <image>images/black30_30.JPG</image>
        <caption>Black Square</caption>
    </photo>
</photos>
------------------ MainApp.mxml ------------------------
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  creationComplete="photosRequest.send();">
  <mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      import mx.collections.XMLListCollection;
      [Bindable] private var xlc:XMLListCollection;
      private function photosHandler(evt:ResultEvent):void{
        xlc = new XMLListCollection(evt.result..photo); 
    ]]>
  </mx:Script>
  <mx:HTTPService id="photosRequest" url="data.xml" result="photosHandler(event)"
    resultFormat="e4x"/>
  <mx:HBox width="100%" horizontalAlign="center" horizontalGap="30">
    <mx:HorizontalList dataProvider="{xlc}" rowHeight="100"
      columnWidth="100">
      <mx:itemRenderer>
        <mx:Component>
          <mx:VBox horizontalAlign="center" verticalAlign="middle">
            <mx:Image source="{data.image}"/>
            <mx:Text text="{data.caption}"/>
          </mx:VBox>
        </mx:Component>
      </mx:itemRenderer>
    </mx:HorizontalList>
    <mx:List dataProvider="{xlc}" rowHeight="100"
      columnWidth="100" height="405" width="110">
      <mx:itemRenderer>
        <mx:Component>
          <mx:VBox horizontalAlign="center" verticalAlign="middle">
            <mx:Image source="{data.image}"/>
            <mx:Text text="{data.caption}"/>
          </mx:VBox>
        </mx:Component>
      </mx:itemRenderer>
    </mx:List>
    <mx:HBox>
      <mx:Repeater id="rp" dataProvider="{xlc}">
        <mx:Panel title="{rp.currentItem.caption}">
          <mx:Image source="{rp.currentItem.image}"/>
          <mx:Text text="{rp.currentItem.caption}"/>
        </mx:Panel>   
      </mx:Repeater>
    </mx:HBox>
  </mx:HBox>
</mx:Application>