You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by pi...@apache.org on 2017/12/24 18:36:16 UTC

[royale-asjs] branch develop updated: Add MDL NonEmptyTextField

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

piotrz 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 1c6485b  Add MDL NonEmptyTextField
1c6485b is described below

commit 1c6485b799a730d7a3d8aa8b8da8f85ef48c8f33
Author: Piotr Zarzycki <pi...@gmail.com>
AuthorDate: Sun Dec 24 19:36:06 2017 +0100

    Add MDL NonEmptyTextField
    
    - Add MDL NonEmptyTextField bead
    - Rename Restrict to RestrictTextField
    - Update MDLExample
---
 .../MDLExample/src/main/royale/TextFields.mxml     |  4 +-
 .../src/main/resources/mdl-manifest.xml            |  3 +-
 .../beads/{Restrict.as => NonEmptyTextField.as}    | 95 +++++++++-------------
 .../beads/{Restrict.as => RestrictTextField.as}    | 14 ++--
 4 files changed, 50 insertions(+), 66 deletions(-)

diff --git a/examples/royale/MDLExample/src/main/royale/TextFields.mxml b/examples/royale/MDLExample/src/main/royale/TextFields.mxml
index f544934..aad8e96 100644
--- a/examples/royale/MDLExample/src/main/royale/TextFields.mxml
+++ b/examples/royale/MDLExample/src/main/royale/TextFields.mxml
@@ -53,14 +53,14 @@ limitations under the License.
                 <mdl:TextField width="100%">
                     <mdl:beads>
                         <mdl:TextPrompt prompt="Letters and spaces..."/>
-                        <mdl:Restrict pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/>
+                        <mdl:RestrictTextField pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/>
                     </mdl:beads>
                 </mdl:TextField>
 
                 <mdl:TextField floatingLabel="true" width="100%">
                     <mdl:beads>
                         <mdl:TextPrompt prompt="Numbers..."/>
-                        <mdl:Restrict pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/>
+                        <mdl:RestrictTextField pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/>
                     </mdl:beads>
                 </mdl:TextField>
 
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
index afbf8f9..a40b0ef 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -25,13 +25,14 @@
     <component id="Button" class="org.apache.royale.mdl.Button"/>
     <component id="IconToggle" class="org.apache.royale.mdl.IconToggle"/>
     <component id="TextField" class="org.apache.royale.mdl.TextField"/>
+    <component id="NonEmptyTextField" class="org.apache.royale.mdl.beads.NonEmptyTextField"/>
     <component id="TextArea" class="org.apache.royale.mdl.TextArea"/>
     <component id="CheckBox" class="org.apache.royale.mdl.CheckBox"/>
     <component id="RadioButton" class="org.apache.royale.mdl.RadioButton"/>
     <component id="Switch" class="org.apache.royale.mdl.Switch"/>
     <component id="TextPrompt" class="org.apache.royale.mdl.beads.TextPrompt"/>
     <component id="ExpandableSearch" class="org.apache.royale.mdl.beads.ExpandableSearch"/>
-    <component id="Restrict" class="org.apache.royale.mdl.beads.Restrict"/>
+    <component id="RestrictTextField" class="org.apache.royale.mdl.beads.RestrictTextField"/>
     <component id="Disabled" class="org.apache.royale.mdl.beads.Disabled"/>
     <component id="Slider" class="org.apache.royale.mdl.Slider"/>
     <component id="SliderView" class="org.apache.royale.mdl.beads.views.SliderView"/>
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/Restrict.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/NonEmptyTextField.as
similarity index 60%
copy from frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/Restrict.as
copy to frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/NonEmptyTextField.as
index c2c231e..7f2ea8d 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/Restrict.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/NonEmptyTextField.as
@@ -21,30 +21,24 @@ package org.apache.royale.mdl.beads
 	import org.apache.royale.core.IBead;
 	import org.apache.royale.core.IStrand;
 	import org.apache.royale.core.UIBase;
-	import org.apache.royale.html.elements.Span;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.html.elements.Span;
+    import org.apache.royale.mdl.TextField;
     import org.apache.royale.mdl.supportClasses.ITextField;
-	
-	/**
-	 *  The Restrict bead class is a specialty bead that can be used with
-	 *  any MDL TextField control. The bead uses a reg exp pattern to validate
-	 *  input from user. A text property allows to configure error text.
-	 *  
-	 *  use examples:
-	 *  Numeric pattern = -?[0-9]*(\.[0-9]+)?
-	 *  error text = "Input is not a number!"
-	 *
-	 *  Letters and spaces only pattern = [A-Z,a-z, ]*
-	 *  error text = "Letters and spaces only";
-	 *
-	 *  Digits only = [0-9]*
-	 *  error text = "Digits only";
+    import org.apache.royale.utils.StringTrimmer;
+
+    /**
+	 *  The NonEmptyTextField bead should be used only with MDL TextField
+	 *  It checks whether TextField contains non empty string.
+	 *  If it is empty bead display message assigned to "error" property.
 	 *  
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.8
+	 *  @productversion Royale 0.9
 	 */
-	public class Restrict implements IBead
+	public class NonEmptyTextField implements IBead
 	{
 		/**
 		 *  constructor.
@@ -52,39 +46,10 @@ package org.apache.royale.mdl.beads
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
-		 */
-		public function Restrict()
-		{
-		}
-		
-		private var _pattern:String = "";
-		
-		/**
-		 *  The string to use as numeric pattern.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
+		 *  @productversion Royale 0.9
 		 */
-		public function get pattern():String
-		{
-			return _pattern;
-		}
-		public function set pattern(value:String):void
+		public function NonEmptyTextField()
 		{
-			_pattern = value;
-			updatePattern();
-		}
-
-		private function updatePattern():void
-		{
-			COMPILE::JS
-			{
-                var mdlTi:ITextField = _strand as ITextField;
-                mdlTi.input.setAttribute('pattern', pattern);
-			}
 		}
 
 		private var _spanError:Span;
@@ -96,7 +61,7 @@ package org.apache.royale.mdl.beads
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
+		 *  @productversion Royale 0.9
 		 */
         public function get error():String
         {
@@ -120,6 +85,7 @@ package org.apache.royale.mdl.beads
         }
 
 		private var _strand:IStrand;
+		private var _host:TextField;
 		
 		/**
 		 *  @copy org.apache.royale.core.IBead#strand
@@ -127,22 +93,39 @@ package org.apache.royale.mdl.beads
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
+		 *  @productversion Royale 0.9
 		 */
 		public function set strand(value:IStrand):void
 		{
 			_strand = value;
+			_host = value as TextField;
 
+			IEventDispatcher(value).addEventListener("change", onTextFieldChange);
 			COMPILE::JS
 			{
-                _spanError = new Span();
-                _spanError.element.classList.add("mdl-textfield__error");
-				
-                UIBase(value).positioner.appendChild(_spanError.element);
+				_spanError = new Span();
+				_spanError.element.classList.add("mdl-textfield__error");
+
+				_host.positioner.appendChild(_spanError.element);
 
 				updateError();
-				updatePattern();
 			}
 		}
+
+        private function onTextFieldChange(event:Event):void
+        {
+			COMPILE::JS
+            {
+                if (!StringTrimmer.trim(_host.text))
+                {
+                    _host.element.setAttribute("required", "required");
+					_host.isInvalid = true;
+                }
+                else
+                {
+                    _host.element.removeAttribute("required");
+                }
+            }
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/Restrict.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/RestrictTextField.as
similarity index 91%
rename from frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/Restrict.as
rename to frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/RestrictTextField.as
index c2c231e..a9bd1a2 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/Restrict.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/beads/RestrictTextField.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl.beads
     import org.apache.royale.mdl.supportClasses.ITextField;
 	
 	/**
-	 *  The Restrict bead class is a specialty bead that can be used with
+	 *  The RestrictTextField bead class is a specialty bead that can be used with
 	 *  any MDL TextField control. The bead uses a reg exp pattern to validate
 	 *  input from user. A text property allows to configure error text.
 	 *  
@@ -44,7 +44,7 @@ package org.apache.royale.mdl.beads
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.8
 	 */
-	public class Restrict implements IBead
+	public class RestrictTextField implements IBead
 	{
 		/**
 		 *  constructor.
@@ -54,7 +54,7 @@ package org.apache.royale.mdl.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.8
 		 */
-		public function Restrict()
+		public function RestrictTextField()
 		{
 		}
 		
@@ -135,10 +135,10 @@ package org.apache.royale.mdl.beads
 
 			COMPILE::JS
 			{
-                _spanError = new Span();
-                _spanError.element.classList.add("mdl-textfield__error");
-				
-                UIBase(value).positioner.appendChild(_spanError.element);
+				_spanError = new Span();
+				_spanError.element.classList.add("mdl-textfield__error");
+
+				UIBase(value).positioner.appendChild(_spanError.element);
 
 				updateError();
 				updatePattern();

-- 
To stop receiving notification emails like this one, please contact
['"commits@royale.apache.org" <co...@royale.apache.org>'].