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

Flex 技术博客

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

 
 
 

日志

 
 

限时操作确认提示控件(TimerProgressAlert)  

2007-11-10 21:39:12|  分类: Flex 组件 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在一些交易系统中,比如竞标,当我们进行一个竞拍动作的时候,提示用户确认该操作是最起码也是最基本的。但是,光有提示往往是不够的,我们需要提供用户一个更加直观的倒计时进度确认状态,就好比拍卖现场的倒计时3秒,这样更能提高用户的竞拍现场感,也给软件系统更多人性化的元素。

这里要介绍的是我自己写的一个计时器(Timer)+进度条(ProgressBar)+提示窗(Alert)的综合应用控件。下面是该控件的应用效果。

 源码下载

具体提示的时间可自己设定,确认和取消的事件可以随自己需求定义,应用代码如下:

TimerProgressDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute" pageTitle="Demo for timer progress alert" width="400" height="300">
 <mx:VBox height="100%" width="100%" verticalAlign="middle">
  <mx:HBox width="100%">
   <mx:Spacer width="100%"/>
   <mx:Button label="Demo" click="doDemo()"/>
   <mx:Spacer width="100%"/>   
  </mx:HBox>
 </mx:VBox>
 
 <mx:Script>
  <![CDATA[
  import cwmlab.controls.*;
  import mx.controls.*;
  import mx.events.*;
  import mx.managers.PopUpManager;
  private function doDemo():void{
   var showText : String = "Demo for timer progress alert";
   var alertView : TimerProgressAlert = TimerProgressAlert(
   PopUpManager.createPopUp(this,TimerProgressAlert,true));
   alertView.setYesHandler(doYes);
   alertView.setNoHandler(doNo);
   alertView.setTextTip(showText);
   alertView.title="Timer Progress Alert";
   PopUpManager.centerPopUp(alertView);
  }  
  private function doYes(event:Event):void{
   Alert.show("You click Yes|Ok button");
  }
  
  private function doNo(event:Event):void{
   Alert.show("You click No|Cancel button"); 
  }
  
  ]]>
 </mx:Script>
</mx:Application>

如代码所示,setYesHandler()和setNoHandler()函数指定了该控件的自定义确认和取消事件处理函数。

下面贴以下该自定义控件的源代码:

TimerProgressAlert.mxml

<?xml version="1.0" encoding="utf-8"?>
  <mx:TitleWindow xmlns:mx="
http://www.adobe.com/2006/mxml
         showCloseButton="false" horizontalAlign="center" verticalGap="15">
    <mx:Metadata>
         [Event(name="nohandler", type="flash.events.Event")]
         [Event(name="yeshandler", type="flash.events.Event")]
 </mx:Metadata>         
  <mx:Script> 
    <![CDATA[
      import mx.controls.*;
      import mx.managers.*;
      import flash.utils.Timer;       
      import flash.events.TimerEvent;         
      private var timer:Timer; 
      public static const TIME_COUNT :Number = 100;
      public static const TIME_STEP :Number = 100;
     
      public function setTextTip(text:String):void
      {
       showText.text = text;
       timer = new Timer(TIME_STEP,TIME_COUNT);
       //timer = new Timer(25,300);
       timer.addEventListener(TimerEvent.TIMER, timerHandler);
       timer.start();
       bar.setProgress(TIME_COUNT,TIME_COUNT);
      }
      public function setYesHandler(yesHandler:Function):void{
       addEventListener("yeshandler", yesHandler);
      }
      public function setNoHandler(closeHandler:Function):void{
       addEventListener("nohandler", closeHandler);
      }
//=============================================================================
     private function closeWindow() :void
     {
        timer.stop();
        dispatchEvent(new Event("nohandler"));      
        PopUpManager.removePopUp(this);
     }
    
     private function submit() :void
     {
        timer.stop();
        dispatchEvent(new Event("yeshandler"));      
        PopUpManager.removePopUp(this);      
     }
    
     private function timerHandler(event:TimerEvent):void {     
            var t:Timer = event.target as Timer;
            var remain:uint = t.repeatCount - t.currentCount;  
            yesBtn.label = "Yes" +"(" + remain + ")";
           //bar.label="remain time: "+remain+" second";
          bar.setProgress(remain,TIME_COUNT);
          if(remain==0){
             timer.stop();
             dispatchEvent(new Event("nohandler"));
             PopUpManager.removePopUp(this);
         }
     }  
    ]]>
  </mx:Script>
 <mx:HBox width="100%">
  <mx:Spacer width="100%"/>
  <mx:Label id="showText" fontSize="11"/>
  <mx:Spacer width="100%"/>  
 </mx:HBox>
 <mx:HBox width="100%">
  <mx:ProgressBar id="bar" labelPlacement="bottom" barColor="#326CB4"
             minimum="0" visible="true" maximum="300" height="5" trackHeight="5" label=""
             direction="right" mode="manual" width="100%"/>
    </mx:HBox> 
 <mx:ControlBar horizontalGap="10" height="100%" horizontalAlign="center">
     <mx:Button label="Yes" id="yesBtn" click="submit()" height="22"/>
     <mx:Button label="No" click="closeWindow()" width="60" height="22"/>
    </mx:ControlBar>
</mx:TitleWindow>

  评论这张
 
阅读(379)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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