Data Dependent decoratorClass in MobileIconItemRenderer Example
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
This small example shows you how you can create a List that has uses a MobileIconItemRenderer that has a decoratorClass that depends on the data.
Create a new Mobile Flex Project, give it a name and click finish. Navigator to the default home view and add a list, dataprovider and a method that creates some dummy data:
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 | <?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="MobileIconItemRenderer" initialize="init()"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var items:ArrayCollection; // Generate dummy data private function init():void { items = new ArrayCollection(); var obj:Object; for( var i:int=0; i<10; i++ ) { obj = new Object(); obj.Name = "List item " + i; obj.Description = "Description " + i; obj.Status = i % 3; items.addItem(obj); } } ]]> </fx:Script> <s:List id="myList" dataProvider="{items}" labelField="Name" width="100%" height="100%" itemRenderer="views.ListItemRenderer"/> </s:View> |
First create an assets package and add three icons to it, you can find the icons here.
You can see that the list uses an itemRenderer, create it by creating a new MXML component that’s based on MobileIconItemRenderer in the views package, name it ListItemRenderer. Add the following code to it:
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:MobileIconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" messageField="Description"> <fx:Script> <![CDATA[ // Embed "Done" icon [Embed(source="assets/done.png")] private var iconDone:Class; // Embed "Open" icon [Embed(source="assets/open.png")] private var iconOpen:Class; // Embed "Progress" icon [Embed(source="assets/progress.png")] private var iconInProgress:Class; // Set decoratorClass depending on status override public function set data(value:Object):void { if(value != null) { super.data = value; var status:int = value.Status; var icon:Class; switch(status){ case 0: icon = iconOpen; break; case 1: icon = iconInProgress; break; case 2: icon = iconDone; break; } this.decoratorClass = icon; } } ]]> </fx:Script> </s:MobileIconItemRenderer> |
Now run your application. If everything is ok, you should see a different icon for each of the statusses (1,2 or 3).
Related posts:
- CheckBox in List using MobileIconItemRenderer for Flex Mobile
- Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
- Images in DataGrid depending on data
- Style AdvancedDataGrid depending on data example
- Save Data to File System with AIR in Flex 4
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(8 votes, average: 4.38 out of 5)
Loading ...Comments
3 Responses to “Data Dependent decoratorClass in MobileIconItemRenderer Example”
I don’t think it gets much easier than that, thanks for the explination!
hi,thx your example..but i found there has one problem…
i change
for( var i:int=0; i<10; i++ )
to
for( var i:int=0; i<30; i++ )
and run the app.. when i drag to the end of List…then drag to the top..
the icon of every row was wrong …..
how can i resolve this problem???
thank you anain..!
Greate example,
In FB 4.6 I get in ListItemRenderer this error
Could not resolve to a component implementation.
any suggestions
Thanks in advance.
Your noob