Question

In my code, I have a list made up of items from a dataprovider. The itemRenderer for the list consists of a BorderContainer with text in it. I’m mimicking a row of buttons on a scrolling list. I’d like the cursor to change to the hand cursor as it passes over the “button”, but the pointer only changes in the part of the BorderContainer that isn’t covered by the text.

I’ve set the buttonMode to true for the list, the BorderContainer, and the text, so why isn’t the cursor changing when passing over the text?

This is the list code

<s:List id="listProject" width="100%" height="100%" horizontalScrollPolicy="off" allowMultipleSelection="false"
                        click="listProject_clickHandler(event)" itemRenderer="ProjectRenderer"
                        dataProvider="{listProjects}" creationComplete="listProject_creationCompleteHandler(event)" buttonMode="true">

And this is the renderer

<?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">

    <!--<s:Label text="{data.header}"/>-->
    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>

    <!--<s:Image source.normal="{data.image1}" source.hovered="{data.image2}"/>-->

    <s:BorderContainer width="200" height="50" backgroundColor="{data.color}"
                   borderColor.selected="#FFFFFF" borderVisible.normal="false"
                   borderVisible.selected="true" borderWeight.selected="4" borderStyle.selected="inset" buttonMode="true">
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
        </s:layout>
        <mx:Text width="200" text="{data.header}" selectable="false"
                 color="#FFFFFF" fontSize="15" fontWeight="bold" leading="0" textAlign="center" buttonMode="true" useHandCursor="true"/>
    </s:BorderContainer>
</s:ItemRenderer>

Answer 1

Just use a Spark Label instead of mx:Text and you’ll be fine.

Also, there’s some redundancy in your code. I took the liberty of trimming it down a little:

<s:BorderContainer width="200" height="50" backgroundColor="{data.color}"
                   borderColor.selected="#FFFFFF" borderVisible.normal="false"
                   borderVisible.selected="true" borderWeight.selected="4"
                   borderStyle.selected="inset" buttonMode="true">

    <s:Label text="{data.label}" color="#FFFFFF" fontSize="15" fontWeight="bold"
             horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>

This will also fix that nasty jumpiness of the text when hovered or selected.