38 Replies Latest reply on Oct 30, 2010 6:43 AM by bryant_16

    How to add in folder img to select images in List

    bryant_16 Level 1

      Hey guys, I have a List which has a dataprovider and itemRenderer which is ListRenderer.

       

      Inside this list, how do I implement a dropdown menu which actually takes in the img folder of my flex project so that when I select on one of the images in the dropdown menu, it will actually change the image in my flex application.

       

      Something like a legend sort of thing.

       

      Any help will be appreciated.    

        • 1. Re: How to add in folder img to select images in List
          bryant_16 Level 1

          Hi guys,

           

          Anyone has any idea about this problem?

          • 3. Re: How to add in folder img to select images in List
            bryant_16 Level 1

            Hi there,

             

            The website that you have given me is not available. Can't access the page at all.

             

            Anyone has any ideas to this issue?

            • 4. Re: How to add in folder img to select images in List
              bryant_16 Level 1

              Hi there,

               

              Anyone have any idea about this issue?

              • 5. Re: How to add in folder img to select images in List
                BhaskerChari Level 4

                Hi bryant,

                 

                What do you mean actually when you say when I select on one of the images in the dropdown menu, it will actually change the image in my flex application.

                 

                Do you mean that you want to change the backgroundImage of your Flex application or what..?? ..Please elaborate...??

                 

                It would be easy if you can post your code and elaborate your question.

                 

                 

                Thanks,

                Bhasker

                • 6. Re: How to add in folder img to select images in List
                  bryant_16 Level 1

                  Okie, first of all, thanks for helping out in this thread.

                   

                  I have no codes up till now except for the following:

                   

                  <mx:Panel id="layerPanel" backgroundColor="#ffffff" height="200" width="220"

                  title="Layer Control Manager" showEffect="WipeRight" hideEffect="WipeLeft"

                  horizontalScrollPolicy="off" verticalScrollPolicy="off">

                  <mx:VBox height="140" width="100%">

                  <mx:List id="layerList" itemClick="layerList_changeHandler(event)"

                  alternatingItemColors="[#EEEEEE, white]" selectable="true"

                  dataProvider="" labelField="name" height="190" width="100%"

                  verticalScrollPolicy="off">

                  <mx:itemRenderer>

                  <mx:Component>

                  <mx:CheckBox selectedField="isSelected"

                  change="layerCheckBox_onChange(event);">

                  <mx:Script>

                  <![CDATA[

                  import mx.controls.Alert;

                  import mx.events.FlexEvent;

                  private function layerCheckBox_onChange(evt:Event):void{

                  if(Boolean(evt.currentTarget.selected) == true){

                  data.isSelected = !data.isSelected;

                  }else{

                  }

                  }

                  ]]>

                  </mx:Script>

                  </mx:CheckBox>

                  </mx:Component>

                  </mx:itemRenderer>

                  </mx:List>

                  </mx:VBox>

                  <mx:VBox top="165" left="30">

                  <mx:Button label="Reset List" width="160" id="resetBut" click="reset()"/>

                  </mx:VBox>

                  </mx:Panel>

                   

                  Meaning to say I have this panel with list in it and also checkbox besides

                  the list so that I can select the layer that I want. But now I want to add

                  in another combobox or dropdown menu which shows the images of the folder

                  img so that I can select the particular layer and tag the photo to it. How

                  do I do it?

                  • 7. Re: How to add in folder img to select images in List
                    BhaskerChari Level 4

                    Hi Bryant,

                     

                    Your question is not still fully clear to me..

                     

                    But now I want to add in another combobox or dropdown menu which shows the images of the folder

                    img  - By this do you mean you want to show all the images in your img folder in your Flex application in the dropdown for all the rows of your List..??

                     

                    so that I can select the particular layer and tag the photo to it. - I don't undersand this part of your question...

                     

                     

                    Thanks,

                    Bhasker

                    • 8. Re: How to add in folder img to select images in List
                      bryant_16 Level 1

                      Okie.

                       

                      Meaning to say this list contains:

                       

                         - checkbox

                         - label

                         - combobox (with images loaded from the folder 'img)

                       

                      All these in 1 row of the list, which means there could be several rows in

                      the list itself.

                       

                      So what I want to do here is that, when the person checks on 'plants' and

                      select plants image from the combobox, the plants image will be shown on the

                      application. Likewise if the person checks on 'tiger' and select tiger image

                      from the combobox, the tiger image will be shown on the application. When

                      they uncheck the 'tiger' or the 'plants from the list, the tiger or the

                      plants image shown on the application will not be gone.

                      • 9. Re: How to add in folder img to select images in List
                        BhaskerChari Level 4

                        Hi bryant,

                         

                        Try to dispatch an event and when there is match of the ComboBox selectedItem and also the checkbox in the List. Also make the event to bubble so that you can listen it in the main application and fetch the current source of the image url in the event object so that you can get the url in the eventListner in the main application and assign the source to the image.

                         

                        Thanks,

                        Bhasker

                        • 10. Re: How to add in folder img to select images in List
                          bryant_16 Level 1

                          How do you do that actually? Do you have a sample?

                          • 11. Re: How to add in folder img to select images in List
                            BhaskerChari Level 4

                            If you can post the whole source code with the dataprovider for the list and others, I can do it a sample for you..

                             

                             

                            Thanks,

                            Bhasker

                            • 12. Re: How to add in folder img to select images in List
                              bryant_16 Level 1

                              What do you mean by dataprovider? Because my dataprovider is just an array

                              of string, that's all. The images are kept under the img folder.

                              • 13. Re: How to add in folder img to select images in List
                                bryant_16 Level 1

                                The dataprovider contains string like "tigers","leopards", "lion" and so on.

                                • 14. Re: How to add in folder img to select images in List
                                  BhaskerChari Level 4

                                  Hi bryant,

                                   

                                  Check out the sample code that I have written for which the functionality you have explained..

                                   

                                  Note: Add the images img1.jpg, img2.jpg..etc; to your Flex app; If you have added then in a folder say img/img1.jpg then plz chnage the path in the code also

                                   

                                   

                                  <?xml version="1.0" encoding="utf-8"?>
                                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
                                  <mx:Script>
                                    <![CDATA[
                                     import mx.controls.Image;
                                    import mx.events.ListEvent;
                                   
                                    [Bindable]private var lstDataProvider:Array = [{data:0, label:"Plants", isSelected:false},{data:1, label:"Tiger", isSelected:false},{data:2, label:"Fishes", isSelected:false}];
                                    [Bindable]public var comboBoxArray:Array = [{src:"img1.jpg", label:"Plants"}, {src:"img2.jpg", label:"Tiger"}, {src:"img3.jpg", label:"Fishes"}];
                                    public var comboImageUrl:String = "";
                                   
                                   
                                    private function init():void
                                    {
                                     this.addEventListener("addImageToApplication", imageAddHandler);
                                    }
                                    private function imageAddHandler(event:Event):void
                                    {
                                     var img:Image = new Image();
                                     img.source = comboImageUrl;
                                     imageBox.addChild(img);
                                    }
                                    private function layerList_changeHandler(event:ListEvent):void
                                    {
                                    
                                    }
                                    
                                    ]]>
                                  </mx:Script>
                                  <mx:Panel id="layerPanel" backgroundColor="#ffffff" height="220" width="220"
                                    title="Layer Control Manager" showEffect="WipeRight" hideEffect="WipeLeft"
                                    horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                    <mx:VBox height="140" width="400" horizontalScrollPolicy="off">
                                     <mx:List id="layerList" itemClick="layerList_changeHandler(event)"
                                     alternatingItemColors="[#EEEEEE, white]" selectable="true"
                                     dataProvider="{lstDataProvider}" labelField="name" height="190" verticalScrollPolicy="off">
                                     <mx:itemRenderer>
                                      <mx:Component>
                                       <mx:HBox>
                                        <mx:CheckBox selectedField="isSelected" change="layerCheckBox_onChange(event);">
                                        <mx:Script>
                                        <![CDATA[
                                       
                                        import mx.controls.Alert;
                                        import mx.events.FlexEvent;
                                       
                                        private function layerCheckBox_onChange(evt:Event):void
                                        {
                                         data.isSelected = !data.isSelected;
                                         if(data.isSelected && comboBox.selectedIndex > -1)
                                         {
                                          this.dispatchEvent(new Event("addImageToApplication", true));
                                         }
                                        }
                                        ]]>
                                        </mx:Script>
                                        </mx:CheckBox>
                                        <mx:Label text="{data.label}" />
                                        <mx:ComboBox id="comboBox" width="100%" change="onComboBoxChange(event)" dataProvider="{outerDocument.comboBoxArray}" prompt="Please Select">
                                         <mx:Script>
                                          <![CDATA[
                                           import mx.controls.ComboBox;
                                          
                                           private function onComboBoxChange(evt:Event):void
                                           {
                                            var myCombo:ComboBox = evt.currentTarget as ComboBox;
                                           
                                            if(data.label == myCombo.selectedItem.label)
                                            {
                                             outerDocument.comboImageUrl = myCombo.selectedItem.src;
                                             if(data.isSelected)
                                             {
                                              this.dispatchEvent(new Event("addImageToApplication", true));
                                             }           
                                            }
                                           }
                                         
                                          ]]>
                                          </mx:Script>
                                         <mx:itemRenderer>
                                          <mx:Component>
                                           <mx:HBox horizontalScrollPolicy="off">
                                            <mx:Image source="{data.src}" width="20" height="20" maintainAspectRatio="false" />
                                            <mx:Label text="{data.label}" />
                                           </mx:HBox>
                                          </mx:Component>
                                         </mx:itemRenderer>
                                        </mx:ComboBox>
                                       </mx:HBox>
                                      </mx:Component>
                                     </mx:itemRenderer>
                                     </mx:List>
                                    </mx:VBox>

                                   

                                  <mx:VBox top="165" left="30">
                                    <mx:Button label="Reset List" width="160" id="resetBut"/>
                                  </mx:VBox>
                                  </mx:Panel>
                                  <mx:VBox id="imageBox" top="100" left="300" verticalGap="10">
                                   
                                  </mx:VBox>

                                  </mx:Application>

                                   

                                   

                                  Thanks,

                                  Bhasker

                                  • 15. Re: How to add in folder img to select images in List
                                    bryant_16 Level 1

                                    Hi Bhasker,

                                     

                                    Can I check with you, because my dataprovider which is dynamic which means that lstDataProvider is actually taking the strings off from a database and the database may return different results at times. On top of that, the combobox that you have written below, is it taking the images off from the folder under 'res'? Because I would need to put in the images into the 'res' folder and then I can select my image from the combobox which are actually the images under the 'res' folder.

                                    • 16. Re: How to add in folder img to select images in List
                                      BhaskerChari Level 4

                                      Hi Bryant,

                                       

                                      If you check in my code posted I have used comboBoxArray which contains some static images which exist in my local application. You can dynamically populate comboBoxArray dynamically with the images that you have in your res folder. Then modify your code accordingly based on the properties that you get dynamically..??

                                       

                                      Have you tested the code and run my application..Is it what the functionality you exactly needed ..??

                                       

                                      Thanks,

                                      Bhasker

                                      • 17. Re: How to add in folder img to select images in List
                                        bryant_16 Level 1

                                        Hi Bhasker,

                                         

                                        I have tried your codes and it is working. But for the lstDataProvider I

                                        have is actually not static, it is dynamic and it is getting the strings

                                        from my database which return to flex as xml. I have used the array to add

                                        in the strings but the list is not populating the strings out.

                                        • 18. Re: How to add in folder img to select images in List
                                          bryant_16 Level 1

                                          Hi Bhasker,

                                           

                                          Capture.PNG

                                           

                                          When I try to load my dataprovider, this is what happen to the list. When I tried your codes, I'm able to see the label properly, but not for my dataprovider. Is there something wrong?

                                           

                                          On top of that, can I check with you how to capture the label and the image when the person check or uncheck the checkbox? Meaning to say that if the person check on the "Plants" label and he selects the "Plants" image, how do I capture the Plants label and also the Plants image? Because I need the label and the image to do further manipulation to these data.

                                           

                                          And also, where is the checkbox for check and uncheck codes so that I'm able to check whether the user has checked or unchecked.

                                           

                                          Thanks once again.

                                          • 19. Re: How to add in folder img to select images in List
                                            BhaskerChari Level 4

                                            Hi bryant,

                                             

                                            Have you modified the code according to the property names you are getting in the xml.

                                             

                                            I have created a Static array with some dummy properties for my convenience you now need to change the property names in the code the same way you are getting in the xml. Hope this you have made these changed ....Can you post your xml file..??

                                             

                                            And also the structure of your lstDataProvider populated from the DataBase..??

                                             

                                            Try to adjust the width of your VBox in which your List is placed so that you can avoid scrollbars..

                                             

                                            Thanks,

                                            Bhasker

                                            • 20. Re: How to add in folder img to select images in List
                                              bryant_16 Level 1

                                              The xml file:

                                               

                                              <result>

                                                   <row>

                                                        <name>Plants</name>

                                                   </row>

                                                   <row>

                                                        <name>Tiger</name>

                                                   </row>

                                                   ...

                                                   ...

                                              </result>

                                               

                                              So basically my lstDataProvider contains everything inside the <name> tag. It's an ArrayCollection by the way for my case. I use for each item in xml to capture the text inside the <name> tag.

                                               

                                               

                                               

                                              On top of that, can I check with you how to capture the label and the image when the person check or uncheck the checkbox? Meaning to say that if the person check on the "Plants" label and he selects the "Plants" image, how do I capture the Plants label and also the Plants image? Because I need the label and the image to do further manipulation to these data.

                                               

                                              And also, where is the checkbox for check and uncheck codes so that I'm able to check whether the user has checked or unchecked.

                                               

                                              Thanks.

                                              • 21. Re: How to add in folder img to select images in List
                                                bryant_16 Level 1

                                                I got this error in my console window when I try to run it:

                                                 

                                                warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)

                                                warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)

                                                • 22. Re: How to add in folder img to select images in List
                                                  BhaskerChari Level 4

                                                  You need not worry about that warning it appears as the property of the Object is not Bindabel. You will be shown such warnings. However if you want to avoid this you can try any of the appraoches mentiioned in the link below:

                                                   

                                                  http://flexponential.com/2009/11/11/binding-warnings-when-using-object-in-a-list-dataprovi der/

                                                   

                                                  Thanks,

                                                  Bhasker

                                                  • 23. Re: How to add in folder img to select images in List
                                                    bryant_16 Level 1

                                                    Hi Bhasker,

                                                     

                                                    I notice that you label the icon inside the ComboBox, then you do a check between the label outside and the label inside the ComboBox and set the comboImageUrl. Because what I'm trying to do is to let say I check the Plants label, I can then choose whether I want the image to be a tiger image or a fish image. How to do it?

                                                    • 24. Re: How to add in folder img to select images in List
                                                      bryant_16 Level 1

                                                      With this:

                                                       

                                                      var img:Image = new Image();

                                                      img.source = comboImageUrl;

                                                       

                                                       

                                                      I tried to do this:

                                                      var dataC:BitmapData = Bitmap(img).bitmapData;

                                                      var markerSymbol:Bitmap = new Bitmap(dataC);

                                                       

                                                      But it says cannot convert cannot convert mx.controls::Image@1d36c479 to flash.display.Bitmap.

                                                       

                                                      How do I do it?

                                                      • 25. Re: How to add in folder img to select images in List
                                                        bryant_16 Level 1

                                                        Hi there,

                                                         

                                                        Anyone have any ideas to this problem?

                                                        • 26. Re: How to add in folder img to select images in List
                                                          BhaskerChari Level 4

                                                          You can try this...

                                                           

                                                          var img:Image = new Image();

                                                          img.source = comboImageUrl;

                                                          var markerSymbol:Bitmap = img.content as Bitmap;

                                                           

                                                           

                                                          Thanks,

                                                          Bhasker

                                                          • 27. Re: How to add in folder img to select images in List
                                                            BhaskerChari Level 4

                                                            Hi Bryant,

                                                             

                                                            You can simply comment the condition below in the ComboBox script...to remove the check for the ComboBox Label...

                                                             

                                                            if(data.label == myCombo.selectedItem.label)

                                                             

                                                            So your onComboBoxChange() function should look like...

                                                             

                                                            private function onComboBoxChange(evt:Event):void
                                                                     {
                                                                      var myCombo:ComboBox = evt.currentTarget as ComboBox;
                                                                      outerDocument.comboImageUrl = myCombo.selectedItem.src;
                                                                      if(data.isSelected)
                                                                      {
                                                                       this.dispatchEvent(new Event("addImageToApplication", true));
                                                                      }           
                                                                     }

                                                             

                                                             

                                                            Thanks,

                                                            Bhasker

                                                             

                                                             

                                                             

                                                             

                                                             

                                                            • 28. Re: How to add in folder img to select images in List
                                                              bryant_16 Level 1

                                                              Hi Bhasker,

                                                               

                                                              Can I check with you how to set the ComboBox to enabled to false then when I check on the CheckBox then the ComboBox will be enabled to true. Then when you uncheck it, then the ComboBox will be enabled back to false.

                                                               

                                                              How do you do that?

                                                              • 29. Re: How to add in folder img to select images in List
                                                                BhaskerChari Level 4

                                                                Hi bryant_16,

                                                                 

                                                                First of all by default you put enabled="false" on ComboBox tag...and then in CheckBox Change function which is layerCheckBox_onChange() you need to write this code..

                                                                 

                                                                <mx:ComboBox enabled="false" /> // By default put enabled="false"

                                                                 

                                                                private function layerCheckBox_onChange(evt:Event):void
                                                                      {
                                                                       data.isSelected = !data.isSelected;
                                                                       if(data.isSelected)
                                                                       {
                                                                        comboBox.enabled = true;
                                                                       }
                                                                       else
                                                                       {
                                                                        comboBox.enabled = false;
                                                                       }
                                                                       if(data.isSelected && comboBox.selectedIndex > -1)
                                                                       {
                                                                        this.dispatchEvent(new Event("addImageToApplication", true));
                                                                       }
                                                                      }

                                                                 

                                                                Can you please mark it as answered if this post answered or helped you..

                                                                 

                                                                 

                                                                Thanks,

                                                                Bhasker

                                                                • 30. Re: How to add in folder img to select images in List
                                                                  bryant_16 Level 1

                                                                  Hi Bhasker,

                                                                   

                                                                  Can I check with you, how do I use graphics to draw an image from:

                                                                   

                                                                   

                                                                  imageLoader = new Loader();

                                                                  imageLoader.load(new URLRequest(marker.png));

                                                                   

                                                                  Then from this imageLoader, how do I use graphics to draw it?

                                                                  • 31. Re: How to add in folder img to select images in List
                                                                    bryant_16 Level 1

                                                                    Hi Bhasker,

                                                                     

                                                                    Can I check with you, if let's say I have a reset() button and when I call this reset() function, it is going to clear away all the ticked checkboxes and also setting all the ComboBoxes into enabled = false;

                                                                     

                                                                     

                                                                    for(var i:int=0;i<lstDataProvider.length;i++)

                                                                    {

                                                                    lstDataProvider[i].isSelected=false;

                                                                     

                                                                     

                                                                    trace("inside here!");

                                                                    }

                                                                     

                                                                    I tried this under reset() function but it is not unchecking all the checked CheckBoxes.

                                                                     

                                                                     

                                                                    How do you do that?

                                                                    • 32. Re: How to add in folder img to select images in List
                                                                      bryant_16 Level 1

                                                                      Hi there,

                                                                       

                                                                      Is it able to do the above following of reseting the list?

                                                                      • 33. Re: How to add in folder img to select images in List
                                                                        BhaskerChari Level 4

                                                                        Hi Bryant,

                                                                         

                                                                        Please mark this post as answered if it answered or helped you.

                                                                         

                                                                        You can check the below code where the Reset funtcionality is implemented..

                                                                         

                                                                         

                                                                        <?xml version="1.0" encoding="utf-8"?>
                                                                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
                                                                        <mx:Script>
                                                                          <![CDATA[
                                                                          import mx.controls.Image;
                                                                          import mx.events.ListEvent;
                                                                         
                                                                          [Bindable]private var lstDataProvider:Array = [{data:0, label:"Plants", isSelected:false},{data:1, label:"Tiger", isSelected:false},{data:2, label:"Fishes", isSelected:false}];
                                                                          [Bindable]public var comboBoxArray:Array = [{src:"img1.jpg", label:"Plants"}, {src:"img2.jpg", label:"Tiger"}, {src:"img3.jpg", label:"Fishes"}];
                                                                          public var comboImageUrl:String = "";
                                                                         
                                                                          public var isCheckBoxChecked:Boolean = false;
                                                                         
                                                                          private function init():void
                                                                          {
                                                                           this.addEventListener("addImageToApplication", imageAddHandler);
                                                                          }
                                                                          private function imageAddHandler(event:Event):void
                                                                          {
                                                                           var img:Image = new Image();
                                                                           img.source = comboImageUrl;
                                                                           imageBox.addChild(img);
                                                                          }
                                                                          private function layerList_changeHandler(event:ListEvent):void
                                                                          {
                                                                          
                                                                          }
                                                                          private function resetList():void
                                                                          {
                                                                           for(var i:int=0;i<lstDataProvider.length;i++)
                                                                           {
                                                                            lstDataProvider[i].isSelected=false;
                                                                            trace("inside here!");
                                                                           }
                                                                           layerList.dataProvider = lstDataProvider;
                                                                          }
                                                                         
                                                                          ]]>
                                                                        </mx:Script>
                                                                        <mx:Panel id="layerPanel" backgroundColor="#ffffff" height="220" width="220"
                                                                          title="Layer Control Manager" showEffect="WipeRight" hideEffect="WipeLeft"
                                                                          horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                                                          <mx:VBox height="140" width="400" horizontalScrollPolicy="off">
                                                                           <mx:List id="layerList" itemClick="layerList_changeHandler(event)"
                                                                           alternatingItemColors="[#EEEEEE, white]" selectable="true"
                                                                           dataProvider="{lstDataProvider}" labelField="name" height="190" verticalScrollPolicy="off">
                                                                           <mx:itemRenderer>
                                                                            <mx:Component>
                                                                             <mx:HBox>
                                                                              <mx:CheckBox id="chkBox" change="layerCheckBox_onChange(event);">
                                                                              <mx:Script>
                                                                              <![CDATA[
                                                                             
                                                                              import mx.controls.Alert;
                                                                              import mx.events.FlexEvent;
                                                                             
                                                                              override public function set data(value:Object):void
                                                                              {
                                                                               super.data = value;
                                                                               if(value != null)
                                                                               {
                                                                                chkBox.selected = value.isSelected;
                                                                                if(!chkBox.selected)
                                                                                {
                                                                                 comboBox.selectedIndex = -1;
                                                                                 comboBox.prompt = "Please Select";        
                                                                                 comboBox.enabled = false;
                                                                                }
                                                                               }
                                                                              }
                                                                              private function layerCheckBox_onChange(evt:Event):void
                                                                              {
                                                                               data.isSelected = !data.isSelected;
                                                                               if(data.isSelected)
                                                                               {
                                                                                comboBox.enabled = true;
                                                                               }
                                                                               else
                                                                               {
                                                                                comboBox.enabled = false;
                                                                               }
                                                                               if(data.isSelected && comboBox.selectedIndex > -1)
                                                                               {
                                                                                this.dispatchEvent(new Event("addImageToApplication", true));
                                                                               }
                                                                              }
                                                                              ]]>
                                                                              </mx:Script>
                                                                              </mx:CheckBox>
                                                                              <mx:Label text="{data.label}" />
                                                                              <mx:ComboBox id="comboBox" enabled="false" width="100%" change="onComboBoxChange(event)" dataProvider="{outerDocument.comboBoxArray}" prompt="Please Select">
                                                                               <mx:Script>
                                                                                <![CDATA[
                                                                                 import mx.controls.ComboBox;
                                                                                
                                                                                 private function onComboBoxChange(evt:Event):void
                                                                                 {
                                                                                  var myCombo:ComboBox = evt.currentTarget as ComboBox;
                                                                                 
                                                                                  //if(data.label == myCombo.selectedItem.label)
                                                                                  {
                                                                                   outerDocument.comboImageUrl = myCombo.selectedItem.src;
                                                                                   if(data.isSelected)
                                                                                   {
                                                                                    this.dispatchEvent(new Event("addImageToApplication", true));
                                                                                   }           
                                                                                  }
                                                                                 }
                                                                               
                                                                                ]]>
                                                                                </mx:Script>
                                                                               <mx:itemRenderer>
                                                                                <mx:Component>
                                                                                 <mx:HBox horizontalScrollPolicy="off">
                                                                                  <mx:Image source="{data.src}" width="20" height="20" maintainAspectRatio="false" />
                                                                                  <mx:Label text="{data.label}" />
                                                                                 </mx:HBox>
                                                                                </mx:Component>
                                                                               </mx:itemRenderer>
                                                                              </mx:ComboBox>
                                                                             </mx:HBox>
                                                                            </mx:Component>
                                                                           </mx:itemRenderer>
                                                                           </mx:List>
                                                                          </mx:VBox>

                                                                        <mx:VBox top="165" left="30">
                                                                          <mx:Button label="Reset List" width="160" id="resetBut" click="resetList()"/>
                                                                        </mx:VBox>
                                                                        </mx:Panel>
                                                                        <mx:VBox id="imageBox" top="100" left="300" verticalGap="10">
                                                                         
                                                                        </mx:VBox>

                                                                        </mx:Application>

                                                                         

                                                                        Thanks,

                                                                        Bhasker

                                                                        • 34. Re: How to add in folder img to select images in List
                                                                          bryant_16 Level 1

                                                                          Hi Bhasker,

                                                                           

                                                                          I tried your codes but when my application load, all the CheckBoxes are checked by default, whereas in the earlier scenarios, the CheckBoxes are not checked when the application load. Is there something I go wrongly?

                                                                          • 35. Re: How to add in folder img to select images in List
                                                                            BhaskerChari Level 4

                                                                            @bryant_16,

                                                                             

                                                                            If you have used my correctly then all should work fine as earliar.

                                                                             

                                                                            Thanks,

                                                                            Bhasker

                                                                            • 36. Re: How to add in folder img to select images in List
                                                                              bryant_16 Level 1

                                                                              Hi Bhasker,

                                                                               

                                                                              I'm actually using this ImageComboBox.as class to populate out the picture when the person click on the icon from the ComboBox, so when I call this resetList() function, how do I remove the picture away from the ComboBox?

                                                                               

                                                                              I'm using this ImageComboBox.as class:

                                                                               

                                                                              public class ImageComboBox extends ComboBox {

                                                                               

                                                                                      /* --- Variables --- */

                                                                               

                                                                                      /**

                                                                                       * Property on the data object that holds the image location.

                                                                                       *

                                                                                       * @default url

                                                                                       */

                                                                                      public var imageDataField:String = "src";

                                                                               

                                                                                      /**

                                                                                       * Image component.

                                                                                       */

                                                                                      protected var image:Image;

                                                                               

                                                                                      /**

                                                                                       * Measured width of the image.

                                                                                       */

                                                                                      protected var imageMeasuredWidth:Number;

                                                                               

                                                                                      /**

                                                                                       * Measured height of the image.

                                                                                       */

                                                                                      protected var imageMeasuredHeight:Number;

                                                                               

                                                                                      /* === Variables === */

                                                                               

                                                                                      /* --- Functions --- */

                                                                               

                                                                                      override protected function createChildren():void {

                                                                                          super.createChildren();

                                                                               

                                                                                          if(!image) {

                                                                                              image = new Image();

                                                                                              image.focusEnabled = false;

                                                                               

                                                                                              addChild(image);

                                                                                          }

                                                                                      }

                                                                               

                                                                                      override protected function measure():void {

                                                                                      super.measure();

                                                                                     

                                                                                      imageMeasuredHeight = getExplicitOrMeasuredHeight() - getStyle("paddingTop") - getStyle("paddingBottom");

                                                                                          imageMeasuredWidth  = getExplicitOrMeasuredWidth() - getStyle("paddingLeft") - getStyle("paddingRight") - getStyle("arrowButtonWidth");

                                                                                      }

                                                                               

                                                                                      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

                                                                                          super.updateDisplayList(unscaledWidth, unscaledHeight);

                                                                               

                                                                                          if(selectedItem) {

                                                                                          var imageSourceURL:String;

                                                                                         

                                                                                          // TODO: allow a String to be the data object, and hide the label so [object Object] doesn't appear

                                                                                          if(selectedItem && selectedItem[imageDataField]) {

                                                                                          imageSourceURL = selectedItem[imageDataField];

                                                                                          }

                                                                               

                                                                                              if(imageSourceURL) {

                                                                                              image.source = imageSourceURL;

                                                                                             

                                                                                              // TODO: include text placement here

                                                                                              var leftPadding:Number = getStyle("paddingLeft");

                                                                                             

                                                                                              image.setActualSize(imageMeasuredWidth, imageMeasuredHeight);

                                                                                              image.move(leftPadding, (unscaledHeight - imageMeasuredHeight) / 2);

                                                                                              }

                                                                                          }

                                                                                      }

                                                                               

                                                                                      /* === Functions === */

                                                                               

                                                                                  }

                                                                              • 37. Re: How to add in folder img to select images in List
                                                                                bryant_16 Level 1

                                                                                Hi there,

                                                                                 

                                                                                Is is possible to implement this?

                                                                                • 38. Re: How to add in folder img to select images in List
                                                                                  bryant_16 Level 1

                                                                                  Hi guys,

                                                                                   

                                                                                  Anyone has any ideas about this?