Flex Mobile: IconItemRenderer Example

By Alain Thibodeau – Consultant

For Flex mobile applications you should use the mobile optimized item renderers. The default base class for mobile renderers is the LabelItemRenderer. Extending this is the IconItemRenderer, which is a handy renderer that includes an icon area, label and message.

Here is an example of using IconItemRenderer in the simplest form:

MyIconItemRenderer.mxml

1
2
3
4
5
6
7
8
9
10

<s:IconItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    iconField="icon"
    labelField="label"
    messageField="message"
    iconWidth="45"
    iconHeight="45"
    />

HomeView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:List
width="100%"
height="100%"
itemRenderer="MyIconItemRenderer"
>
<s:dataProvider>
<s:ArrayList>
<fx:Object
label="Title 1"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 2"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 3"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 4"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 5"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 6"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:View>

Outcome:

Here is an example of IconItemRenderer using messageFunction, labelFunction to display content other than what is directly in our dataprovider. I added a color property to my dataprovider objects.

Updated HomeView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<?xml version="1.0" encoding="utf-8"?>
<s:View
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView"
>
<s:List
width="100%"
height="100%"
itemRenderer="MyIconItemRenderer"
>
<s:dataProvider>
<s:ArrayList>
<fx:Object
label="Title 1"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Red"
/>
<fx:Object
label="Title 2"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Blue"
/>
<fx:Object
label="Title 3"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Green"
/>
<fx:Object
label="Title 4"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Pink"
/>
<fx:Object
label="Title 5"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Brown"
/>
<fx:Object
label="Title 6"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Yellow"
/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:view>

And here is the modified MyIconItemRenderer.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
iconField="icon"
labelField="label"
labelFunction="getLabel"
messageField="message"
messageFunction="getMessage"
iconWidth="45"
iconHeight="45" >
<fx:Script>
<![CDATA[
private function getMessage(item:Object):String {
return item.message + " - " + new Date().toDateString();
}
private function getLabel(item:Object):String {
return item.message + " - " + item.color;
}
]]>
</fx:Script>
</s:IconItemRenderer>

Outcome:

For online and in-person Flex and AIR training, checkout our course finder.

This entry was posted on Thursday, January 5th, 2012 at 9:42 am and is filed under Actionscript, AIR, Android, Flash, Flash Builder, Flash Player, Flex, iOS, Mobile. 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.

Flex Mobile: IconItemRenderer Example

Leave a Reply