Spark List alternating ItemRenderer

Hello,
lets say that I what a Spark List display its content like the following:
[Picture] text
text [Picture]
Is there a way to define two (or even more,e.g: as template) custom ItemRenderer and toggle between them?
How is that solved in the DataGrid for example, where the background color is alternating.
Best regards
Marc

You can try to build a custom ItemRenderer and determine the color,
state, etc. based on the itemIndex property. For example you
can use something like:
if (itemIndex % 2 == 0)
setStyle("backgroundColor", 0xFF0000);
In your case I would try adding custom states to the ItemRenderer. You can read more about this in this post:
http://forums.adobe.com/message/2082895

Similar Messages

Spark List in Actionscript: Passing Layout & itemRenderer in constructor

I am trying to create a generic List, where I can pass the layout & item renderer as parameters.
Since it is not possible to pass parameters to a MXML component, I figured I should create my List in Actionscript.
I figured it would go something like this:
public class GenericList extends List {
   public function GenericList(iR:ItemRenderer, ac:ArrayCollection, layout:LayoutBase) {
     super();
     this.dataProvider = ac;
     this.layout = ...     // don't even have access to this.layout
     this.itemRenderer = iR // Cannot pass itemRender
I would prefer to have the List in MXML (because It will be easier using states later), but If I am forced to use pure Actionscript so I can instantiate it and pass in parameters, any help would go a long way.

hi
cant you do this to pass in parameters?
<mx:List dataProvider="{myDP}" layout="{myL}" itemRenderer="{myIR}" .. />
[Bindable]
var myDP:ArrayCollection;
[Bindable]
var myL:LayoutBase;
[Bindable]
var myIR:IFactory;
function setList(iR:IFactory, ac:ArrayCollection, layout:LayoutBase):void
     myIR = iR;
     myDP = ac;
     myL = layout;
(spark list expects itemRenderer to be an IFactory instance)

How to handle multiple selection in the Spark List control with checkbox as itemrenderer?

Hi All,
I am using checkbox as an ItemRenderer in spark list.
I have a query.
how to handle multiple selection in the Spark List control with checkbox as itemrenderer?
how to retrieve the selected item label?
Thank you in advance.

Hi there, I'll tweak your code a little bit to something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
    <mx:Script>
        <![CDATA[
             import mx.events.ListEvent;
             import mx.controls.CheckBox;
           [Bindable]
           private var mySelectedIndexes:ArrayCollection=new ArrayCollection();
            private function onChange(e:ListEvent):void
               if(CheckBox(e.itemRenderer).selected){
                         mySelectedIndexes.addItem(e.rowIndex);
               }else{
                              mySelectedIndexes.removeItemAt(mySelectedIndexes.getItemIndex(e.rowIndex));
               chkList.selectedIndices=mySelectedIndexes.toArray();
        ]]>
    </mx:Script>
<mx:ArrayCollection id="collection">
        <mx:Object label="Test A"/>
        <mx:Object label="Test B"/>
        <mx:Object label="Test C"/>
        <mx:Object label="Test D"/>
        <mx:Object label="Test E"/>
        <mx:Object label="Test F"/>
        <mx:Object label="Test G"/>
    </mx:ArrayCollection>
<mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox" itemClick="onChange(event);" allowMultipleSelection="true"/>
</mx:Application>

Return data from spark list itemrenderer

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

thanks I also found another way to doing it. A click handler on my list when that fires I can check if checkbx has been selected by doing event.target.document.mycheckBx.selected this will not work if using currentTarget cause it take the info from the itemRenderer. Now I understand the difference between currentTarget and target.
not sure if this is a better way to access the data I think I might still just dispatch a event and do it your way.
Its weird that mx:list has a editItemRenderer and s:list does not
thanks again TK

Spark List Itemrenderer items outside of List

I have a spark list and i want some of the items in it to appear out side of the list depending on the users interaction.
Is there a way to make items of an item renderer appear outsid of the LIst container?
When i use basic layout on the lsit and explicitly set the x and y, they appear behind the list.
Thanks.

Hi jmandawg,
My ListRenderer.mxml may be what you want as follows,
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" hide="mOut(
null)" mouseMove="mOut(event)" mouseOut="mOutValueItem(event)"mouseDownOutside="mOut(event)" creationComplete="inited()"
autoDrawBackground="
true">
<fx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.managers.PopUpManager;
import mx.utils.StringUtil;
import flash.text.TextLineMetrics;
public var mouseOnPopup:Boolean = false;
public var vi:mx.controls.TextInput;
private function inited():void {vi =
new mx.controls.TextInput();vi.editable=
false;vi.addEventListener(MouseEvent.MOUSE_OUT, mOut);
vi.addEventListener(MouseEvent.ROLL_OUT, mOut);
vi.addEventListener(MouseEvent.MOUSE_OVER, mOverPopup);
private function mOut(event:MouseEvent):void {
if ( vi.isPopUp ) {PopUpManager.removePopUp(vi)
mouseOnPopup =
false;}
private function mOverPopup(event:MouseEvent):void {mouseOnPopup =
true;}
private function mOutValueItem(event:MouseEvent):void {
if ( vi.isPopUp && !mouseOnPopup) {PopUpManager.removePopUp(vi)
private function mOver(event:MouseEvent):void {
var txt:String = itemValue.texttxt = StringUtil.trim(txt);
if(txt.length<5) return;
if(!vi.isPopUp) {PopUpManager.addPopUp(vi,
this.parent)vi.text=txt;
vi.setStyle(
'fontSize',18);
var txtMetrics:TextLineMetrics = vi.measureText(vi.text);vi.width=txtMetrics.width*1.2
vi.height=itemValue.height*1.4
var p:Point = itemValue.localToGlobal(new Point(itemValue.x, itemValue.y));vi.x=p.x;
vi.y=p.y-10;
]]>
</fx:Script>
<s:TextInput id="itemValue" text="{data.value}" width="200" mouseOver="mOver(event)" mouseOut="mOutValueItem(event)" mouseMove="mOut(event)" editable="false"/>
</s:ItemRenderer>
You may test it with the following in your main.mxml
Bindable]
private var detailAC:ArrayCollection = new ArrayCollection([{value:"nteDevice.device"},{value:
"nteDevice.deviceTypenteDevice.loopbackIpAddr"},{value:
"nteDevice.ipAddressnteDevice.loopbackIpAddr"},{value:
"nteDevice.loopbackIpAddrnteDevice.loopbackIpAddr"}, {value:
"nteDevice.release"},{value:
"nteDevice.releasenteDevice.loopbackIpAddr"},{value:
"nteDevice.clli"},{value:
"nteDevice.provisionStatus"}]);
<s:List id="lst" itemRenderer="com.att.ntscp.view.component.ListRenderer" dataProvider="{detailAC}" width="200" height="200"/>
Is it a little bit trick?
Jeffrey

Extending a component which already extends a spark list ItemRenderer

Hello everyone,
I have the following situation: Im displaying lists of very similar data objects (they extend the same parent) so in order to avoid a lot of changes to many itemrenderers (if i need to change something in the common properties) when displaying this data, i defined a spark list ItemRenderer (in MXML) which displays the common properties (file called BaseRenderer.mxml):
<s:ItemRenderer>
     //in the script section i override the set data property
     //some MXML labels, checkboxes, etc
</s:ItemRenderer>
Then i created a specific itemrenderer which extended it (file SpecificRenderer.mxml):
<model:BaseRenderer>
     //again i override the set data property
     //some ADITIONAL MXML labels, checkboxes, etc
</model:BaseRenderer>
When i run the app, and when the specific renderer is used, it works (no errors are thrown) , but it only shows the content of specific renderer, nothing from base renderer is visible. Is this the right way to do this, or do i have to override some additional stuff in my specific renderers?
Thank you.
One more thing, i just noticed, if i remove all MXML tags from specific renderer, the content from base renderer becomes visible, seems as if specific content overrides base content. Is there a way to add mxml tags into the specificrenderer?

Yes i suspected them to be merged, and you gave me a great idea. As you say this behavior is true across all mxml defined components, not just itemrenderers. I want to avoid actionscript renderers because i dont (and wont) have any performance issues anyway and i like flexibility in design view, so instead i found another solution which i slightly modified. Some spark components inherit property mxmlContent, which you can override. This is what i came up with in the end: I added the property override into specific renderer and everything is shown as expected (because base elements are merged with the ones from extended component).
override public function set mxmlContent(value:Array):void {
                                        var adding:Boolean = true;
                                        var index:int = 0;
                                        while (adding) {
    var element:IVisualElement = null;
    try {          element = super.getElementAt(index); } catch(e:Error) {          }
    if ( element != null ) {
       value.push(element);
       index += 1;
    else
      adding = false;
                                        value.reverse();
                                        super.mxmlContent = value;

Need help with navigation within a spark list...

hey guys, so in my application when you click on a list item, it opens up an image, and along with the image a few buttons are created dynamically...
the image and the url/labels for the dynamic buttons is provided through an xml/xmlListCollection.
what i need help with is the url or more specifically when you click on one of these dynamic buttons it needs to navigate me to another part of an list or display a certain set of images that is not in my spark list...
please let me know if this makes no sence
the code i have is
<code>
    [Bindable] private var menuXml:XML;
    [Bindable] private var imgList:XMLListCollection = new XMLListCollection();
    [Bindable] private var navControl:XMLListCollection = new XMLListCollection();
    [Bindable] private var fullList:XMLListCollection = new XMLListCollection();
    private var returnedXml:XMLListCollection = new XMLListCollection();
    private var myXmlSource:XML = new XML();
    //[Bindable] private var xmlReturn:Object;
    private var currImage:int = 0;
    //public var userOpProv:XMLListCollection = new XMLListCollection();
    //private var troubleShootProvider:XMLListCollection = new XMLListCollection();
    private function myXml_resultHandeler(event:ResultEvent):void{
        userOptionProvider.source = event.result.apx32.userOptions.children();
        troubleShootProvider.source = event.result.apx32.troubleShooting.children();
        fullList.source = event.result.apx32.children();
        returnedXml.source = event.result[0].children();
        myXmlSource = event.result[0];
    private function myXml_faultHandler(event:FaultEvent):void{
        Alert.show("Error loading XML");
        Alert.show(event.fault.message);
    private function app_creationComplete(event:FlexEvent):void{
        userOptions.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
        myXml.send();
        //trouble.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
        myXml = new HTTPService();
        myXml.url = "modules/apx32/apx32TroubleshootingXml.xml";
        myXml.resultFormat = "e4x";
        myXml.addEventListener(ResultEvent.RESULT, myXml_resultHandeler);
        myXml.addEventListener(FaultEvent.FAULT, myXml_faultHandler);
        myXml.send();
    private function troubleShootChange(event:IndexChangeEvent):void{
        dynamicButtons.removeAllElements();
        navControl.source = troubleShootProvider[event.newIndex].children();
        currImage = 0;
        imgList.source = troubleShootProvider[event.newIndex].images.children();
        definition.source = imgList[currImage].@url;
        if(imgList[currImage].@details == "true"){
            if(imgList[currImage].buttons.@hasButtons == "true"){
                for each(var item:XML in imgList[currImage].buttons.children()){
                    var newButton:LinkButton = new LinkButton();
                    newButton.label = item.@name;
                    newButton.x = item.@posX;
                    newButton.y = item.@posY;
                    newButton.setStyle("skin", null);
                    newButton.styleName = "dynamicButtonStyle";
                    dynamicButtons.addElement(newButton);
        //var isMultiPage:String = navControl[2]["multiPages"];
        //trace(isMultiPage);
        //        if(isMultiPage){
        if(currImage >= imgList.length - 1){
            next.visible = false;
            back.visible = false;
        else{
            back.visible = false;
            next.visible = true;
    private function customButtonPressed(event:Event):void{
        if(imgList[currImage].button.@changeTo != ""){
    private function userOptionsChange(event:IndexChangeEvent):void{
        dynamicButtons.removeAllElements();
        navControl.source = userOptionProvider[event.newIndex].children();
        currImage = 0;
        imgList.source = userOptionProvider[event.newIndex].images.children();
        definition.source = imgList[currImage].@url;
        if(imgList[currImage].@details == "true"){
            if(imgList[currImage].buttons.@hasButtons == "true"){
                for each(var item:XML in imgList[currImage].buttons.children()){
                    var newButton:LinkButton = new LinkButton();
                    newButton.label = item.@name;
                    newButton.x = item.@posX;
                    newButton.y = item.@posY;
                    newButton.setStyle("skin", null);
                    newButton.styleName = "dynamicButtonStyle";
                    newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
                    dynamicButtons.addElement(newButton);
        var isMultiPage:String = navControl[2]["multiPages"];
        if(isMultiPage == "true"){
            if(navControl[2]["next"] == "NEXT STEP"){
                navContainer.x = 630;
            else{
                navContainer.x = 640;
            next.label = navControl[2]["next"];
            back.label = navControl[2]["back"];
        if(currImage >= imgList.length - 1){
            next.visible = false;
            back.visible = false;
        else{
            back.visible = false;
            next.visible = true;
    private function nextClickHandler(event:MouseEvent):void{
        currImage += 1;
        dynamicButtons.removeAllElements();
        if(currImage >= imgList.length-1){
            currImage = imgList.length - 1;
            //next.visible = false;
            next.label = "YOU'RE DONE";
        else
            next.label = navControl[2]["next"];
        back.visible = true;
        if(imgList[currImage].@details == "true"){
            if(imgList[currImage].buttons.@hasButtons == "true"){
                for each(var item:XML in imgList[currImage].buttons.children()){
                    var newButton:LinkButton = new LinkButton();
                    newButton.label = item.@name;
                    newButton.x = item.@posX;
                    newButton.y = item.@posY;
                    newButton.setStyle("skin", null);
                    newButton.styleName = "dynamicButtonStyle";
                    dynamicButtons.addElement(newButton);
        definition.source = imgList[currImage].@url;
    private function backClickHandler(event:MouseEvent):void{
        currImage -= 1;
        dynamicButtons.removeAllElements();
        if(currImage == 0){
            back.visible = false;
        next.visible = true;
        next.label = navControl[2]["next"];
        if(imgList[currImage].@details == "true"){
            if(imgList[currImage].buttons.@hasButtons == "true"){
                for each(var item:XML in imgList[currImage].buttons.children()){
                    var newButton:LinkButton = new LinkButton();
                    newButton.label = item.@name;
                    newButton.x = item.@posX;
                    newButton.y = item.@posY;
                    newButton.setStyle("skin", null);
                    newButton.styleName = "dynamicButtonStyle";
                    dynamicButtons.addElement(newButton);
        definition.source = imgList[currImage].@url;
</code>
i have attached a copy of the xml that i have right now to this post for reference...
any help will be greatly appretiated!!! i've been stuck on this problem for the last week and my project is due soon
again thank you in advance...

hey david... just nevermind my previous post... I was able to subclass a link button, so i now have two variables that get assigned to a link button,
one is "tabId" <-- contains the information on which tab to swtich to, and the second is, "changeTo"... this contans the label name which it needs to switch to
I'm just stuck on how to change my selected item in my tabNavigator/list
the code i have right now is
    private function customButtonPressed(event:Event):void{
        if(event.currentTarget.tabId == "troubleShooting"){
            for each(var item:Object in troubleShootProvider){
                if(item.@label == event.currentTarget.changeTo){
    private function userOptionsChange(event:IndexChangeEvent):void{
        dynamicButtons.removeAllElements();
        navControl.source = userOptionProvider[event.newIndex].children();
        currImage = 0;
        imgList.source = userOptionProvider[event.newIndex].images.children();
        definition.source = imgList[currImage].@url;
        if(imgList[currImage].@details == "true"){
            if(imgList[currImage].buttons.@hasButtons == "true"){
                for each(var item:XML in imgList[currImage].buttons.children()){
                    var newButton:customLinkButton = new customLinkButton();
                    newButton.label = item.@name;
                    newButton.tabId = item.@tab;
                    newButton.changeTo = item.@changeTo;
                    newButton.x = item.@posX;
                    newButton.y = item.@posY;
                    newButton.setStyle("skin", null);
                    newButton.styleName = "dynamicButtonStyle";
                    newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
                    dynamicButtons.addElement(newButton);
        var isMultiPage:String = navControl[2]["multiPages"];
        var videoPresent:String = navControl[1]["videoPresent"];
        if(videoPresent == "true"){
            if(isMultiPage != "true"){
                navContainer.x = 825;
        if(isMultiPage == "true"){
            if(navControl[2]["next"] == "NEXT STEP"){
                navContainer.x = 630;
            else{
                navContainer.x = 640;
            next.label = navControl[2]["next"];
            back.label = navControl[2]["back"];
        if(currImage >= imgList.length - 1){
            next.visible = false;
            back.visible = false;
        else{
            back.visible = false;
            next.visible = true;
as you know, my xml gets divided into two saperate xmllistcollections one is the userOptionProvider, and the troubleshootingProvider
as is in the following xml
<mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
                         tabWidth="137.5" creationPolicy="all" borderVisible="false">
            <mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                        borderVisible="false" contentBackgroundColor="#e9e9e9"
                        change="userOptionsChange(event)">
                    <s:dataProvider>
                        <s:XMLListCollection id="userOptionProvider" />
                    </s:dataProvider>
                </s:List>
            </mx:VBox>
            <mx:VBox label="TROUBLESHOOTING">
                <s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                        borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9"
                        change="troubleShootChange(event)">
                    <s:dataProvider>
                        <s:XMLListCollection id="troubleShootProvider" />
                    </s:dataProvider>
                </s:List>
            </mx:VBox>
        </mx:TabNavigator>
Im having some trouble updating my list... basically change to the troubleshooting tab, and then select the one that i need...
hopefully that makes sence...

Disable Spark List selection indicator

How do I get rid of the Spark List selection indicator entirely? I don't want the rectangular indicator when the mouse hovers over an item, and I don't want the color to change when the mouse is clicked.

You'll have to extend default item renderer (ItemRenderer for instance) and set autoDrawBackground to false. And then use your item renderer in a list.
See this document for more information on spark item renderers.

Wrap long lines in a Spark List component?

I have a Spark List.
The text for each entry is on one line, and is too long to fit.
Can I get it to break to as many lines as needed without a custom item renderer?

If you define an explicit width on the SimpleText in the DefaultItemRenderer you can get this behavior.
Here is an example of this using an inline ItemRenderer:
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:List width="50" height="200">
        <s:ArrayList>
            <fx:String>a</fx:String>
            <fx:String>b</fx:String>
            <fx:String>c c c c c c c c c c c c</fx:String>
            <fx:String>d</fx:String>
            <fx:String>e</fx:String>
        </s:ArrayList>
        
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer focusEnabled="false">
                    <fx:Script>
                        <![CDATA[
                            override public function set label(value:String):void
                                super.label = value;
                                labelDisplay.text = label;
                        ]]>
                    </fx:Script>
                    <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>
                    <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:SimpleText id="labelDisplay" verticalCenter="0" width="48" top="6" bottom="4"/>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>

Why do list s:itemRenderer      in sdk 4.5 need a child   fx:Component

If I do this
<s:List>
<s:itemRenderer>
<fx:Component>
<s:HGroup >
<s:TextArea text="{data.comment}" height="40">
I get an error Access of undefined property data

however in an external file you can do this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">
    <fx:Script>
        <![CDATA[
            import utils.Formatters;
        ]]>
    </fx:Script>
    <s:HGroup width="100%" verticalAlign="middle" paddingRight="10" paddingLeft="10" paddingBottom="5" paddingTop="5">

List custom itemRenderer disabled state

Is there a way to implement a disabled state on a (Spark) List ItemRenderer? I'm developing a List that has a counter on each of it's items. When a user drops that item, the counter decreases. When the item counter reaches 0 the item becomes disabled and the item image becomes black and white.
I have the disabled state in my custom item renderer but it doens't work. It's state should become "disabled" when I set the enabled property to false. I've tried to manually set the itemRenderer.currentState to "disabeld" and it becomes "normal" after I click on the list or if I resize the window.
This is how it should look like (notice that only the orange item is enabled and has colors because his counter still has 9 items):
I have no idea what's going in the background, can you please point me into the right direction?
Here's the SWF (source enabled )
http://dl.dropbox.com/u/6767802/Examples/ListItemDisabledIssue/Flex4ListIssue.html

I would suggest you to go through the LifeCycle of a component. Those methods will help you manage this.
In your case you would need a property in you dataProvider that provides the quantity. This property should set a custom property of your component. The custom property should have a setter. Call invalidateProperties() and invalidateDisplayList() to do what you are trying to do in the setter.
You will have to override commitProperties() and updateDisplayList().

How do i set spark list selected item's color??

hey guys... so got a little problem... i have a spark list which gets populated from a array collection that looks likda like this
[0] = "name1"
[1] = "name 2"
[2] = "name 3"
when i click on say "name 1" i need the color of "name 1" to change to say red...
and when i click on another item i need that color to stay... red on "name 1"...
oh and... i need to do the color change in actionscript rather than the mxml file...
any ideas???

Hi,
I'm not sure if this is exactly what you are looking for. What I did was created an itemRender for the list and assigned it like so
<s:List dataProvider="{ listDataProvider}" itemRenderer="listItemRenderer"/>
And the listItemRenderer will look some
//Code Begins
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          focusEnabled="true" >
    <fx:Script>
        <![CDATA[
            var clicked:Boolean=true;
            protected function clickHandler(event:MouseEvent):void
                    clicked?labelRender.setStyle("color","0x00FF00"):labelRender.setStyle("color","0xFF0000") ;
                    clicked=!clicked;
        ]]>
    </fx:Script>
    <s:Label id="labelRender" text="{data}" color="0xFF0000" click="clickHandler(event)"/>
</s:ItemRenderer>
//Code Ends
In the above example the colour toggles on each click. So, you can apply anything. assume you have a property called color in your array collection, you can access it as data.color and then set the text to that color when it is clicked. I hope this helps. Do write back if you have any issues.
Nishad

Spark list filter not working

I have a spark list with custom itemRenderers and I have a filter on the list. I run the filter, but at random times the filter doesn't work. I threw in some trace statements and its passing the filter but the screen doesn't show the filters results. It only shows the results of the last filter. I think it has to do with the spark lists itemRenderer resuse.
Is this a known bug?

The bug is in TileLayout.
If I remove the the TileLayout the list functions as aspected. Here is a simple example. Make sure when running the app to follow these instructions.
1. Run the app (notice the list shows all the items in it)
2. Click "K"
3. Click "All"
4. Look at the Bottom list to see if only two items show even when "ALL" is selected.
5.Repeat steps 2-4 until you see the bug.
<?xml version="1.0" encoding="utf-8"?>

<s:Application name="Spark_List_ensureIndexIsVisible_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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var array:Array = ['one', 'otwo', 'othree', 'ofour', 'ofive', 'osix', 'oseven', 'oeight', 'nine', 'nten'];
private var myAC:ArrayCollection = new ArrayCollection( array );
private function setAlphaFilter() : void {
if( myAC ) {
myAC.filterFunction = alphaFilter;
myAC.refresh();
private function alphaFilter( item:Object ) : Boolean {
var tempStr:String;
if( String(alphaList.selectedItem.firstName).toLowerCase() == 'all' ) {
return true;
if( item.toLowerCase().charAt(0) == String(alphaList.selectedItem.firstName).toLowerCase() ) { // if something a letter is selected.
return true;
return false;
]]>
</fx:Script>
<s:List id="alphaList" changing="setAlphaFilter()"
width="100%" top="2" bottom="2" left="2" right="2" borderColor="#7F7F7F" >
<s:layout>
<s:HorizontalLayout columnWidth="20" paddingLeft="1" />
</s:layout>

<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group top="1">
<s:Label id="blah" text="{data.firstName}" fontSize="13" bottom="1" top="1" right="1" left="1" />
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object firstName="All" />
<fx:Object firstName="A" />
<fx:Object firstName="B" />
<fx:Object firstName="C" />
<fx:Object firstName="D" />
<fx:Object firstName="E" />
<fx:Object firstName="F" />
<fx:Object firstName="G" />
<fx:Object firstName="H" />
<fx:Object firstName="I" />
<fx:Object firstName="J" />
<fx:Object firstName="K" />
<fx:Object firstName="L" />
<fx:Object firstName="M" />
<fx:Object firstName="N" />
<fx:Object firstName="O" />
<fx:Object firstName="P" />
<fx:Object firstName="Q" />
<fx:Object firstName="R" />
<fx:Object firstName="S" />
<fx:Object firstName="T" />
<fx:Object firstName="U" />
<fx:Object firstName="V" />
<fx:Object firstName="W" />
<fx:Object firstName="X" />
<fx:Object firstName="Y" />
<fx:Object firstName="Z" />
<fx:Object firstName="1" />
<fx:Object firstName="2" />
<fx:Object firstName="3" />
<fx:Object firstName="4" />
<fx:Object firstName="5" />
<fx:Object firstName="6" />
<fx:Object firstName="7" />
<fx:Object firstName="8" />
<fx:Object firstName="9" />
</s:ArrayList>
</s:dataProvider>
</s:List>
<s:List id="list" width="630" height="100"
horizontalCenter="0" verticalCenter="0" dataProvider="{myAC}" useVirtualLayout="true" allowMultipleSelection="true">
<s:layout>
<s:TileLayout columnWidth="300" rowHeight="50" verticalGap="1" horizontalGap="1"
requestedColumnCount="2" />
</s:layout>
</s:List>
</s:Application>

Custom dragIndicator on Spark List Control

I have a Spark List Control that is displaying a tilelayout of dynamically imported Images. Basically, a bunch of thumbnail Images that are displayed in a tile layout. I have drag drop enabled so that I can reorder these thumbnails and everything is working great except for one thing, the dragIndicator. In my itemrenderer, I have the Image included in the "dragging" state, but the image is not showing in the dragIndicator. I am basically just getting a semi-transparent square as my dragIndicator, but I want to be able to actually drag my thumbnail. Any ideas how to do this?
Here is my List:
<s:List id="ImageList1" x="77" y="95" width="858" height="412" dataProvider="{imageAC}"
     itemRenderer="renderers.ImageACSmallItemRenderer" contentBackgroundColor="0x000000"
     borderVisible="false" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
     allowMultipleSelection="true" skinClass="skins.General.ListSkin" focusAlpha="0" mouseMove="getImageProxy(event)">
     <s:layout>
          <s:TileLayout columnWidth="76" rowHeight="76" horizontalAlign="center" verticalAlign="middle"
                 horizontalGap="8" verticalGap="8"/>
     </s:layout>
</s:List>
Here is my Itemrenderer:
<fx:Script>
     <![CDATA[
          import mx.utils.ObjectProxy;
          [Bindable]
          public var dataProxy:ObjectProxy;
          private function init():void {
               dataProxy = new ObjectProxy(data);
     ]]>
</fx:Script>
     <s:states>
          <s:State name="normal" />
          <s:State name="hovered" />
          <s:State name="selected" />
          <s:State name="dragging" />
     </s:states>
     <mx:Image source="{dataProxy.pathSmall}" horizontalCenter="0" verticalCenter="0" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Thanks for any insight!

Hi Evtim,
Earlier this summer, you helped me to create an itemRenderer that would allow me to drag photos in a list with a grid layout so that I could re-order them, and the dragIndicator would remain the photo instead of a empty box. We accomplished this by using the contentCache feature with the Spark BitmapImage. Now when I drag my photos, they remain photos even while being dragged. Your very elegant solution ended up looking like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:s="library://ns.adobe.com/flex/spark"
                                        xmlns:mx="library://ns.adobe.com/flex/mx"
                                        width="76" height="76" focusEnabled="false">
          <fx:Script>
                    <![CDATA[
                              import spark.core.ContentCache;
                              static private const contentCache:ContentCache = new ContentCache();
                    ]]>
          </fx:Script>
          <s:states>
                    <s:State name="normal" />
                    <s:State name="hovered" />
                    <s:State name="selected" />
                    <s:State name="dragging" />
          </s:states>
          <s:BitmapImage source="{data.pathSmall}" width="70" height="70" contentLoader="{contentCache}"
                                            horizontalCenter="0" verticalCenter="0" alpha.dragging="2" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Now I have another little interesting challenge with this itemRenderer. I don't want to bore you with details, but the situation is that I will no longer be loading thumbnails that are 70x70 pixels in size, but I will be loading photos with various dimensions that have to be displayed as a 70x70 pixel thumbnail. So I am going to create a Group that is 70x70 pixels, turn on the clipAndEnableScrolling for the Group, and then place the photos within the Group so that they essentially get cropped. The images that I import will have to be resized to either 70 pixels wide or 70 pixels high depending on what is the larger dimension of the of the image, and then placed inside the Group so that I get a perfect center-crop of the images.
So to summarize, I need to load the photos using a loader. Then I can figure out with the height and width of the photos is. Then I can scale the photo so that the smaller dimension is 70 pixels, and then I can place it in the Group. But to do all of this, I can no longer do it in MXML but have to do it in ActionScript... and thus my dilema. I can't figure out how to use the contentCache properly in ActionScript so that the images stay images when dragged. Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:s="library://ns.adobe.com/flex/spark"
                                        xmlns:mx="library://ns.adobe.com/flex/mx"
                                        width="76" height="76" focusEnabled="false" dataChange="init(event)">
          <fx:Script>
                    <![CDATA[
                              import mx.core.FlexGlobals;
                              import mx.events.FlexEvent;
                              import spark.core.ContentCache;
                              private var contentCache:ContentCache = new ContentCache();
                              private var imageLoader:Loader = new Loader();
                              private var bitmapImg:BitmapImage = new BitmapImage();
                              private var widthHolder:int;
                              private var heightHolder:int;
                              protected function init(event:FlexEvent):void {
                                        var request:URLRequest = new URLRequest(FlexGlobals.topLevelApplication.imageAC[this.itemIndex].pathSmall);
                                        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, createVisuals);
                                        imageLoader.load(request);
                              private function createVisuals(event:Event):void{
                                        bitmapImg.source = Bitmap(imageLoader.content);
                                        bitmapImg.horizontalCenter = 0;
                                        bitmapImg.verticalCenter = 0;
                                        bitmapImg.smooth = true;
                                        bitmapImg.smoothingQuality = "high";
                                        widthHolder = imageLoader.width;
                                        heightHolder = imageLoader.height;
                                        if (widthHolder > heightHolder) {
                                                  bitmapImg.width = int(Math.round(70*widthHolder/heightHolder));
                                                  bitmapImg.height = 70;
                                        else {
                                                  bitmapImg.width = 70;
                                                  bitmapImg.height = int(Math.round(70*heightHolder/widthHolder));
                                        imageGroup.addElement(bitmapImg);
                    ]]>
          </fx:Script>
          <s:states>
                    <s:State name="normal" />
                    <s:State name="hovered" />
                    <s:State name="selected" />
                    <s:State name="dragging"/>
          </s:states>
          <s:Group id="imageGroup" width="70" height="70" horizontalCenter="0" verticalCenter="0" clipAndEnableScrolling="true"/>
</s:ItemRenderer>
So when there is a dataChange in my List, the init() function gets called to load the image. When the load is complete, the createVisuals() method resizes the image and places it in the Group. Everything is working as expected. The images get resized, centered and cropped within the group, and smoothed out so that they look nice. But now when I drag them, I get an empty box while dragging. I am unsure of how to tie in the contentCache with my bitmapImage object so that it will stay an image while being dragged using actionScript. I don't know if it is as simple as setting the contentLoader property for the bitmapImage object, or if it is more complicated and I need to set the image source for the "dragging" state. Could you possibly give me some insight as to how to make this happen in ActionScript?
Thanks for any insight!
Bill

How to smooth scroll a Spark List using the mouse wheel

I've got my Spark List smooth scrolling nicely if I grab the scrollbar thumb and drag it. But when using the mouse wheel, it's jumping itemrenderer by itemrenderer.
Is there any way to get this to smooth scroll? I'm using a List with variableRowHeight = true.
Thanks.

This thread demonstrates how to customize mouse wheel scrolling:
http://forums.adobe.com/message/2783736
An enhancement was recently added that will allow for customizing the behavior without needing to subclass. See this bug for the details:
http://bugs.adobe.com/jira/browse/SDK-26432

Spark List alternating ItemRenderer

Similar Messages

Maybe you are looking for