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

wujian

居善地,心善渊,与善仁,言善信,政善治,事善能,动善时。夫唯不争,故无尤

 
 
 

日志

 
 

flex 时间控件详解  

2011-01-17 17:37:28|  分类: flex技术 |  标签: |举报 |字号 订阅

最近在研究flex这项技术,嘿嘿,这项技术很有意思,嘿嘿,在flex中没有现成的日期时间控件,于是我研究一些网上的代码,写了一个控件,这个控件就实现了日期和时间的显示,代码如下:

?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:eshangrao="com.systex.fp.jobschedule.util.*"
    height="22" width="207" initialize="initDateField()" >
  <mx:Script>
   <![CDATA[
    import mx.events.DateChooserEvent;
    import mx.events.CalendarLayoutChangeEvent;
    import mx.events.DropdownEvent;
    import mx.formatters.DateFormatter;
    import mx.controls.Alert;
    
    public function initDateField():void
    {
     var nowDate:String =new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/"+ new Date().getDate();
     var dateFormatter1:DateFormatter = new DateFormatter();
           dateFormatter1.formatString = "YYYY/MM/DD ";
             data1.text = dateFormatter1.format(nowDate);
         
    }

 public function initDateFormatter():void
    {
           var dateFormatter1:DateFormatter = new DateFormatter();
            dateFormatter1.formatString = "YYYY/MM/DD ";
            data1.text = dateFormatter1.format(data1.text);

         
    }

 ]]>
  </mx:Script>  
  <eshangrao:TimeInput hours="{new Date().getHours()}" minutes="{new Date().getMinutes()}" id="timeInput"   x="137"/>
     
 <mx:DateField  width="129" id="data1" x="0" change="initDateFormatter()"   />
 
</mx:Canvas>

说明:

initDateFormatter这个方法主要实现了根据DateField  控件,将用户选择的日期格式进行格式化,DateField  默认的格式为日月年,如果涉及数据库的时候需要的是年月日,所以我们就要实现转换格式。

initDateField实现初始化页面时,将控件的内容为显示为当前的日期和时间。

 

使用方法:在使用上可以使用data1.text属性得到用户选择的日期,

            使用timeInput.hours获得用户选择的时间

            使用timeInput.minutes获得用户选择的分钟

 

 还需要 TimeInput。as文件 路径为 com.systex.fp.jobschedule.util。

代码如下package com.systex.fp.jobschedule.util
{
 import flash.events.Event;
 import flash.events.FocusEvent;
 import flash.text.TextLineMetrics;
 
 import mx.containers.HBox;
 import mx.controls.NumericStepper;
 import mx.controls.Text;
 import mx.controls.TextInput;
 import mx.core.UITextField;
 import mx.core.mx_internal;
 import mx.events.FlexEvent;
 import mx.managers.IFocusManager;

use namespace mx_internal;
 
[Event(name="change",type="flash.events.Event")]
[Event(name="hoursChange",type="flash.events.Event")]
[Event(name="minutesChange",type="flash.events.Event")]

  public class TimeInput extends NumericStepper
{
  public function TimeInput()
  {
   super();
   this.maxChars=2;
   this.minimum=0;
   this.maximum=23;
   this.stepSize=1;
   this.addEventListener(FlexEvent.VALUE_COMMIT,valueCommandHandler);
  }
      protected  var inputBox:HBox;   
      protected  var sText:Text;        
     protected  var hoursInputField:TextInput;
     protected  var minutesInputField:TextInput;
     protected var _hours:Number = 0;
    protected var _minutes:Number = 30;
    protected var _timeDate;
    private var _enabled:Boolean=true;
    
     override protected function createChildren():void
     {
   super.createChildren();
   if(!inputBox)
   {
    inputBox=new HBox();
    inputBox.setStyle("paddingLeft",0);
    inputBox.setStyle("paddingRight",0);
    inputBox.setStyle("paddingTop",0);
    inputBox.setStyle("paddingBottom",0);
    inputBox.setStyle("horizontalGap",0);
    inputBox.setStyle("borderStyle","solid");
    inputBox.setStyle("verticalAlign","middle");
    addChild(inputBox);
   }
  
   var widestNumber:Number=61;
         var lineMetrics:TextLineMetrics = measureText(widestNumber.toString());
         var textWidth:Number = lineMetrics.width + UITextField.TEXT_WIDTH_PADDING+4;
         if (!hoursInputField)
         {
             hoursInputField = new TextInput();   
             hoursInputField.focusEnabled = false;
             hoursInputField.styleName = this;
    hoursInputField.width=textWidth;         
             hoursInputField.restrict = "0-9";
             hoursInputField.maxChars = 2;
             hoursInputField.text = StringToolkit.formatNumberWithChar(_hours,2,"0");
             hoursInputField.setStyle("textAlign","right");
    hoursInputField.setStyle("borderStyle","none");   
    hoursInputField.setStyle("paddingLeft",0);
    hoursInputField.setStyle("paddingRight",0);
    hoursInputField.setStyle("paddingTop",0);
    hoursInputField.setStyle("paddingBottom",0);
    hoursInputField.setStyle("horizontalGap",0);  
    hoursInputField.addEventListener(FocusEvent.FOCUS_IN,inputField_focusInHandler);
             hoursInputField.addEventListener(FocusEvent.FOCUS_OUT, inputField_focusOutHandler);
            
    inputBox.addChild(hoursInputField);
         }
         inputField=hoursInputField;
   if(!sText){
    sText=new Text();
    sText.text=":";
    sText.setStyle("textAlign","center");
    sText.setStyle("paddingLeft",0);
    sText.setStyle("paddingRight",0);
    sText.setStyle("paddingTop",0);
    sText.setStyle("paddingBottom",0);
    sText.setStyle("horizontalGap",0);
    inputBox.addChild(sText);
   }
         if (!minutesInputField)
         {
             minutesInputField = new TextInput();  
             minutesInputField.focusEnabled = false;
             minutesInputField.styleName = this;
    minutesInputField.width=textWidth;

            minutesInputField.restrict = "0-9";

             minutesInputField.maxChars = 2;
             minutesInputField.text = StringToolkit.formatNumberWithChar(_minutes,2,"0");
             minutesInputField.setStyle("textAlign","left");
    minutesInputField.setStyle("borderStyle","none"); 
    minutesInputField.setStyle("paddingLeft",0);
    minutesInputField.setStyle("paddingRight",0);
    minutesInputField.setStyle("paddingTop",0);
    minutesInputField.setStyle("paddingBottom",0);
    minutesInputField.setStyle("horizontalGap",0);
    minutesInputField.addEventListener(FocusEvent.FOCUS_IN,inputField_focusInHandler);
             minutesInputField.addEventListener(FocusEvent.FOCUS_OUT, inputField_focusOutHandler);
            
    inputBox.addChild(minutesInputField);
         }
     }
      override protected function measure():void
     {
   super.measure();
         var inputBoxHeight:Number = inputBox.getExplicitOrMeasuredHeight();
         var buttonHeight:Number = prevButton.getExplicitOrMeasuredHeight() +
                                   nextButton.getExplicitOrMeasuredHeight();

         var h:Number = Math.max(inputBoxHeight, buttonHeight);
         h = Math.max(DEFAULT_MEASURED_MIN_HEIGHT, h);

         var inputBoxWidth:Number = inputBox.getExplicitOrMeasuredWidth();
         var buttonWidth:Number = Math.max(prevButton.getExplicitOrMeasuredWidth(),
                                           nextButton.getExplicitOrMeasuredWidth());

         var w:Number = inputBoxWidth + buttonWidth;
         w = Math.max(DEFAULT_MEASURED_MIN_WIDTH, w);

         measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
         measuredMinHeight = DEFAULT_MEASURED_MIN_HEIGHT;

         measuredWidth = w;
         measuredHeight = h;
     }
    override protected function updateDisplayList(unscaledWidth:Number,
               unscaledHeight:Number):void
     {
   super.updateDisplayList(unscaledWidth, unscaledHeight);
  
         var w:Number = nextButton.getExplicitOrMeasuredWidth();
         var h:Number = Math.round(unscaledHeight / 2);
         var h2:Number = unscaledHeight - h;

         nextButton.x = unscaledWidth - w;
         nextButton.y = 0;
         nextButton.setActualSize(w, h2);
       
   prevButton.x = unscaledWidth - w;
         prevButton.y = unscaledHeight - h;
         prevButton.setActualSize(w, h);
         var inputBoxHeight:Number = inputBox.getExplicitOrMeasuredHeight();
         var inputBoxWidth:Number = inputBox.getExplicitOrMeasuredWidth();
         inputBox.setActualSize(inputBoxWidth,inputBoxHeight);
     }
        private function inputField_focusInHandler(event:FocusEvent):void
     {
     
      inputField=event.currentTarget as TextInput;
      if(event.currentTarget as TextInput == hoursInputField){
       this.value=parseInt(inputField.text);
       this.minimum=0;
       this.maximum=23;
      }else{
       this.value=parseInt(inputField.text);
       this.minimum=0;
       this.maximum=59;
      }
         focusInHandler(event);
       dispatchEvent(new FocusEvent(event.type, false, false,
           event.relatedObject,
           event.shiftKey, event.keyCode));
     }

      private function inputField_focusOutHandler(event:FocusEvent):void
     {
         focusOutHandler(event);
        
     dispatchEvent(new FocusEvent(event.type, false, false,
           event.relatedObject,
           event.shiftKey,event.keyCode));
     }
    
    private function valueCommandHandler(event:FlexEvent):void{
   inputField.text=StringToolkit.formatNumberWithChar(value,2,"0");
   if(inputField==hoursInputField){
       this.hours=value;
      }else{
       this.minutes=value;
      }
  }
    override protected function focusInHandler(event:FocusEvent):void
     {
         super.focusInHandler(event);

         var fm:IFocusManager = focusManager;
         if (fm)
             fm.defaultButtonEnabled = false;
     }
  [Bindable]
   public function get hours():Number
  {
   return _hours;
  }
 
  [Inspectable(defaultValue=0,category="Time",name="Hours")]
  public function set hours(val:Number):void
  {
   if (val >= 0 || val <= 24)
   {
    this._hours = val;
    if(inputField==hoursInputField && val!=value)
     value=val;
    else{
     hoursInputField.text=StringToolkit.formatNumberWithChar(val,2,"0");
    }
  
  
   dispatchEvent(new Event("hoursChange"));
   dispatchEvent(new Event("change"));
  }
 
  [Bindable]
   public function get minutes():Number
  {
   return _minutes;
  }
 
  [Inspectable(defaultValue=30,category="Time",name="Minutes")]
  public function set minutes(val:Number):void
  {
   if (val >= 0 || val <= 59)
   {
    this._minutes = val;
    if(inputField==minutesInputField && val!=value)
     value=val;
    else{
     minutesInputField.text=StringToolkit.formatNumberWithChar(val,2,"0");
    }
   }
  
   dispatchEvent(new Event("minutesChange"));
   dispatchEvent(new Event("change"));
  }
 
  public function get Time():Date{
   var date=new Date();
   date.hours=_hours;
   date.minutes=_minutes;
   return date;
  }
  public function set Time(time:Date):void{
   this._timeDate=time;
   this.hours=time.hours;
   this.minutes=time.minutes;
  }
 
   override public function set enabled(value:Boolean):void
     {
         _enabled = value;
         if(hoursInputField){
          hoursInputField.enabled=value;
          minutesInputField.enabled=value;  
          sText.enabled=value;
          nextButton.enabled=value;
          prevButton.enabled=value;
         }
        
          
     override public function get enabled():Boolean
     {
         return _enabled;
    
}
}

  评论这张
 
阅读(1262)| 评论(2)
|      
推荐 转载

历史上的今天

最近读者

热度

评论

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

页脚

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