`
mmk12333
  • 浏览: 35077 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex 日期组件重写, 添加清空等

    博客分类:
  • flex
阅读更多

package hxht.comps.datefiled
{
    import flash.events.Event;
    import flash.events.FocusEvent;
    import flash.events.MouseEvent;
   
    import mx.controls.DateField;
    import mx.core.UIComponent;
    import mx.core.mx_internal;
    import mx.events.CalendarLayoutChangeEvent;
    import mx.events.DropdownEvent;
   
    import spark.components.Button;

    use namespace mx_internal;

    [Style(name="borderColor", type="uint", format="Color")]
    [Style(name="backGroundColor", type="uint", format="Color")]
    [Style(name="borderAlpha", type="Number")]
    [Style(name="borderWeight", type="Number")]
    [Style(name="cornerRadius", type="Number")]
    [Style(name="iconPaddingRight", type="Number")]

    /**
     *
     * @author Administrator
     */
    public class DateFiledLocal extends DateField
    {
        public function DateFiledLocal()
        {
            super();
   dayNames=['日','一','二','三','四','五','六'];
   monthNames=['一','二','三','四','五','六','七','八','九','十','十一','十二'];
   formatString="YYYY-MM-DD";
        }

        /**
         *  默认遮罩是否存在
         */
        public var mouseMaskEnabel:Boolean = true;

        //back
        protected var _backBorder:UIComponent;

        //border
        protected var _borderUI:UIComponent;

        //mask
        protected var _mouseMask:UIComponent;
  
  protected var _topMask:UIComponent ;
  
  /**
   * 是否显示删除按钮
   */  
  public var showDelete:Boolean = false ;
  
  /**
   * 删除按钮间距
   */  
  public var deletePadding:Number = 3 ;
  
  /**
   * 是否显示toolpit
   */  
  public var showtip:Boolean = true ;
  
  /**
   * 临时删除按钮 后 统一成一遍的编辑输入 和删除 需要修改 textinput默认输入行为 不然会有问题
   */  
  public var temp:Button = null ;

        override protected function createChildren():void
        {
            _backBorder = new UIComponent();
            _mouseMask = new UIComponent();
            _borderUI = new UIComponent();
            _mouseMask.alpha = 1;
            this.addChildAt(_backBorder, 0);
            this.addChildAt(_borderUI, 1);
            this.addChildAt(_mouseMask, 2);
            super.createChildren();
            this.addEventListener(MouseEvent.ROLL_OVER, sparkskin1_mouseOverHandler);
            this.addEventListener(MouseEvent.ROLL_OUT, sparkskin1_mouseOutHandler);
            this.addEventListener(DropdownEvent.OPEN, openHandler);
            this.addEventListener(DropdownEvent.CLOSE, closeHandler);
   
   if(showDelete)
   {
    temp = new Button() ;
    temp.buttonMode = true ;
    temp.width = 17;
    temp.height = 17 ;
    temp.addEventListener(MouseEvent.CLICK,deleteHandler) ;
    temp.toolTip = "清空" ;
    temp.styleName = "deleteForm_sys" ;
    this.addChild(temp) ;
   }
   
   this.textInput.setStyle("borderStyle", "none");
   this.textInput.setStyle("borderAlpha", 0);
   this.textInput.setStyle("contentBackgroundAlpha", 0);
   if (textInput)
   {
    textInput.addEventListener(FocusEvent.FOCUS_OUT, focuseOutHandler);
    textInput.addEventListener(FocusEvent.FOCUS_IN, focuseInHandler);
    textInput.addEventListener(Event.CHANGE,textChangeHandler ) ;
   }
        }
  
  /**
   * 
   * @param e
   *
   */  
  protected function deleteHandler( e:Event ):void
  {
   if(selectedDate)
     selectedDate = null ;
   
   this.dispatchEvent(new CalendarLayoutChangeEvent(CalendarLayoutChangeEvent.CHANGE,false,false,null)) ;
   
   e.stopPropagation() ;
   e.preventDefault();
  }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            this.downArrowButton.buttonMode = true;
            this.downArrowButton.useHandCursor = true;
            this.downArrowButton.mouseChildren = false;
         
   var _w:Number = unscaledWidth ;
   var _h:Number = unscaledHeight ;
   if(showDelete)
   {
    _w -= (temp.width +deletePadding);
    temp.x = _w + deletePadding;
    temp.y = (_h-temp.height)/2 ;
   }
   
   
            var _bordercolor:Object = this.getStyle("borderColor");
            var _borderweight:Object = this.getStyle("borderWeight");
            var _borderAlpha:Number = this.getStyle("borderAlpha");
            var _bgColor:Object = this.getStyle("backGroundColor");
            var _bgAlpha:Object = this.getStyle("backGroundAlpha");
            var _iconRight:Number = this.getStyle("iconPaddingRight");
            var _focusC:Object = this.getStyle("focusColor");
            var _focusA:uint = this.getStyle("errorColor");
   var _cor:Number = this.getStyle("cornerRadius") ;
            if (_bordercolor == null)
                _bordercolor = 0x1c75c3;
            if (_borderweight == null)
                _borderweight = 1;
            if (isNaN(_borderAlpha))
                _borderAlpha = 1;
            if (_bgColor == null)
                _bgColor = 0xffffff;
            if (_bgAlpha == null)
                _bgAlpha = 1;
            if (isNaN(_iconRight))
                _iconRight = 1;
            if (_focusC == null)
                _focusC = 0xeaf2fb;
   if(isNaN(_cor))
    _cor = 0 ;

            with (_backBorder.graphics)
            {
                clear();
                beginFill(_focusC, _bgAlpha);
                drawRoundRect(0, 0,_w, _h , 0);
                endFill();
            }

            with (_borderUI.graphics)
            {
                clear();
                lineStyle(_borderweight, _bordercolor, _borderAlpha);
                drawRoundRect(0, 0,_w, _h , 0);
                endFill();
            }

            /*mask*/
            mouseMaskEnabel = (_focusA == 0xff1000 ? false : true);
            _mouseMask.alpha = 1;
            _mouseMask.x = Number(_borderweight);
            _mouseMask.y = Number(_borderweight);
            _mouseMask.width = (_w - Number(_borderweight));
            _mouseMask.height = (_h - Number(_borderweight));
            with (_mouseMask.graphics)
            {
                clear();
                beginFill(_bgColor, 1);
                drawRoundRect(0, 0, _mouseMask.width, _mouseMask.height,0 );
                endFill();
            }

            super.updateDisplayList(unscaledWidth, unscaledHeight);
            downArrowButton.x = (_w - downArrowButton.width - _iconRight);
            downArrowButton.y = (_h - downArrowButton.height) / 2;
   
   if (textInput && showDelete)
    textInput.width =  downArrowButton.x  ;
   if(showtip)
    this.toolTip = textInput.text ;
            sparkskin1_mouseOutHandler();
        }


        //-----------------------------------------------------style---------------------------------------------------
        /**
         * focus in flag
         */
        private var _textIn:Boolean = false;

        /**
         * mouse in this bound
         */
        private var _mouseIn:Boolean = false;

        /**
         * is openning state
         */
        private var _openFlag:Boolean = false;

        /**
         * focuse in handler
         * @param e
         *
         */
        protected function focuseInHandler(e:Event):void
        {
            _textIn = true;
            sparkskin1_mouseOutHandler();
        }

        /**
         * focuse out handler
         * @param e
         *
         */
        protected function focuseOutHandler(e:Event):void
        {
            _textIn = false;
            sparkskin1_mouseOutHandler();
        }

        /**
         * mouse over handler hidden mask
         * @param event
         *
         */
        protected function sparkskin1_mouseOverHandler(event:MouseEvent):void
        {
            mouseIn = true;
        }

        /**
         * mouse out handler show mask
         * @param event
         *
         */
        protected function sparkskin1_mouseOutHandler(event:MouseEvent = null):void
        {
            if (!editable)
                _textIn = false;
            if ((mouseX < 0 || mouseY > this.height || mouseX > this.width || mouseY < 0) && !_textIn && !_openFlag)
                mouseIn = false;
            else
                mouseIn = true;
        }

        /**
         * set mouse in
         * @return
         *
         */
        public function get mouseIn():Boolean
        {
            return _mouseIn;
        }

        /**
         * set mouse out
         * @param value
         *
         */
        public function set mouseIn(value:Boolean):void
        {
            if (this.enabled)
            {
                _mouseIn = value;
                if (_mouseMask && mouseMaskEnabel)
                {
                    _mouseMask.visible = value;
                    _mouseMask.includeInLayout = value;
                }
            }
        }

        /**
         * when closed reset view if uneditabled
         * @param e
         *
         */
        protected function closeHandler(e:Event):void
        {
            _openFlag = false;
            if (!editable)
                sparkskin1_mouseOutHandler();
        }

        /**
         *
         * @param e
         *
         */
        private function openHandler(e:Event):void
        {
            _openFlag = true;
        }
  
  private function textChangeHandler( e:Event ):void
  {
   
  }

    }
}

0
0
分享到:
评论

相关推荐

    flex 重写组件

    ### Flex 重写组件详解 #### 一、为何需要重写Flex组件? 在Flex开发过程中,经常遇到已有的组件无法完全满足项目需求的情况。这些需求可能包括但不限于改变组件的外观、增加新的功能特性或者实现更复杂的交互逻辑...

    flex中的组件重写例子

    在Flex开发中,组件重写是一项关键技能,它允许开发者根据特定需求定制标准组件,以实现更高效、更具个性化的用户界面。本文将深入探讨Flex组件重写的原因、注意事项、重写过程以及组件的内部执行流程,并通过示例...

    flex组件重写

    本文将探讨Flex组件重写的必要性、考虑因素、以及AS和MXML方式的选用规则,并提供AS方式重写组件的一般步骤。 一、为什么要重写组件 1. 扩展功能:当Flex已有的组件无法满足特定业务需求时,我们可以通过继承现有...

    Flex 分页组件,flex自定义组件

    7. **兼容性和扩展性**:一个优质的Flex分页组件应具备良好的兼容性,适应各种Flex版本和环境,并且设计应考虑到未来的扩展,如添加新的功能或与其他组件集成。 在“FlexPaging”这个文件中,可能包含了实现以上...

    flex图形组件

    1. Flex SDK:Flex图形组件是基于Flex SDK开发的,它提供了丰富的UI组件库,包括图表、图形等,使得开发者能够轻松地创建富互联网应用程序(RIA)。 2. Flex图形组件类型:Flex提供多种图形组件,如BarChart(条形...

    Flex 日期组件

    在Flex开发中,日期组件是不可或缺的一部分,它们用于用户界面中显示和选择日期与时间。在本主题中,我们将深入探讨“Flex 日期组件”,特别是关于年月日、年月日时以及年月日时分的`DateField`封装。`DateField`是...

    Flex3组件介绍包含flex3的所有组件介绍并有例子

    Flex3组件介绍,包含flex3的所有组件介绍并有例子

    Flex 自定义组件ImageViewer

    Flex是Adobe开发的一种开源框架,主要用于构建富互联网应用程序(RIA)。在Flex中,自定义组件是开发者根据...通过深入研究ImageViewer组件的实现,我们可以掌握如何在Flex中处理图像展示、交互和性能优化等相关技术。

    Flex 保存组件至本地

    在Flex开发中,有时我们需要将用户界面或者特定的组件(如图表)保存为图像文件,以便用户可以离线查看或进一步处理。这个过程涉及到的技术主要包括组件渲染、图像处理和文件保存。下面我们将深入探讨如何在Flex中...

    flex 时间组件(time)

    开发过程中,可以利用Flex Builder或IntelliJ IDEA等IDE来调试和预览Time组件,这些工具提供了丰富的代码补全、调试和设计视图功能,使得开发更为高效。 总结,Flex中的Time组件是处理时间数据的关键工具,通过...

    Flex各自定义组件事件通讯例子

    Flex自定义组件是指开发者根据项目需求,通过继承已有的Flex基类(如UIComponent或Canvas),并添加特定功能和样式来创建的组件。自定义组件可以扩展Flex库中默认组件的功能,提高代码重用性和灵活性。 1. 组件创建...

    JSP调用Flex4组件演示代码

    【JSP调用Flex4组件演示代码】是一个典型的Web应用程序开发示例,它结合了Java服务器页面(JSP)和Adobe Flex4技术,展示了这两者之间的交互。在现代Web开发中,这种混合技术允许开发者利用Flex4的强大富互联网应用...

    flex特效组件用法效果

    在本文中,我们将深入探讨Flex特效组件的用法及其在自定义控件中的应用。Flex布局是一种强大的CSS布局模式,允许我们创建响应式和灵活的用户界面。它特别适合用于现代网页和移动应用的设计,因为它可以自动调整元素...

    flex 日历组件

    除了基本功能,Flex日历组件还支持自定义日期格式、禁用特定日期、显示节假日等高级特性。开发者可以通过扩展Calendar类或使用皮肤来实现更复杂的自定义需求。例如,通过设置dateFormatter属性,可以改变日期的显示...

    flex 高级自定义组件

    在组件添加到显示列表中时,Flex会自动调用此方法,确保子组件的创建只进行一次。这里通常用来初始化组件的内容和结构,但不涉及子组件的布局和定位。而`updateDisplayList()`方法则用于在测量阶段之后,根据组件的...

    Flex Tree组件的实线连接线

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于展示层次结构数据。在默认情况下,Tree组件的节点之间通常使用虚线进行连接,以表示它们之间的层级关系。然而,有时候我们可能需要自定义这些连接线,比如将...

    Flex中组件datagrid导出Excel

    总结起来,Flex中组件DataGrid的数据导出至Excel是一项涉及组件操作、数据处理、XML序列化和文件下载等多方面技术的任务。通过理解并掌握这些知识点,开发者可以为用户提供便捷的数据导出功能,提高用户体验。在具体...

    flex组件介绍

    ### Flex组件介绍与详解 Flex是一种用于开发交互式应用程序的开源框架,由Adobe Systems创建,主要应用于Adobe Flash Player和Adobe AIR。Flex提供了丰富的用户界面组件库,这些组件可以帮助开发者快速构建高质量的...

    Flex 组件Flex 组件Flex 组件

    Flex组件库提供了丰富的控件集合,包括按钮、文本框、列表、面板等,使得开发者能够轻松创建具有交互性和动态效果的Web应用。 在Flex中,组件是可重用的代码单元,它们负责处理用户输入、显示数据和实现特定功能。...

    flex 自定义组件

    在Flex中,自定义组件通常是通过继承已有的基类,如UIComponent或Button,然后添加自己的属性、方法和样式来实现的。这样做的好处在于,我们可以创建出符合设计规范、功能齐全且可重用的组件,提高代码复用率和开发...

Global site tag (gtag.js) - Google Analytics