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/09/01 10:06:51 UTC
[royale-asjs] branch develop updated: changes to make yutaro
validators work and example
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 29237a6 changes to make yutaro validators work and example
29237a6 is described below
commit 29237a642367c9845cc5aa7f65f06eb116407d99
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Sep 1 12:06:47 2018 +0200
changes to make yutaro validators work and example
---
.../src/main/royale/TextInputPlayGround.mxml | 94 ++++++++++++++++++++++
.../projects/Jewel/src/main/resources/defaults.css | 35 ++++++++
.../Jewel/src/main/resources/jewel-manifest.xml | 8 ++
.../royale/org/apache/royale/jewel/ErrorTip.as | 1 +
.../main/royale/org/apache/royale/jewel/Form.as | 12 +--
.../jewel/beads/controls/group/FormValidator.as | 5 +-
.../beads/controls/textinput/StringValidator.as | 3 +-
.../Jewel/src/main/sass/components/_textinput.sass | 31 +++++++
8 files changed, 180 insertions(+), 9 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 93c4a0d..4bd6d80 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -189,6 +189,100 @@ limitations under the License.
</j:IconTextInput>
</j:Card>
</j:GridCell>
+
+ <j:GridCell wideScreenNumerator="1" wideScreenDenominator="2"
+ desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel Form"/>
+
+ <j:Form>
+ <j:beads>
+ <j:FormValidator trigger="{btn}" triggerEvent="click"/>
+ </j:beads>
+
+ <html:H4 text="Your name"/>
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Name"/>
+ <j:StringValidator required="3" autoTrim="true" requiredFieldError="Need more than 3 characters"/>
+ </j:beads>
+ </j:TextInput>
+
+ <html:H4 text="Favorite movies (at least 2)"/>
+ <j:Group>
+ <j:beads>
+ <j:CheckBoxValidator required="2" requiredFieldError="Please choose at least 2 movies"/>
+ </j:beads>
+
+ <j:CheckBox text="The Godfather"/>
+ <j:CheckBox text="Scent of a woman"/>
+ <j:CheckBox text="Star Wars"/>
+ <j:CheckBox text="The Shawshank Redemption"/>
+ </j:Group>
+
+ <html:H4 text="Verification code: {randomCode}"/>
+ <j:HGroup gap="3">
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Enter Verification Code"/>
+ <j:StringValidator validateFunction="{customValidate}"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Button id="btn" text="send" emphasis="primary"/>
+
+ </j:HGroup>
+
+ </j:Form>
+
+ <!-- <j:Group>
+ <j:beads>
+ <j:HorizontalLayout gap="3"/>
+ </j:beads>
+ <j:Button text="Check it!" emphasis="primary"/>
+ <j:TextInput text="A TextInput"/>
+ </j:Group>
+
+ <j:Group>
+ <j:beads>
+ <j:HorizontalLayout gap="3"/>
+ </j:beads>
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="With prompt..."/>
+ </j:beads>
+ </j:TextInput>
+ <j:Button text="Send" emphasis="secondary"/>
+ </j:Group>
+
+ <j:TextInput text="Disabled with text...">
+ <j:beads>
+ <j:TextPrompt prompt="Disabled TextInput..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Disabled with prompt..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextInput> -->
+ </j:Card>
+ </j:GridCell>
</j:Grid>
+ <fx:Script>
+ <![CDATA[
+ [Bindable]
+ private var randomCode:String = String(Math.round(Math.random() * 10000)).padStart(5, "0");
+
+ public function customValidate(host:TextInput):String {
+ return (host.text == randomCode) ? "" : "The entered code doesn't match" + randomCode;
+ }
+ ]]>
+ </fx:Script>
+
</j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index e57a341..8d50cfc 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3223,6 +3223,41 @@ j|TextArea {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
}
+.jewel.textinput.errorBorder {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.errorTip {
+ padding: 6px;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ color: #fff;
+ background: #EC1C24;
+ box-sizing: border-box;
+ animation: slide-up 0.4s ease;
+ z-index: 1;
+ margin-top: -31px !important;
+}
+
+.jewel.errorTip::before {
+ border: solid 8px transparent;
+ top: 100%;
+ left: 8px;
+ border-top-color: #EC1C24;
+ position: absolute;
+ content: "";
+ margin-top: 0px;
+}
+
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
.jewel.titlebar {
background-color: transparent;
padding: 0px;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b3b1090..637046f 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -62,6 +62,14 @@
<component id="DateChooser" class="org.apache.royale.jewel.DateChooser"/>
<component id="DateField" class="org.apache.royale.jewel.DateField"/>
<component id="DataContainer" class="org.apache.royale.jewel.DataContainer" />
+
+ <component id="Form" class="org.apache.royale.jewel.Form"/>
+ <component id="ErrorTip" class="org.apache.royale.jewel.ErrorTip"/>
+ <component id="Validator" class="org.apache.royale.jewel.beads.controls.Validator"/>
+ <component id="FormValidator" class="org.apache.royale.jewel.beads.controls.group.FormValidator"/>
+ <component id="StringValidator" class="org.apache.royale.jewel.beads.controls.textinput.StringValidator"/>
+ <component id="CheckBoxValidator" class="org.apache.royale.jewel.beads.controls.group.CheckBoxValidator"/>
+ <component id="RadioButtonValidator" class="org.apache.royale.jewel.beads.controls.group.RadioButtonValidator"/>
<component id="Navigation" class="org.apache.royale.jewel.Navigation"/>
<component id="NavigationLinkItemRenderer" class="org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as
index d4996c3..76cd5f7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as
@@ -19,6 +19,7 @@
package org.apache.royale.jewel
{
import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.core.ITextModel;
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Form.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Form.as
index ebae9a5..5152420 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Form.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Form.as
@@ -27,7 +27,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Event("valid","org.apache.royale.events.Event")]
@@ -37,7 +37,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Event("invalid","org.apache.royale.events.Event")]
@@ -49,7 +49,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
*/
public class Form extends Group implements IPopUpHost {
@@ -59,7 +59,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function Form()
{
@@ -72,11 +72,11 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get popUpParent():IParent
{
- return this;
+ return this as IParent;
}
}
}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/group/FormValidator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/group/FormValidator.as
index c54b93d..dc62869 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/group/FormValidator.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/group/FormValidator.as
@@ -18,11 +18,12 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.controls.group
{
- import org.apache.royale.core.HTMLElementWrapper;
+ import org.apache.royale.core.UIBase;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.jewel.Group;
import org.apache.royale.jewel.beads.controls.Validator;
+ import org.apache.royale.core.IChild;
/**
@@ -138,7 +139,7 @@ package org.apache.royale.jewel.beads.controls.group
protected function validateAll(group:Group):void {
for(var i:int=0; i < group.numElements; i++) {
- var child:HTMLElementWrapper = group.getElementAt(i) as HTMLElementWrapper;
+ var child:UIBase = group.getElementAt(i) as UIBase;
var validator:Validator = child.getBeadByType(Validator) as Validator;
if (validator && !(validator is FormValidator)) {
if(!validator.validate()) {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/StringValidator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/StringValidator.as
index 26c74c7..41a14bf 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/StringValidator.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/StringValidator.as
@@ -23,6 +23,7 @@ package org.apache.royale.jewel.beads.controls.textinput
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.controls.Validator;
import org.apache.royale.jewel.supportClasses.textinput.TextInputBase;
+ import org.apache.royale.utils.StringUtil;
/**
* The StringValidator class is a specialty bead that can be used with
@@ -123,7 +124,7 @@ package org.apache.royale.jewel.beads.controls.textinput
var str:String = txt.text;
if (autoTrim) {
- str = str.trim();
+ str = StringUtil.trim(str);
if (str != txt.text) txt.text = str;
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index 188f3cd..ae49d51 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -109,3 +109,34 @@ j|TextArea
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
//IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
+
+.jewel.textinput.errorBorder
+ input
+ border: 1px #EC1C24 solid
+
+.jewel.errorTip
+ padding: 6px
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4)
+ color: #fff
+ background: #EC1C24
+ box-sizing: border-box
+ animation: slide-up 0.4s ease
+ z-index: 1
+ margin-top: -31px !important
+
+.jewel.errorTip::before
+ border: solid 8px transparent
+ top: 100%
+ left: 8px
+ border-top-color: #EC1C24
+ position: absolute
+ content: ""
+ margin-top: 0px
+
+@keyframes slide-up
+ 0%
+ opacity: 0
+ transform: translateY(20px)
+ 100%
+ opacity: 1
+ transform: translateY(0)
\ No newline at end of file