The following example shows how you can display icons in a Spark List control in Flex 4 by creating a custom item renderer.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/24/displaying-icons-in-a-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark"> <s:List id="list" labelField="label" itemRenderer="skins.CustomIconItemRenderer" horizontalCenter="0" verticalCenter="0"> <s:dataProvider> <s:ArrayList> <fx:Object label="red" ico="@Embed('assets/bullet_red.png')" /> <fx:Object label="orange" ico="@Embed('assets/bullet_orange.png')" /> <fx:Object label="yellow" ico="@Embed('assets/bullet_yellow.png')" /> <fx:Object label="green" ico="@Embed('assets/bullet_green.png')" /> <fx:Object label="blue" ico="@Embed('assets/bullet_blue.png')" /> </s:ArrayList> </s:dataProvider> </s:List> </s:Application>
And the custom item renderer, skins/CustomIconItemRenderer.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/24/displaying-icons-in-a-spark-list-control-in-flex-4/ --> <s:ItemRenderer name="CustomIconItemRenderer" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" focusEnabled="false"> <!-- states --> <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> <s:State name="normalAndShowsCaret"/> <s:State name="hoveredAndShowsCaret"/> <s:State name="selectedAndShowsCaret"/> </s:states> <fx:Script> <![CDATA[ override public function set label(value:String):void { super.label = value; labelDisplay.text = label; } ]]> </fx:Script> <s:Rect left="0" right="0" top="0" bottom="0"> <s:stroke.normalAndShowsCaret> <s:SolidColorStroke color="{selectionColor}" weight="1"/> </s:stroke.normalAndShowsCaret> <s:stroke.hoveredAndShowsCaret> <s:SolidColorStroke color="{selectionColor}" weight="1"/> </s:stroke.hoveredAndShowsCaret> <s:stroke.selectedAndShowsCaret> <s:SolidColorStroke color="{selectionColor}" weight="1"/> </s:stroke.selectedAndShowsCaret> <s:fill> <s:SolidColor color.normal="{contentBackgroundColor}" color.normalAndShowsCaret="{contentBackgroundColor}" color.hovered="{rollOverColor}" color.hoveredAndShowsCaret="{rollOverColor}" color.selected="{selectionColor}" color.selectedAndShowsCaret="{selectionColor}" /> </s:fill> </s:Rect> <s:BitmapImage id="icon" source="{data.ico}" verticalCenter="0" left="3" /> <s:SimpleText id="labelDisplay" verticalCenter="0" left="23" right="3" top="6" bottom="4"/> </s:ItemRenderer>
View source is enabled in the following example.
Icons copyright of famfamfam.com.
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
{ 9 comments… read them below or add one }
How do you know what the states are for a particular component? Where is it defined?>
Doron Katz,
You can refer to the Flex 4 beta documentation at http://livedocs.adobe.com/flex/gumbo/langref/spark/ and look at the Skin States section, or you can look in the default Spark skins.
For example, for the Spark Button control, go to the following URL:
http://livedocs.adobe.com/flex/gumbo/langref/spark/components/Button.html#SkinStateSummary
If the skin states table is not visible, click the “Show Inherited Skin States” link to see the inherited skin states. You should see the four states as: “up”, “over”, “down”, and “disabled”.
The other option is to look in the Spark skin itself. Personally, when creating a custom Spark skin I usually start by copying the default Spark skin and making modifications. For example, for the default Spark Button control skin, go to the following path in your Flex SDK: <Flex SDK >\frameworks\projects\flex4\src\spark\skins\spark\ButtonSkin.mxml.
You should see the following states defined in the MXML code:
<!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states>Also, I should mention that the Flex 4 SDK Downloads page now includes nightly versions of the Flex 4 Language Reference. To download the latest Flex 4 SDK and the latest Flex 4 Language Reference, go to http://opensource.adobe.com/wiki/display/flexsdk/Download%2bFlex%2b4.
Hope that helps,
Peter
Hi, copied and pasted code but compiler is grumbilng that there is no set label method to override in ItemRenderer – i.e. 1020: Method marked override must override another method.
I’m using the beta standalone – not sure whether the class has changed in the nightly builds or whether perhaps there is a code error here?
Andy,
A lot of stuff has changed since the beta build. Download the latest Flex 4 Nightly build and try again.
If it still gives an error in the latest build, let me know and maybe the API has changes since I did this example.
Peter
Does anybody no how to return data from the itemrender for a spark list. say i had a checkbx in my itemrenderer how can I get that info back to my main component if its selected or not. I looked at datagrid and itemeditor but I really rather use a spark list. Thanks
I was also getting the ‘method must override…’ error. I guess the getter/setter names in ItemRenderer have changed from ‘label’ to ‘labelText’. Here’s the script block with the modifications I used to get the sample working:
Try posting the code again…
Yes, with Tim Staller say, it runs. I am under SDK 4.0.0.7573
But why it became so difficult for a simple ItemRenderer?
For a speed of execution faster? And why overriding the label?
What returns to complicate such a simple itemrenderer to a list?
Thank you to those who want to point me to an explanation and where I can learn.
…….
override public function set labelText(value:String):void
{
super.labelText = value;
labelDisplay.text = labelText;
}
……
:)