You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pi...@apache.org on 2017/06/22 22:35:44 UTC

git commit: [flex-asjs] [refs/heads/feature/FLEX-35328_simplify_mdl_drop_down_list] - FLEX-35328 - First version of DropDownList after redesign. DropDownList now use native HTML "select" with options and operates on it. - This basic desing displays DropD

Repository: flex-asjs
Updated Branches:
  refs/heads/feature/FLEX-35328_simplify_mdl_drop_down_list fd98bf0c8 -> c4ee97577


FLEX-35328 - First version of DropDownList after redesign. DropDownList now use native HTML "select" with options and operates on it.
- This basic desing displays DropDownList but there need to be tested several scenarios related to "change" event and model properties


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

Branch: refs/heads/feature/FLEX-35328_simplify_mdl_drop_down_list
Commit: c4ee975771296ace477fb53ae2dd26c2265af08a
Parents: fd98bf0
Author: piotrz <pi...@apache.org>
Authored: Fri Jun 23 00:35:39 2017 +0200
Committer: piotrz <pi...@apache.org>
Committed: Fri Jun 23 00:35:39 2017 +0200

----------------------------------------------------------------------
 examples/flexjs/DesktopMap/DesktopMap-app.xml   |   2 +-
 .../MDLExample/src/main/flex/DropDownList.mxml  |   3 +-
 .../flex/org/apache/flex/mdl/DropDownList.as    | 121 +++++----
 .../src/main/flex/org/apache/flex/mdl/List.as   | 258 -------------------
 .../beads/controllers/DropDownListController.as |  37 +--
 .../flex/mdl/beads/views/DropDownListView.as    |  97 ++-----
 .../itemRenderers/DropDownListItemRenderer.as   | 157 +++++++++++
 .../src/main/resources/defaults.css             |   8 +-
 .../src/main/resources/mdl-manifest.xml         |   2 +
 9 files changed, 281 insertions(+), 404 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/examples/flexjs/DesktopMap/DesktopMap-app.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DesktopMap/DesktopMap-app.xml b/examples/flexjs/DesktopMap/DesktopMap-app.xml
index 7d93fd8..5249aae 100644
--- a/examples/flexjs/DesktopMap/DesktopMap-app.xml
+++ b/examples/flexjs/DesktopMap/DesktopMap-app.xml
@@ -45,7 +45,7 @@
 	<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
 	Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
 	An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
-	<versionNumber>0.8.0</versionNumber>
+	<versionNumber>0.9.0</versionNumber>
 
 	<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
 	<!-- <versionLabel></versionLabel> -->

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/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 48ccfa5..72aa9e9 100644
--- a/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml
@@ -29,8 +29,7 @@ limitations under the License.
         <models:MenuModel id="menuModel"/>
     </mdl:model>
     <mdl:Grid width="100">
-      <mdl:DropDownList id="dropDownList" labelField="label" width="150"
-                        selectedIndex="0" change="onDplChange(event)">
+      <mdl:DropDownList id="dropDownList" labelField="label" width="150" change="onDplChange(event)">
           <mdl:beads>
               <js:ConstantBinding
                       sourceID="menuModel"

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as
index 1e28630..8b2c430 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as
@@ -18,9 +18,15 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.mdl
 {
+    import org.apache.flex.core.IItemRenderer;
     import org.apache.flex.core.ISelectionModel;
-    import org.apache.flex.html.Group;
-    import org.apache.flex.mdl.materialIcons.IMaterialIcon;
+    import org.apache.flex.events.ItemAddedEvent;
+    import org.apache.flex.html.DataContainer;
+
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;        
+    }
 
     [Event(name="change", type="org.apache.flex.events.Event")]
 
@@ -39,7 +45,7 @@ package org.apache.flex.mdl
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.8
      */
-    public class DropDownList extends Group
+    public class DropDownList extends DataContainer
     {
         /**
          *  Constructor.
@@ -54,25 +60,46 @@ package org.apache.flex.mdl
             super();
         }
 
-        private var _icon:IMaterialIcon;
+        COMPILE::JS
+        protected var _labelDisplay:HTMLLabelElement;
+        COMPILE::JS
+        protected var _dropDown:HTMLSelectElement;
 
-        /**
-         *  The data for display by the DropDownList.
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.8
-         */
-        public function get dataProvider():Object
-        {
-            return ISelectionModel(model).dataProvider;
-        }
-        public function set dataProvider(value:Object):void
+        COMPILE::JS
         {
-            ISelectionModel(model).dataProvider = value;
-        }
+            /**
+             * @flexjsignorecoercion HTMLSelectElement
+             */
+            public function get dropDown():HTMLSelectElement
+            {
+                return _dropDown;
+            }
 
+            /**
+             * @flexjsignorecoercion HTMLSelectElement
+             */
+            public function set dropDown(value:HTMLSelectElement):void
+            {
+                _dropDown = value;
+            }
+
+            /**
+             * @flexjsignorecoercion HTMLLabelElement
+             */
+            public function get labelDisplay():HTMLLabelElement
+            {
+                return _labelDisplay;
+            }
+
+            /**
+             * @flexjsignorecoercion HTMLLabelElement
+             */
+            public function set labelDisplay(value:HTMLLabelElement):void
+            {
+                _labelDisplay = value;
+            }
+        }
+        
         [Bindable("change")]
         /**
          *  @copy org.apache.flex.core.ISelectionModel#selectedIndex
@@ -109,40 +136,48 @@ package org.apache.flex.mdl
             ISelectionModel(model).selectedItem = value;
         }
 
-        /**
-         *  @copy org.apache.flex.core.ISelectionModel#labelField
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.8
-         */
-        public function get labelField():String
+        override public function removeAllItemRenderers():void
         {
-           return ISelectionModel(model).labelField;
+            COMPILE::JS
+            {
+                var options:HTMLOptionsCollection = dropDown.options;
+                var optionsCount:int = options.length;
+
+                for (var i:int = 1; i < optionsCount; i++)
+                {
+                   dropDown.remove(i);
+                }
+            }
         }
 
-        public function set labelField(value:String):void
+        override public function addItemRenderer(renderer:IItemRenderer):void
         {
-            ISelectionModel(model).labelField = value;
+            COMPILE::JS
+            {
+                dropDown.appendChild(renderer.element);
+            }
+            
+            var newEvent:ItemAddedEvent = new ItemAddedEvent("itemAdded");
+            newEvent.item = renderer;
+
+            dispatchEvent(newEvent);
         }
 
         /**
-         *  DropDownList material icon - default: MaterialIconType.ARROW_DROP_DOWN
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.8
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          */
-        public function get icon():IMaterialIcon
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
         {
-            return _icon;
-        }
+            typeNames = 'mdl-textfield mdl-js-textfield';
+            
+            element = document.createElement('div') as WrappedHTMLElement;
+            element.classList.add("mdl-textfield--floating-label");
 
-        public function set icon(value:IMaterialIcon):void
-        {
-           _icon = value;
+            positioner = element;
+            element.flexjs_wrapper = this;
+
+            return element;
         }
     }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as
index 3c8d3aa..23c1a3c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as
@@ -18,19 +18,6 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.mdl
 {
-	import org.apache.flex.core.IItemRenderer;
-	import org.apache.flex.core.IItemRendererParent;
-	import org.apache.flex.core.IList;
-	import org.apache.flex.core.ILayoutHost;
-	import org.apache.flex.core.ILayoutParent;
-	import org.apache.flex.core.ILayoutView;
-	import org.apache.flex.core.ISelectionModel;
-	import org.apache.flex.core.IFactory;
-	import org.apache.flex.core.UIBase;
-	import org.apache.flex.core.IChild;
-	import org.apache.flex.events.ItemAddedEvent;
-	import org.apache.flex.events.ItemRemovedEvent;
-	import org.apache.flex.core.ListBase;
 	import org.apache.flex.html.List;
 
     COMPILE::JS
@@ -68,249 +55,4 @@ package org.apache.flex.mdl
 			return positioner;
 		}
 	}
-	
-// This is the previous version of List. Please discard when sure the new List class works.
-// 
-//	public class List extends UIBase implements IItemRendererParent, ILayoutParent, ILayoutHost, ILayoutView, IList
-//	{
-//        /**
-//         *  Constructor.
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function List()
-//		{
-//			super();
-//
-//            className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
-//		}
-//
-//		/**
-//         *  @copy org.apache.flex.core.IDataProviderModel#dataProvider
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function get dataProvider():Object
-//		{
-//			return ISelectionModel(model).dataProvider;
-//		}
-//		/**
-//         *  @private
-//         */
-//		public function set dataProvider(value:Object):void
-//		{
-//			ISelectionModel(model).dataProvider = value;
-//		}
-//
-//		/**
-//         *  @copy org.apache.flex.core.IDataProviderModel#labelField
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function get labelField():String
-//		{
-//			return ISelectionModel(model).labelField;
-//		}
-//		/**
-//         *  @private
-//         */
-//		public function set labelField(value:String):void
-//		{
-//			ISelectionModel(model).labelField = value;
-//		}
-//
-//		/**
-//         *  get layout host
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function getLayoutHost():ILayoutHost
-//		{
-//			return this;
-//		}
-//
-//		/**
-//         *  get content view
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function get contentView():ILayoutView
-//		{
-//			return this;
-//		}
-//
-//        /**
-//         *  @copy org.apache.flex.core.IList#dataGroup
-//         *
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function get dataGroup():IItemRendererParent
-//		{
-//			return this;
-//		}
-//		
-//		private var _itemRenderer:IFactory;
-//		
-//		/**
-//		 *  The class or factory used to display each item.
-//		 *
-//		 *  @langversion 3.0
-//		 *  @playerversion Flash 10.2
-//		 *  @playerversion AIR 2.6
-//		 *  @productversion FlexJS 0.0
-//		 */
-//		public function get itemRenderer():IFactory
-//		{
-//			return _itemRenderer;
-//		}
-//		public function set itemRenderer(value:IFactory):void
-//		{
-//			_itemRenderer = value;
-//		}
-//		
-//		/**
-//		 * Returns whether or not the itemRenderer property has been set.
-//		 *
-//		 *  @see org.apache.flex.core.IItemRendererProvider
-//		 *
-//		 *  @langversion 3.0
-//		 *  @playerversion Flash 10.2
-//		 *  @playerversion AIR 2.6
-//		 *  @productversion FlexJS 0.8
-//		 */
-//		public function get hasItemRenderer():Boolean
-//		{
-//			var result:Boolean = false;
-//			
-//			COMPILE::SWF {
-//				result = _itemRenderer != null;
-//			}
-//				
-//				COMPILE::JS {
-//					var test:* = _itemRenderer;
-//					result = _itemRenderer !== null && test !== undefined;
-//				}
-//				
-//				return result;
-//		}
-//		
-//		/**
-//		 * @copy org.apache.flex.core.IItemRendererParent#addItemRenderer()
-//		 * @private
-//		 *
-//		 *  @langversion 3.0
-//		 *  @playerversion Flash 10.2
-//		 *  @playerversion AIR 2.6
-//		 *  @productversion FlexJS 0.8
-//		 */
-//		public function addItemRenderer(renderer:IItemRenderer):void
-//		{
-//			addElement(renderer, true);
-//			
-//			var newEvent:ItemAddedEvent = new ItemAddedEvent("itemAdded");
-//			newEvent.item = renderer;
-//			
-//			dispatchEvent(newEvent);
-//		}
-//		
-//		/**
-//		 * @copy org.apache.flex.core.IItemRendererParent#removeItemRenderer()
-//		 * @private
-//		 *
-//		 *  @langversion 3.0
-//		 *  @playerversion Flash 10.2
-//		 *  @playerversion AIR 2.6
-//		 *  @productversion FlexJS 0.8
-//		 */
-//		public function removeItemRenderer(renderer:IItemRenderer):void
-//		{
-//			removeElement(renderer, true);
-//			
-//			var newEvent:ItemRemovedEvent = new ItemRemovedEvent("itemRemoved");
-//			newEvent.item = renderer;
-//			
-//			dispatchEvent(newEvent);
-//		}
-//
-//		/**
-//         *  get item renderer for index
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function getItemRendererForIndex(index:int):IItemRenderer
-//		{
-//			var child:IItemRenderer = getElementAt(index) as IItemRenderer;
-//			return child;
-//		}
-//
-//		/**
-//         *  remove all elements
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function removeAllItemRenderers():void
-//		{
-//			while (numElements > 0) {
-//				var child:IChild = getElementAt(0);
-//				removeElement(child);
-//			}
-//		}
-//
-//		/**
-//         *  update all item renderers
-//         *  
-//         *  @langversion 3.0
-//         *  @playerversion Flash 10.2
-//         *  @playerversion AIR 2.6
-//         *  @productversion FlexJS 0.8
-//         */
-//		public function updateAllItemRenderers():void
-//		{
-//			//todo: IItemRenderer does not define update function but DataItemRenderer does
-//			//for(var i:int = 0; i < numElements; i++) {
-//			//	var child:IItemRenderer = getElementAt(i) as IItemRenderer;
-//			//	child.update();
-//			//}
-//		}
-//
-//        /**
-//         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
-//         */
-//        COMPILE::JS
-//        override protected function createElement():WrappedHTMLElement
-//        {
-//            typeNames = "mdl-list";
-//            
-//            element = document.createElement('ul') as WrappedHTMLElement;
-//            
-//            positioner = element;
-//            element.flexjs_wrapper = this;
-//            
-//            return positioner;
-//        }  
-//	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as
index 32268db..53c37ef 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as
@@ -22,15 +22,14 @@ package org.apache.flex.mdl.beads.controllers
     import org.apache.flex.core.ISelectionModel;
     import org.apache.flex.core.IStrand;
     import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.mdl.DropDownList;
     import org.apache.flex.mdl.beads.views.DropDownListView;
     import org.apache.flex.events.Event;
-    import org.apache.flex.events.MouseEvent;
 
 	/**
 	 *  The DropDownListController class bead handles mouse events on the
-     *  drop down list (org.apache.flex.mdl.Menu) component parts and
-     *  dispatches change event on behalf of the DropDownList
-	 *  
+     *  drop down list component parts and dispatches change event on behalf of the DropDownList
+	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
@@ -75,35 +74,25 @@ package org.apache.flex.mdl.beads.controllers
 		{
 			_strand = value;
 
-            model = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
-            dropDownListView = value.getBeadByType(DropDownListView) as DropDownListView;
+            var dropDownList:DropDownList = (value as DropDownList);
 
-            dropDownListView.dropDown.addEventListener(MouseEvent.CLICK, onDisplayItemClick);
+            model = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
 
-			setLabelDisplayValue();
+			COMPILE::JS
+            {
+                dropDownList.dropDown.addEventListener("onchange", onDisplayItemClick, false);
+            }
 		}
 
-        private function onDisplayItemClick(event:MouseEvent):void
+		COMPILE::JS
+        private function onDisplayItemClick(event:Event):void
         {
 			var eventTarget:Object = event.target;
 			
-			model.selectedIndex = eventTarget.index;
-			model.selectedItem = eventTarget.data;
-
-            setLabelDisplayValue();
+			model.selectedIndex = eventTarget.selectedIndex;
+			model.selectedItem = model.dataProvider[model.selectedIndex];
 
 			IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
         }
-
-        private function setLabelDisplayValue():void
-        {
-            if (model.selectedIndex > -1 && model.dataProvider != null)
-            {
-                var selectedItem:Object = model.dataProvider[model.selectedIndex];
-                dropDownListView.labelDisplay.text = !model.labelField ?
-                        selectedItem as String :
-						selectedItem[model.labelField];
-            }
-        }
     }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as
index ae1d2df..51960d6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as
@@ -18,14 +18,9 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.mdl.beads.views
 {
-    import org.apache.flex.core.ISelectionModel;
     import org.apache.flex.core.IStrand;
-    import org.apache.flex.html.Div;
-    import org.apache.flex.html.beads.GroupView;
+    import org.apache.flex.html.beads.DataContainerView;
     import org.apache.flex.mdl.DropDownList;
-    import org.apache.flex.mdl.Menu;
-    import org.apache.flex.mdl.materialIcons.MaterialIcon;
-    import org.apache.flex.mdl.materialIcons.MaterialIconType;
     import org.apache.flex.events.Event;
 
     /**
@@ -39,28 +34,20 @@ package org.apache.flex.mdl.beads.views
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.8
      */
-    public class DropDownListView extends GroupView
+    public class DropDownListView extends DataContainerView
     {
         public function DropDownListView()
         {
             super();
         }
 
-        protected var _dropDown:Menu;
-        protected var _labelDisplay:Div;
-
-        public function get dropDown():Menu
-        {
-            return _dropDown;
-        }
-
-        public function get labelDisplay():Div
-        {
-            return _labelDisplay;
-        }
         /**
          *  @copy org.apache.flex.core.IBead#strand
          *
+         *  @flexjsignorecoercion HTMLLabelElement
+         *  @flexjsignorecoercion HTMLSelectElement
+         *  @flexjsignorecoercion HTMLOptionElement
+         *     
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -70,32 +57,26 @@ package org.apache.flex.mdl.beads.views
         {
             super.strand = value;
 
-            var dropDownList:DropDownList = (value as DropDownList);
-
-            _dropDown = new Menu();
-            _dropDown.bottom = true;
-
             COMPILE::JS
             {
-                _dropDown.element.addEventListener("mdl-componentupgraded", onElementMdlComponentUpgraded, false);
-                setIdForDisplayList();
-            }
+                var dropDownList:DropDownList = (value as DropDownList);
 
-            _labelDisplay = new Div();
+                dropDownList.labelDisplay = document.createElement('label') as HTMLLabelElement;
+                dropDownList.labelDisplay.classList.add("mdl-textfield__label");
 
-            if (!dropDownList.icon)
-            {
-                var dropDownIcon:MaterialIcon = new MaterialIcon();
-                dropDownIcon.text = MaterialIconType.ARROW_DROP_DOWN;
-                dropDownList.icon = dropDownIcon;
-            }
+                dropDownList.dropDown = document.createElement('select') as HTMLSelectElement;
+                dropDownList.dropDown.classList.add("mdl-textfield__input");
+
+                var emptyOption:HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
+                emptyOption.style.display = "none";
 
-            var model:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
-            _dropDown.model = model;
+                dropDownList.dropDown.appendChild(emptyOption);
+                
+                setNameForDropDownList();
 
-            dropDownList.addElement(_labelDisplay);
-            dropDownList.addElement(dropDownList.icon);
-            dropDownList.addElement(_dropDown);
+                dropDownList.element.appendChild(dropDownList.labelDisplay);
+                dropDownList.element.appendChild(dropDownList.dropDown);
+            }
         }
 
         override protected function handleInitComplete(event:Event):void
@@ -105,45 +86,17 @@ package org.apache.flex.mdl.beads.views
             COMPILE::JS
             {
                 host.element.classList.add("DropDownList");
-
-                setWidthForDropDownListComponents();
-            }
-        }
-
-        COMPILE::JS
-        private function setIdForDisplayList():void
-        {
-            if (!host.element.id)
-            {
-                host.element.id = "dropDownList" + Math.random();
             }
-
-            _dropDown.dataMdlFor = host.element.id;
         }
 
         COMPILE::JS
-        private function setWidthForDropDownListComponents():void
+        private function setNameForDropDownList():void
         {
-            if (!isNaN(host.width))
-            {
-                _dropDown.width = host.width - 1;
-                _labelDisplay.width = host.width - 25;
-            }
-            else
-            {
-                _labelDisplay.width = 30;
-            }
-        }
+            var dropDownList:DropDownList = (_strand as DropDownList);
 
-        COMPILE::JS
-        private function onElementMdlComponentUpgraded(event:Event):void
-        {
-            if (!event.currentTarget) return;
-            if (_dropDown)
-            {
-                _dropDown.element.removeEventListener("mdl-componentupgraded", onElementMdlComponentUpgraded, false);
-                _dropDown.element.style.minWidth = "40px";
-            }
+            var name:String = "dropDownList" + Math.random();
+            dropDownList.labelDisplay.htmlFor = name;
+            dropDownList.dropDown.name = name;
         }
     }
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as
new file mode 100644
index 0000000..65e13e1
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as
@@ -0,0 +1,157 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.itemRenderers
+{
+    import org.apache.flex.html.supportClasses.MXMLItemRenderer;
+
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;            
+    }
+	
+    /**
+     *  The DropDownListItemRenderer class creates a DropDownList menu item
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.8
+     */    
+	public class DropDownListItemRenderer extends MXMLItemRenderer
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.8
+         */
+		public function DropDownListItemRenderer()
+		{
+			super();
+
+            className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+        }
+        
+        private var _text:String = "";
+
+        /**
+         *  The text of the menu item
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.8
+         */
+		public function get text():String
+		{
+            COMPILE::SWF
+            {
+                return _text;
+            }
+            COMPILE::JS
+            {
+                return textNode.nodeValue;
+            }
+		}
+
+		public function set text(value:String):void
+		{
+            COMPILE::SWF
+            {
+                _text = value;
+            }
+            COMPILE::JS
+            {
+                textNode.nodeValue = value;
+            }
+		}
+
+        COMPILE::JS
+        private var textNode:Text;
+
+        COMPILE::JS
+        private var item:HTMLOptionElement;
+
+        /**
+         *  Sets the data value and uses the String version of the data for display.
+         *
+         *  @param Object data The object being displayed by the itemRenderer instance.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.8
+         */
+        override public function set data(value:Object):void
+        {
+            super.data = value;
+
+            var text:String;
+            if (labelField)
+            {
+                text = String(value[labelField]);
+            }
+            else
+            {
+                text = String(value);
+            }
+
+            COMPILE::JS
+            {
+                if (dataField)
+                {
+                    item.value = String(value[dataField]);
+                }
+                else
+                {
+                    item.value = String(value);
+                }
+
+                if(textNode != null)
+                {
+                    textNode.nodeValue = text;
+                }
+            }
+        }
+
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         * @flexjsignorecoercion HTMLOptionElement
+         *
+		 * @flexjsignorecoercion Text
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+            item = document.createElement('option') as HTMLOptionElement;
+            
+            textNode = document.createTextNode('') as Text;
+            item.appendChild(textNode);
+
+            element = item as WrappedHTMLElement;
+
+            positioner = element;
+            element.flexjs_wrapper = this;
+            
+            return element;
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
index fa2d39a..347c226 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
@@ -155,11 +155,11 @@ DropDownList
 {
     IBeadView: ClassReference("org.apache.flex.mdl.beads.views.DropDownListView");
     IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
-    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.HorizontalFlexLayout");
+    IBeadLayout: ClassReference(null);
     IBeadController: ClassReference("org.apache.flex.mdl.beads.controllers.DropDownListController");
-    border: 1.2px solid #F8F8F8;
-    cursor: pointer;
-    align-items: center;
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.DropDownListItemRenderer");
 }
 
 @media -flex-flash

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/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 c74d257..53ce2fb 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -121,4 +121,6 @@
     <component id="UpgradeChildren" class="org.apache.flex.mdl.beads.UpgradeChildren"/>
     <component id="DropDownList" class="org.apache.flex.mdl.DropDownList"/>
     <component id="DropDownListView" class="org.apache.flex.mdl.beads.views.DropDownListView"/>
+    <component id="DropDownListItemRenderer" class="org.apache.flex.mdl.itemRenderers.DropDownListItemRenderer"/>W
+
 </componentPackage>