SmartLogic Solutions Blog

I needed to display an Image inside of a ComboBox for a recent project. The image of a selectedItem needed to appear in the ComboBox when it is collapsed and the image needed to be specified as a String.

I 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 application.

So I simply extended ComboBox to include an Image within it, and added some sizing calculations so it would respect padding. An example follows below:

The ImageComboBox class

1. Adds an Image in the createChildren method
2. Measures the available size the image can take up in the measure method
3. In the updateDisplayList method, if an item is selected:
1. Sets the source for the Image
2. Places and sizes the Image based on calculations from measure

In order to prevent the ComboBox from displaying “[object Object]” along with the image, be sure to include a label=”" property on the items in the dataProvider for the ComboBox. The following code is the MXML main file for the embedded SWF above:

Example MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	            xmlns:sls="com.slslabs.flex.controls.*">
 
	<mx:Label text="This demonstrates using the ImageComboBox" />
 
	<sls:ImageComboBox width="60" paddingLeft="5" paddingTop="5" paddingBottom="5">
		<sls:dataProvider>
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/mario-32x32.png" label="" />
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/luigui-32x32.png" label="" />
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/start-32x32.png" label="" />
		</sls:dataProvider>
		<sls:itemRenderer>
			<mx:Component>
				<mx:Image source="{data.url}" />
			</mx:Component>
		</sls:itemRenderer>
	</sls:ImageComboBox>
 
</mx:Application>

I pushed the code into my first git repository at github. If you’re a git n00b, then after you’ve installed git (or checked out the Git Eclipse Plugin - which I still need to do) then pull down the code by using the command:

git clone git://github.com/gjastrab/imagecombobox.git

If you aren’t on the git bandwagon yet, then just right-click and save as… to download the ImageComboBox.as file for now.

I plan on improving it soon to have it respect the positioning of a label or to optionally hide the label.

This entry was posted on Monday, December 1st, 2008 at 12:17 pm by Greg Jastrab. Greg Jastrab joined SmartLogic Solutions in June 2006. He is now the Technical Project Manager and oversees all Flash/Flex/AIR development. Follow @gjastrab on twitter

Tags: ComboBox, Flex, Image

This post is filed under Flex, Greg Jastrab. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.