displaying images in VBOX mxml element

[sankar_bhatta]

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

[Guest]

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

[sankar_bhatta]

hi Lafrance,

thank you so much.

can we use a loop statement instead of hardcoding the array index? can you give me that code?

thanks

[sankar_bhatta]

hi,

one more question i have is, i need to trigger some function when i click on an image in that array. in the function is should be able to access the name and image url and collect then in separate varaibles. how do i do this?

thanks

[Guest]

This code answers your question:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  verticalGap="30">
  <mx:Script><![CDATA[
    import mx.events.ListEvent;
    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"}
    ]);
    
    private function getImageData():void{
      nameLbl.text = myList.selectedItem.name;
      urlLbl.text = myList.selectedItem.path;
    }
  ]]></mx:Script>
  <mx:Form>
    <mx:FormItem label="Name:">
      <mx:Label id="nameLbl"/>
    </mx:FormItem>
    <mx:FormItem label="URL:">
      <mx:Label id="urlLbl"/>
    </mx:FormItem>
  </mx:Form>
  <mx:HorizontalList id="myList" dataProvider="{imgs}" 
    columnCount="3" itemClick="getImageData()" 
    creationComplete="myList.selectedIndex=0;getImageData();">
    <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

[sankar_bhatta]

Hi,

its working fine, but i want to diaplay the name of the image on top or bottom of the image. i tried using the below code

<mx:Image name="{data.name}" source="{data.path}"/>

it did not work. what should i use?

Also can we add little bit of animation, like when i place the mouse pointer on an image it should pop out/or someway to highlight that user has looking at that particular image?

thanks

[Guest · Accepted solution]

Do you mean you want to display a label with the name, and position the label above or below the image?

There are several ways to make the image larger upon mouse rollover.

You should probably start a new post for making the image larger upon rollover, so people searching the forum will be better served.

As for this post, I believe I have answered it.

If this post answers your question or helps, please mark it as such. Thanks!

http://www.chikaradev.com
Adobe Flex Development and Support Services

[sankar_bhatta]

hi,

thanks for your help. i am starting a new topic. please look at it.