7 Replies Latest reply on Dec 29, 2010 10:06 AM by Gregory Lafrance

    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

        • 1. Re: displaying images in VBOX mxml element
          Gregory Lafrance Level 6

          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

          1 person found this helpful
          • 2. Re: displaying images in VBOX mxml element
            sankar_bhatta Level 1

            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

            • 3. Re: displaying images in VBOX mxml element
              sankar_bhatta Level 1

              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

              • 4. Re: displaying images in VBOX mxml element
                Gregory Lafrance Level 6

                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

                1 person found this helpful
                • 5. Re: displaying images in VBOX mxml element
                  sankar_bhatta Level 1

                  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

                  • 6. Re: displaying images in VBOX mxml element
                    Gregory Lafrance Level 6

                    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

                    • 7. Re: displaying images in VBOX mxml element
                      sankar_bhatta Level 1

                      hi,

                       

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