Change component ItemRenderer at runtime (FX3)
10 September 2009
No Comment
A lot of Flex components support the itemRenderer property, to customize their item layout.
In this article we’ll use the List component to display the RSS Actionscript.it Last 5 Tutorial content and we’ll define 3 itemRenderers to switch 3 different content views at runtime.
Test online demo
Following an RSS XML item node sample:
<item> <title>XML e E4X in FLEX3: visualizziamo gli RSS del sito actionscript.it</title> <link>http://09-actionscript-it.gnstudio.com:/it/index.cfm/t....</link> <comments>http://09-actionscript-it.gnstudio.com:/it/index....</comments> <guid isPermaLink="false">96B4C1B7-F756-53CB-907A0F8467849D74</guid> <pubDate>Tue, 08 Sep 2009 00:00:00 +0200</pubDate> <description><![CDATA[<p>Visualizziamo lelenc....]]></description> <category><![CDATA[ActionScript 3.0]]></category> <category><![CDATA[Adobe]]></category> <category><![CDATA[Flex]]></category> <category><![CDATA[Flex 3.x]]></category> </item>
In the following image, the final result of all itemRenderers:
From the top:
1) the default List view
2) itemRenderer1: a VBOX with title and link
3) itemRenderer2: Date, Title and Description
4) itemRenderer3: Title and the Categories ComboBox
Following the final SWF you can test:
This movie requires Flash Player 10
SOURCE CODE:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="loadXML.send()"> <mx:Script> <![CDATA[ import itemRenderers.*; import mx.rpc.events.ResultEvent; import mx.controls.Alert; /** * Dispatched after XML loading is completed * * @param event itemRenderer ResultEvent */ private function resultHandler(event:ResultEvent):void { // List population listCompo.dataProvider = loadXML.lastResult.channel.item } /** * Change List ItemRenderer and rowHeight property * * @param itemRenderer itemRenderer Class * */ private function switchItemRenderer(itemRenderer:Class):void { // Set a new ItemRenderer defining a new ClassFactory var customItemRenderer:ClassFactory = new ClassFactory(itemRenderer); listCompo.itemRenderer = customItemRenderer; } ]]> </mx:Script> <!--Load RSS feeds from ActionScript.it (last 5 tutorials)--> <mx:HTTPService id="loadXML" url="http://09-actionscript-it.gnstudio.com/tasks/feed/?feedID=3A0EFD47-D4B6-5F2A-C5F6A213EB7C7DBB" useProxy="false" resultFormat="e4x" result="resultHandler(event)" fault="Alert.show('File XML with errors or not found', 'error')" /> <!--The result object--> <mx:XMLListCollection id="xmlData" source="{loadXML.lastResult.channel}" /> <!--List Component --> <mx:List id="listCompo" dataProvider="{xmlData}" labelField="title" width="550" height="350" variableRowHeight="true" /> <!-- Item Renderers Buttons change--> <mx:Label x="10" y="360" text="Change itemRenderer:"/> <mx:Button x="150" y="358" label="itemRender1" click="switchItemRenderer(ItemRenderer1)" /> <mx:Button x="260" y="358" label="itemRender2" click="switchItemRenderer(ItemRenderer2)"/> <mx:Button x="370" y="358" label="itemRender3" click="switchItemRenderer(ItemRenderer3)"/> </mx:Application>
itemRenderers/ItemRenderer1.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="40" horizontalScrollPolicy="off" verticalScrollPolicy="off" verticalGap="0"> <mx:Label text="{data.title}" fontWeight="bold"/> <mx:Label text="{data.link}" fontWeight="bold"/> <mx:HRule width="100%" /> </mx:VBox>
itemRenderers/ItemRenderer2.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="80" horizontalScrollPolicy="off" verticalScrollPolicy="off" toolTip="{data.title}"> <!-- item Date: RSS feeds return Date values using this format: "Tue, 08 Sep 2009 00:00:00 +0200", but it's too long for us, so we get a substring, displaying only "08 Sep 2009" --> <mx:Label text="{data.pubDate.substr(5, 12)}" color="#cccccc"/> <!--item Title--> <mx:Label text="{data.title}" fontWeight="bold" color="#FF0000"/> <!--item Description--> <mx:Label htmlText="{data.description}" /> <mx:HRule width="100%" /> </mx:VBox>
itemRenderers/ItemRenderer3.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="30" horizontalScrollPolicy="off" verticalScrollPolicy="off" toolTip="{data.title}"> <!--item Title--> <mx:Label width="100%" text="{data.title}" fontWeight="bold" color="#FF0000"/> <!--Categories List--> <mx:ComboBox width="130" dataProvider="{data.category}" /> </mx:HBox>
Leave your response!