flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From p...@apache.org
Subject [26/28] git commit: [flex-asjs] [refs/heads/feature/dragAndDrop] - Update MDL Example - MDL Grid should have at least one MDL GridCell
Date Mon, 21 Aug 2017 09:12:21 GMT
Update MDL Example - MDL Grid should have at least one MDL GridCell


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

Branch: refs/heads/feature/dragAndDrop
Commit: 65b7eb99497532dadd8bd91f9932e3904ef6987b
Parents: d526a4a
Author: piotrz <piotrz@apache.org>
Authored: Sun Aug 20 23:47:21 2017 +0200
Committer: piotrz <piotrz@apache.org>
Committed: Sun Aug 20 23:47:21 2017 +0200

----------------------------------------------------------------------
 .../flexjs/MDLExample/src/main/flex/Badges.mxml |  53 +++---
 .../MDLExample/src/main/flex/Buttons.mxml       | 176 ++++++++++---------
 .../flexjs/MDLExample/src/main/flex/Chips.mxml  |  19 +-
 .../MDLExample/src/main/flex/Dialogs.mxml       |  14 +-
 .../MDLExample/src/main/flex/DropDownList.mxml  |   5 +-
 .../MDLExample/src/main/flex/Footers.mxml       |  10 +-
 .../flexjs/MDLExample/src/main/flex/Grids.mxml  |   5 -
 .../flexjs/MDLExample/src/main/flex/Icons.mxml  |  58 +++---
 .../flexjs/MDLExample/src/main/flex/Lists.mxml  | 171 +++++++-----------
 .../flexjs/MDLExample/src/main/flex/Menus.mxml  |  37 ++--
 .../MDLExample/src/main/flex/Sliders.mxml       |  11 +-
 .../MDLExample/src/main/flex/Snackbar.mxml      |  13 +-
 .../flexjs/MDLExample/src/main/flex/Tables.mxml | 123 ++++++-------
 .../flexjs/MDLExample/src/main/flex/Tabs.mxml   |   4 +-
 .../MDLExample/src/main/flex/TextFields.mxml    | 116 ++++++------
 .../MDLExample/src/main/flex/Toggles.mxml       |  90 +++++-----
 16 files changed, 443 insertions(+), 462 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Badges.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Badges.mxml b/examples/flexjs/MDLExample/src/main/flex/Badges.mxml
index 11ee536..581f41b 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Badges.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Badges.mxml
@@ -32,30 +32,35 @@ limitations under the License.
         <js:ContainerDataBinding/>
     </mdl:beads>
 
-    <mdl:Grid width="50" style="margin:20px">
-        <js:Div style="color: rgba(0, 0, 0, 0.24);" className="material-icons" text="{MaterialIconType.ACCOUNT_BOX}">
-            <js:beads>
-                <mdl:Badge dataBadge="2" overlap="true"/>
-            </js:beads>
-        </js:Div>
-
-        <js:Span text="Inbox" style="color: rgba(0, 0, 0, 0.24);" className="mdl-badge">
-            <js:beads>
-                <mdl:Badge dataBadge="4"/>
-            </js:beads>
-        </js:Span>
-
-        <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org">
-            <js:beads>
-                <mdl:Badge dataBadge="1"/>
-            </js:beads>
-        </js:A>
-
-        <js:A text="Badge No Background" href="http://flex.apache.org">
-            <js:beads>
-                <mdl:Badge dataBadge="5" noBackground="true"/>
-            </js:beads>
-        </js:A>
+    <mdl:Grid>
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="500"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
+            <js:Div style="color: rgba(0, 0, 0, 0.24);" className="material-icons" text="{MaterialIconType.ACCOUNT_BOX}">
+                <js:beads>
+                    <mdl:Badge dataBadge="2" overlap="true"/>
+                </js:beads>
+            </js:Div>
+
+            <js:Span text="Inbox" style="color: rgba(0, 0, 0, 0.24);" className="mdl-badge">
+                <js:beads>
+                    <mdl:Badge dataBadge="4"/>
+                </js:beads>
+            </js:Span>
+
+            <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org">
+                <js:beads>
+                    <mdl:Badge dataBadge="1"/>
+                </js:beads>
+            </js:A>
+
+            <js:A text="Badge No Background" href="http://flex.apache.org">
+                <js:beads>
+                    <mdl:Badge dataBadge="5" noBackground="true"/>
+                </js:beads>
+            </js:A>
+        </mdl:GridCell>
     </mdl:Grid>
 
 </mdl:TabBarPanel>             
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml b/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml
index 1f99688..9131d53 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml
@@ -33,92 +33,96 @@ limitations under the License.
     </mdl:beads>
 
     <!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
-    <mdl:Grid width="100">
-        
-        <mdl:Button className="mdlbtn"/>
-        
-        <!-- Fab button -->
-        <mdl:Button id="mybtn" fab="true" colored="true">
-            <mdl:beads>
-                <mdl:Tooltip text="A simple tooltip"/>
-            </mdl:beads>
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.ADD}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
-
-        <mdl:Button fab="true" colored="true">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_DOWN}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
-        
-        <!-- Fab with Ripple -->
-        <mdl:Button fab="true" ripple="true">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.FACE}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
-        
-        <!-- Raised button -->
-        <mdl:Button text="COLORED" raised="true" colored="true"/>
-        
-        <!-- Raised button with ripple -->
-        <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/>
-        
-        <!-- Raised disabled button-->
-        <mdl:Button text="DISABLED" raised="true">
-            <mdl:beads>
-                <mdl:Disabled/>
-            </mdl:beads>
-        </mdl:Button>
-
-        <!-- Flat button -->
-        <mdl:Button text="Flat"/>
-
-        <!-- Flat button with ripple -->
-        <mdl:Button text="Ripple" ripple="true"/>
-
-        <!-- Disabled flat button -->
-        <mdl:Button text="Disabled">
-            <mdl:beads>
-                <mdl:Disabled/>
-            </mdl:beads>
-        </mdl:Button>
-
-        <!-- Primary-colored flat button -->
-        <mdl:Button text="primary" primary="true"/>
-
-        <!-- Accent-colored flat button -->
-        <mdl:Button text="accent" accent="true"/>
-
-        <!-- Icon button -->
-        <mdl:Button icon="true">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
-
-        <!-- Colored icon button -->
-        <mdl:Button icon="true" colored="true">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
-
-        <!-- Mini FAB button -->
-        <mdl:Button fab="true" minifab="true">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.ADD}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
-
-        <!-- Colored mini FAB button -->
-        <mdl:Button fab="true" minifab="true" colored="true">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.ADD}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
+    <mdl:Grid>
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="150"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
+            <mdl:Button className="mdlbtn"/>
+
+            <!-- Fab button -->
+            <mdl:Button id="mybtn" fab="true" colored="true">
+                <mdl:beads>
+                    <mdl:Tooltip text="A simple tooltip"/>
+                </mdl:beads>
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.ADD}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+
+            <mdl:Button fab="true" colored="true">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_DOWN}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+
+            <!-- Fab with Ripple -->
+            <mdl:Button fab="true" ripple="true">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.FACE}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+
+            <!-- Raised button -->
+            <mdl:Button text="COLORED" raised="true" colored="true"/>
+
+            <!-- Raised button with ripple -->
+            <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/>
+
+            <!-- Raised disabled button-->
+            <mdl:Button text="DISABLED" raised="true">
+                <mdl:beads>
+                    <mdl:Disabled/>
+                </mdl:beads>
+            </mdl:Button>
+
+            <!-- Flat button -->
+            <mdl:Button text="Flat"/>
+
+            <!-- Flat button with ripple -->
+            <mdl:Button text="Ripple" ripple="true"/>
+
+            <!-- Disabled flat button -->
+            <mdl:Button text="Disabled">
+                <mdl:beads>
+                    <mdl:Disabled/>
+                </mdl:beads>
+            </mdl:Button>
+
+            <!-- Primary-colored flat button -->
+            <mdl:Button text="primary" primary="true"/>
+
+            <!-- Accent-colored flat button -->
+            <mdl:Button text="accent" accent="true"/>
+
+            <!-- Icon button -->
+            <mdl:Button icon="true">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+
+            <!-- Colored icon button -->
+            <mdl:Button icon="true" colored="true">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+
+            <!-- Mini FAB button -->
+            <mdl:Button fab="true" minifab="true">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.ADD}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+
+            <!-- Colored mini FAB button -->
+            <mdl:Button fab="true" minifab="true" colored="true">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.ADD}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+        </mdl:GridCell>
     </mdl:Grid>
 
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Chips.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml
index 287a235..bc1f5d0 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml
@@ -31,12 +31,15 @@ limitations under the License.
         <js:ContainerDataBinding/>
     </mdl:beads>
     
-    <mdl:Grid width="120">
-        
+    <mdl:Grid>
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="120"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
             <mdl:Chip text="Basic Chip" />
-        
+
             <mdl:ButtonChip text="Button Chip" />
-            
+
             <mdl:Chip text="Deletable Chip">
                 <mdl:beads>
                     <mdl:DeletableChip />
@@ -45,7 +48,7 @@ limitations under the License.
                     <mdl:MaterialIcon text="{MaterialIconType.CANCEL}"/>
                 </mdl:materialIcon>
             </mdl:Chip>
-        
+
             <mdl:ButtonChip text="Deletable Button Chip">
                 <mdl:beads>
                     <mdl:DeletableChip />
@@ -54,7 +57,7 @@ limitations under the License.
                     <mdl:MaterialIcon text="{MaterialIconType.CANCEL}"/>
                 </mdl:materialIcon>
             </mdl:ButtonChip>
-        
+
             <mdl:Chip text="Contact Chip">
                 <mdl:beads>
                     <mdl:MdlColor color="teal" />
@@ -62,7 +65,7 @@ limitations under the License.
                     <mdl:ContactChip contactText="A" />
                 </mdl:beads>
             </mdl:Chip>
-        
+
             <mdl:Chip text="Contact Chip">
                 <mdl:beads>
                     <mdl:MdlColor color="teal" />
@@ -84,6 +87,6 @@ limitations under the License.
                     <mdl:MaterialIcon text="{MaterialIconType.CANCEL}"/>
                 </mdl:materialIcon>
             </mdl:Chip>
-        
+        </mdl:GridCell>
     </mdl:Grid>
 </mdl:TabBarPanel>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml b/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
index d739141..a97a8ac 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
@@ -18,8 +18,8 @@ limitations under the License.
 
 -->
 <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"
-                 xmlns:js="library://ns.apache.org/flexjs/basic"
-                 xmlns:mdl="library://ns.apache.org/flexjs/mdl">
+                 xmlns:mdl="library://ns.apache.org/flexjs/mdl"
+                 xmlns:js="library://ns.apache.org/flexjs/basic">
 
     <fx:Script>
         <![CDATA[
@@ -37,9 +37,11 @@ limitations under the License.
     </fx:Script>
 
     <mdl:Grid>
-        
-        <mdl:Button text="Show Modal Dialog" raised="true" click="showModalDialog()"/>
-
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="150"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
+            <mdl:Button text="Show Modal Dialog" raised="true" click="showModalDialog()"/>
+        </mdl:GridCell>
     </mdl:Grid>
-
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml b/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml
index 8dcf568..9905520 100644
--- a/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml
@@ -20,9 +20,8 @@ limitations under the License.
 <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:js="library://ns.apache.org/flexjs/basic"
                  xmlns:mdl="library://ns.apache.org/flexjs/mdl"
-                 xmlns="http://www.w3.org/1999/xhtml" xmlns:models="models.*"
-                 xmlns:models2="org.apache.flex.html.beads.models.*">
-
+                 xmlns="http://www.w3.org/1999/xhtml"
+                 xmlns:models="models.*">
     <mdl:beads>
         <js:ContainerDataBinding />
     </mdl:beads>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Footers.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Footers.mxml b/examples/flexjs/MDLExample/src/main/flex/Footers.mxml
index 166b3ee..e5c3a54 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Footers.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Footers.mxml
@@ -28,7 +28,8 @@ limitations under the License.
     </mdl:model>
     
     <mdl:Grid>
-        <mdl:Footer mini="true" width="500">
+        <mdl:GridCell column="6">
+            <mdl:Footer mini="true">
 
             <mdl:FooterLeftSection>
                 <mdl:FooterLogo text="Mini-Footer"/>
@@ -48,8 +49,9 @@ limitations under the License.
                 <mdl:FooterSocialButton>3</mdl:FooterSocialButton>
             </mdl:FooterRightSection>
         </mdl:Footer>
-
-        <mdl:Footer width="600">
+        </mdl:GridCell>
+        <mdl:GridCell column="6">
+            <mdl:Footer>
             
             <mdl:FooterTopSection>
                  
@@ -116,7 +118,7 @@ limitations under the License.
             </mdl:FooterBottomSection>
 
         </mdl:Footer>
-
+        </mdl:GridCell>
     </mdl:Grid>
 
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Grids.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Grids.mxml b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml
index 226b994..a67a428 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Grids.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml
@@ -21,11 +21,8 @@ limitations under the License.
                  xmlns:js="library://ns.apache.org/flexjs/basic"
                  xmlns:mdl="library://ns.apache.org/flexjs/mdl"
                  xmlns="http://www.w3.org/1999/xhtml">
-
     <js:Div className="demo-grid">
-
         <mdl:Grid>
-            
             <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell>
             <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell>
             <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell>
@@ -50,8 +47,6 @@ limitations under the License.
             <mdl:GridCell column="6" columnTablet="8"><mdl:beads><js:InnerHTML text="6 (8 Tablet)"/></mdl:beads></mdl:GridCell>
             <mdl:GridCell column="4" columnTablet="6"><mdl:beads><js:InnerHTML text="4 (6 Tablet)"/></mdl:beads></mdl:GridCell>
             <mdl:GridCell column="2" columnPhone="4"><mdl:beads><js:InnerHTML text="2 (4 Phone)"/></mdl:beads></mdl:GridCell>
-
         </mdl:Grid>
-        
     </js:Div>
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Icons.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Icons.mxml b/examples/flexjs/MDLExample/src/main/flex/Icons.mxml
index bc67529..b149537 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Icons.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Icons.mxml
@@ -32,33 +32,39 @@ limitations under the License.
     </mdl:beads>
 
     <mdl:Grid>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="18"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="24"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="36"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="48"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" dark="true"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}">
-            <mdl:beads>
-                <mdl:MdlTextColor textColor="teal" />
-            </mdl:beads>
-        </mdl:MaterialIcon>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/>
-        <mdl:MaterialIcon text="{MaterialIconType.BOOK}"/>
-        <mdl:MaterialIcon text="{MaterialIconType.FACE}"/>
-        
+        <mdl:GridCell column="12">
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="18"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="24"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="36"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="48"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" dark="true"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}">
+                <mdl:beads>
+                    <mdl:MdlTextColor textColor="teal" />
+                </mdl:beads>
+            </mdl:MaterialIcon>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/>
+            <mdl:MaterialIcon text="{MaterialIconType.BOOK}"/>
+            <mdl:MaterialIcon text="{MaterialIconType.FACE}"/>
+        </mdl:GridCell>
     </mdl:Grid>
 
-    <mdl:Grid style="backgroundColor:'#000';">
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" light="true"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ACCESSIBILITY}" size="48" light="true"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true" light="true"/>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}">
-            <mdl:beads>
-                <mdl:MdlTextColor textColor="teal" />
-            </mdl:beads>
-        </mdl:MaterialIcon>
-        <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/>
-        <mdl:MaterialIcon text="{MaterialIconType.BOOK}" light="true"/>
+    <mdl:Grid>
+        <mdl:style>
+            <js:SimpleCSSStyles backgroundColor="#000"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" light="true"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ACCESSIBILITY}" size="48" light="true"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true" light="true"/>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}">
+                <mdl:beads>
+                    <mdl:MdlTextColor textColor="teal" />
+                </mdl:beads>
+            </mdl:MaterialIcon>
+            <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/>
+            <mdl:MaterialIcon text="{MaterialIconType.BOOK}" light="true"/>
+        </mdl:GridCell>
     </mdl:Grid>
 </mdl:TabBarPanel>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
index c4b44a5..efb416e 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
@@ -28,116 +28,65 @@ limitations under the License.
 	</mdl:model>
 
     <mdl:Grid>
-        <mdl:List>
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="things"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:List>
-
-        <mdl:List labelField="actorName" className="actorNameListItemRenderer">
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="actors"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:List>
-
-        <mdl:List labelField="actorName" className="actorNameAndIconListItemRenderer">
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="actors"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:List>
-
-        <mdl:List labelField="actorName" className="avatarAndActionListItemRenderer">
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="actors"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:List>
-
-        <mdl:List labelField="actorName" className="avatarAndActionTwoLineListItemRenderer">
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="actors"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:List>
-
-        <mdl:List labelField="actorName" className="avatarAndActionThreeLineListItemRenderer">
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="actors"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:List>
-
-
+        <mdl:GridCell>
+            <mdl:List>
+                <mdl:beads>
+                    <js:ConstantBinding
+                        sourceID="model"
+                        sourcePropertyName="things"
+                        destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:List>
+        </mdl:GridCell>
+        <mdl:GridCell>
+            <mdl:List labelField="actorName" className="actorNameListItemRenderer">
+                <mdl:beads>
+                    <js:ConstantBinding
+                        sourceID="model"
+                        sourcePropertyName="actors"
+                        destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:List>
+        </mdl:GridCell>
+        <mdl:GridCell>
+            <mdl:List labelField="actorName" className="actorNameAndIconListItemRenderer">
+                <mdl:beads>
+                    <js:ConstantBinding
+                        sourceID="model"
+                        sourcePropertyName="actors"
+                        destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:List>
+        </mdl:GridCell>
+        <mdl:GridCell>
+            <mdl:List labelField="actorName" className="avatarAndActionListItemRenderer">
+                <mdl:beads>
+                    <js:ConstantBinding
+                        sourceID="model"
+                        sourcePropertyName="actors"
+                        destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:List>
+        </mdl:GridCell>
+        <mdl:GridCell>
+            <mdl:List labelField="actorName" className="avatarAndActionTwoLineListItemRenderer">
+                <mdl:beads>
+                    <js:ConstantBinding
+                        sourceID="model"
+                        sourcePropertyName="actors"
+                        destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:List>
+        </mdl:GridCell>
+        <mdl:GridCell column="12">
+            <mdl:List labelField="actorName" className="avatarAndActionThreeLineListItemRenderer">
+                <mdl:beads>
+                    <js:ConstantBinding
+                        sourceID="model"
+                        sourcePropertyName="actors"
+                        destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:List>
+        </mdl:GridCell>
     </mdl:Grid>
-
-    <!--
-    <mdl:List labelField="label" className="customListItemRenderer">
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="productNames"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:List>
-    
-    
-    xmlns:ui="org.apache.flex.core.*"
-                 xmlns:models="org.apache.flex.html.beads.models.*"
-                 xmlns:beads="org.apache.flex.html.beads.*"
-                 xmlns:controllers="org.apache.flex.html.beads.controllers.*"
-                 xmlns:layout="org.apache.flex.html.beads.layouts.*"
-                 xmlns:support="org.apache.flex.html.supportClasses.*"
-                 <ui:ListBase>
-        <ui:beads>
-            <models:ArraySelectionModel labelField="label">
-                <js:dataProvider>
-                    <fx:Array>
-                        <fx:Object label="Install SIM Card"/>
-                        <fx:Object label="Install SIM Card 1"/>
-                        <fx:Object label="Install SIM Card 2"/>
-                    </fx:Array>
-                </js:dataProvider>
-            </models:ArraySelectionModel>
-            
-            <models:ViewportModel/>
-            
-            <support:DataGroup/>
-            
-            <support:ScrollingViewport/>
-            
-            <beads:ListView/>
-            
-            <controllers:ListSingleSelectionMouseController/>
-            <layout:VerticalLayout/>
-            <ui:ItemRendererClassFactory>
-                <ui:itemRendererFactory>
-                    <fx:Component>
-                        <support:StringItemRenderer>
-                            <support:beads>
-                                <controllers:ItemRendererMouseController />
-                            </support:beads>
-                        </support:StringItemRenderer>
-                    </fx:Component>
-                </ui:itemRendererFactory>
-            </ui:ItemRendererClassFactory>
-            <beads:TextItemRendererFactoryForArrayData/>
-        </ui:beads>
-    </ui:ListBase>-->
-
-    
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Menus.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Menus.mxml b/examples/flexjs/MDLExample/src/main/flex/Menus.mxml
index b6e4ee7..226ff1d 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Menus.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Menus.mxml
@@ -42,21 +42,26 @@ limitations under the License.
         <models:MenuModel id="menuModel"/>
     </mdl:model>
 
-    <mdl:Grid width="100">
-        <mdl:Button id="menu_btn" icon="true">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.MORE_VERT}"/>
-            </mdl:materialIcon>
-        </mdl:Button>
-
-        <mdl:Menu id="myMenu" dataMdlFor="menu_btn" ripple="true" bottom="true" left="false" change="onMyMenuChange(event)"
-                  labelField="label" className="customMenuItemRenderer">
-            <mdl:beads>
-                <js:ConstantBinding
-                        sourceID="menuModel"
-                        sourcePropertyName="menuItems"
-                        destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:Menu>
+    <mdl:Grid>
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="100"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
+            <mdl:Button id="menu_btn" icon="true">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.MORE_VERT}"/>
+                </mdl:materialIcon>
+            </mdl:Button>
+
+            <mdl:Menu id="myMenu" dataMdlFor="menu_btn" ripple="true" bottom="true" left="false" change="onMyMenuChange(event)"
+                      labelField="label" className="customMenuItemRenderer">
+                <mdl:beads>
+                    <js:ConstantBinding
+                            sourceID="menuModel"
+                            sourcePropertyName="menuItems"
+                            destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:Menu>
+        </mdl:GridCell>
     </mdl:Grid>
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml b/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml
index 0b3831e..1373485 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml
@@ -18,14 +18,12 @@ limitations under the License.
 
 -->
 <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"
-                 xmlns:js="library://ns.apache.org/flexjs/basic"
                  xmlns:mdl="library://ns.apache.org/flexjs/mdl"
+                 xmlns:js="library://ns.apache.org/flexjs/basic"
                  initComplete="initTextBoxes(event)">
 
     <fx:Script>
         <![CDATA[
-            import org.apache.flex.events.Event;
-
             private function initTextBoxes(event:Event):void
             {
                 slider1_txt.text = "Slider 1 Value: " + slider1.value;
@@ -46,7 +44,10 @@ limitations under the License.
     </fx:Script>
 
     <mdl:Grid>
-        
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="300"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
             <mdl:Card className="demo-card-slider" shadow="2">
                 <mdl:CardTitle>
                     <mdl:CardTitleText id="slider1_txt"/>
@@ -77,7 +78,7 @@ limitations under the License.
                     </mdl:Slider>
                 </mdl:CardSupportingText>
             </mdl:Card>
-        
+        </mdl:GridCell>
     </mdl:Grid>
     
 </mdl:TabBarPanel>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml b/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml
index 6589d9a..f843253 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml
@@ -18,14 +18,18 @@ limitations under the License.
 
 -->
 <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"
-                 xmlns:mdl="library://ns.apache.org/flexjs/mdl">
+                 xmlns:mdl="library://ns.apache.org/flexjs/mdl"
+                 xmlns:js="library://ns.apache.org/flexjs/basic">
     <mdl:Grid>
-        <mdl:GridCell column="1" width="200">
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="500"/>
+        </mdl:style>
+        <mdl:GridCell column="6">
             <mdl:Button id="showToast" click="onShowToastClick(event)"
                         text="Show Toast!" width="180" accent="true" colored="true" raised="true"/>
             <mdl:Toast id="toast" message="Toast message" timeout="3000"/>
         </mdl:GridCell>
-        <mdl:GridCell column="2" width="200">
+        <mdl:GridCell column="6">
             <mdl:Button id="showSnackbar" click="onShowSnackbarClick(event)"
                         text="Show Snackbar!" width="180" accent="true" colored="true" raised="true"/>
             <mdl:Snackbar id="snackbar" message="Snackbar message" actionText="Undo" timeout="3000"
@@ -33,9 +37,6 @@ limitations under the License.
         </mdl:GridCell>
     </mdl:Grid>
     <fx:Script><![CDATA[
-        import org.apache.flex.events.Event;
-        import org.apache.flex.events.MouseEvent;
-
         private function onShowToastClick(event:MouseEvent):void
         {
             toast.show();

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Tables.mxml b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
index 1f29d9a..e6bb690 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
@@ -27,36 +27,12 @@ limitations under the License.
         <models:TablesModel/>
 	</mdl:model>
 
-    <mdl:Grid width="450" className="center-items">
-
-       <mdl:Table shadow="2" selectable="true" className="customTableRowItemRenderer">
-            <mdl:columns>
-                <mdl:TableColumn headerText="Material"/>
-                <mdl:TableColumn headerText="Quantity">
-                    <mdl:beads>
-                        <mdl:TableNumericColumnEnable />
-                    </mdl:beads>
-                </mdl:TableColumn>
-                <mdl:TableColumn headerText="Unit price">
-                    <mdl:beads>
-                        <mdl:TableNumericColumnEnable />
-                    </mdl:beads>
-                </mdl:TableColumn>
-            </mdl:columns>
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="materials"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:Table>
-
-        <mdl:Card shadow="2" width="450">
-            <mdl:CardTitle expand="true">
-                <mdl:CardTitleText text="Card Header"/>
-            </mdl:CardTitle>
-
-            <mdl:Table className="customTableRowItemRenderer" width="100%">
+    <mdl:Grid className="center-items">
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="450"/>
+        </mdl:style>
+       <mdl:GridCell column="12">
+           <mdl:Table shadow="2" selectable="true" className="customTableRowItemRenderer">
                 <mdl:columns>
                     <mdl:TableColumn headerText="Material"/>
                     <mdl:TableColumn headerText="Quantity">
@@ -77,41 +53,68 @@ limitations under the License.
                         destinationPropertyName="dataProvider" />
                 </mdl:beads>
             </mdl:Table>
-            
-            <mdl:CardActions style="display:flex; ">
-                <mdl:Spacer/>
-                <mdl:Button text="Get Started" ripple="true" colored="true"/>
-            </mdl:CardActions>
-        </mdl:Card>
 
-        <mdl:Table shadow="8" className="tableRowItemRendererWithIcons">
-            <mdl:columns>
-                <mdl:TableColumn headerText="Material"/>
-                <mdl:TableColumn headerText="Quantity">
-                    <mdl:beads>
-                        <mdl:TableNumericColumnEnable />
-                    </mdl:beads>
-                </mdl:TableColumn>
-                <mdl:TableColumn headerText="Unit price">
-                    <mdl:beads>
-                        <mdl:TableNumericColumnEnable />
-                    </mdl:beads>
-                </mdl:TableColumn>
-                <mdl:TableColumn headerText="Mood">
+            <mdl:Card shadow="2" width="450">
+                <mdl:CardTitle expand="true">
+                    <mdl:CardTitleText text="Card Header"/>
+                </mdl:CardTitle>
+
+                <mdl:Table className="customTableRowItemRenderer" width="100%">
+                    <mdl:columns>
+                        <mdl:TableColumn headerText="Material"/>
+                        <mdl:TableColumn headerText="Quantity">
+                            <mdl:beads>
+                                <mdl:TableNumericColumnEnable />
+                            </mdl:beads>
+                        </mdl:TableColumn>
+                        <mdl:TableColumn headerText="Unit price">
+                            <mdl:beads>
+                                <mdl:TableNumericColumnEnable />
+                            </mdl:beads>
+                        </mdl:TableColumn>
+                    </mdl:columns>
                     <mdl:beads>
-                        <mdl:TableNumericColumnEnable />
+                        <js:ConstantBinding
+                            sourceID="model"
+                            sourcePropertyName="materials"
+                            destinationPropertyName="dataProvider" />
                     </mdl:beads>
-                </mdl:TableColumn>
-            </mdl:columns>
+                </mdl:Table>
 
-            <mdl:beads>
-                <js:ConstantBinding
-                    sourceID="model"
-                    sourcePropertyName="materials"
-                    destinationPropertyName="dataProvider" />
-            </mdl:beads>
-        </mdl:Table>
+                <mdl:CardActions style="display:flex; ">
+                    <mdl:Spacer/>
+                    <mdl:Button text="Get Started" ripple="true" colored="true"/>
+                </mdl:CardActions>
+            </mdl:Card>
 
+            <mdl:Table shadow="8" className="tableRowItemRendererWithIcons">
+                <mdl:columns>
+                    <mdl:TableColumn headerText="Material"/>
+                    <mdl:TableColumn headerText="Quantity">
+                        <mdl:beads>
+                            <mdl:TableNumericColumnEnable />
+                        </mdl:beads>
+                    </mdl:TableColumn>
+                    <mdl:TableColumn headerText="Unit price">
+                        <mdl:beads>
+                            <mdl:TableNumericColumnEnable />
+                        </mdl:beads>
+                    </mdl:TableColumn>
+                    <mdl:TableColumn headerText="Mood">
+                        <mdl:beads>
+                            <mdl:TableNumericColumnEnable />
+                        </mdl:beads>
+                    </mdl:TableColumn>
+                </mdl:columns>
+
+                <mdl:beads>
+                    <js:ConstantBinding
+                        sourceID="model"
+                        sourcePropertyName="materials"
+                        destinationPropertyName="dataProvider" />
+                </mdl:beads>
+            </mdl:Table>
+       </mdl:GridCell>
     </mdl:Grid>
     
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml
index abcb43d..5a2b87f 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml
@@ -28,7 +28,7 @@ limitations under the License.
     </mdl:model>
 
     <mdl:Grid>
-        <mdl:GridCell column="1" percentWidth="100">
+        <mdl:GridCell column="12">
             <mdl:Tabs width="400" selectedIndex="1" tabIdField="tabId" labelField="label" className="customTabBarPanelItemRenderer">
                 <mdl:beads>
                     <js:ConstantBinding
@@ -38,7 +38,7 @@ limitations under the License.
                 </mdl:beads>
             </mdl:Tabs>
         </mdl:GridCell>
-       <mdl:GridCell column="1" percentWidth="100">
+       <mdl:GridCell column="12">
             <mdl:NavigationLayout width="600">
                 <mdl:Header>
                     <mdl:TabBar selectedIndex="0" tabIdField="tabId" labelField="label" className="customTabBarSetup">

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
index 8c50fc2..bbb99ba 100644
--- a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
@@ -22,71 +22,75 @@ limitations under the License.
                  xmlns:mdl="library://ns.apache.org/flexjs/mdl"
                  xmlns="http://www.w3.org/1999/xhtml">
     
-    <mdl:Grid width="300">
-    
-        <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
-        <js:Form action="#">
+    <mdl:Grid>
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="300"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
+            <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
+            <js:Form action="#">
 
-            <mdl:TextField id="mdlti" change="mdlfloatingti.text = mdlti.text" width="100%">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Normal Text Field..."/>
-                    <mdl:Tooltip text="A simple tooltip in a TextField"/>
-                </mdl:beads>
-            </mdl:TextField>
+                <mdl:TextField id="mdlti" change="mdlfloatingti.text = mdlti.text" width="100%">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Normal Text Field..."/>
+                        <mdl:Tooltip text="A simple tooltip in a TextField"/>
+                    </mdl:beads>
+                </mdl:TextField>
 
-            <mdl:TextField width="100%">
-                <mdl:beads>
-                    <mdl:Disabled/>
-                    <mdl:TextPrompt prompt="Disabled..."/>
-                </mdl:beads>
-            </mdl:TextField>
+                <mdl:TextField width="100%">
+                    <mdl:beads>
+                        <mdl:Disabled/>
+                        <mdl:TextPrompt prompt="Disabled..."/>
+                    </mdl:beads>
+                </mdl:TextField>
 
-            <mdl:TextField id="mdlfloatingti" floatingLabel= "true" width="100%">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Floating Label"/>
-                </mdl:beads>
-            </mdl:TextField>
+                <mdl:TextField id="mdlfloatingti" floatingLabel= "true" width="100%">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Floating Label"/>
+                    </mdl:beads>
+                </mdl:TextField>
 
-            <mdl:TextField width="100%">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Letters and spaces..."/>
-                    <mdl:Restrict pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/>
-                </mdl:beads>
-            </mdl:TextField>
+                <mdl:TextField width="100%">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Letters and spaces..."/>
+                        <mdl:Restrict pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/>
+                    </mdl:beads>
+                </mdl:TextField>
 
-            <mdl:TextField floatingLabel="true" width="100%">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Numbers..."/>
-                    <mdl:Restrict pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/>
-                </mdl:beads>
-            </mdl:TextField>
+                <mdl:TextField floatingLabel="true" width="100%">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Numbers..."/>
+                        <mdl:Restrict pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/>
+                    </mdl:beads>
+                </mdl:TextField>
 
-            <mdl:TextField width="100%">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Expandible..."/>
-                    <mdl:ExpandableSearch/>
-                </mdl:beads>
-            </mdl:TextField>
+                <mdl:TextField width="100%">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Expandible..."/>
+                        <mdl:ExpandableSearch/>
+                    </mdl:beads>
+                </mdl:TextField>
 
-            <mdl:TextField floatingLabel="true" width="100%">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Floating and Expandible..."/>
-                    <mdl:ExpandableSearch/>
-                </mdl:beads>
-            </mdl:TextField>
+                <mdl:TextField floatingLabel="true" width="100%">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Floating and Expandible..."/>
+                        <mdl:ExpandableSearch/>
+                    </mdl:beads>
+                </mdl:TextField>
 
-            <mdl:TextArea width="100%">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Text lines..."/>
-                </mdl:beads>
-            </mdl:TextArea>
+                <mdl:TextArea width="100%">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Text lines..."/>
+                    </mdl:beads>
+                </mdl:TextArea>
 
-            <mdl:TextArea floatingLabel="true" width="100%" rows="5" maxrows="8" isInvalid="true">
-                <mdl:beads>
-                    <mdl:TextPrompt prompt="Floating, maxrows 8, invalid on load"/>
-                </mdl:beads>
-            </mdl:TextArea>
-        </js:Form>
+                <mdl:TextArea floatingLabel="true" width="100%" rows="5" maxrows="8" isInvalid="true">
+                    <mdl:beads>
+                        <mdl:TextPrompt prompt="Floating, maxrows 8, invalid on load"/>
+                    </mdl:beads>
+                </mdl:TextArea>
+            </js:Form>
+        </mdl:GridCell>
     </mdl:Grid>
 
 </mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml b/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml
index 74927e8..c6f7e21 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml
@@ -24,7 +24,6 @@ limitations under the License.
     
     <fx:Script>
         <![CDATA[
-        import org.apache.flex.events.MouseEvent;
         import org.apache.flex.mdl.materialIcons.MaterialIconType;
 
             [Bindable]
@@ -55,50 +54,53 @@ limitations under the License.
         <js:ContainerDataBinding/>
     </mdl:beads>
 
-    <mdl:Grid width="250">
-    
-        <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
-        <mdl:CheckBox id="mdlchk" text="Disabled at start" value="CheckBox Description" change="counter++"/>
-        <js:Label text="Chebox throw 'change' event {counter} times"/>
-        <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/>
-        
-        <mdl:IconToggle dataMdlFor="mdlBoldIcon" click="counter2++">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.FORMAT_BOLD}"/>
-            </mdl:materialIcon>
-        </mdl:IconToggle>
-
-         <js:Label text="IconToggle throw 'click' event {counter2} times"/>
-        
-        <mdl:IconToggle dataMdlFor="mdlItalicIcon" change="counter3++">
-            <mdl:materialIcon>
-                <mdl:MaterialIcon text="{MaterialIconType.FORMAT_ITALIC}"/>
-            </mdl:materialIcon>
-        </mdl:IconToggle>
-
-        <js:Label text="IconToggle throw 'change' event {counter3} times"/>
-
-        <mdl:Button raised="true" text="Change Switch Text Label" colored="true" click="s1.text = 'hello'"/>
-        <mdl:Switch id="s1" text="Switch" ripple="true" selected="true" change="counter4++" textChange="trace('hello?')"/>
-        
-        <js:Label text="Switch throw 'click' event {counter4} times"/>
-        
-        <mdl:Switch id="s2" text="Switch" click="counter5++"/>
-        
-        <js:Label text="Switch throw 'click' event {counter5} times"/>
-
-        <mdl:RadioButton groupName="g1" text="Ripple 1" value="Test 1" ripple="true" change="counter6++"/>
-        <mdl:RadioButton groupName="g1" text="Ripple 2" value="Test 2" ripple="true" change="counter6++"/>
-        <mdl:RadioButton groupName="g1" text="Ripple 3" value="Test 3" ripple="true" change="counter6++"/>
-
-        <js:Label text="RadioButtons throw 'change' event {counter6} times"/>
-
-        <mdl:RadioButton groupName="g2" text="Black" click="counter7++"/>
-        <mdl:RadioButton groupName="g2" text="White" click="counter7++"/>
-        <mdl:RadioButton groupName="g2" text="Red" click="counter7++"/>
-
-        <js:Label text="RadioButtons throw 'click' event {counter7} times"/>
+    <mdl:Grid>
+        <mdl:style>
+            <js:AllCSSStyles maxWidth="250"/>
+        </mdl:style>
+        <mdl:GridCell column="12">
+            <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
+            <mdl:CheckBox id="mdlchk" text="Disabled at start" value="CheckBox Description" change="counter++"/>
+            <js:Label text="Chebox throw 'change' event {counter} times"/>
+            <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/>
+
+            <mdl:IconToggle dataMdlFor="mdlBoldIcon" click="counter2++">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.FORMAT_BOLD}"/>
+                </mdl:materialIcon>
+            </mdl:IconToggle>
+
+             <js:Label text="IconToggle throw 'click' event {counter2} times"/>
+
+            <mdl:IconToggle dataMdlFor="mdlItalicIcon" change="counter3++">
+                <mdl:materialIcon>
+                    <mdl:MaterialIcon text="{MaterialIconType.FORMAT_ITALIC}"/>
+                </mdl:materialIcon>
+            </mdl:IconToggle>
+
+            <js:Label text="IconToggle throw 'change' event {counter3} times"/>
+
+            <mdl:Button raised="true" text="Change Switch Text Label" colored="true" click="s1.text = 'hello'"/>
+            <mdl:Switch id="s1" text="Switch" ripple="true" selected="true" change="counter4++" textChange="trace('hello?')"/>
+
+            <js:Label text="Switch throw 'click' event {counter4} times"/>
+
+            <mdl:Switch id="s2" text="Switch" click="counter5++"/>
+
+            <js:Label text="Switch throw 'click' event {counter5} times"/>
+
+            <mdl:RadioButton groupName="g1" text="Ripple 1" value="Test 1" ripple="true" change="counter6++"/>
+            <mdl:RadioButton groupName="g1" text="Ripple 2" value="Test 2" ripple="true" change="counter6++"/>
+            <mdl:RadioButton groupName="g1" text="Ripple 3" value="Test 3" ripple="true" change="counter6++"/>
+
+            <js:Label text="RadioButtons throw 'change' event {counter6} times"/>
+
+            <mdl:RadioButton groupName="g2" text="Black" click="counter7++"/>
+            <mdl:RadioButton groupName="g2" text="White" click="counter7++"/>
+            <mdl:RadioButton groupName="g2" text="Red" click="counter7++"/>
 
+            <js:Label text="RadioButtons throw 'click' event {counter7} times"/>
+        </mdl:GridCell>
     </mdl:Grid>
 
 </mdl:TabBarPanel>
\ No newline at end of file


Mime
View raw message