You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/08/24 17:35:14 UTC
[royale-asjs] branch develop updated: add text input mask for dates
in DateField and selection as textinput get a full possible date.
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 <ca...@apache.org>
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;