Text Input with floating text
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/bf8080d6 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/bf8080d6 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/bf8080d6 Branch: refs/heads/feature/mdl Commit: bf8080d69dc54a0ccbeb6dbcf5a372c9cbdcbddf Parents: eaa69cf Author: Carlos Rovira <carlosrov...@apache.org> Authored: Wed Oct 19 02:21:37 2016 +0200 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Wed Nov 2 19:22:52 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 5 ++- .../main/flex/org/apache/flex/mdl/TextInput.as | 45 +++++++++++++++++++- 2 files changed, 48 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bf8080d6/examples/flexjs/MDLExample/src/main/flex/App.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/App.mxml b/examples/flexjs/MDLExample/src/main/flex/App.mxml index 95dad1b..636b72b 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -57,7 +57,9 @@ limitations under the License. </js:Container> <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> - <mdl:TextInput id="mdlti" text="Something..." change="mdlchk.text = mdlti.text"/> + <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" text="Text..."/> + + <mdl:TextInput mdlEffect="mdl-textfield--floating-label" text="Floating Label"/> <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> <mdl:CheckBox id="mdlchk" text="This Checks" selected="true"/> @@ -66,6 +68,7 @@ limitations under the License. <mdl:RadioButton groupName="g1" text="Black"/> <mdl:RadioButton groupName="g1" text="White"/> <mdl:RadioButton groupName="g1" text="Red"/> + </js:Form> </js:View> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bf8080d6/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as index 4617678..48d71bf 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as @@ -49,8 +49,17 @@ package org.apache.flex.mdl super(); } + COMPILE::JS + { + private var _textNode:Text; + } + /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion HTMLDivElement + * @flexjsignorecoercion HTMLInputElement + * @flexjsignorecoercion HTMLLabelElement + * @flexjsignorecoercion Text */ COMPILE::JS override protected function createElement():WrappedHTMLElement @@ -70,7 +79,7 @@ package org.apache.flex.mdl label = document.createElement('label') as HTMLLabelElement; label.className = "mdl-textfield__label"; - textNode = document.createTextNode('') as Text; + _textNode = textNode = document.createTextNode('') as Text; label.appendChild(textNode); div.appendChild(input); @@ -94,5 +103,39 @@ package org.apache.flex.mdl return element; } + private var _mdlEffect:String = ""; + + public function get mdlEffect():String + { + return _mdlEffect; + } + + public function set mdlEffect(value:String):void + { + _mdlEffect = value; + COMPILE::JS + { + element.className = 'mdl-textfield mdl-js-textfield ' + _mdlEffect; + } + } + + /** + * @private + * @flexjsignorecoercion HTMLInputElement + */ + override public function set text(value:String):void + { + COMPILE::SWF + { + //inSetter = true; + //ITextModel(model).text = value; + //inSetter = false; + } + COMPILE::JS + { + _textNode.text = value; + dispatchEvent(new Event('textChange')); + } + } } }
