You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/11/12 09:07:22 UTC

[1/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - move output folder for basictests [Forced Update!]

Repository: flex-asjs
Updated Branches:
  refs/heads/feature/mdl 5d1e27b8c -> 8a2610f3a (forced update)


move output folder for basictests


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/09f2d919
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/09f2d919
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/09f2d919

Branch: refs/heads/feature/mdl
Commit: 09f2d919b641778a46624743e60b205873500d88
Parents: 5c8c667
Author: Alex Harui <ah...@apache.org>
Authored: Fri Nov 11 13:17:02 2016 -0800
Committer: Alex Harui <ah...@apache.org>
Committed: Fri Nov 11 13:17:02 2016 -0800

----------------------------------------------------------------------
 .gitignore | 2 +-
 build.xml  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09f2d919/.gitignore
----------------------------------------------------------------------
diff --git a/.gitignore b/.gitignore
index b37ca3c..38d7487 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,7 +35,7 @@ binjs-release
 examples/FlexJSTest_again/html-template
 examples/FlexJSTest_again/bin
 rat.report
-mustella/tests/bin
+mustella/tests/basicTests/bin
 asdoc-output
 
 #Apache Flex Projects

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09f2d919/build.xml
----------------------------------------------------------------------
diff --git a/build.xml b/build.xml
index 61caf6d..befe655 100644
--- a/build.xml
+++ b/build.xml
@@ -1173,7 +1173,7 @@
         <echo>script=${basedir}/mustella/tests/basicTests/halo/scripts/CheckBoxTestScript.mxml</echo>
 		<java classname="marmotinni.MarmotinniRunner" classpath="${basedir}/mustella/java/bin" fork="true" failonerror="yes">
 		    <!--<arg value="browser=chrome" />-->
-		    <arg value="url=file://${basedir}/mustella/tests/bin/js-debug/index.html" />
+		    <arg value="url=file://${basedir}/mustella/tests/basicTests/bin/js-debug/index.html" />
 		    <arg value="script=${basedir}/mustella/tests/basicTests/halo/scripts/ButtonTestScript.mxml" />
 		    <arg value="script=${basedir}/mustella/tests/basicTests/halo/scripts/CheckBoxTestScript.mxml" />
 		    <!--<arg value="showSteps=true" />-->


[6/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - Fix classNames and typeNames to allow user to assign their own without remove MDL ones

Posted by ca...@apache.org.
Fix classNames and typeNames to allow user to assign their own without remove MDL ones


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/ed6fdc91
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/ed6fdc91
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/ed6fdc91

Branch: refs/heads/feature/mdl
Commit: ed6fdc913e0f00d3b9604af094d5d8a3187ec352
Parents: 4d6fa02
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 10 19:55:50 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Sat Nov 12 10:06:54 2016 +0100

----------------------------------------------------------------------
 .../src/main/flex/org/apache/flex/mdl/Button.as | 32 ++++++++++++++-----
 .../main/flex/org/apache/flex/mdl/CheckBox.as   | 19 +++++++++--
 .../flex/org/apache/flex/mdl/RadioButton.as     | 22 +++++++++++--
 .../src/main/flex/org/apache/flex/mdl/Slider.as | 26 ++++++++++++++-
 .../main/flex/org/apache/flex/mdl/TextInput.as  | 33 +++++++++++++++++---
 5 files changed, 114 insertions(+), 18 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/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 e1fa441..bbac36a 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
@@ -47,6 +47,8 @@ package org.apache.flex.mdl
 		public function Button()
 		{
 			super();
+
+            className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
 		}
         
         /**
@@ -56,20 +58,22 @@ package org.apache.flex.mdl
 		COMPILE::JS
 		override protected function createElement():WrappedHTMLElement
 		{
-            element = document.createElement('button') as WrappedHTMLElement;
+            typeNames = "mdl-button mdl-js-button";
             
+            element = document.createElement('button') as WrappedHTMLElement;
+            element.className = typeNames;
+
             positioner = element;
             positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
 
-            className = "mdl-button mdl-js-button";
-
             return element;
 		}
 
         private var _fab:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-button--fab" effect selector.
+         *  Applies fab (circular) display effect. Mutually exclusive with raised, mini-fab, and icon.
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
@@ -90,6 +94,7 @@ package org.apache.flex.mdl
         private var _raised:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-button--raised" effect selector.
+         *  Applies raised display effect. Mutually exclusive with fab, mini-fab, and icon.
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
@@ -110,6 +115,8 @@ package org.apache.flex.mdl
         private var _colored:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-button--colored" effect selector.
+         *  Applies colored display effect (primary or accent color, depending on the type of button).
+         *  Colors are defined in material.min.css
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
@@ -130,7 +137,9 @@ package org.apache.flex.mdl
         private var _accent:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-button--accent" effect selector.
-		 *
+		 *  Applies accent color display effect.
+         *  Colors are defined in material.min.css.
+         *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -150,7 +159,9 @@ package org.apache.flex.mdl
         private var _primary:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-button--primary" effect selector.
-		 *
+		 *  Applies primary color display effect.
+         *  Colors are defined in material.min.css
+         *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -170,7 +181,9 @@ package org.apache.flex.mdl
         private var _minifab:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-button--mini-fab" effect selector.
-		 *
+		 *  Applies mini-fab (small fab circular) display effect.
+         *  Mutually exclusive with raised, fab, and icon
+         *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -190,7 +203,9 @@ package org.apache.flex.mdl
         private var _icon:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-button--icon" effect selector.
-		 *
+		 *  Applies icon (small plain circular) display effect.
+         *  Mutually exclusive with raised, fab, and mini-fab
+         *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -210,7 +225,8 @@ package org.apache.flex.mdl
         protected var _ripple:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-js-ripple-effect" effect selector.
-		 *
+		 *  Applies ripple click effect. May be used in combination with any other classes
+         *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/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 b8f1194..6a30449 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
@@ -76,6 +76,20 @@ package org.apache.flex.mdl
     COMPILE::JS
     public class CheckBox extends UIBase
     {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CheckBox()
+		{
+			super();
+
+            className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+		}
         
         private var input:HTMLInputElement;
         private var checkbox:HTMLSpanElement;
@@ -91,6 +105,8 @@ package org.apache.flex.mdl
          */
         override protected function createElement():WrappedHTMLElement
         {
+            typeNames = "mdl-checkbox mdl-js-checkbox";
+
             label = document.createElement('label') as HTMLLabelElement;
             element = label as WrappedHTMLElement;
             
@@ -112,14 +128,13 @@ package org.apache.flex.mdl
             (checkbox as WrappedHTMLElement).flexjs_wrapper = this;
             element.flexjs_wrapper = this;
             
-            className = 'mdl-checkbox mdl-js-checkbox';
-
             return element;
         };
 
         protected var _ripple:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-js-ripple-effect" effect selector.
+         *  Applies ripple click effect. May be used in combination with any other classes
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/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 2ebd9fe..46eb8cc 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
@@ -77,6 +77,21 @@ package org.apache.flex.mdl
     public class RadioButton extends UIBase
     {
         /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function RadioButton()
+		{
+			super();
+
+            className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+		}
+
+        /**
          * Provides unique name
          */
         public static var radioCounter:int = 0;
@@ -94,7 +109,9 @@ package org.apache.flex.mdl
          * @flexjsignorecoercion Text
          */
         override protected function createElement():WrappedHTMLElement
-        { 
+        {
+            typeNames = "mdl-radio mdl-js-radio";
+
             icon = new RadioButtonIcon();
             icon.className = 'mdl-radio__button';
             icon.id = '_radio_' + RadioButton.radioCounter++;
@@ -121,14 +138,13 @@ package org.apache.flex.mdl
             (icon.element as WrappedHTMLElement).flexjs_wrapper = this;
             (radio as WrappedHTMLElement).flexjs_wrapper = this;
             
-            className = 'mdl-radio mdl-js-radio';
-            
             return element;
         };
         
         protected var _ripple:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-js-ripple-effect" effect selector.
+         *  Applies ripple click effect. May be used in combination with any other classes
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
index 126ea12..cb5dbaf 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
@@ -20,6 +20,7 @@ package org.apache.flex.mdl
 {
 	import org.apache.flex.core.IRangeModel;
 	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.Event;
 
     COMPILE::JS
     {
@@ -56,6 +57,8 @@ package org.apache.flex.mdl
 		public function Slider()
 		{
 			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
 			
 			IRangeModel(model).value = 0;
 			IRangeModel(model).minimum = 0;
@@ -191,12 +194,14 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+			typeNames = "mdl-slider mdl-js-slider";
+
 			var p:HTMLElement = document.createElement('p') as HTMLElement;
             p.style.width = '300px';
 
 			input = document.createElement('input') as HTMLInputElement;
 			input.type = "range";
-			input.className = 'mdl-slider mdl-js-slider';
+			input.className = typeNames;
 
 			input.value = IRangeModel(model).value.toString();
 			input.min = IRangeModel(model).minimum.toString();
@@ -222,6 +227,25 @@ package org.apache.flex.mdl
             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"));
+			}
+		}
+
         /**
          */
         COMPILE::JS

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/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 fac0607..3730cf5 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,6 +49,8 @@ package org.apache.flex.mdl
 		public function TextInput()
 		{
 			super();
+
+            className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
 		}
 		
         COMPILE::JS
@@ -76,12 +78,14 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+            typeNames = "mdl-textfield mdl-js-textfield";
+
             var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
-            div.className = "mdl-textfield mdl-js-textfield";
+            div.className = typeNames;
 
             var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
             input.setAttribute('type', 'text');
-            input.className = 'mdl-textfield__input';
+            input.className = "mdl-textfield__input";
             
             //attach input handler to dispatch flexjs change event when user write in textinput
             //goog.events.listen(element, 'change', killChangeHandler);
@@ -107,9 +111,29 @@ package org.apache.flex.mdl
             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
@@ -126,13 +150,14 @@ package org.apache.flex.mdl
 
             COMPILE::JS
             {
-                positioner.className += (_floatingLabel ? " mdl-textfield--floating-label" : "");
+                className += (_floatingLabel ? " mdl-textfield--floating-label" : "");
             }
         }
 
         protected var _ripple:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-js-ripple-effect" effect selector.
+         *  Applies ripple click effect. May be used in combination with any other classes
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
@@ -149,7 +174,7 @@ package org.apache.flex.mdl
 
             COMPILE::JS
             {
-                positioner.className += (_ripple ? " mdl-js-ripple-effect" : "");
+                className += (_ripple ? " mdl-js-ripple-effect" : "");
             }
         } 
 	}


[3/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - Fix classNames/TypeNames in Card component and subcomponents

Posted by ca...@apache.org.
Fix classNames/TypeNames in Card component and subcomponents


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/8abc939b
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8abc939b
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8abc939b

Branch: refs/heads/feature/mdl
Commit: 8abc939b07366dc0c1ee7f2d6afea4bdeb260290
Parents: ed6fdc9
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 10 20:48:25 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Sat Nov 12 10:06:54 2016 +0100

----------------------------------------------------------------------
 .../src/main/flex/org/apache/flex/mdl/Card.as            | 11 +++++++----
 .../src/main/flex/org/apache/flex/mdl/CardActions.as     |  7 ++++---
 .../src/main/flex/org/apache/flex/mdl/CardMedia.as       |  7 ++++---
 .../src/main/flex/org/apache/flex/mdl/CardMenu.as        |  7 ++++---
 .../main/flex/org/apache/flex/mdl/CardSupportingText.as  |  7 ++++---
 .../src/main/flex/org/apache/flex/mdl/CardTitle.as       |  5 +++--
 .../flex/org/apache/flex/mdl/supportClasses/CardInner.as |  4 ++--
 7 files changed, 28 insertions(+), 20 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8abc939b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as
index fbfde40..6d482b6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as
@@ -54,6 +54,8 @@ package org.apache.flex.mdl
 		public function Card()
 		{
 			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
 		}
 		
         /**
@@ -62,9 +64,12 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+			typeNames = "mdl-card";
+
             element = document.createElement('div') as WrappedHTMLElement;
+            element.className = typeNames;
             
-            positioner = element;
+			positioner = element;
             
             // absolute positioned children need a non-null
             // position value in the parent.  It might
@@ -72,8 +77,6 @@ package org.apache.flex.mdl
             // also absolutely positioned
             positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
-            
-            className = "mdl-card";
 
             return element;
         }
@@ -98,7 +101,7 @@ package org.apache.flex.mdl
 			{
 				_shadow = value;
 
-				className += _shadow != 0 ? " mdl-shadow--" + _shadow + "dp" : "";
+				className += (_shadow != 0 ? " mdl-shadow--" + _shadow + "dp" : "");
 			}  
         }
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8abc939b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as
index 01703b1..1db5c5f 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as
@@ -61,8 +61,11 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+			typeNames = "mdl-card__actions";
+
             element = document.createElement('div') as WrappedHTMLElement;
-            
+            element.className = typeNames;
+
             positioner = element;
             
             // absolute positioned children need a non-null
@@ -72,8 +75,6 @@ package org.apache.flex.mdl
             positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
             
-            className = "mdl-card__actions";
-
             return element;
         }    
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8abc939b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as
index 96489e6..83da9fa 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as
@@ -61,8 +61,11 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+			typeNames = "mdl-card__media";
+
             element = document.createElement('div') as WrappedHTMLElement;
-            
+            element.className = typeNames;
+
             positioner = element;
             
             // absolute positioned children need a non-null
@@ -72,8 +75,6 @@ package org.apache.flex.mdl
             positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
             
-            className = "mdl-card__media";
-
             return element;
         }    
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8abc939b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMenu.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMenu.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMenu.as
index e974492..eac8088 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMenu.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMenu.as
@@ -61,8 +61,11 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+			typeNames = "mdl-card__menu";
+
             element = document.createElement('div') as WrappedHTMLElement;
-            
+            element.className = typeNames;
+
             positioner = element;
             
             // absolute positioned children need a non-null
@@ -72,8 +75,6 @@ package org.apache.flex.mdl
             //positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
             
-            className = "mdl-card__menu";
-
             return element;
         }    
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8abc939b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as
index b39e64f..3660bef 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as
@@ -61,8 +61,11 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+			typeNames = "mdl-card__supporting-text";
+
             element = document.createElement('div') as WrappedHTMLElement;
-            
+            element.className = typeNames;
+
             positioner = element;
             
             // absolute positioned children need a non-null
@@ -72,8 +75,6 @@ package org.apache.flex.mdl
             positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
             
-            className = "mdl-card__supporting-text";
-
             return element;
         }    
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8abc939b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as
index 8e9339b..64bc3a8 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as
@@ -61,7 +61,10 @@ package org.apache.flex.mdl
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
+			typeNames = "mdl-card__title";
+
             element = document.createElement('div') as WrappedHTMLElement;
+			element.className = typeNames;
             
             positioner = element;
             
@@ -72,8 +75,6 @@ package org.apache.flex.mdl
             positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
             
-            className = "mdl-card__title";
-
             return element;
         }    
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8abc939b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as
index 6a57ae1..c254126 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as
@@ -54,6 +54,8 @@ package org.apache.flex.mdl.supportClasses
 		public function CardInner()
 		{
 			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
 		}
 		
         /**
@@ -72,8 +74,6 @@ package org.apache.flex.mdl.supportClasses
             // also absolutely positioned
             positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
-            
-            className = "mdl-card";
 
             return element;
         }


[5/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - More Card examples

Posted by ca...@apache.org.
More Card 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/8a2610f3
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8a2610f3
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8a2610f3

Branch: refs/heads/feature/mdl
Commit: 8a2610f3a69da98ef03c484dc94661acb7346f46
Parents: 47aded4
Author: Carlos Rovira <ca...@apache.org>
Authored: Fri Nov 11 14:07:42 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Sat Nov 12 10:06:54 2016 +0100

----------------------------------------------------------------------
 .../flexjs/MDLExample/src/main/flex/App.mxml    |  78 +++++++++++++------
 .../src/main/resources/assets/dog.png           | Bin 0 -> 9020 bytes
 .../src/main/resources/assets/image_card.jpg    | Bin 0 -> 117457 bytes
 .../src/main/resources/mdl-styles.css           |  12 ++-
 4 files changed, 66 insertions(+), 24 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/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 783281a..f68673a 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -82,10 +82,6 @@ limitations under the License.
                 <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/>
                 <mdl:RadioButton groupName="g1" text="Red"/>
 
-                <mdl:Slider className="mdlsl_example"/>
-
-                <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
-
                 <js:VContainer>
                     <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);">
                         <js:beads>
@@ -113,25 +109,61 @@ limitations under the License.
                     
                 </js:VContainer>
 
-                <mdl:Card width="512" shadow="2">
-                    <mdl:CardTitle className="cardTitle" style="color: #fff;">
-                        <js:H2 text="Welcome" className="mdl-card__title-text"/>
-                    </mdl:CardTitle>
-                    <mdl:CardSupportingText>
-                        <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/>
-                    </mdl:CardSupportingText>
-                    <mdl:CardActions border="true">
-                        <mdl:Button text="Get Started" ripple="true" colored="true"/>
-                    </mdl:CardActions>
-                    <mdl:CardMenu>
-                        <mdl:Button icon="true" ripple="true" style="color: #fff;">
-                            <i class="material-icons">share</i>
-                        </mdl:Button>
-                    </mdl:CardMenu>
-                </mdl:Card>
-
-
-                    <!--<mdl:CardMedia>
+                <js:HContainer>
+                    <mdl:Card width="512" shadow="2" style="margin:10;">
+                        <mdl:CardTitle className="cardTitle">
+                            <js:H2 text="Welcome" className="mdl-card__title-text"/>
+                        </mdl:CardTitle>
+                        <mdl:CardSupportingText>
+                            <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/>
+                        </mdl:CardSupportingText>
+                        <mdl:CardActions border="true">
+                            <mdl:Button text="Get Started" ripple="true" colored="true"/>
+                        </mdl:CardActions>
+                        <mdl:CardMenu>
+                            <mdl:Button icon="true" ripple="true" style="color: #fff;">
+                                <i class="material-icons">share</i>
+                            </mdl:Button>
+                        </mdl:CardMenu>
+                    </mdl:Card>
+
+                    <mdl:Slider className="mdlsl_example"/>
+                    <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
+
+                    <mdl:Card width="320" height="320" shadow="2" style="margin:10;">
+                        <mdl:CardTitle className="dogTitle" style="color: #fff;">
+                            <js:H2 text="Update" className="mdl-card__title-text"/>
+                        </mdl:CardTitle>
+                        <mdl:CardSupportingText>
+                            <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."/>
+                        </mdl:CardSupportingText>
+                        <mdl:CardActions border="true">
+                            <mdl:Button colored="true" ripple="true" text="View Updates"/>
+                        </mdl:CardActions>
+                    </mdl:Card>
+
+                    <mdl:Card width="256" height="256" shadow="2" style="margin:10;background: url('assets/image_card.jpg') center / cover">
+                        <mdl:CardTitle/>
+                        <mdl:CardActions style="height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);">
+                            <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/>
+                        </mdl:CardActions>
+                    </mdl:Card>
+                </js:HContainer>
+
+                
+                 <!--
+                <mdl:Spacer/>
+                <mdl:Button id="demo_menu" icon="true">
+                    <i class="material-icons">more_vert</i>
+                </mdl:Button>
+
+                <mdl:Menu ripple="true" dataMdlFor="demo_menu">
+                    <mdl:MenuItem text="Some Action"/>
+                    <mdl:MenuItem text="Another Action"/>
+                </mdl:Menu>
+
+                
+                   <mdl:CardMedia>
                         <js:Image url="assets/Unknown.jpg"  height="176"/>
                     </mdl:CardMedia>-->
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/assets/dog.png
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/assets/dog.png b/examples/flexjs/MDLExample/src/main/resources/assets/dog.png
new file mode 100644
index 0000000..1aace48
Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/assets/dog.png differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg b/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg
new file mode 100644
index 0000000..ef94dfd
Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
index d87e38c..5d5fae4 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -42,10 +42,20 @@ Image
 
 .cardTitle
 {
-	color: #fff;
+	color: #ffffff;
 	height: 176px;
 	background-image:url('assets/Unknown.jpg'); /*center / cover;*/
 	background-size: cover;
 	background-position: 50% 50%;
 	background-repeat: initial initial;
+}
+
+.dogTitle
+{
+	color: #fff;
+	height: 176px;
+	background-image: url('assets/dog.png'); /*bottom right 15% no-repeat #46B6AC*/
+	background-position: right 15% bottom 0%; 
+	background-repeat: no-repeat no-repeat;
+	background-color: rgb(70, 182, 172); 
 }
\ No newline at end of file


[2/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - get asdoc to run

Posted by ca...@apache.org.
get asdoc to run


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/4d6fa028
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/4d6fa028
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/4d6fa028

Branch: refs/heads/feature/mdl
Commit: 4d6fa028df7f0c04cfcdd3c795f194b0accee967
Parents: 09f2d91
Author: Alex Harui <ah...@apache.org>
Authored: Fri Nov 11 18:01:29 2016 -0800
Committer: Alex Harui <ah...@apache.org>
Committed: Fri Nov 11 18:01:29 2016 -0800

----------------------------------------------------------------------
 frameworks/asdoc-config.xml                        |  4 ++++
 .../src/main/flex/org/apache/flex/core/UIBase.as   |  3 ---
 .../apache/flex/html/beads/CSSTextButtonView.as    |  4 ----
 .../flex/mobile/beads/MobileWebBrowserView.as      | 17 +++++++++--------
 4 files changed, 13 insertions(+), 15 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4d6fa028/frameworks/asdoc-config.xml
----------------------------------------------------------------------
diff --git a/frameworks/asdoc-config.xml b/frameworks/asdoc-config.xml
index 3dd96e6..9446cdc 100644
--- a/frameworks/asdoc-config.xml
+++ b/frameworks/asdoc-config.xml
@@ -424,17 +424,21 @@
    
    <exclude-classes>
        <class>org.apache.flex.utils.Language</class>
+       <class>org.apache.flex.utils.URLUtils</class>
        <class>org.apache.flex.core.IFlexJSElement</class>
        <class>org.apache.flex.core.WrappedHTMLElement</class>
        <class>org.apache.flex.events.BrowserEvent</class>
+       <class>org.apache.flex.html.beads.CSSTextButtonView</class>
        <class>org.apache.flex.maps.google.beads.MapView_original</class>
     </exclude-classes>
    
    <exclude-sources>
        <path-element>${frameworks_dir}/projects/Language/src/main/flex/org/apache/flex/utils/Language.as</path-element>
+       <path-element>${frameworks_dir}/projects/Core/src/main/flex/org/apache/flex/utils/URLUtils.as</path-element>
        <path-element>${frameworks_dir}/projects/Core/src/main/flex/org/apache/flex/core/WrappedHTMLElement.as</path-element>
        <path-element>${frameworks_dir}/projects/Core/src/main/flex/org/apache/flex/events/BrowserEvent.as</path-element>
        <path-element>${frameworks_dir}/projects/Core/src/main/flex/org/apache/flex/core/IFlexJSElement.as</path-element>
+       <path-element>${frameworks_dir}/projects/HTML/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as</path-element>
        <path-element>${frameworks_dir}/projects/GoogleMaps/src/main/flex/org/apache/flex/maps/google/beads/MapView_original.as</path-element>
     </exclude-sources>
    

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4d6fa028/frameworks/projects/HTML/src/main/flex/org/apache/flex/core/UIBase.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/core/UIBase.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/core/UIBase.as
index 0b0dbb5..832c015 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/core/UIBase.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/core/UIBase.as
@@ -968,9 +968,6 @@ package org.apache.flex.core
          */
 		public var beads:Array;
 		
-        COMPILE::SWF
-		private var _beads:Vector.<IBead>;
-        
         /**
          *  @copy org.apache.flex.core.IStrand#addBead()
          *  

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4d6fa028/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as
index 0118a93..aa32eaa 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as
@@ -86,10 +86,6 @@ package org.apache.flex.html.beads
 			overSprite.addChild(overTextField);
 		}
 		
-		private function get host():IUIBase
-		{
-			return _strand as IUIBase;
-		}
 		private var textModel:ITextModel;
 		
 		private var shape:Shape;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4d6fa028/frameworks/projects/Mobile/src/main/flex/org/apache/flex/mobile/beads/MobileWebBrowserView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Mobile/src/main/flex/org/apache/flex/mobile/beads/MobileWebBrowserView.as b/frameworks/projects/Mobile/src/main/flex/org/apache/flex/mobile/beads/MobileWebBrowserView.as
index 5eb0ab7..4dfe7b6 100644
--- a/frameworks/projects/Mobile/src/main/flex/org/apache/flex/mobile/beads/MobileWebBrowserView.as
+++ b/frameworks/projects/Mobile/src/main/flex/org/apache/flex/mobile/beads/MobileWebBrowserView.as
@@ -27,6 +27,7 @@ package org.apache.flex.mobile.beads
 
 	import org.apache.flex.core.IBeadView;
 	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IStrandWithModel;
 	import org.apache.flex.core.IUIBase;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
@@ -73,9 +74,9 @@ package org.apache.flex.mobile.beads
 		/**
 		 * @private
 		 */
-		public function get host():UIBase
+		public function get host():IUIBase
 		{
-			return _strand as UIBase;
+			return _strand as IUIBase;
 		}
 
 		/**
@@ -93,13 +94,13 @@ package org.apache.flex.mobile.beads
 			host.addEventListener("widthChanged", handleSizeChange);
 			host.addEventListener("heightChanged", handleSizeChange);
 
-			var model:IEventDispatcher = host.model as IEventDispatcher;
+			var model:IEventDispatcher = (host as IStrandWithModel).model as IEventDispatcher;
 			model.addEventListener("urlChanged", loadPage);
 
-			stageWebView.stage = host.$sprite.stage;
+			stageWebView.stage = host.$displayObject.stage;
 			
 			var hostOrigin:Point = new Point(0,0);
-			var hostPosition:Point = host.$sprite.localToGlobal(hostOrigin);
+			var hostPosition:Point = host.$displayObject.localToGlobal(hostOrigin);
 			stageWebView.viewPort = new Rectangle( hostPosition.x, hostPosition.y, host.width, host.height );
 		}
 
@@ -108,7 +109,7 @@ package org.apache.flex.mobile.beads
 		 */
 		private function loadPage(event:org.apache.flex.events.Event):void
 		{
-			var model:WebBrowserModel = host.model as WebBrowserModel;
+			var model:WebBrowserModel = (host as IStrandWithModel).model as WebBrowserModel;
 			stageWebView.loadURL(model.url);
 		}
 
@@ -118,7 +119,7 @@ package org.apache.flex.mobile.beads
 		private function handleSizeChange(event:org.apache.flex.events.Event):void
 		{
 			var hostOrigin:Point = new Point(0,0);
-			var hostPosition:Point = host.$sprite.localToGlobal(hostOrigin);
+			var hostPosition:Point = host.$displayObject.localToGlobal(hostOrigin);
 			stageWebView.viewPort = new Rectangle( hostPosition.x, hostPosition.y, host.width, host.height );
 		}
 
@@ -127,7 +128,7 @@ package org.apache.flex.mobile.beads
 		 */
 		private function handleLocationChange(event:flash.events.Event):void
 		{
-			var model:WebBrowserModel = host.model as WebBrowserModel;
+			var model:WebBrowserModel = (host as IStrandWithModel).model as WebBrowserModel;
 			model.setURL(stageWebView.location);
 			host.dispatchEvent(new org.apache.flex.events.Event("locationChanged"));
 		}


[4/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - Tweak examples. Separate background css while comes the fix in falcon compiler to support more than one value per property

Posted by ca...@apache.org.
Tweak examples. Separate background css while comes the fix in falcon compiler to support more than one value per property


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/47aded4d
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/47aded4d
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/47aded4d

Branch: refs/heads/feature/mdl
Commit: 47aded4dbf7f307b1cb9222a6096bf0fb14eb722
Parents: 8abc939
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 10 20:53:10 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Sat Nov 12 10:06:54 2016 +0100

----------------------------------------------------------------------
 examples/flexjs/MDLExample/src/main/flex/App.mxml       | 12 ++++++------
 .../flexjs/MDLExample/src/main/resources/mdl-styles.css | 10 +++++++++-
 2 files changed, 15 insertions(+), 7 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/47aded4d/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 48e2ec7..783281a 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -36,7 +36,7 @@ limitations under the License.
 
                 <!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
                 <js:HContainer>
-                    <mdl:Button/>
+                    <mdl:Button className="mdlbtn"/>
 
                     <!-- Fab button -->
                     <mdl:Button fab="true" colored="true">
@@ -63,7 +63,7 @@ limitations under the License.
                 </js:HContainer>
 
                 <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
-                <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text">
+                <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example">
                     <js:beads>
                         <mdl:TextPrompt prompt="Normal Text Field..."/>
                     </js:beads>
@@ -75,14 +75,14 @@ limitations under the License.
                 </mdl:TextInput>
 
                 <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
-                <mdl:CheckBox id="mdlchk" text="Disabled at start" />
+                <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example"/>
                 <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/>
                 
-                <mdl:RadioButton groupName="g1" text="Black"/>
+                <mdl:RadioButton groupName="g1" text="Black" className="mdlrb_example"/>
                 <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/>
                 <mdl:RadioButton groupName="g1" text="Red"/>
 
-                <mdl:Slider/>
+                <mdl:Slider className="mdlsl_example"/>
 
                 <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
 
@@ -114,7 +114,7 @@ limitations under the License.
                 </js:VContainer>
 
                 <mdl:Card width="512" shadow="2">
-                    <mdl:CardTitle style="color: #fff;height: 176px; background:url('assets/Unknown.jpg') center / cover;">
+                    <mdl:CardTitle className="cardTitle" style="color: #fff;">
                         <js:H2 text="Welcome" className="mdl-card__title-text"/>
                     </mdl:CardTitle>
                     <mdl:CardSupportingText>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/47aded4d/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
index bd344c1..d87e38c 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -40,4 +40,12 @@ Image
 	IBeadView:  ClassReference("org.apache.flex.html.beads.ImageView");
 }
 
-
+.cardTitle
+{
+	color: #fff;
+	height: 176px;
+	background-image:url('assets/Unknown.jpg'); /*center / cover;*/
+	background-size: cover;
+	background-position: 50% 50%;
+	background-repeat: initial initial;
+}
\ No newline at end of file