Repository: flex-asjs
Updated Branches:
  refs/heads/feature/mdl 128b87d26 -> 2ad3edb73


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/2ad3edb7
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/2ad3edb7
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/2ad3edb7

Branch: refs/heads/feature/mdl
Commit: 2ad3edb73a2ff098c4e4a4aafbd7694a5eb4cb88
Parents: 128b87d
Author: Carlos Rovira <carlosrov...@apache.org>
Authored: Wed Oct 19 00:49:48 2016 +0200
Committer: Carlos Rovira <carlosrov...@apache.org>
Committed: Wed Oct 19 00:49:48 2016 +0200

----------------------------------------------------------------------
 .../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/2ad3edb7/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/2ad3edb7/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;
+            }
+        }
+       }
 }

Reply via email to