This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 2080d89  add text input mask for dates in DateField and selection as 
textinput get a full possible date.
2080d89 is described below

commit 2080d89c672cc022f08dda33b3a8049fa18fc28c
Author: Carlos Rovira <[email protected]>
AuthorDate: Fri Aug 24 19:35:10 2018 +0200

    add text input mask for dates in DateField and selection as textinput get a 
full possible date.
---
 .../beads/controllers/DateFieldMouseController.as  | 32 ++++++++++++-----
 ...RestrictBead.as => DateFieldMaskedTextInput.as} | 42 ++++++++++++++++++----
 .../royale/jewel/beads/views/DateFieldView.as      |  6 ++--
 .../itemRenderers/DropDownListItemRenderer.as      |  3 +-
 4 files changed, 64 insertions(+), 19 deletions(-)

diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateFieldMouseController.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateFieldMouseController.as
index 7d5ad64..90760c7 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateFieldMouseController.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateFieldMouseController.as
@@ -54,6 +54,9 @@ package org.apache.royale.jewel.beads.controllers
                {
                }
                
+               private var viewBead:DateFieldView;
+               private var model:IDateChooserModel;
+
                private var _strand:IStrand;
                
                /**
@@ -68,8 +71,12 @@ package org.apache.royale.jewel.beads.controllers
                {
                        _strand = value;
                        
-                       var viewBead:DateFieldView = 
_strand.getBeadByType(DateFieldView) as DateFieldView;                     
+                       model = _strand.getBeadByType(IDateChooserModel) as 
IDateChooserModel;
+
+                       viewBead = _strand.getBeadByType(DateFieldView) as 
DateFieldView;                       
                        
IEventDispatcher(viewBead.menuButton).addEventListener("click", clickHandler);
+
+                       viewBead.textInput.addEventListener(Event.CHANGE, 
inputSelectionChangeHandler);
                }
                
                /**
@@ -79,15 +86,14 @@ package org.apache.royale.jewel.beads.controllers
                {
             event.stopImmediatePropagation();
             
-                       var viewBead:DateFieldView = 
_strand.getBeadByType(DateFieldView) as DateFieldView;
                        viewBead.popUpVisible = true;
                        
IEventDispatcher(viewBead.popUp).addEventListener("change", changeHandler);
             removeDismissHandler();
             
             // use a timer to delay the installation of the event handler, 
otherwise
             // the event handler is called immediately and will dismiss the 
popup.
-            var t:Timer = new Timer(0.25,1);
-            t.addEventListener("timer",addDismissHandler);
+            var t:Timer = new Timer(0.25, 1);
+            t.addEventListener("timer", addDismissHandler);
             t.start();
         }
         
@@ -120,9 +126,6 @@ package org.apache.royale.jewel.beads.controllers
                {
             event.stopImmediatePropagation();
             
-                       var viewBead:DateFieldView = 
_strand.getBeadByType(DateFieldView) as DateFieldView;
-                       
-                       var model:IDateChooserModel = 
_strand.getBeadByType(IDateChooserModel) as IDateChooserModel;
                        model.selectedDate = 
IDateChooserModel(viewBead.popUp.getBeadByType(IDateChooserModel)).selectedDate;
 
                        viewBead.popUpVisible = false;
@@ -130,13 +133,26 @@ package org.apache.royale.jewel.beads.controllers
             
             removeDismissHandler();
                }
+
+               /**
+                * @private
+                */
+               private function inputSelectionChangeHandler(event:Event):void
+               {
+                       var len:int = viewBead.textInput.text.length;
+                       if(len == 10)
+                       {
+                               trace(viewBead.textInput.text);
+                               var date:Date = new 
Date(viewBead.textInput.text);
+                               model.selectedDate = date;
+                       }
+               }
         
         /**
          * @private
          */
         private function dismissHandler(event:MouseEvent):void
         {
-            var viewBead:DateFieldView = _strand.getBeadByType(DateFieldView) 
as DateFieldView;
             var popup:IUIBase = IUIBase(viewBead.popUp);
             
             COMPILE::SWF {
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldTextInputRestrictBead.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldMaskedTextInput.as
similarity index 79%
rename from 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldTextInputRestrictBead.as
rename to 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldMaskedTextInput.as
index 7767d1a..bded8ec 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldTextInputRestrictBead.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldMaskedTextInput.as
@@ -35,16 +35,16 @@ package org.apache.royale.jewel.beads.controls.datefield
        import org.apache.royale.events.IEventDispatcher;
        
        /**
-        *  The DateFieldTextInputRestrictBead class is a specialty bead that 
is used
-     *  by DateField control. The bead prevents non-numeric entry into the 
text input
-        *  area.
+        *  The DateFieldMaskedTextInput class is a specialty bead that is used
+     *  by DateField control. The bead mask the input of the user to conform
+        *  to numbers and slashes in the following pattern: 'NN/NN/NNNN'
         *  
         *  @langversion 3.0
         *  @playerversion Flash 10.2
         *  @playerversion AIR 2.6
         *  @productversion Royale 0.9.3
         */
-       public class DateFieldTextInputRestrictBead implements IBead
+       public class DateFieldMaskedTextInput implements IBead
        {
                /**
                 *  constructor.
@@ -54,7 +54,7 @@ package org.apache.royale.jewel.beads.controls.datefield
                 *  @playerversion AIR 2.6
                 *  @productversion Royale 0.9.3
                 */
-               public function DateFieldTextInputRestrictBead()
+               public function DateFieldMaskedTextInput()
                {
                }
                
@@ -80,7 +80,7 @@ package org.apache.royale.jewel.beads.controls.datefield
                        COMPILE::JS
                        {
                 var host:UIBase = _strand as UIBase;
-                host.element.addEventListener("keypress", validateInput, 
false);
+                host.element.addEventListener("keypress", dateInputMask, 
false);
                        }
                }
                
@@ -150,5 +150,35 @@ package org.apache.royale.jewel.beads.controls.datefield
                        }
 
                }
+
+               COMPILE::JS
+               /**
+                * (TODO carlosrovira): this should take into account 
IFormatBead
+                */
+               private function dateInputMask(event:BrowserEvent):void {
+                       if(event.keyCode < 47 || event.keyCode > 57) {
+                               event.preventDefault();
+                       }
+                       
+                       var len:int = event.target.value.length;
+                       
+                       // If we're at a particular place, let the user type 
the slash
+                       // i.e., 12/12/1212
+                       if(len !== 1 || len !== 3) {
+                               if(event.keyCode == 47) {
+                                       event.preventDefault();
+                               }
+                       }
+                       
+                       // If they don't add the slash, do it for them...
+                       if(len === 2) {
+                               event.target.value += '/';
+                       }
+
+                       // If they don't add the slash, do it for them...
+                       if(len === 5) {
+                               event.target.value += '/';
+                       }
+               }
        }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
index 4d2d18b..69ba3d7 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
@@ -35,7 +35,7 @@ package org.apache.royale.jewel.beads.views
        import org.apache.royale.jewel.Button;
        import org.apache.royale.jewel.TextInput;
        import 
org.apache.royale.jewel.beads.controls.textinput.MaxNumberCharacters;
-       import 
org.apache.royale.jewel.beads.controls.datefield.DateFieldTextInputRestrictBead;
+       import 
org.apache.royale.jewel.beads.controls.datefield.DateFieldMaskedTextInput;
        COMPILE::SWF
        {
                //import org.apache.royale.jewel.beads.views.TextInputView;
@@ -117,7 +117,7 @@ package org.apache.royale.jewel.beads.views
                        super.strand = value;
 
                        _textInput = new TextInput();
-                       _textInput.addBead(new 
DateFieldTextInputRestrictBead());
+                       _textInput.addBead(new DateFieldMaskedTextInput());
                        
                        var maxNumberCharacters:MaxNumberCharacters = new 
MaxNumberCharacters();
                        maxNumberCharacters.maxlength = 10;
@@ -269,7 +269,7 @@ package org.apache.royale.jewel.beads.views
                /**
                 * @private
                 */
-               private function selectionChangeHandler(event:Event):void
+               private function selectionChangeHandler(event:Event = null):void
                {
                        getHost().dispatchEvent(new 
Event("selectedDateChanged"));
                        getHost().dispatchEvent(new Event("change"));
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DropDownListItemRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DropDownListItemRenderer.as
index 251ffb7..da0af20 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DropDownListItemRenderer.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DropDownListItemRenderer.as
@@ -47,8 +47,7 @@ package org.apache.royale.jewel.itemRenderers
                public function DropDownListItemRenderer()
                {
                        super();
-
-            //className = ""; //set to empty string avoid 'undefined' output 
when no class selector is assigned by user;
+            typeNames = "jewel item";
         }
 
         private var item:Option;

Reply via email to