Question

this is the black boder :

and this is my code:

    <s:List id="channelsPart" left="120" right="80" top="50" change="onChannelsChange(event)"
        dataProvider="{channels=new ArrayList(data.cloud.channels)}" labelField="title"
        requireSelection="true"
        fontFamily="TwinCen"
        fontSize="24"
        alternatingItemColors="[]"
        borderVisible="false"
        contentBackgroundAlpha="0"
         selectionColor="0"
        >

    <s:itemRenderer >
        <fx:Component>
            <s:ItemRenderer>
                <fx:Script>
                    <![CDATA[
                        import mx.core.UIComponent;
                        override public function set data(value:Object):void {
                            //sn.text = String(itemIndex+1);
                            txt.text = String(value.title);
                            //txt.label = String(value.title);
                        }
                    ]]>
                </fx:Script>
                 <!-- <s:BitmapImage source="assets/sohupp-login-btn-login.png" width="70" height="30" scaleMode="stretch"  /> -->
                 <s:Label id="txt" width="70" height="30"  verticalAlign="middle"  textAlign="center"   backgroundAlpha="0" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

so waht can i do , thanks

Answer 1

The black border is the selection indicator that is changing when you use keyboard navigation on the list. I’m not sure you need to worry about that in a mobile application, but maybe it also appears on a device?

In any case, you can disable the default functionality that automatically draws the backgrounds/border on the renderer using the autoDrawBackground property of ItemRenderer. ItemRenderer docs here…

Try this out, on the line where you declare the item renderer:

<s:ItemRenderer autoDrawBackground="false">

If you still want a background to be drawn, you can add some simple view states to your renderer:

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer autoDrawBackground="false">
                <fx:Script>
                    <![CDATA[
                        import mx.core.UIComponent;
                        override public function set data(value:Object):void {
                            txt.text = String(value.title);
                        }
                    ]]>
                </fx:Script>
                <s:states>
                    <s:State name="normal"/>
                    <s:State name="selected"/>
                </s:states>
                <s:Rect includeIn="selected" top="0" left="0" right="0" bottom="0">
                    <s:fill>
                        <s:SolidColor color="#FF0000" alpha=".25"/>
                    </s:fill>
                </s:Rect>
                <s:Label id="txt" width="70" height="30"  verticalAlign="middle"  textAlign="center"   backgroundAlpha="0" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>

As an aside, Adobe suggests you use LabelItemRenderer or IconItemRenderer instead of ItemRenderer for mobile apps. They are optimized for mobile, but not as flexible in that you’ll have to write some Actionscript to extend them and do fancy things. Using regular ItemRenderer is probably not a big deal, in simple use cases 🙂