Highlight a List component

Question

Sometimes the users forget to select from a Spark List component. Other funtionality depends on the selection from this list component.

I want programmatically make this list component flash red three times or any equivalent effect to catch the users attention. Anyone know how to do this?

Answer 1

You can do what you want using a Timer and component colors, visibility, alpha, ...

Take this simple and working code using Spark List component:

<?xml version="1.0" encoding="utf-8"?>
<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/mx"
               width="280" height="191" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[

            import org.osmf.events.TimeEvent
            import flash.events.MouseEvent

            private var timer:Timer
            private var color:Number
            private var border_color:Number
            private const color_1:Number = 0xff0000
            private const color_2:Number = 0x000000

            private function btn_colors_clickHandler(event:MouseEvent):void
            {

                border_color = my_list.getStyle('borderColor')
                color = my_list.getStyle('color')

                my_list.setStyle('borderColor', color_1)
                my_list.setStyle('color', color_1)  

                timer = new Timer(300, 6)
                timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void{                   
                    my_list.setStyle('borderColor', my_list.getStyle('borderColor') == color_2 ? color_1 : color_2)
                    my_list.setStyle('color', my_list.getStyle('color') == color_2 ? color_1 : color_2)
                })
                timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent):void{
                    my_list.setStyle('borderColor', border_color)
                    my_list.setStyle('color', color)
                })
                timer.start()               

            }

            protected function btn_visibility_clickHandler(event:MouseEvent):void
            {

                timer = new Timer(200, 6)
                timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void{   
                    my_list.visible = ! my_list.visible
                })
                timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent):void{
                    my_list.visible = true
                })
                timer.start()

            }

            protected function btn_alpha_clickHandler(event:MouseEvent):void
            {

                timer = new Timer(200, 6)
                timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void{                   
                    my_list.alpha = my_list.alpha < 1 ? 1 : 0.3
                })
                timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent):void{
                    my_list.alpha = 1
                })
                timer.start()

            }

        ]]>
    </fx:Script>

    <s:List id="my_list" x="16" y="18" width="148" height="150" borderColor="#666666" borderVisible="true" > 
        <s:dataProvider>
            <mx:ArrayCollection>
                <fx:String>line 01</fx:String> 
                <fx:String>line 02</fx:String> 
                <fx:String>line 03</fx:String> 
                <fx:String>line 04</fx:String>
                <fx:String>line 05</fx:String>
            </mx:ArrayCollection>
        </s:dataProvider>
    </s:List>
    <s:Button id="btn_colors" x="172" y="20" width="90" height="40" label="colors"
              click="btn_colors_clickHandler(event)"/>
    <s:Button id="btn_visibility" x="172" y="70" width="90" height="40" label="visibility"
              click="btn_visibility_clickHandler(event)"/>
    <s:Button id="btn_alpha" x="172" y="120" width="90" height="40" label="alpha"
              click="btn_alpha_clickHandler(event)"/>   

</s:Application>

The difference between the visibility example and alpha one is the opacity effect when using alpha.

You can also use an Alert control to alert the user if no item was selected, but because you only spoke about highlight effect I didn't include it in the example. You can use it like this :

import mx.controls.Alert

if(my_list.selectedIndex == -1){

    Alert.show('Please select an item from the list.', 'Select an item', mx.controls.Alert.OK)

}

Hope that helps you.