Flex 2.0.1 ComboBox with icon support.

April 28, 2007

Sometimes a ComboBox with icons in the list as well as in the text display area can be useful. However the out of the box Flex ComboBox component dosn’t support this. Here is one way of doing it.

IconComboBox2

Basically I’ve extended the existing ComboBox adding iconField and iconFunction properties. I had to instance my own ClassFactory for the internal list that is used as the dropdown so that I could pre-initialize the required properties. I override the measuredWidth so that I can make room for the icon, and adjust the x position of the internal textInput to compensate.

A little addition to the toolbox that can come in really handy.

Sample and Source : IconComboBox

Enjoy.

Jason Hawryluk

Advertisements

46 Responses to “Flex 2.0.1 ComboBox with icon support.”

  1. flexpaul Says:

    When I click view source and it goes to delicious. what’s happening?


  2. Seems to be working fine here? Weird.
    Anyone else having trouble ?

    jason

  3. eightlines Says:

    View Source appears to be working fine here. Thanks for the code!


  4. […] Flex 2.0.1 ComboBox with icon support. « Flexible Experiments […]

  5. Ben Holloway Says:

    Source link seems to be not working


  6. Seems to be working for me.

    Ben, try again, and let me know.

    Jason

  7. Jeoren Says:

    Do you have embed the icons? I need to load them dynamically. But it keeps throwing an error in measuredWidth (null object reference)


    var l:String = element.@nld+” – “+element.@nom;
    var ic:String = “images/flags/”+String(element.@nld).toLowerCase()+”.png”; trace(ic);
    countryArr[cntr] = {label:l, data:ic};

  8. Tim Wilson Says:

    Thanks, very useful 🙂


  9. […] was off to Google to see if anyone had done this previously. We found this great post on the blog Flexible Experiments explaining how you can create a combo box which supports icons. Of course our designers […]

  10. Phone Says:

    Viewing source code seems to work OK.

  11. Denis Morentsov Says:

    Jason, this is a terrific piece of code. Do you know if it would be simple to extend the icon to contain an object drawn in Flex as opposed to an image?

  12. Elton Bicalho do Carmo Says:

    Hey Jason,

    great job! It will be very useful at my project (Teeth chart).

    Excellent!

  13. glinto Says:

    Jason,

    Thanks for the code. Not specifying icon however throws an error at creation. Your measureWidth shoulb changed to sg like that:

    override public function set measuredWidth(value:Number):void
    {
    if (displayIconObject == null)
    super.measuredWidth = value + getStyle(“cornerRadius”);
    else
    super.measuredWidth = value + (DisplayObject(displayIconObject).width+getStyle(“cornerRadius”));
    }

  14. Mohammed Muzzammil Says:

    Thanks for the code. Its really good

  15. Bagish Says:

    Can you share ur source code.

  16. Nick Says:

    Thanks for this great code. I also need to programatically load the icons. Basically, I have a folder of xml files representing translations of the user interface (English, French, German, etc). For each xml file, there is an icon file (png) of the flag for that language.

    The folder is scanned and all available languages are listed in the combo box. How therefore do I dynamically load the icon too?

    i.e. how do I programatically set the icon file to “en_US.png” when programatically creating the drop down list?

    Many thanks in advance for any advice you can give!

  17. Vijay Says:

    Nick, you need to use the iconFunction.

  18. Vijay Says:

    Joeren, If you have 100 images and you need to toggle between them…then you have to load/embed all 100 images..then use an IconFunction and provide to the IconComboBox. Then change the icon field for each the object in your iconcombobox.dataProvider.

    Also make this change in the IconCombobox.as (courtesy of Glinto see previous posting)

    override public function set measuredWidth(value:Number):void
    {
    if (displayIconObject)
    super.measuredWidth = value + getStyle(”cornerRadius”);
    else
    super.measuredWidth = value + (DisplayObject(displayIconObject).width+getStyle(”cornerRadius”));
    }

  19. Vijay Says:

    In my posting above,by this line –>”Then change the icon field for each the object in your iconcombobox.dataProvider” —

    I meant programmatically based on what image you want to see for each ITEM, change the @icon property of each of the iconcombobox.dataprovider.object

  20. ej Says:

    What is the following code doing? How can it return a class from just text?

    if (data[iconField].length() != 0)
    {
    icon = String(data[iconField]);
    if (icon != null)
    {
    iconClass = Class(systemManager.getDefinitionByName(icon));
    if (iconClass){
    return iconClass;
    }
    return document[icon];
    }
    }


  21. Hi there, great tutorial! I’m working on a component in Flash AS3, in which you can place any text, image or equation inside a comboBox. I have set the iconFunction like this:

    iconFunction = function(item:Object):Object {
    var o:Object=getIcon(item.data);
    return o;
    }
    public function getIcon(i:int):Object{
    if(i<0){
    return null;
    }
    if(contentsArray[i].type==”EQN”){
    var m1:MathObject=new MathObject(contentsArray[i].param);
    return m1;
    }
    else if(contentsArray[i].type==”IMG”){
    var m2:ImgObject=new ImgObject(contentsArray[i].param);
    return m2;
    }
    else{
    return null;
    }
    }

    My MathObject and ImageObject both extend MovieClip and have some data associated with them (xml string or url string is the .param)

    My problem is that whilst MathObjects work fine, the images in ImgObjects jump up about 10 pixels when you rollover them and I can’t figure out why. It works fine if the MovieClips are in the library, and the mathobjects are drawn dynamically and work fine, but Img objects don’t – I’ve tried using a Loader and also getting the bitmap from the loader and just using that, but they still jump. Anyone got any ideas??
    Thanks!
    John G


  22. Sorry solved it – the loader hadn’t finished loading when the CellRenderer drew the icon.

  23. jason Says:

    How can you truncate the first item in list or I should say the one in the prompt?

  24. Igor Says:

    Thanks for this super code

  25. Murray Eaton Says:

    Nice stable code. Thank you for your insight!

  26. xcom Says:

    and to get the value of the item as I do

  27. mindy Says:

    thank you soo much for this post! i was trying to code this and figure it out. i’m very appreciative.

  28. SGIA Says:

    Hello, thanks for that, very nice.
    I have a question – I am using your combo box in a repeater component and setting the selectedIndex value based on the value in the dataProvider when the user changes from one data set to the next.

    If I have the repeater component set to “recycleChildren”, it randomly skips updating the image in the ComboBoxes to reflect the value in selectedIndex. The selectedIndex is correct, however the control isn’t updating and displaying the icon for the selected index item.

    If I set recycleChildren to false, it updates fine however the performance is of course then lagging.

    Any ideas?

    Thanks


  29. […] was surprised that a quick search didn’t find any components to allow this. The closest was a post by Jason Hawryluk, however this required the image to be embedded into the […]

  30. Rocky Says:

    Ok I’m pretty new at all this, but one simple questions, how do I exactly use / attach this to my .fla?

  31. Vijay Anand Mareddy Says:

    FYI, iconFunction is working fine but NOT iconField (Yes, i do have icon field in each dataItem)

    • Tim Herman Says:

      I had the same problem. The issue is that the setter doesn’t execute when you are setting a property to the same value it currently holds. In this case, setting iconField to “icon” exposes the problem.

      Fix — initialize the DropDownFactory iconField property to _iconField in the constructor:

      public function DexIconCombobox():void
      {
      super();

      //setup the properties on the factory before init so that
      //the drop down will gracefully adopt them.
      internalDropdownFactory.properties = { iconField:_iconField,iconFunction:null };
      dropdownFactory = internalDropdownFactory;
      }

  32. Gautham Says:

    Hi ,
    I have a problem in displaying the icon in the combobox. what i did is in creation complete i made the selectedItem of the combobox to display a paricular item .The item label is displayed correctly but not the icon for that label.Instead it shows the icon of the first item .
    This occurs only when the file is first loaded.
    then when i select a paticular item from the combobx its labels and the icons are shown correctly.what went wrong in this ?

    thanks
    Gautham

  33. Jessie Williams Says:

    Nice job! I wonder if there is any way to override the prompt attribute. This would be helpful for the default selection.

  34. Scott Schafer Says:

    Great work! Incidentally, I compiled this with the 3.4 SDK (crossing my fingers), and it worked perfectly. Thanks so much.


  35. Excellent example! Thank You!
    One more note, there is a override setter function that handles if update of the icon if the ‘selectedIndex’ property is updated; however, one is also needed for the ‘selectedItem’ setter function.

    /**
    * when the ‘selectedItem’ changes so should the icon
    **/
    override public function set selectedItem(value:Object):void
    {
    super.selectedItem = value;

    if (value!=null)
    {
    showIcon();
    }
    }

  36. veeru Says:

    Thank you for this code…

    It’s very useful for me..


  37. […] Encontrei esse exemplo muito legal de combobox com ícone no site flexibleexperiments (link), o projeto é em flex 2, porém, funciona perfeitamente no flex 3. Abaixo, minha utilização da […]

  38. den Says:

    Jason, which SDK version do you have?

  39. Colin Davies Says:

    Love to see the source, the sample looks great though.

  40. Robert Says:

    I everybody. Just found this great code and was wondering if there is a possibility to only show the icon when the box is not foulded out. And only show icon and text if the box is folded out?


  41. […] ||| Hi Brent this is a good question and I hadnt seen any example that does this…anytime the combo is collapsed it goes to a ‘dumb’ text field. THe only thing i could find is this https://flexibleexperiments.wordpress.com/2007/04/28/flex-201-combobox- with-icon-support/ […]

  42. Tahir Alvi Says:

    Many many thanks for Code.

    Thank You.


  43. What about if I want to display icons at the right of the text ?

  44. Akiva Kent Says:

    The sample files are not available. Where can they be downloaded?

  45. Javier Says:

    The sample link is broken


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: