user interface - How to extend a list to add a UI Component? -
how can extend spark list add ui component on it?
i'm assuming want add ui component items within list itself, in case can use itemrenderers. there several good examples out there.
i'm pasting fancy example flex examples (great site) below.
myapplication.mxml:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ --> <s:application name="spark_list_itemrenderer_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; s|list { chromecolor: #333333; color: white; contentbackgroundcolor: black; fontsize: 24; } </fx:style> <s:list id="list" itemrenderer="customlistitemrenderer" labelfield="name" width="400" horizontalcenter="0" verticalcenter="0"> <s:layout> <s:verticallayout horizontalalign="justify" gap="0" requestedrowcount="6" /> </s:layout> <s:dataprovider> <s:arraylist> <local:productvo name="adobe illustrator cs5" icon="@embed('ai_appicon-tn.gif')" /> <local:productvo name="adobe air 2.0" icon="@embed('air_appicon-tn.gif')" /> <local:productvo name="coldfusion 9" icon="@embed('cf_appicon-tn.gif')" /> <local:productvo name="dreamweaver cs5" icon="@embed('dw_appicon-tn.gif')" /> <local:productvo name="flash professional cs5" icon="@embed('fl_appicon-tn.gif')" /> <local:productvo name="adobe flash player 10.1" icon="@embed('fl_player_appicon-tn.gif')" /> <local:productvo name="fireworks cs5" icon="@embed('fw_appicon-tn.gif')" /> <local:productvo name="flex 4.0" icon="@embed('fx_appicon-tn.gif')" /> <local:productvo name="lightroom 2.0" icon="@embed('lr_appicon-tn.gif')" /> <local:productvo name="photoshop cs5" icon="@embed('ps_appicon-tn.gif')" /> </s:arraylist> </s:dataprovider> </s:list> </s:application>
customlistitemrenderer.mxml:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ --> <s:itemrenderer name="customlistitemrenderer" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" autodrawbackground="false"> <s:layout> <s:horizontallayout verticalalign="middle" paddingleft="5" paddingright="5" paddingtop="5" paddingbottom="5" /> </s:layout> <s:states> <s:state name="normal" /> <s:state name="hovered" /> <s:state name="selected" /> </s:states> <s:bitmapimage source="{data.icon}" /> <s:label text="{data.name}" textdecoration.hovered="underline" paddingleft.selected="5" width="100%" maxdisplayedlines="1" showtruncationtip="true" /> <s:label text="»" scalex="2" scaley="2" /> </s:itemrenderer>
and productvo.as:
/** http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ */ package { public class productvo extends object { [bindable] public var name:string; [bindable] public var icon:class; } }
Comments
Post a Comment