Выделить элемент списка

Question

Иногда пользователи забывают выбрать компонент Spark List. Другая функциональность зависит от выбора из этого компонента списка.

Я хочу программно сделать этот компонент списка красным три раза или любым эквивалентным эффектом, чтобы привлечь внимание пользователей. Кто-нибудь знает, как это сделать?

Answer 1

Вы можете делать то, что вы хотите с помощью Timer и компонентов цвета, видимость, альфа-, ...

Возьмите этот простой и рабочий код, используя компонент List Spark:

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

разница между пример видимости и альфа-один - эффект непрозрачности при использовании альфа.

Вы также можете использовать элемент управления Alert, чтобы предупредить пользователя, если ни один элемент не был выбран, а потому, что вы говорили только об эффекте выделения, я не включил его в пример. Вы можете использовать его следующим образом:

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) 

} 

Надеюсь, что это поможет.