MDL EffectBead in place (for now using a string, maybe better change to boolean flags)
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/73770aea Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/73770aea Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/73770aea Branch: refs/heads/feature/mdl Commit: 73770aea60f720c0f214806490c542c92af6bce3 Parents: d8f490a Author: Carlos Rovira <carlosrov...@apache.org> Authored: Wed Oct 26 12:57:18 2016 +0200 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Wed Oct 26 22:48:24 2016 +0200 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 45 ++++++-- .../src/main/flex/org/apache/flex/mdl/Button.as | 25 ----- .../main/flex/org/apache/flex/mdl/CheckBox.as | 16 --- .../flex/org/apache/flex/mdl/RadioButton.as | 17 --- .../main/flex/org/apache/flex/mdl/TextInput.as | 20 +--- .../org/apache/flex/mdl/beads/EffectBead.as | 107 +++++++++++++++++++ .../src/main/resources/mdl-manifest.xml | 1 + 7 files changed, 145 insertions(+), 86 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73770aea/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 9f1be78..82126a4 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -37,21 +37,40 @@ limitations under the License. <mdl:Button/> <!-- Fab button --> - <mdl:Button mdlEffect="mdl-button--fab mdl-button--colored"> + <mdl:Button> + <js:beads> + <mdl:EffectBead mdlEffect="mdl-button--fab mdl-button--colored"/> + </js:beads> <i class="material-icons">add</i> </mdl:Button> <!-- Fab with Ripple --> - <mdl:Button mdlEffect="mdl-button--fab mdl-js-ripple-effect"> + <mdl:Button> + <js:beads> + <mdl:EffectBead mdlEffect="mdl-button--fab mdl-js-ripple-effect"/> + </js:beads> <i class="material-icons md-48">face</i> </mdl:Button> <!-- Raised button --> - <mdl:Button mdlEffect="mdl-button--raised mdl-button--colored" text="BUTTON"/> + <mdl:Button text="BUTTON"> + <js:beads> + <mdl:EffectBead mdlEffect="mdl-button--raised mdl-button--colored"/> + </js:beads> + </mdl:Button> + <!-- Raised button with ripple --> - <mdl:Button mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent" text="BUTTON"/> + <mdl:Button text="BUTTON"> + <js:beads> + <mdl:EffectBead mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent"/> + </js:beads> + </mdl:Button> <!-- Raised disabled button ... it seems we don't have "disabled" implemented yet--> - <mdl:Button mdlEffect="mdl-button--raised" text="BUTTON"/> + <mdl:Button text="BUTTON"> + <js:beads> + <mdl:EffectBead mdlEffect="mdl-button--raised"/> + </js:beads> + </mdl:Button> </js:HContainer> <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> @@ -60,18 +79,26 @@ limitations under the License. <mdl:TextPromptBead prompt="Normal Text Field..."/> </js:beads> </mdl:TextInput> - <mdl:TextInput mdlEffect="mdl-textfield--floating-label"> + <mdl:TextInput> <js:beads> + <mdl:EffectBead mdlEffect="mdl-textfield--floating-label"/> <mdl:TextPromptBead prompt="Floating Label"/> </js:beads> </mdl:TextInput> <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> <mdl:CheckBox id="mdlchk" text="Disabled at start" /> - <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" mdlEffect="mdl-js-ripple-effect"/> - + <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true"> + <js:beads> + <mdl:EffectBead mdlEffect="mdl-js-ripple-effect"/> + </js:beads> + </mdl:CheckBox> <mdl:RadioButton groupName="g1" text="Black"/> - <mdl:RadioButton groupName="g1" text="Ripple" mdlEffect="mdl-js-ripple-effect"/> + <mdl:RadioButton groupName="g1" text="Ripple"> + <js:beads> + <mdl:EffectBead mdlEffect="mdl-js-ripple-effect"/> + </js:beads> + </mdl:RadioButton> <mdl:RadioButton groupName="g1" text="Red"/> </js:Form> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73770aea/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 7c17757..27116c4 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 @@ -67,30 +67,5 @@ package org.apache.flex.mdl 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 - { - className = _mdlEffect; - } - } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73770aea/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as index 60db161..58d3ba2 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as @@ -167,22 +167,6 @@ package org.apache.flex.mdl else checkbox.className = 'checkbox-icon';*/ } - - private var _mdlEffect:String = ""; - - public function get mdlEffect():String - { - return _mdlEffect; - } - - public function set mdlEffect(value:String):void - { - _mdlEffect = value; - COMPILE::JS - { - className = _mdlEffect; - } - } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73770aea/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as index ee79872..0f8237d 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as @@ -236,23 +236,6 @@ package org.apache.flex.mdl } } } - - private var _mdlEffect:String = ""; - - public function get mdlEffect():String - { - return _mdlEffect; - } - - public function set mdlEffect(value:String):void - { - _mdlEffect = value; - COMPILE::JS - { - className = _mdlEffect; - } - } - } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73770aea/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 c8244a4..a53f31e 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 @@ -105,24 +105,6 @@ package org.apache.flex.mdl element.flexjs_wrapper = this; return element; - } - - private var _mdlEffect:String = ""; - - public function get mdlEffect():String - { - return _mdlEffect; - } - - public function set mdlEffect(value:String):void - { - _mdlEffect = value; - COMPILE::JS - { - positioner.className = positioner.className + " " + _mdlEffect; - } - } - - + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73770aea/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as new file mode 100644 index 0000000..b01538d --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as @@ -0,0 +1,107 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.beads +{ + import org.apache.flex.core.IBead; + import org.apache.flex.core.IStrand; + import org.apache.flex.core.UIBase; + + import org.apache.flex.mdl.TextInput; + + /** + * The EffectBead class is a specialty bead that can be used with + * any MDL control to apply some MDL complementary effect. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class EffectBead implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function EffectBead() + { + } + + /*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 = ""; + + /** + * The string to use as the MDL effect. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get mdlEffect():String + { + return _mdlEffect; + } + + public function set mdlEffect(value:String):void + { + _mdlEffect = value; + } + + private var _strand:IStrand; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion HTMLInputElement + * @flexjsignorecoercion org.apache.flex.core.UIBase; + */ + public function set strand(value:IStrand):void + { + _strand = value; + + COMPILE::JS + { + if (value is TextInput) { + var mdTi:TextInput = value as TextInput; + mdTi.positioner.className = mdTi.positioner.className + " " + mdlEffect; + } else { + var host:UIBase = value as UIBase; + host.className = mdlEffect; + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73770aea/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 9f47fea..aca9380 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -26,5 +26,6 @@ <component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/> <component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/> <component id="TextPromptBead" class="org.apache.flex.mdl.beads.TextPromptBead"/> + <component id="EffectBead" class="org.apache.flex.mdl.beads.EffectBead"/> </componentPackage>
