Displaying images in VBOX mxml element

Question

hi,
i am new to flex.i am using flex builder 3.
i want to disply sime images in a VBOX element. i have image URLs and image names with me in an arraycollection. i should disply the images side by side and VBOX should have scroll bar.
thanks
sankar

Answer 1

If you want the images side-by-side, don't you want an HBox? Anyway, here's some code to answer your question.
The scrollbar won't display unless the images do not display within the HBox width. You can force the scrollbar to display always by setting the HBox horizontalScrollPolicy property to "on".
You might want to use a HorizontalList control instead.
Below I have hard coded indexes and also used a repeater in the HBox.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  verticalGap="30">
  <mx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable] private var imgs:ArrayCollection = new ArrayCollection([
      {name: "red", path: "images/red.png"},
      {name: "green", path: "images/green.png"},
      {name: "blue", path: "images/blue.png"}
  ]]></mx:Script>
  <mx:HBox>
    <mx:Image source="{imgs.getItemAt(0).path}"/>
    <mx:Image source="{imgs.getItemAt(1).path}"/>
    <mx:Image source="{imgs.getItemAt(2).path}"/>
  </mx:HBox>
  <mx:HBox horizontalScrollPolicy="on">
    <mx:Image source="{imgs.getItemAt(0).path}"/>
    <mx:Image source="{imgs.getItemAt(1).path}"/>
    <mx:Image source="{imgs.getItemAt(2).path}"/>
  </mx:HBox>
  <mx:HBox>
    <mx:Repeater id="rp" dataProvider="{imgs}">
      <mx:Image source="{rp.currentItem.path}"/>
    </mx:Repeater>
  </mx:HBox>
  <mx:HorizontalList dataProvider="{imgs}" columnCount="3">
    <mx:itemRenderer>
      <mx:Component>
        <mx:Image source="{data.path}"/>
      </mx:Component>
    </mx:itemRenderer>
  </mx:HorizontalList>
</mx:Application>
If this post answers your question or helps, please mark it as such. Thanks!
http://www.chikaradev.com
Adobe Flex Development and Support Services