Introducing MDL TextArea (with rows), refactoring textfield beads to allow TextArea and reworking the TextFields Example layout and inserting some TextArea controls to test
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/bcc09532 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/bcc09532 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/bcc09532 Branch: refs/heads/feature/fontawesome Commit: bcc09532f39deef719a6be29d4427a1763f0819c Parents: 48ba825 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Sun Jan 1 18:48:20 2017 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sun Jan 1 18:48:20 2017 +0100 ---------------------------------------------------------------------- .../MDLExample/src/main/flex/TextFields.mxml | 72 ++++--- .../main/flex/org/apache/flex/mdl/TextArea.as | 205 +++++++++++++++++++ .../main/flex/org/apache/flex/mdl/TextField.as | 4 +- .../flex/org/apache/flex/mdl/beads/Restrict.as | 7 +- .../org/apache/flex/mdl/beads/TextPrompt.as | 4 +- .../flex/mdl/supportClasses/ITextField.as | 71 +++++++ .../src/main/resources/mdl-manifest.xml | 1 + 7 files changed, 325 insertions(+), 39 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcc09532/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml index e53faaf..acac84b 100644 --- a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml @@ -22,51 +22,57 @@ limitations under the License. xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns="http://www.w3.org/1999/xhtml";> - <mdl:Grid> + <mdl:Grid width="300"> <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> <js:Form action="#"> - <mdl:TextField id="mdlti" change="mdlfloatingti.text = mdlti.text"> + + <mdl:TextField id="mdlti" change="mdlfloatingti.text = mdlti.text" width="100%"> <mdl:beads> <mdl:TextPrompt prompt="Normal Text Field..."/> </mdl:beads> </mdl:TextField> - </js:Form> - <mdl:TextField id="mdlfloatingti" floatingLabel= "true"> - <mdl:beads> - <mdl:TextPrompt prompt="Floating Label"/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField id="mdlfloatingti" floatingLabel= "true" width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Floating Label"/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField> - <mdl:beads> - <mdl:TextPrompt prompt="Letters and spaces..."/> - <mdl:Restrict pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/> - </mdl:beads> - </mdl:TextField> + <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:beads> + </mdl:TextField> - <mdl:TextField floatingLabel="true"> - <mdl:beads> - <mdl:TextPrompt prompt="Numbers..."/> - <mdl:Restrict pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/> - </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:beads> + </mdl:TextField> - <mdl:TextField> - <mdl:beads> - <mdl:TextPrompt prompt="Expandible..."/> - <mdl:ExpandableSearch/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Expandible..."/> + <mdl:ExpandableSearch/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField> - <mdl:beads> - <mdl:TextPrompt prompt="Expandible..."/> - <mdl:ExpandableSearch/> - </mdl:beads> - </mdl:TextField> - + <mdl:TextArea width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Text lines..."/> + </mdl:beads> + </mdl:TextArea> + + <mdl:TextArea floatingLabel="true" width="100%" rows="5"> + <mdl:beads> + <mdl:TextPrompt prompt="Text lines, floating and only letters..."/> + <mdl:Restrict pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/> + </mdl:beads> + </mdl:TextArea> + </js:Form> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcc09532/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextArea.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextArea.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextArea.as new file mode 100644 index 0000000..dda2668 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextArea.as @@ -0,0 +1,205 @@ +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.mdl +{ + import org.apache.flex.events.Event; + import org.apache.flex.html.TextInput; + + import org.apache.flex.mdl.supportClasses.ITextField; + + COMPILE::JS + { + import goog.events; + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The TextArea class provides a Material Design Library UI-like appearance for + * a TextField with multiple lines + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class TextArea extends org.apache.flex.html.TextInput implements ITextField + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function TextArea() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + private var _rows:int = 2; + /** + * The number of rows in the textarea. Defaults to 2 + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get rows():int + { + return _rows; + } + public function set rows(value:int):void + { + _rows = value; + + COMPILE::JS + { + input.setAttribute('rows', _rows); + } + } + + COMPILE::JS + { + private var _textNode:Text; + + public function get textNode():Text + { + return _textNode; + } + + public function set textNode(value:Text):void + { + _textNode = value; + } + + private var _input:HTMLInputElement; + + public function get input():HTMLInputElement + { + return _input; + } + + public function set input(value:HTMLInputElement):void + { + _input = value; + } + + private var _label:HTMLLabelElement; + + public function get label():HTMLLabelElement + { + return _label; + } + + public function set label(value:HTMLLabelElement):void + { + _label = value; + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion HTMLDivElement + * @flexjsignorecoercion HTMLInputElement + * @flexjsignorecoercion HTMLLabelElement + * @flexjsignorecoercion Text + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-textfield mdl-js-textfield"; + + var div:HTMLDivElement = document.createElement('div') as HTMLDivElement; + div.className = typeNames; + + input = document.createElement('textarea') as HTMLInputElement; + input.setAttribute('type', 'text'); + input.setAttribute('rows', rows); + input.className = "mdl-textfield__input"; + + //attach input handler to dispatch flexjs change event when user write in textinput + //goog.events.listen(element, 'change', killChangeHandler); + goog.events.listen(input, 'input', textChangeHandler); + + label = document.createElement('label') as HTMLLabelElement; + label.className = "mdl-textfield__label"; + + textNode = document.createTextNode('') as Text; + label.appendChild(textNode); + + div.appendChild(input); + div.appendChild(label); + + element = input as WrappedHTMLElement; + + positioner = div as WrappedHTMLElement; + (input as WrappedHTMLElement).flexjs_wrapper = this; + (label as WrappedHTMLElement).flexjs_wrapper = this; + element.flexjs_wrapper = this; + + return element; + } + + private var _className:String; + + /** + * since we have a div surronding the main input, we need to + * route the class assignaments to div + */ + override public function set className(value:String):void + { + if (_className != value) + { + COMPILE::JS + { + positioner.className = typeNames ? value + ' ' + typeNames : value; + } + _className = value; + dispatchEvent(new Event("classNameChanged")); + } + } + + private var _floatingLabel:Boolean = false; + /** + * A boolean flag to activate "mdl-textfield--floating-label" effect selector. + * Applies floating label effect. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get floatingLabel():Boolean + { + return _floatingLabel; + } + public function set floatingLabel(value:Boolean):void + { + _floatingLabel = value; + + COMPILE::JS + { + positioner.classList.toggle("mdl-textfield--floating-label", _floatingLabel); + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcc09532/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as index 8b43101..dba1384 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as @@ -20,6 +20,8 @@ package org.apache.flex.mdl import org.apache.flex.events.Event; import org.apache.flex.html.TextInput; + import org.apache.flex.mdl.supportClasses.ITextField; + COMPILE::JS { import goog.events; @@ -35,7 +37,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class TextField extends org.apache.flex.html.TextInput + public class TextField extends org.apache.flex.html.TextInput implements ITextField { /** * Constructor. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcc09532/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Restrict.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Restrict.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Restrict.as index 7acbba7..d9a08d8 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Restrict.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Restrict.as @@ -20,8 +20,9 @@ package org.apache.flex.mdl.beads { import org.apache.flex.core.IBead; import org.apache.flex.core.IStrand; + import org.apache.flex.core.UIBase; - import org.apache.flex.mdl.TextField; + import org.apache.flex.mdl.supportClasses.ITextField; /** * The Restrict bead class is a specialty bead that can be used with @@ -113,7 +114,7 @@ package org.apache.flex.mdl.beads COMPILE::JS { - var mdlTi:TextField = value as TextField; + var mdlTi:ITextField = value as ITextField; mdlTi.input.setAttribute('pattern', pattern); var span:HTMLSpanElement = document.createElement('span') as HTMLSpanElement; @@ -122,7 +123,7 @@ package org.apache.flex.mdl.beads var spanTextNode:Text = document.createTextNode(error) as Text; span.appendChild(spanTextNode); - mdlTi.positioner.appendChild(span); + UIBase(mdlTi).positioner.appendChild(span); } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcc09532/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as index 0e5904a..413892a 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as @@ -31,7 +31,7 @@ package org.apache.flex.mdl.beads import org.apache.flex.events.Event; import org.apache.flex.events.IEventDispatcher; - import org.apache.flex.mdl.TextField; + import org.apache.flex.mdl.supportClasses.ITextField; /** * The TextPrompt class is a specialty bead that can be used with @@ -116,7 +116,7 @@ package org.apache.flex.mdl.beads } COMPILE::JS { - var mdlTi:TextField = value as TextField; + var mdlTi:ITextField = value as ITextField; mdlTi.textNode.nodeValue = prompt; //var e:HTMLInputElement = host.element as HTMLInputElement; //e.placeholder = prompt; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcc09532/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ITextField.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ITextField.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ITextField.as new file mode 100644 index 0000000..d2adbf7 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ITextField.as @@ -0,0 +1,71 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.mdl.supportClasses +{ + /** + * The IMdlColor interface must be implemented by any class that + * will apply color and colorWeight provided by google style color. + * + * https://material.google.com/style/color.html#color-color-palette + * https://gitlab.com/material/colors/blob/master/colors.html + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public interface ITextField + { + COMPILE::JS + { + /** + * the textNode + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function get textNode():Text; + function set textNode(value:Text):void; + + /** + * the input + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function get input():HTMLInputElement; + function set input(value:HTMLInputElement):void; + + /** + * the label + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function get label():HTMLLabelElement; + function set label(value:HTMLLabelElement):void; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcc09532/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml index 8d6dd57..601d787 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -23,6 +23,7 @@ <component id="Button" class="org.apache.flex.mdl.Button"/> <component id="TextField" class="org.apache.flex.mdl.TextField"/> + <component id="TextArea" class="org.apache.flex.mdl.TextArea"/> <component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/> <component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/> <component id="Switch" class="org.apache.flex.mdl.Switch"/>
