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