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/22 00:54:56 UTC

git commit: [flex-asjs] [refs/heads/develop] - NavigatorLayout subcomponents

Repository: flex-asjs
Updated Branches:
  refs/heads/develop c007085b3 -> 8fdea9083


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

Branch: refs/heads/develop
Commit: 8fdea9083d2acf40f86ad37471dd3e2af73ced61
Parents: c007085
Author: Carlos Rovira <ca...@apache.org>
Authored: Tue Nov 22 01:54:50 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Tue Nov 22 01:54:50 2016 +0100

----------------------------------------------------------------------
 .../flexjs/MDLExample/src/main/flex/App.mxml    | 352 ++++++++++---------
 .../src/main/resources/mdl-styles.css           |  24 +-
 .../src/main/flex/org/apache/flex/html/A.as     |   2 +-
 .../src/main/flex/org/apache/flex/html/Span.as  |   2 +-
 .../src/main/flex/org/apache/flex/mdl/Drawer.as |  76 ++++
 .../flex/org/apache/flex/mdl/LayoutTitle.as     |  75 ++++
 .../main/flex/org/apache/flex/mdl/Navigation.as |  76 ++++
 .../apache/flex/mdl/NavigationLayoutContent.as  |  76 ++++
 .../flex/org/apache/flex/mdl/NavigationLink.as  |  76 ++++
 .../src/main/resources/mdl-manifest.xml         |   7 +
 10 files changed, 605 insertions(+), 161 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/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 1d607b5..32248cc 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -32,167 +32,203 @@ limitations under the License.
     <js:initialView>
         <js:View>
             
-            <js:Form action="#"> 
-
-                <!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
-                <js:HContainer>
-                    <mdl:Button className="mdlbtn"/>
-
-                    <!-- Fab button -->
-                    <mdl:Button fab="true" colored="true">
-                        <i class="material-icons">add</i>
-                    </mdl:Button>
-
-                    <!-- Fab with Ripple -->
-                    <mdl:Button fab="true" ripple="true">
-                        <i class="material-icons md-48">face</i>
-                    </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">
-                        <js:beads>
-                            <mdl:Disabled/>
-                        </js:beads>
-                    </mdl:Button>
-                </js:HContainer>
-
-                <mdl:NavigationLayout>
-                    <mdl:Header>
-                        <mdl:HeaderRow>
-                            <js:Span text="Title" className="mdl-layout-title"/>
-                        </mdl:HeaderRow>
-                    </mdl:Header>
-
-                    <mdl:Button fab="true" colored="true">
-                        <i class="material-icons">add</i>
-                    </mdl:Button>
-                </mdl:NavigationLayout>
-
-                <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
-                <mdl:TextField id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example">
-                    <js:beads>
-                        <mdl:TextPrompt prompt="Normal Text Field..."/>
-                    </js:beads>
-                </mdl:TextField>
-                <mdl:TextField floatingLabel= "true">
-                    <js:beads>
-                        <mdl:TextPrompt prompt="Floating Label"/>
-                    </js:beads>
-                </mdl:TextField>
-
-                <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
-                <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" className="mdlrb_example"/>
-                <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/>
-                <mdl:RadioButton groupName="g1" text="Red"/>
-                <mdl:Switch text="Switch" ripple="true" selected="true"/>
-                <js:VContainer>
-                    <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);">
-                        <js:beads>
-                            <mdl:Badge dataBadge="1" overlap="true"/>
-                        </js:beads>
-                    </js:Div>
-
-                    <js:Span text="Inbox" className="mdl-badge" style="color: rgba(0, 0, 0, 0.24);">
-                        <js:beads>
-                            <mdl:Badge dataBadge="4"/>
-                        </js:beads>
-                    </js:Span>
-
-                    <js:A text="Badge No Bg" href="http://flex.apache.org">
-                        <js:beads>
-                            <mdl:Badge dataBadge="5" noBackground="true"/>
-                        </js:beads>
-                    </js:A>
-
-                    <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org">
-                        <js:beads>
-                            <mdl:Badge dataBadge="1"/>
-                        </js:beads>
-                    </js:A>
-                    
-                </js:VContainer>
-
-                <!--<mdl:List id="list" width="130" 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>
-                </mdl:List>-->
-
-
-                <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:Card width="320" height="320" shadow="2" style="margin:10;">
+                <mdl:CardTitle className="dogTitle" expand="true">
+                    <js:H2 text="Update" className="mdl-card__title-text"/>
+                </mdl:CardTitle>
+                <!--<mdl:CardMedia>
+                    <js:Image url="assets/Unknown.jpg"  height="176"/>
+                </mdl:CardMedia>-->
+                <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 expand="true"/>
+                <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>
+            
+            <!--<mdl:NavigationLayout className="layoutTransparent" width="100%" height="400" style="position:relative">
+                <mdl:Header transparent="true">
+                    <mdl:HeaderRow>
+                        <mdl:LayoutTitle text="Title"/>
+                        <mdl:Spacer/>
+                        <mdl:Navigation>
+                            <mdl:NavigationLink text="link"/>
+                            <mdl:NavigationLink text="link"/>
+                            <mdl:NavigationLink text="link"/>
+                            <mdl:NavigationLink text="link"/>
+                        </mdl:Navigation>
+                    </mdl:HeaderRow>
+                    <mdl:Drawer>
+                        <mdl:LayoutTitle text="Title"/>
+                        <mdl:Navigation>
+                            <mdl:NavigationLink text="link"/>
+                            <mdl:NavigationLink text="link"/>
+                            <mdl:NavigationLink text="link"/>
+                            <mdl:NavigationLink text="link"/>
+                        </mdl:Navigation>
+                    </mdl:Drawer>
+                </mdl:Header>
+            </mdl:NavigationLayout>
+            -->
+            <mdl:NavigationLayout style="position:relative">
+                <mdl:Header>
+                    <mdl:HeaderRow>
+                        <mdl:LayoutTitle text="Material Design Layout"/>
+                        <mdl:Spacer/>
+                        <mdl:Navigation>
+                            <mdl:NavigationLink text="link 1"/>
+                            <mdl:NavigationLink text="link 2"/>
+                            <mdl:NavigationLink text="link 3"/>
+                        </mdl:Navigation>
+                    </mdl:HeaderRow>
+                    <mdl:Drawer>
+                        <mdl:LayoutTitle text="Material Design Layout"/>
+                        <mdl:Navigation>
+                            <mdl:NavigationLink text="link 1"/>
+                            <mdl:NavigationLink text="link 2"/>
+                            <mdl:NavigationLink text="link 3"/>
+                        </mdl:Navigation>
+                    </mdl:Drawer>
+                </mdl:Header>
+                <mdl:NavigationLayoutContent>
+                        <js:Container className="page-content">
+                            
+                            <!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
+                            <js:HContainer>
+                                <mdl:Button className="mdlbtn"/>
+
+                                <!-- Fab button -->
+                                <mdl:Button fab="true" colored="true">
+                                    <i class="material-icons">add</i>
+                                </mdl:Button>
+
+                                <!-- Fab with Ripple -->
+                                <mdl:Button fab="true" ripple="true">
+                                    <i class="material-icons md-48">face</i>
+                                </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">
+                                    <js:beads>
+                                        <mdl:Disabled/>
+                                    </js:beads>
+                                </mdl:Button>
+                            </js:HContainer>
+                            
+                            <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
+                            <mdl:TextField id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example">
+                                <js:beads>
+                                    <mdl:TextPrompt prompt="Normal Text Field..."/>
+                                </js:beads>
+                            </mdl:TextField>
+                            <mdl:TextField floatingLabel= "true">
+                                <js:beads>
+                                    <mdl:TextPrompt prompt="Floating Label"/>
+                                </js:beads>
+                            </mdl:TextField>
+
+                            <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
+                            <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" className="mdlrb_example"/>
+                            <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/>
+                            <mdl:RadioButton groupName="g1" text="Red"/>
+                            <mdl:Switch text="Switch" ripple="true" selected="true"/>
+
+                            <js:VContainer>
+                                <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);">
+                                    <js:beads>
+                                        <mdl:Badge dataBadge="1" overlap="true"/>
+                                    </js:beads>
+                                </js:Div>
+
+                                <js:Span text="Inbox" className="mdl-badge" style="color: rgba(0, 0, 0, 0.24);">
+                                    <js:beads>
+                                        <mdl:Badge dataBadge="4"/>
+                                    </js:beads>
+                                </js:Span>
+
+                                <js:A text="Badge No Bg" href="http://flex.apache.org">
+                                    <js:beads>
+                                        <mdl:Badge dataBadge="5" noBackground="true"/>
+                                    </js:beads>
+                                </js:A>
+
+                                <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org">
+                                    <js:beads>
+                                        <mdl:Badge dataBadge="1"/>
+                                    </js:beads>
+                                </js:A>
+                                
+                            </js:VContainer>
+
+                            <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:Button id="menu_btn" icon="true">
+                                <i class="material-icons">more_vert</i>
                             </mdl:Button>
-                        </mdl:CardMenu>
-                    </mdl:Card>
-
-                    <mdl:Spacer/>
-
-                    <mdl:Button id="menu_btn" icon="true">
-                        <i class="material-icons">more_vert</i>
-                    </mdl:Button>
-                    <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false">
-                        <mdl:MenuItem text="Some Action"/>
-                        <mdl:MenuItem text="Another Action"/>
-                        <mdl:MenuItem text="Action Disabled">
-                            <js:beads>
-                                <mdl:Disabled/>
-                            </js:beads>
-                        </mdl:MenuItem>
-                        <mdl:MenuItem text="More Action" divider="true"/>
-                        <mdl:MenuItem text="Separated Action"/>
-                    </mdl:Menu>
+                            <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false">
+                                <mdl:MenuItem text="Some Action"/>
+                                <mdl:MenuItem text="Another Action"/>
+                                <mdl:MenuItem text="Action Disabled">
+                                    <js:beads>
+                                        <mdl:Disabled/>
+                                    </js:beads>
+                                </mdl:MenuItem>
+                                <mdl:MenuItem text="More Action" divider="true"/>
+                                <mdl:MenuItem text="Separated Action"/>
+                            </mdl:Menu>
+                            
+                            <mdl:Slider className="mdlsl_example"/>
+                            <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
+
+                            
+                        </js:Container>
+                    </mdl:NavigationLayoutContent>
                     
-                    <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" expand="true">
-                            <js:H2 text="Update" className="mdl-card__title-text"/>
-                        </mdl:CardTitle>
-                        <!--<mdl:CardMedia>
-                            <js:Image url="assets/Unknown.jpg"  height="176"/>
-                        </mdl:CardMedia>-->
-                        <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 expand="true"/>
-                        <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:NavigationLayout>
 
+            <!--<mdl:List id="list" width="130" 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>
+            </mdl:List>-->
+
+
+            <js:Form action="#"> 
             </js:Form>
 
         </js:View>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/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 af58dd8..52b47d3 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -20,6 +20,7 @@
 */
 
 @namespace "library://ns.apache.org/flexjs/basic";
+@namespace mdl "library://ns.apache.org/flexjs/mdl";
 
 .flexjs *, . flexjs *:before, . flexjs *:after {
     -moz-box-sizing: border-box;
@@ -27,7 +28,7 @@
     box-sizing: border-box;
 }
 
-Application
+.page-content
 {
 	padding: 10px;
 	margin: 10px;
@@ -40,6 +41,22 @@ Image
 	IBeadView:  ClassReference("org.apache.flex.html.beads.ImageView");
 }
 
+mdl|List
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.ListView");			
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout");
+    IContentView: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
+	IViewport: ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+	IViewportModel: ClassReference("org.apache.flex.html.beads.models.ViewportModel");
+	border-style: solid;
+	border-color: #222222;
+}
+
 .cardTitle
 {
 	color: #fff;
@@ -52,4 +69,9 @@ Image
 	color: #fff;
 	height: 176px;
 	background: url('assets/dog.png') bottom right 15% no-repeat #46B6AC;
+}
+
+.layoutTransparent {
+  background: url('assets/transparent.jpg') center / cover;
+  color: white;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as
index ca7ce1f..a4f5619 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as
@@ -109,7 +109,7 @@ package org.apache.flex.html
 		}
 		
         COMPILE::JS
-        private var textNode:Text;
+        protected var textNode:Text;
 		
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as
index 91b94f7..5f978c5 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as
@@ -84,7 +84,7 @@ package org.apache.flex.html
 		}
 		
         COMPILE::JS
-        private var textNode:Text;
+        protected var textNode:Text;
 		
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as
new file mode 100644
index 0000000..f6c0253
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.mdl
+{
+	import org.apache.flex.core.ContainerBase;
+    
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+    
+	/**
+	 *  The Drawer class is a Container component capable of parenting other
+	 *  components 
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class Drawer extends ContainerBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function Drawer()
+		{
+			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+		}
+		
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			typeNames = "mdl-layout__drawer";
+
+            element = document.createElement('div') as WrappedHTMLElement;
+            element.className = typeNames;
+            
+			positioner = element;
+            
+            // absolute positioned children need a non-null
+            // position value in the parent.  It might
+            // get set to 'absolute' if the container is
+            // also absolutely positioned
+            element.flexjs_wrapper = this;
+
+            return element;
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as
new file mode 100644
index 0000000..bc94f19
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as
@@ -0,0 +1,75 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.mdl
+{
+	import org.apache.flex.html.Span;
+    
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+    
+	/**
+	 *  The LayoutTitle class is a Container component capable of parenting other
+	 *  components 
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class LayoutTitle extends Span
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function LayoutTitle()
+		{
+			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+		}
+		
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			typeNames = "mdl-layout-title";
+			
+			var span:HTMLElement = document.createElement('span') as HTMLSpanElement;
+            
+            textNode = document.createTextNode('') as Text;
+            span.appendChild(textNode); 
+
+			element = span as WrappedHTMLElement;
+            
+            positioner = element;
+			element.flexjs_wrapper = this;
+            
+            return element;
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
new file mode 100644
index 0000000..e170f93
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.mdl
+{
+	import org.apache.flex.core.ContainerBase;
+    
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+    
+	/**
+	 *  The Navigation class is a Container component capable of parenting other
+	 *  components 
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class Navigation extends ContainerBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function Navigation()
+		{
+			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+		}
+		
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			typeNames = "mdl-navigation";
+
+            element = document.createElement('nav') as WrappedHTMLElement;
+            element.className = typeNames;
+            
+			positioner = element;
+            
+            // absolute positioned children need a non-null
+            // position value in the parent.  It might
+            // get set to 'absolute' if the container is
+            // also absolutely positioned
+            element.flexjs_wrapper = this;
+
+            return element;
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as
new file mode 100644
index 0000000..a0444ba
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.mdl
+{
+	import org.apache.flex.core.ContainerBase;
+    
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+    
+	/**
+	 *  The NavigationLayoutContent class is a Container component capable of parenting other
+	 *  components 
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class NavigationLayoutContent extends ContainerBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function NavigationLayoutContent()
+		{
+			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+		}
+		
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			typeNames = "mdl-layout__content";
+
+            element = document.createElement('div') as WrappedHTMLElement;
+            element.className = typeNames;
+            
+			positioner = element;
+            
+            // absolute positioned children need a non-null
+            // position value in the parent.  It might
+            // get set to 'absolute' if the container is
+            // also absolutely positioned
+            element.flexjs_wrapper = this;
+
+            return element;
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as
new file mode 100644
index 0000000..b468be9
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.mdl
+{
+	import org.apache.flex.html.A;
+    
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+    
+	/**
+	 *  The NavigationLink class is a Container component capable of parenting other
+	 *  components 
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class NavigationLink extends A
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function NavigationLink()
+		{
+			super();
+
+			className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+		}
+		
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			typeNames = "mdl-navigation__link";
+
+			var a:HTMLElement = document.createElement('a') as HTMLElement;
+            a.setAttribute('href', href);
+            
+            textNode = document.createTextNode('') as Text;
+            a.appendChild(textNode); 
+
+			element = a as WrappedHTMLElement;
+            
+            positioner = element;
+			element.flexjs_wrapper = this;
+            
+            return element;
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
index ac711e2..94443ce 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -42,7 +42,14 @@
     <component id="Spacer" class="org.apache.flex.mdl.Spacer"/>
     <component id="List" class="org.apache.flex.mdl.List"/>
     <component id="NavigationLayout" class="org.apache.flex.mdl.NavigationLayout"/>
+    <component id="LayoutTitle" class="org.apache.flex.mdl.LayoutTitle"/>
+    <component id="Navigation" class="org.apache.flex.mdl.Navigation"/>
+    <component id="NavigationLink" class="org.apache.flex.mdl.NavigationLink"/>
     <component id="Header" class="org.apache.flex.mdl.Header"/>
     <component id="HeaderRow" class="org.apache.flex.mdl.HeaderRow"/>
+    <component id="Navigation" class="org.apache.flex.mdl.Navigation"/>
+    <component id="Drawer" class="org.apache.flex.mdl.Drawer"/>
+    <component id="NavigationLayoutContent" class="org.apache.flex.mdl.NavigationLayoutContent"/>
+    
 
 </componentPackage>