How to detect the click in the middle of a SpinnerList control? With test case and screenshot

Question

How do you detect the click at the item in the middle of a SpinnerList control?

I.e. the typical situation - when user scrolls the SpinnerList, until the needed item is in the middle and after that clicks it?

When I just add a click event handler, then I also wrongly detect the situations, when the user just clicks some item to get it displayed in the middle as shown at this screenshot:

enter image description here

Below is my test case code.

Any suggestions please? I've also tried to use a custom SpinnerListItemRenderer and add a click handler there, but it doesn't change the problem described above.

Main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.MainHomeView">
</s:ViewNavigatorApplication>

views/MainHomeView.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="How to detect a click?">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            private function handleClick(event:Event):void {
                trace('selectedItem: ' + _list.selectedItem);
            }
        ]]>
    </fx:Script>

    <s:SpinnerListContainer>
        <s:SpinnerList id="_list" 
                       click="handleClick(event)"
                       typicalItem="45" 
                       dataProvider="{new ArrayList([1,5,6,10,15,30])}"
                       wrapElements="false"/>
    </s:SpinnerListContainer>
</s:View>

Alexander Farber Alexander Farber · Accepted Answer · 2012-12-04T07:53:04

Solved it myself with a custom itemRenderer -

RedBlack.as:

package {
    import flash.events.MouseEvent;
    import spark.components.List;
    import spark.components.SpinnerList;
    import spark.components.SpinnerListItemRenderer;

    public class RedBlack extends SpinnerListItemRenderer {
        public function RedBlack() {
            super();
            cacheAsBitmap = true;
            minHeight = 50;
            setStyle('textAlign', 'center');
            addEventListener(MouseEvent.CLICK, handleClick, false, 0, true);
        }

        override public function set data(value:Object):void {
            super.data = value;
            setStyle('color', int(value) % 2 ? 'red' : 'black');
        }

        private function handleClick(e:MouseEvent):void {
            var list:SpinnerList = owner as SpinnerList;
            var value:int = int(data);

            if (list && value == list.selectedItem) {
                trace('clicked in the middle: ' + value);
            }
        }   
    }
}

How to detect the click in the middle of a SpinnerList control? With test case and screenshot

1 Answers