注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

Blink DataGrid根据数据变化动态变色  

2008-01-14 14:46:39|  分类: Flex 应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在很多实时数据更新系统如股票,我们需要在数据变化时,有闪烁效果,比如股票升了,用红色闪以下,跌了用绿色闪一下。这里提供一个例子,是用Labe作为DataGridItemRenderer,当数据变大时用红色字体闪一下,变小时用绿色闪一下。效果图如下,简单的用Button修改数据源。

Blink DataGrid根据数据变化动态变色 - 阿蔡 - Flex 技术博客

源代码如下:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

   <mx:Script>

   <![CDATA[

   import mx.controls.Alert;

   import mx.validators.ValidationResult;

   import mx.collections.ArrayCollection;

   [Bindable]

   private var dp:ArrayCollection=new ArrayCollection([{col1:'1',col2:'2',col3:'3'},{col1:'21',col2:'22',col3:'23'},{col1:'31',col2:'32',col3:'33'}]

                  );

   private function changeRow1():void

   {

       dp.getItemAt(0)['col1'] = Math.round(Math.random()*100);

       dp.getItemAt(0)['col2'] = Math.round(Math.random()*100);

       dp.getItemAt(0)['col3'] = Math.round(Math.random()*100);

       dp.refresh();

   }

   private function changeRow2():void

   {

       dp.getItemAt(1)['col1'] = Math.round(Math.random()*100);

       dp.getItemAt(1)['col2'] = Math.round(Math.random()*100);

       dp.getItemAt(1)['col3'] = Math.round(Math.random()*100);

       dp.refresh();

    }

   private function changeRow3():void

   {

       dp.getItemAt(2)['col1'] = Math.round(Math.random()*100);

       dp.getItemAt(2)['col2'] = Math.round(Math.random()*100);

       dp.getItemAt(2)['col3'] = Math.round(Math.random()*100);

       dp.refresh();

    }

   ]]>

   </mx:Script>

   <mx:VBox width="100%" height="100%">

           

   <mx:DataGrid dataProvider="{dp}">

       <mx:columns>

          <mx:DataGridColumn dataField="col1">

              <mx:itemRenderer>

                  <mx:Component>

                     <mx:Label >

                         <mx:Script> 

                         <![CDATA[

                         private var lastData:Number;

                         private var frameCount :Number=-1;

                         override public function set data(value:Object):void{

                             super.data = value;

                             if(value != null){

                             if(lastData < value['col1']){ //lastData是临时数据,存储老的数据

                             frameCount =15;//控制闪烁持续时间变量

                                 this.setStyle("color","0xFF0000");//红色        

                                 addEventListener("enterFrame", enterFrameHandler);

                             }else if( lastData > value['col1']){

                                 frameCount =15;//控制闪烁持续时间变量

                                 this.setStyle("color","0x00FF00");//绿色

                                 addEventListener("enterFrame", enterFrameHandler);

                             }                                                    

                             lastData = value.col1;

                             }

                         }

                         private function enterFrameHandler(event:Event):void

                         {

                              frameCount--;

                              if (frameCount < 0)

                              {

                                  this.setStyle("color","0x0B333C");//颜色恢复成默认颜色

                                  removeEventListener("enterFrame", enterFrameHandler);

                               }

                         }

                        ]]>

                         </mx:Script>

                     </mx:Label>

                  </mx:Component>

               </mx:itemRenderer>

            </mx:DataGridColumn>

            <mx:DataGridColumn dataField="col2">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:Label >

                           <mx:Script> 

                           <![CDATA[

                           private var lastData:Number;

                           private var frameCount :Number=-1;

                           override public function set data(value:Object):void{

                               super.data = value;

                               if(value != null){

                                  if(lastData < value['col2']){ //lastData是临时数据,存储老的数据

                                      frameCount =15;//控制闪烁持续时间变量

                                      this.setStyle("color","0xFF0000");//red         

                                      addEventListener("enterFrame", enterFrameHandler);

                                  }else if( lastData > value['col2']){

                                      frameCount =15;//控制闪烁持续时间变量

                                      this.setStyle("color","0x00FF00");//绿色

                                      addEventListener("enterFrame", enterFrameHandler);

                                   }                                                    

                                   lastData = value.col2;

                                }

                           }

                           private function enterFrameHandler(event:Event):void

                           {

                                frameCount--;

                                if (frameCount < 0)

                                {

                                   this.setStyle("color","0x0B333C");//颜色恢复成默认颜色

                                   removeEventListener("enterFrame", enterFrameHandler);

                                 }

                           }

                           ]]>

                           </mx:Script>

                         </mx:Label>

                       </mx:Component>

                    </mx:itemRenderer>

                  </mx:DataGridColumn>

                  <mx:DataGridColumn dataField="col3">

                  <mx:itemRenderer>

                              <mx:Component>

                                    <mx:Label >

                                           <mx:Script> 

                                          <![CDATA[

                                          private var lastData:Number;

                                          private var frameCount :Number=-1;

                                          override public function set data(value:Object):void{

                                                super.data = value;

                                                  if(value != null){

                                                      if(lastData < value['col3']){ //lastData是临时数据,存储老的数据

                                                          frameCount =15;//控制闪烁持续时间变量

                                                          this.setStyle("color","0xFF0000");//红色        

                                                              addEventListener("enterFrame", enterFrameHandler);

                                                      }else if( lastData > value['col3']){

                                                          frameCount =15;//控制闪烁持续时间变量

                                                          this.setStyle("color","0x00FF00");//绿色

                                                          addEventListener("enterFrame", enterFrameHandler);

                                                      }                                                    

                                                      lastData = value.col3;

                                                  }

                                                }

                                                private function enterFrameHandler(event:Event):void

                                                {

                                                    frameCount--;

                                                    if (frameCount < 0)

                                                    {

                                                    this.setStyle("color","0x0B333C");//颜色恢复成默认颜色

                                                    removeEventListener("enterFrame", enterFrameHandler);

                                                  }

                                                }

 

                                          ]]>

                                          </mx:Script>

                                    </mx:Label>

                              </mx:Component>

                        </mx:itemRenderer>

                  </mx:DataGridColumn>

            </mx:columns>

      </mx:DataGrid>

      <mx:Button click="changeRow1()" label="Change Row1"/>

      <mx:Button click="changeRow2()" label="Change Row2"/>

      <mx:Button click="changeRow3()" label="Change Row3"/>

     

      </mx:VBox>

</mx:Application>

在线演示 

如果你要的是当数据变化是闪烁的是背景色当然也可以,只需要简单修改一下,这里我并没有对这个itemRenderer进行封装,有兴趣可以自己去封装一下。除了Label当然还可以用其他控件,如DataGridItemRenderer也是可以的。

应网友xwei的要求,需要改Label的背景色很简单。

this.opaqueBackground = 0xFF0000;替换老的setStyle即可。

this.setStyle("color","0xFF0000");//红色         

要去除颜色只要将this.opaqueBackground = null;就Ok了
                                

  评论这张
 
阅读(937)| 评论(4)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017