Changes to Button and examples
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/5564852e Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/5564852e Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/5564852e Branch: refs/heads/feature/mdl Commit: 5564852e0aff154840af50e7921437f5ac9d321a Parents: 0e69bb8 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Wed Oct 19 00:49:48 2016 +0200 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sat Nov 5 00:18:33 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 32 +++++---- .../src/main/flex/org/apache/flex/mdl/Button.as | 69 ++++++++++++-------- 2 files changed, 57 insertions(+), 44 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5564852e/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 209efae..95dad1b 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -30,44 +30,42 @@ limitations under the License. <js:initialView> <js:View> - <js:Form action="http://www.google.com";> + <js:Form action="#"> <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> <js:Container> <js:beads> <js:HorizontalLayout /> </js:beads> - - <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"> + + <!-- Fab button --> + <mdl:Button mdlEffect="mdl-button--fab mdl-button--colored"> <i class="material-icons">add</i> - </js:TextButton> + </mdl:Button> - <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> - <i class="material-icons">mood</i> - </js:TextButton> + <!-- Fab with Ripple --> + <mdl:Button mdlEffect="mdl-button--fab mdl-js-ripple-effect"> + <i class="material-icons md-48">face</i> + </mdl:Button> <!-- Raised button --> - <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/> + <mdl:Button mdlEffect="mdl-button--raised mdl-button--colored" text="BUTTON"/> <!-- Raised button with ripple --> - <js:TextButton className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" text="BUTTON"/> + <mdl:Button mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent" text="BUTTON"/> <!-- Raised disabled button ... it seems we don't have "disabled" implemented yet--> - <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/> - - <mdl:Button> - <i class="material-icons">add</i> - </mdl:Button> - - <mdl:Button text="BUTTON"/> + <mdl:Button mdlEffect="mdl-button--raised" text="BUTTON"/> </js:Container> <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> <mdl:TextInput id="mdlti" text="Something..." change="mdlchk.text = mdlti.text"/> <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> - <mdl:CheckBox id="mdlchk" text="Hello" selected="true"/> + <mdl:CheckBox id="mdlchk" text="This Checks" selected="true"/> + <mdl:CheckBox id="mdlchk1" text="This is disabled at start" /> <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/5564852e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as index 7f836f6..61bcc20 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as @@ -18,13 +18,10 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - COMPILE::SWF - { - import org.apache.flex.html.Button; - } + import org.apache.flex.html.TextButton; + COMPILE::JS { - import org.apache.flex.core.UIBase; import org.apache.flex.core.WrappedHTMLElement; } @@ -37,8 +34,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - COMPILE::SWF - public class Button extends org.apache.flex.html.Button + public class Button extends TextButton { /** * Constructor. @@ -52,31 +48,50 @@ package org.apache.flex.mdl { super(); } - } - - COMPILE::JS - public class Button extends UIBase - { - private var button:HTMLButtonElement; /** - * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement - * @flexjsignorecoercion HTMLButtonElement - */ - override protected function createElement():WrappedHTMLElement - { - var button:HTMLButtonElement; - - button = document.createElement('button') as HTMLButtonElement; - element = button as WrappedHTMLElement; - button.className = 'mdl-button mdl-js-button mdl-button--fab mdl-button--colored'; + * @private + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElement('button') as WrappedHTMLElement; + //element.setAttribute('type', 'button'); positioner = element; positioner.style.position = 'relative'; - (button as WrappedHTMLElement).flexjs_wrapper = this; element.flexjs_wrapper = this; - - return element; + + element.className = 'mdl-button mdl-js-button'; + className = ""; + typeNames = "MDLButton"; + return element; + } + + public static const RAISED_EFFECT:String = "mdl-button--raised"; + public static const FAB_EFFECT:String = "mdl-button--fab"; + public static const MINI_FAB_EFFECT:String = "mdl-button--mini-fab"; + public static const ICON_EFFECT:String = "mdl-button--icon"; + public static const COLORED_EFFECT:String = "mdl-button--colored"; + public static const PRIMARY_EFFECT:String = "mdl-button--primary"; + public static const ACCENT_EFFECT:String = "mdl-button--accent"; + public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect"; + + 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-button mdl-js-button ' + _mdlEffect; + } + } + } }
