You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2017/04/18 06:17:43 UTC

[19/50] [abbrv] git commit: [flex-asjs] [refs/heads/dual] - Updates to ComboBox, DataGrid, and layouts.

Updates to ComboBox, DataGrid, and layouts.


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

Branch: refs/heads/dual
Commit: b67636a30fc0948a53b46a3862daf9923a429fe3
Parents: be051df
Author: Peter Ent <pe...@apache.org>
Authored: Wed Apr 5 14:54:45 2017 -0400
Committer: Peter Ent <pe...@apache.org>
Committed: Wed Apr 5 14:54:45 2017 -0400

----------------------------------------------------------------------
 .../projects/HTML/src/main/flex/HTMLClasses.as  |   2 +-
 .../main/flex/org/apache/flex/html/DataGrid.as  |   2 +-
 .../org/apache/flex/html/beads/ComboBoxView.as  |  36 ++-
 .../flex/html/beads/DataGridPercentageView.as   | 290 ++++++++++++++++++
 .../org/apache/flex/html/beads/DataGridView.as  | 100 +++---
 .../TextItemRendererFactoryForArrayData.as      |   2 +-
 .../beads/controllers/ComboBoxController.as     |   2 +-
 .../flex/html/beads/layouts/ButtonBarLayout.as  |  17 +-
 .../flex/html/beads/layouts/DataGridLayout.as   | 271 -----------------
 .../beads/layouts/DataGridPercentageLayout.as   | 303 -------------------
 .../html/beads/layouts/HorizontalFlexLayout.as  |  23 +-
 .../flex/html/beads/layouts/IDataGridLayout.as  |  52 ----
 .../html/beads/layouts/VerticalFlexLayout.as    |  21 +-
 .../html/supportClasses/DataGridColumnList.as   |   1 +
 .../html/supportClasses/ScrollingViewport.as    |  13 +-
 .../HTML/src/main/resources/basic-manifest.xml  |   3 +-
 .../HTML/src/main/resources/defaults.css        |  15 +-
 17 files changed, 442 insertions(+), 711 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
index 0d40ef5..0e7e052 100644
--- a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
+++ b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
@@ -167,7 +167,7 @@ internal class HTMLClasses
 	import org.apache.flex.html.DataGridButtonBar; DataGridButtonBar;
 	import org.apache.flex.html.beads.DataGridColumnView; DataGridColumnView;
 	import org.apache.flex.html.beads.DataGridView; DataGridView;
-	import org.apache.flex.html.beads.layouts.DataGridLayout; DataGridLayout;
+	import org.apache.flex.html.beads.DataGridPercentageView; DataGridPercentageView;
 	import org.apache.flex.html.beads.DateChooserView; DateChooserView;
 	import org.apache.flex.html.beads.DateFieldView; DateFieldView;
 	import org.apache.flex.html.beads.DecrementButtonView; DecrementButtonView;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
index 999b496..fda1b46 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
@@ -41,7 +41,7 @@ package org.apache.flex.html
 	 *  @playerversion AIR 2.6
 	 *  @productversion FlexJS 0.0
 	 */
-	public class DataGrid extends UIBase
+	public class DataGrid extends Group
 	{
 		/**
 		 *  constructor.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
index 990c3ab..3adb9de 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
@@ -112,14 +112,19 @@ package org.apache.flex.html.beads
 		{
 			super.strand = value;
 			
+			var host:UIBase = value as UIBase;
+			
 			input = new TextInput();
-			input.className = "ComboBoxTextInput";
-			UIBase(host).addElement(input);
+			input.className = "ComboBoxTextInput";			
 			
 			button = new TextButton();
 			button.className = "ComboBoxButton";
 			button.text = '\u25BC';
-			UIBase(host).addElement(button);
+			
+			if (isNaN(host.width)) input.width = 100;
+			
+			host.addElement(input);
+			host.addElement(button);
 			
 			var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
 			list = new popUpClass() as UIBase;
@@ -157,12 +162,16 @@ package org.apache.flex.html.beads
 				var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
 				list.model = model;
 				list.width = input.width;
+				list.height = 200;
 				list.visible = true;
 				
 				var origin:Point = new Point(0, button.y+button.height);
 				var relocated:Point = PointUtils.localToGlobal(origin,_strand);
 				list.x = relocated.x
 				list.y = relocated.y;
+				COMPILE::JS {
+					list.element.style.position = "absolute";
+				}
 				
 				var popupHost:IPopUpHost = UIUtils.findPopUpHost(_strand as IUIBase);
 				popupHost.addElement(list);
@@ -178,9 +187,15 @@ package org.apache.flex.html.beads
 		 */
 		private function handleSizeChange(event:Event):void
 		{
+			var host:UIBase = UIBase(_strand);
+			
 			input.x = 0;
 			input.y = 0;
-			input.width = host.width - 20;
+			if (host.isWidthSizedToContent()) {
+				input.width = 100;
+			} else {
+				input.width = host.width - 20;
+			}
 			
 			button.x = input.width;
 			button.y = 0;
@@ -188,10 +203,15 @@ package org.apache.flex.html.beads
 			button.height = input.height;
 			
 			COMPILE::JS {
-				// because the strand is a <div> it does not have a size so one is
-				// assigned here based on the max height of the two components.
-				var element:Object = UIBase(_strand).element;
-				element["style"]["height"] = String(Math.max(input.height,button.height)) + "px";
+				input.element.style.position = "absolute";
+				button.element.style.position = "absolute";
+			}
+				
+			if (host.isHeightSizedToContent()) {
+				host.height = input.height;
+			}
+			if (host.isWidthSizedToContent()) {
+				host.width = input.width + button.width;
 			}
 		}
 		

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
new file mode 100644
index 0000000..fcf9154
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
@@ -0,0 +1,290 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.beads
+{
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.IDataGridPresentationModel;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.DataGrid;
+	import org.apache.flex.html.DataGridButtonBar;
+	import org.apache.flex.html.Container;
+	import org.apache.flex.html.beads.layouts.ButtonBarLayout;
+	import org.apache.flex.html.beads.models.ButtonBarModel;
+	import org.apache.flex.html.supportClasses.DataGridColumn;
+	import org.apache.flex.html.supportClasses.DataGridColumnList;
+	import org.apache.flex.html.supportClasses.Viewport;
+	
+	COMPILE::SWF {
+		import org.apache.flex.core.SimpleCSSStyles;
+	}
+
+	/**
+	 *  The DataGridPercentageView class is the visual bead for the org.apache.flex.html.DataGrid.
+	 *  This class constructs the items that make the DataGrid: Lists for each column and a
+	 *  org.apache.flex.html.ButtonBar for the column headers. This class interprets the
+	 *  columnWidth value of each column to be a percentage rather than a pixel value.
+	 *
+	 *  @viewbead
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class DataGridPercentageView extends GroupView implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function DataGridPercentageView()
+		{
+			super();
+		}
+
+		private var _strand:IStrand;
+		private var _header:DataGridButtonBar;
+		private var _listArea:Container;
+		
+		private var _lists:Array;
+		
+		/**
+		 * An array of List objects the comprise the columns of the DataGrid.
+		 */
+		public function get columnLists():Array
+		{
+			return _lists;
+		}
+		
+		/**
+		 * The area used to hold the columns
+		 *
+		 */
+		public function get listArea():Container
+		{
+			return _listArea;
+		}
+		
+		/**
+		 * Returns the component used as the header for the DataGrid.
+		 */
+		public function get header():IUIBase
+		{
+			return _header;
+		}
+
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			_strand = value;
+
+			var host:DataGrid = value as DataGrid;
+
+			_header = new DataGridButtonBar();
+			_header.height = 30;
+
+			_listArea = new Container();
+			_listArea.className = "DataGridListArea";
+			
+			COMPILE::SWF {
+				_header.style = new SimpleCSSStyles();
+				_header.style.flexGrow = 0;
+				
+				_listArea.style = new SimpleCSSStyles();
+				_listArea.style.flexGrow = 1;
+			}
+			COMPILE::JS {
+				_header.element.style["flex-grow"] = "0";
+				_listArea.element.style["flex-grow"] = "1";
+			}
+
+			finishSetup(null);
+		}
+
+		/**
+		 * @private
+		 */
+		private function finishSetup(event:Event):void
+		{
+			var host:DataGrid = _strand as DataGrid;
+			
+			if (_lists == null || _lists.length == 0) {
+				createLists();
+			}
+
+			// see if there is a presentation model already in place. if not, add one.
+			var presentationModel:IDataGridPresentationModel = host.presentationModel;
+			var sharedModel:IDataGridModel = host.model as IDataGridModel;
+			IEventDispatcher(sharedModel).addEventListener("dataProviderChanged",handleDataProviderChanged);
+			IEventDispatcher(sharedModel).addEventListener("selectedIndexChanged", handleSelectedIndexChanged);
+
+			var columnLabels:Array = new Array();
+			var buttonWidths:Array = new Array();
+
+			for(var i:int=0; i < sharedModel.columns.length; i++) {
+				var dgc:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+				columnLabels.push(dgc.label);
+				var colWidth:Number = dgc.columnWidth;
+				buttonWidths.push(colWidth);
+				
+				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
+				if (!isNaN(colWidth)) {
+					list.percentWidth = Number(colWidth);
+				} else {
+					COMPILE::SWF {
+						list.style = new SimpleCSSStyles();
+						list.style.flexGrow = 1;
+					}
+						COMPILE::JS {
+							list.element.style["flex-grow"] = "1";
+						}
+				}
+			}
+
+			var bblayout:ButtonBarLayout = new ButtonBarLayout();
+			_header.buttonWidths = buttonWidths
+			_header.widthType = ButtonBarModel.PERCENT_WIDTHS;
+			_header.dataProvider = columnLabels;
+			_header.addBead(bblayout);
+			_header.addBead(new Viewport());
+			host.addElement(_header);
+
+			host.addElement(_listArea);
+
+			handleDataProviderChanged(event);
+		}
+
+		/**
+		 * @private
+		 */
+		private function handleSizeChanges(event:Event):void
+		{	
+			_header.dispatchEvent(new Event("layoutChanged"));
+			_listArea.dispatchEvent(new Event("layoutChanged"));
+		}
+
+		/**
+		 * @private
+		 */
+		private function handleDataProviderChanged(event:Event):void
+		{
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+
+			for (var i:int=0; i < _lists.length; i++)
+			{
+				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
+				var listModel:ISelectionModel = list.getBeadByType(IBeadModel) as ISelectionModel;
+				listModel.dataProvider = sharedModel.dataProvider;
+			}
+
+			host.dispatchEvent(new Event("layoutNeeded"));
+		}
+		
+		/**
+		 * @private
+		 */
+		private function handleSelectedIndexChanged(event:Event):void
+		{
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			var newIndex:int = sharedModel.selectedIndex;
+			
+			for (var i:int=0; i < _lists.length; i++)
+			{
+				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
+				list.selectedIndex = newIndex;
+			}
+		}
+
+		/**
+		 * @private
+		 */
+		private function handleColumnListChange(event:Event):void
+		{
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			var list:DataGridColumnList = event.target as DataGridColumnList;
+			sharedModel.selectedIndex = list.selectedIndex;
+
+			for(var i:int=0; i < _lists.length; i++) {
+				if (list != _lists[i]) {
+					var otherList:DataGridColumnList = _lists[i] as DataGridColumnList;
+					otherList.selectedIndex = list.selectedIndex;
+				}
+			}
+
+			host.dispatchEvent(new Event('change'));
+		}
+
+		/**
+		 * @private
+		 */
+		private function createLists():void
+		{
+			var host:DataGrid = _strand as DataGrid;
+			
+			var sharedModel:IDataGridModel = host.model as IDataGridModel;
+			var presentationModel:IDataGridPresentationModel = host.presentationModel;
+
+			_lists = new Array();
+
+			for (var i:int=0; i < sharedModel.columns.length; i++) {
+				var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+
+				var list:DataGridColumnList = new DataGridColumnList();
+				list.id = "dataGridColumn"+String(i);
+				list.addBead(sharedModel);
+				list.itemRenderer = dataGridColumn.itemRenderer;
+				list.labelField = dataGridColumn.dataField;
+				list.addEventListener('change',handleColumnListChange);
+				list.addBead(presentationModel);
+				
+				if (i == 0) {
+					list.className = "first";
+				} else if (i == sharedModel.columns.length-1) {
+					list.className = "last";
+				} else {
+					list.className = "middle";
+				}
+
+				_listArea.addElement(list);
+				_lists.push(list);
+			}
+
+			host.dispatchEvent(new Event("layoutNeeded"));
+		}
+	}
+}
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
index 6e2a8c5..bda0f01 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
@@ -18,17 +18,13 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.beads
 {
-	import org.apache.flex.core.IBead;
 	import org.apache.flex.core.IBeadModel;
-	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.IBeadView;
 	import org.apache.flex.core.IDataGridModel;
 	import org.apache.flex.core.IDataGridPresentationModel;
-	import org.apache.flex.core.ISelectableItemRenderer;
 	import org.apache.flex.core.ISelectionModel;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
-	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
@@ -36,14 +32,14 @@ package org.apache.flex.html.beads
 	import org.apache.flex.html.DataGridButtonBar;
 	import org.apache.flex.html.Container;
 	import org.apache.flex.html.beads.layouts.ButtonBarLayout;
-	import org.apache.flex.html.beads.layouts.VerticalLayout;
-	import org.apache.flex.html.beads.layouts.HorizontalLayout;
-	import org.apache.flex.html.beads.layouts.IDataGridLayout;
 	import org.apache.flex.html.beads.models.ButtonBarModel;
 	import org.apache.flex.html.supportClasses.DataGridColumn;
 	import org.apache.flex.html.supportClasses.DataGridColumnList;
-	import org.apache.flex.html.supportClasses.ScrollingViewport;
 	import org.apache.flex.html.supportClasses.Viewport;
+	
+	COMPILE::SWF {
+		import org.apache.flex.core.SimpleCSSStyles;
+	}
 
 	/**
 	 *  The DataGridView class is the visual bead for the org.apache.flex.html.DataGrid.
@@ -56,7 +52,7 @@ package org.apache.flex.html.beads
 	 *  @playerversion AIR 2.6
 	 *  @productversion FlexJS 0.0
 	 */
-	public class DataGridView implements IBeadView
+	public class DataGridView extends GroupView implements IBeadView
 	{
 		/**
 		 *  constructor.
@@ -68,6 +64,7 @@ package org.apache.flex.html.beads
 		 */
 		public function DataGridView()
 		{
+			super();
 		}
 
 		private var _strand:IStrand;
@@ -92,14 +89,6 @@ package org.apache.flex.html.beads
 		{
 			return _listArea;
 		}
-
-		/**
-		 * @private
-		 */
-		public function get host():IUIBase
-		{
-			return _strand as IUIBase;
-		}
 		
 		/**
 		 * Returns the component used as the header for the DataGrid.
@@ -117,27 +106,29 @@ package org.apache.flex.html.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		public function set strand(value:IStrand):void
+		override public function set strand(value:IStrand):void
 		{
+			super.strand = value;
 			_strand = value;
 
-			var host:UIBase = value as UIBase;
+			var host:DataGrid = value as DataGrid;
 
 			_header = new DataGridButtonBar();
-
-			var scrollPort:ScrollingViewport = new ScrollingViewport();
+			_header.height = 30;
 
 			_listArea = new Container();
 			_listArea.className = "DataGridListArea";
-			_listArea.addBead(scrollPort);
 			
-			if (_strand.getBeadByType(IBeadLayout) == null) {
-				var c:Class = ValuesManager.valuesImpl.getValue(host, "iBeadLayout");
-				if (c)
-				{
-					var layout:IBeadLayout = new c() as IBeadLayout;
-					_strand.addBead(layout);
-				}
+			COMPILE::SWF {
+				_header.style = new SimpleCSSStyles();
+				_header.style.flexGrow = 0;
+				
+				_listArea.style = new SimpleCSSStyles();
+				_listArea.style.flexGrow = 1;
+			}
+			COMPILE::JS {
+				_header.element.style["flex-grow"] = "0";
+				_listArea.element.style["flex-grow"] = "1";
 			}
 
 			finishSetup(null);
@@ -149,6 +140,10 @@ package org.apache.flex.html.beads
 		private function finishSetup(event:Event):void
 		{
 			var host:DataGrid = _strand as DataGrid;
+			
+			if (_lists == null || _lists.length == 0) {
+				createLists();
+			}
 
 			// see if there is a presentation model already in place. if not, add one.
 			var presentationModel:IDataGridPresentationModel = host.presentationModel;
@@ -157,18 +152,37 @@ package org.apache.flex.html.beads
 			IEventDispatcher(sharedModel).addEventListener("selectedIndexChanged", handleSelectedIndexChanged);
 
 			var columnLabels:Array = new Array();
+			var buttonWidths:Array = new Array();
+			
+			var marginBorderOffset:int = 0;
+			COMPILE::SWF {
+				marginBorderOffset = 1;
+			}
 
 			for(var i:int=0; i < sharedModel.columns.length; i++) {
 				var dgc:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
 				columnLabels.push(dgc.label);
+				var colWidth:Number = dgc.columnWidth - marginBorderOffset;
+				buttonWidths.push(colWidth);
+				
+				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
+				if (!isNaN(colWidth)) {
+					list.width = Number(colWidth - marginBorderOffset);
+				} else {
+					COMPILE::SWF {
+						list.style = new SimpleCSSStyles();
+						list.style.flexGrow = 1;
+					}
+						COMPILE::JS {
+							list.element.style["flex-grow"] = "1";
+						}
+				}
 			}
 
 			var bblayout:ButtonBarLayout = new ButtonBarLayout();
-			//var buttonBarModel:ButtonBarModel = new ButtonBarModel();
-			//buttonBarModel.dataProvider = columnLabels;
-
+			_header.buttonWidths = buttonWidths
+			_header.widthType = ButtonBarModel.PIXEL_WIDTHS;
 			_header.dataProvider = columnLabels;
-			//_header.addBead(buttonBarModel);
 			_header.addBead(bblayout);
 			_header.addBead(new Viewport());
 			host.addElement(_header);
@@ -183,11 +197,8 @@ package org.apache.flex.html.beads
 		 */
 		private function handleSizeChanges(event:Event):void
 		{	
-			var layoutBead:IDataGridLayout = _strand.getBeadByType(IBeadLayout) as IDataGridLayout;
-			layoutBead.header = _header;
-			layoutBead.columns = _lists;
-			layoutBead.listArea = _listArea;
-			layoutBead.layout();
+			_header.dispatchEvent(new Event("layoutChanged"));
+			_listArea.dispatchEvent(new Event("layoutChanged"));
 		}
 
 		/**
@@ -197,10 +208,6 @@ package org.apache.flex.html.beads
 		{
 			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
 
-			if (_lists == null || _lists.length == 0) {
-				createLists();
-			}
-
 			for (var i:int=0; i < _lists.length; i++)
 			{
 				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
@@ -254,7 +261,6 @@ package org.apache.flex.html.beads
 			
 			var sharedModel:IDataGridModel = host.model as IDataGridModel;
 			var presentationModel:IDataGridPresentationModel = host.presentationModel;
-			//var listWidth:Number = host.width / sharedModel.columns.length;
 
 			_lists = new Array();
 
@@ -268,6 +274,14 @@ package org.apache.flex.html.beads
 				list.labelField = dataGridColumn.dataField;
 				list.addEventListener('change',handleColumnListChange);
 				list.addBead(presentationModel);
+				
+				if (i == 0) {
+					list.className = "first";
+				} else if (i == sharedModel.columns.length-1) {
+					list.className = "last";
+				} else {
+					list.className = "middle";
+				}
 
 				_listArea.addElement(list);
 				_lists.push(list);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
index ab9fd89..cb8402f 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
@@ -145,7 +145,7 @@ package org.apache.flex.html.beads
 			{
 				var tf:ITextItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ITextItemRenderer;
                 tf.index = i;
-                dataGroup.addElement(tf);
+                dataGroup.addItemRenderer(tf);
                 if (selectionModel.labelField)
                     tf.text = dp[i][selectionModel.labelField];
                 else

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
index b381b5b..a3d3dc2 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
@@ -58,12 +58,12 @@ package org.apache.flex.html.beads.controllers
 			}
 			
 			IEventDispatcher(viewBead.popupButton).addEventListener("click", handleButtonClick);
-			IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
 		}
 		
 		private function handleButtonClick(event:MouseEvent):void
 		{			
 			viewBead.popUpVisible = !viewBead.popUpVisible;
+			IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
 		}
 		
 		private function handleListChange(event:Event):void

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
index 0d3668d..761e1c7 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
@@ -18,25 +18,28 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.beads.layouts
 {
-	import org.apache.flex.core.LayoutBase;
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ILayoutHost;
-	import org.apache.flex.core.ILayoutView;
 	import org.apache.flex.core.ILayoutParent;
+	import org.apache.flex.core.ILayoutView;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.ISelectableItemRenderer;
 	import org.apache.flex.core.ISelectionModel;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
 	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.core.LayoutBase;
+	import org.apache.flex.core.SimpleCSSStyles;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
-	import org.apache.flex.core.SimpleCSSStyles;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
 	import org.apache.flex.html.List;
 	import org.apache.flex.html.beads.ButtonBarView;
 	import org.apache.flex.html.beads.models.ButtonBarModel;
+	import org.apache.flex.geom.Rectangle;
+	import org.apache.flex.utils.CSSUtils;
+	import org.apache.flex.utils.CSSContainerUtils;
 
 	/**
 	 *  The ButtonBarLayout class bead sizes and positions the org.apache.flex.html.Button
@@ -111,6 +114,10 @@ package org.apache.flex.html.beads.layouts
 
 						if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
 							if (widthValue != null) UIBase(ir).width = Number(widthValue);
+							if (UIBase(ir).style == null) {
+								UIBase(ir).style = new SimpleCSSStyles();
+							}
+							UIBase(ir).style.flexGrow = 0;
 						}
 						else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
 							if (widthValue != null) {
@@ -122,6 +129,10 @@ package org.apache.flex.html.beads.layouts
 						}
 						else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
 							if (widthValue != null) UIBase(ir).percentWidth = Number(widthValue);
+							if (UIBase(ir).style == null) {
+								UIBase(ir).style = new SimpleCSSStyles();
+							}
+							UIBase(ir).style.flexGrow = 0;
 						}
 					} else {
 						if (UIBase(ir).style == null) {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
deleted file mode 100644
index cc37382..0000000
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
+++ /dev/null
@@ -1,271 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  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.html.beads.layouts
-{	
-	import org.apache.flex.core.IBead;
-	import org.apache.flex.core.IBeadLayout;
-	import org.apache.flex.core.IBeadModel;
-	import org.apache.flex.core.IBeadView;
-	import org.apache.flex.core.IDataGridModel;
-	import org.apache.flex.core.ILayoutHost;
-	import org.apache.flex.core.IStrand;
-	import org.apache.flex.core.IUIBase;
-	import org.apache.flex.core.UIBase;
-	import org.apache.flex.events.Event;
-	import org.apache.flex.events.IEventDispatcher;
-	import org.apache.flex.html.ButtonBar;
-	import org.apache.flex.html.beads.DataGridView;
-	import org.apache.flex.html.beads.layouts.BasicLayout;
-	import org.apache.flex.html.beads.models.ButtonBarModel;
-	import org.apache.flex.html.supportClasses.DataGridColumnList;
-	import org.apache.flex.html.supportClasses.DataGridColumn;
-	
-	/**
-	 * DataGridLayout is a class that handles the size and positioning of the
-	 * elements of a DataGrid. This includes the ButtonBar used for the column
-	 * headers and the Lists that are the columns.
-	 *  
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion FlexJS 0.0
-	 */
-	public class DataGridLayout implements IDataGridLayout
-	{
-		/**
-		 *  constructor
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function DataGridLayout()
-		{
-		}
-		
-		private var _strand:IStrand;
-		
-		/**
-		 *  @copy org.apache.flex.core.IBead#strand
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function set strand(value:IStrand):void
-		{
-			_strand = value;
-			
-			var host:UIBase = value as UIBase;
-			
-			var view:DataGridView = host.view as DataGridView;
-			
-			header = view.header;
-			listArea = view.listArea;
-			
-			var anylayout:IBead = listArea.getBeadByType(IBeadLayout);
-			if (anylayout != null) {
-				listArea.removeBead(anylayout);
-			}
-			listArea.addBead(new BasicLayout());
-			
-			host.addEventListener("widthChanged", handleSizeChanges);
-			host.addEventListener("heightChanged", handleSizeChanges);
-			host.addEventListener("sizeChanged", handleSizeChanges);
-			host.addEventListener("layoutNeeded", handleSizeChanges);
-		}
-		
-		private var _header:UIBase;
-		
-		/**
-		 * The element that is the header for the DataGrid
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function get header():IUIBase
-		{
-			return _header;
-		}
-		public function set header(value:IUIBase):void
-		{
-			_header = UIBase(value);
-		}
-		
-		private var _columns:Array;
-		
-		/**
-		 * The array of column elements.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function get columns():Array
-		{
-			return _columns;
-		}
-		public function set columns(value:Array):void
-		{
-			_columns = value;
-		}
-		
-		private var _listArea:IUIBase;
-		
-		public function get listArea():IUIBase
-		{
-			return _listArea;
-		}
-		public function set listArea(value:IUIBase):void
-		{
-			_listArea = value;
-		}
-		
-        /**
-         * @copy org.apache.flex.core.IBeadLayout#layout
-         */
-		COMPILE::SWF
-		public function layout():Boolean
-		{						
-			if (columns == null || columns.length == 0) {
-				return false;
-			}
-			var host:UIBase = _strand as UIBase;
-			
-			var useWidth:Number = host.width;
-			var useHeight:Number = host.height;
-
-			if (host.height > 0) {
-				useHeight = host.height - _header.height;
-			}
-			
-			_listArea.x = 0;
-			_listArea.y = 26;
-			_listArea.width = useWidth;
-			_listArea.height = useHeight;
-
-			var sharedModel:IDataGridModel = host.model as IDataGridModel;
-			var buttonWidths:Array = [];
-
-			if (_columns != null && _columns.length > 0) {
-				var xpos:Number = 0;
-				var listWidth:Number = host.width / _columns.length;
-				for (var i:int=0; i < _columns.length; i++) {
-					var list:DataGridColumnList = _columns[i] as DataGridColumnList;
-					list.x = xpos;
-					list.y = 0;
-
-					var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
-					var colWidth:Number = dataGridColumn.columnWidth;
-					if (!isNaN(colWidth)) list.width = colWidth;
-					else list.width = listWidth;
-
-					xpos += list.width;
-					
-					buttonWidths.push(list.width);
-				}
-			}
-			
-			var bar:ButtonBar = header as ButtonBar;
-			bar.buttonWidths = buttonWidths;
-			bar.widthType = ButtonBarModel.PIXEL_WIDTHS;
-			bar.dispatchEvent(new Event("layoutNeeded"));
-			
-			_header.x = 0;
-			_header.y = 0;
-			_header.width = useWidth;
-			_header.height = 25;
-			_header.dispatchEvent(new Event("layoutNeeded"));
-			
-			return true;
-		}
-		
-		/**
-		 * @copy org.apache.flex.core.IBeadLayout#layout
-		 */
-		COMPILE::JS
-		public function layout():Boolean
-		{						
-			if (columns == null || columns.length == 0) {
-				return false;
-			}
-			var host:UIBase = _strand as UIBase;
-			
-			var sharedModel:IDataGridModel = host.model as IDataGridModel;
-			var buttonWidths:Array = [];
-			
-			if (_columns != null && _columns.length > 0) {
-				var listWidth:Number = host.width / _columns.length;
-				for (var i:int=0; i < _columns.length; i++) {
-					var list:DataGridColumnList = _columns[i] as DataGridColumnList;
-					list.element.style["position"] = null;
-					list.element.style["height"] = null;
-					
-					
-					var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
-					var colWidth:Number = dataGridColumn.columnWidth;
-					if (!isNaN(colWidth)) list.width = colWidth;
-					else list.width = listWidth;
-										
-					buttonWidths.push(list.width);
-				}
-			}
-			
-			var bar:ButtonBar = header as ButtonBar;
-			bar.buttonWidths = buttonWidths;
-			bar.widthType = ButtonBarModel.PIXEL_WIDTHS;
-			bar.dispatchEvent(new Event("layoutNeeded"));
-			
-			host.element.style.display = "flex";
-			host.element.style["flex-flow"] = "column";
-			host.element.style["justify-content"] = "stretch";
-			
-			_header.height = 25;
-			_header.percentWidth = 100;
-			
-			_listArea.element.style["flex-grow"] = "2";
-			_listArea.element.style["position"] = null;
-			_listArea.element.style["height"] = null;
-			
-			var listView:ILayoutHost = UIBase(_listArea).view as ILayoutHost;
-			listView.contentView.element.style["display"] = "flex";
-			listView.contentView.element.style["flex-flow"] = "row";
-			
-			return true;
-		}
-		
-		/**
-		 * @private
-		 */
-		private function handleSizeChanges(event:Event):void
-		{
-			var view:DataGridView = UIBase(_strand).view as DataGridView;
-			if (view == null) return;
-			
-			columns = view.columnLists;
-			
-			layout();
-		}
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
deleted file mode 100644
index 907cf9d..0000000
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
+++ /dev/null
@@ -1,303 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  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.html.beads.layouts
-{	
-	import org.apache.flex.core.IBead;
-	import org.apache.flex.core.IBeadLayout;
-	import org.apache.flex.core.IBeadView;
-	import org.apache.flex.core.IDataGridModel;
-	import org.apache.flex.core.ILayoutHost;
-	import org.apache.flex.core.IStrand;
-	import org.apache.flex.core.IUIBase;
-	import org.apache.flex.core.UIBase;
-	import org.apache.flex.events.Event;
-	import org.apache.flex.events.IEventDispatcher;
-	import org.apache.flex.html.ButtonBar;
-	import org.apache.flex.html.beads.DataGridView;
-	import org.apache.flex.html.beads.layouts.HorizontalLayout;
-	import org.apache.flex.html.beads.models.ButtonBarModel;
-	import org.apache.flex.html.supportClasses.DataGridColumnList;
-	import org.apache.flex.html.supportClasses.DataGridColumn;
-	
-	/**
-	 * DataGridPercentageLayout is a class that handles the size and positioning of the
-	 * elements of a DataGrid. This includes the ButtonBar used for the column
-	 * headers and the Lists that are the columns. The columns are sized on their
-	 * percentage of the width of the DataGrid space.
-	 *  
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion FlexJS 0.0
-	 */
-	public class DataGridPercentageLayout implements IDataGridLayout
-	{
-		/**
-		 *  constructor
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function DataGridPercentageLayout()
-		{
-		}
-		
-		private var _strand:IStrand;
-		
-		/**
-		 *  @copy org.apache.flex.core.IBead#strand
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function set strand(value:IStrand):void
-		{
-			_strand = value;
-			
-			var host:UIBase = value as UIBase;
-			
-			var view:DataGridView = host.view as DataGridView;
-			
-			header = view.header;
-			listArea = view.listArea;
-			
-			var anylayout:IBead = listArea.getBeadByType(IBeadLayout);
-			if (anylayout != null) {
-				listArea.removeBead(anylayout);
-			}
-			listArea.addBead(new BasicLayout());
-			
-			host.addEventListener("widthChanged", handleSizeChanges);
-			host.addEventListener("heightChanged", handleSizeChanges);
-			host.addEventListener("sizeChanged", handleSizeChanges);
-			host.addEventListener("layoutNeeded", handleSizeChanges);
-			
-			// listen for beadsAdded to signal that the strand is set with its size
-			// and beads.
-			host.addEventListener("beadsAdded", beadsAddedHandler);
-		}
-		
-		private var runNeeded:Boolean = false;
-		private var hostReady:Boolean = false;
-		
-		private var _header:UIBase;
-		
-		/**
-		 * The element that is the header for the DataGrid
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function get header():IUIBase
-		{
-			return _header;
-		}
-		public function set header(value:IUIBase):void
-		{
-			_header = UIBase(value);
-		}
-		
-		private var _columns:Array;
-		
-		/**
-		 * The array of column elements.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function get columns():Array
-		{
-			return _columns;
-		}
-		public function set columns(value:Array):void
-		{
-			_columns = value;
-		}
-		
-		private var _listArea:IUIBase;
-		
-		public function get listArea():IUIBase
-		{
-			return _listArea;
-		}
-		public function set listArea(value:IUIBase):void
-		{
-			_listArea = value;
-		}
-		
-		private function beadsAddedHandler(event:Event):void
-		{
-			var host:UIBase = _strand as UIBase;
-			
-			var useWidth:Number = host.width;
-			var useHeight:Number = host.height;
-			
-			hostReady = true;
-			if (runNeeded) {
-				runNeeded = false;
-				layout();
-			}
-		}
-		
-		/**
-		 * @copy org.apache.flex.core.IBeadLayout#layout
-		 */
-		COMPILE::SWF
-		public function layout():Boolean
-		{			
-			if (!hostReady) {
-				runNeeded = true;
-				return false;
-			}
-			
-			if (columns == null || columns.length == 0) {
-				return false;
-			}
-			var host:UIBase = _strand as UIBase;
-			
-			var useWidth:Number = host.width;
-			var useHeight:Number = host.height;
-			
-			if (host.height > 0) {
-				useHeight = host.height - _header.height;
-			}
-			
-			_listArea.x = 0;
-			_listArea.y = 26;
-			_listArea.width = useWidth;
-			_listArea.height = useHeight;
-			
-			var sharedModel:IDataGridModel = host.model as IDataGridModel;
-			var buttonWidths:Array = [];
-			
-			if (_columns != null && _columns.length > 0) {
-				var xpos:Number = 0;
-				var listWidth:Number = host.width / _columns.length;
-				for (var i:int=0; i < _columns.length; i++) {
-					var list:DataGridColumnList = _columns[i] as DataGridColumnList;
-					list.x = xpos;
-					list.y = 0;
-					
-					var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
-					var colWidth:Number = dataGridColumn.columnWidth;
-					if (!isNaN(colWidth)) {
-						list.percentWidth = colWidth;
-						colWidth = host.width * (colWidth/100.0);
-					}
-					else {
-						list.width = listWidth;
-						colWidth = listWidth;
-					}
-					
-					xpos += colWidth;
-					
-					buttonWidths.push(colWidth);
-				}
-			}
-			
-			var bar:ButtonBar = header as ButtonBar;
-			bar.buttonWidths = buttonWidths;
-			bar.widthType = ButtonBarModel.PERCENT_WIDTHS;
-			bar.dispatchEvent(new Event("layoutNeeded"));
-			
-			_header.x = 0;
-			_header.y = 0;
-			_header.width = useWidth;
-			_header.height = 25;
-			_header.dispatchEvent(new Event("layoutNeeded"));
-			
-			return true;
-		}
-		
-		/**
-		 * @copy org.apache.flex.core.IBeadLayout#layout
-		 */
-		COMPILE::JS
-		public function layout():Boolean
-		{						
-			if (columns == null || columns.length == 0) {
-				return false;
-			}
-			var host:UIBase = _strand as UIBase;
-			
-			var sharedModel:IDataGridModel = host.model as IDataGridModel;
-			var buttonWidths:Array = [];
-			
-			if (_columns != null && _columns.length > 0) {
-				var listWidth:Number = host.width / _columns.length;
-				for (var i:int=0; i < _columns.length; i++) {
-					var list:DataGridColumnList = _columns[i] as DataGridColumnList;
-					list.element.style["position"] = null;
-					list.element.style["height"] = null;
-					
-					
-					var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
-					var colWidth:Number = dataGridColumn.columnWidth;
-					if (!isNaN(colWidth)) list.percentWidth = colWidth;
-					else list.width = listWidth;
-					
-					buttonWidths.push(list.width);
-				}
-			}
-			
-			var bar:ButtonBar = header as ButtonBar;
-			bar.buttonWidths = buttonWidths;
-			bar.widthType = ButtonBarModel.PERCENT_WIDTHS;
-			bar.dispatchEvent(new Event("layoutNeeded"));
-			
-			host.element.style.display = "flex";
-			host.element.style["flex-flow"] = "column";
-			host.element.style["justify-content"] = "stretch";
-			
-			_header.height = 25;
-			_header.percentWidth = 100;
-			
-			_listArea.element.style["flex-grow"] = "2";
-			_listArea.element.style["position"] = null;
-			_listArea.element.style["height"] = null;
-			
-			var listView:ILayoutHost = UIBase(_listArea).view as ILayoutHost;
-			listView.contentView.element.style["display"] = "flex";
-			listView.contentView.element.style["flex-flow"] = "row";
-			
-			return true;
-		}
-		
-		/**
-		 * @private
-		 */
-		private function handleSizeChanges(event:Event):void
-		{
-			var view:DataGridView = UIBase(_strand).view as DataGridView;
-			if (view == null) return;
-			
-			columns = view.columnLists;
-			
-			layout();
-		}
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
index cb820a6..aec7308 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
@@ -133,6 +133,8 @@ package org.apache.flex.html.beads.layouts
 				hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
 				hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
 				
+				if ((hostWidth <= 0 && !hostWidthSizedToContent) || (hostHeight <= 0 && !hostHeightSizedToContent)) return false;
+				
 				var remainingWidth:Number = hostWidth;
 
 				//trace("HorizontalFlexLayout for "+UIBase(host).id+" with remainingWidth: "+remainingWidth);
@@ -159,18 +161,19 @@ package org.apache.flex.html.beads.layouts
 					}
 
 					var useHeight:Number = -1;
-					if (ilc) {
-						if (!isNaN(ilc.explicitHeight)) useHeight = ilc.explicitHeight;
-						else if (!isNaN(ilc.percentHeight)) useHeight = hostHeight * (ilc.percentHeight/100.0);
-						else useHeight = hostHeight;
+					if (!hostHeightSizedToContent) {
+						if (ilc) {
+							if (!isNaN(ilc.percentHeight)) useHeight = hostHeight * (ilc.percentHeight/100.0);
+							else if (!isNaN(ilc.explicitHeight)) useHeight = ilc.explicitHeight;
+							else useHeight = hostHeight;
+						}
 					}
-					if (useHeight > hostHeight) useHeight = hostHeight;
 
 					var useWidth:Number = -1;
 					if (ilc) {
 						if (!isNaN(ilc.explicitWidth)) useWidth = ilc.explicitWidth;
 						else if (!isNaN(ilc.percentWidth)) useWidth = hostWidth * (ilc.percentWidth/100.0);
-						else useWidth = ilc.width;
+						else if (ilc.width > 0) useWidth = ilc.width;
 					}
 					if (growValue == 0 && useWidth > 0) remainingWidth -= useWidth + margins.left + margins.right;
 					else remainingWidth -= margins.left + margins.right;
@@ -191,12 +194,12 @@ package org.apache.flex.html.beads.layouts
 				{
 					child = contentView.getElementAt(i) as IUIBase;
 					data = childData[i];
-					if (data.width == 0 || data.height == 0) continue;
+					//if (data.width == 0 || data.height == 0) continue;
 
 					useHeight = (data.height < 0 ? maxHeight : data.height);
 
 					var setWidth:Boolean = true;
-					if (data.width > 0) {
+					if (data.width != 0) {
 						if (data.grow > 0 && growCount > 0) {
 							useWidth = remainingWidth / growCount;
 							setWidth = false;
@@ -211,7 +214,9 @@ package org.apache.flex.html.beads.layouts
 					if (ilc) {
 						ilc.setX(xpos + data.ml);
 						ilc.setY(ypos + data.mt);
-						ilc.height = useHeight; //setHeight(useHeight);
+						if (data.height > 0) {
+							ilc.height = useHeight; //setHeight(useHeight);
+						}
 						if (useWidth > 0) {
 							if (setWidth) ilc.setWidth(useWidth);
 							else ilc.width = useWidth;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
deleted file mode 100644
index 2f22ec4..0000000
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
+++ /dev/null
@@ -1,52 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  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.html.beads.layouts
-{	
-	import org.apache.flex.core.IBeadLayout;
-	import org.apache.flex.core.IDataGridModel;
-	import org.apache.flex.core.IStrand;
-	import org.apache.flex.core.IUIBase;
-	import org.apache.flex.core.UIBase;
-	import org.apache.flex.events.Event;
-	import org.apache.flex.events.IEventDispatcher;
-	import org.apache.flex.html.ButtonBar;
-	import org.apache.flex.html.supportClasses.DataGridColumn;
-	
-	/**
-	 * DataGridLayout is a class that handles the size and positioning of the
-	 * elements of a DataGrid. This includes the ButtonBar used for the column
-	 * headers and the Lists that are the columns.
-	 *  
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion FlexJS 0.0
-	 */
-	public interface IDataGridLayout extends IBeadLayout
-	{
-		function get header():IUIBase;
-		function set header(value:IUIBase):void;
-		
-		function get columns():Array;
-		function set columns(value:Array):void;
-		
-		function get listArea():IUIBase;
-		function set listArea(value:IUIBase):void;
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
index 0bc9dcc..e41d9c4 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
@@ -159,18 +159,19 @@ package org.apache.flex.html.beads.layouts
 					}
 
 					var useWidth:Number = -1;
-					if (ilc) {
-						if (!isNaN(ilc.explicitWidth)) useWidth = ilc.explicitWidth;
-						else if (!isNaN(ilc.percentWidth)) useWidth = hostWidth * (ilc.percentWidth/100.0);
-						else useWidth = hostWidth;
+					if (!hostWidthSizedToContent) {
+						if (ilc) {
+							if (!isNaN(ilc.percentWidth)) useWidth = hostWidth * (ilc.percentWidth/100.0);
+							else if (!isNaN(ilc.explicitWidth)) useWidth = ilc.explicitWidth;
+							else useWidth = hostWidth;
+						}
 					}
-					if (useWidth > hostWidth) useWidth = hostWidth;
 
 					var useHeight:Number = -1;
 					if (ilc) {
 						if (!isNaN(ilc.explicitHeight)) useHeight = ilc.explicitHeight;
 						else if (!isNaN(ilc.percentHeight)) useHeight = hostHeight * (ilc.percentHeight/100.0);
-						else useHeight = ilc.height;
+						else if (ilc.height > 0) useHeight = ilc.height;
 					}
 					if (growValue == 0 && useHeight > 0) remainingHeight -= useHeight + margins.top + margins.bottom;
 					else remainingHeight -= margins.top + margins.bottom;
@@ -191,12 +192,12 @@ package org.apache.flex.html.beads.layouts
 				{
 					child = contentView.getElementAt(i) as IUIBase;
 					data = childData[i];
-					if (data.width == 0 || data.height == 0) continue;
+					//if (data.width == 0 || data.height == 0) continue;
 
 					useWidth = (data.width < 0 ? maxWidth : data.width);
 
 					var setHeight:Boolean = true;
-					if (data.height > 0) {
+					if (data.height != 0) {
 						if (data.grow > 0 && growCount > 0) {
 							useHeight = remainingHeight / growCount;
 							setHeight = false;
@@ -211,7 +212,9 @@ package org.apache.flex.html.beads.layouts
 					if (ilc) {
 						ilc.setX(xpos + data.ml);
 						ilc.setY(ypos + data.mt);
-						ilc.width = useWidth; //setWidth(useWidth);
+						if (data.width > 0) {
+							ilc.width = useWidth; //setWidth(useWidth);
+						}
 						if (useHeight > 0) {
 							if (setHeight) ilc.setHeight(useHeight);
 							else ilc.height = useHeight;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
index bb0fa65..e612517 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
@@ -56,6 +56,7 @@ package org.apache.flex.html.supportClasses
 		public function DataGridColumnList()
 		{
 			super();
+			typeNames = "DataGridColumnList";
 		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
index a58b036..fe254fe 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
@@ -32,6 +32,7 @@ package org.apache.flex.html.supportClasses
         import org.apache.flex.core.IViewportScroller;
 		import org.apache.flex.utils.CSSContainerUtils;
 		import flash.geom.Rectangle;
+		import org.apache.flex.geom.Rectangle;
     }
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
@@ -127,6 +128,7 @@ package org.apache.flex.html.supportClasses
 		 */
 		public function ScrollingViewport()
 		{
+			super();
 		}
 
 		private var _verticalScroller:ScrollBar;
@@ -191,6 +193,11 @@ package org.apache.flex.html.supportClasses
 			var hostWidth:Number = UIBase(_strand).width;
 			var hostHeight:Number = UIBase(_strand).height;
 			
+			var borderMetrics:org.apache.flex.geom.Rectangle = CSSContainerUtils.getBorderMetrics(_strand);
+			
+			hostWidth -= borderMetrics.left + borderMetrics.right;
+			hostHeight -= borderMetrics.top + borderMetrics.bottom;
+			
 			var needV:Boolean = contentSize.height > viewportHeight;
 			var needH:Boolean = contentSize.width > viewportWidth;
 			
@@ -212,8 +219,8 @@ package org.apache.flex.html.supportClasses
 			if (needV)
 			{
 				_verticalScroller.visible = true;
-				_verticalScroller.x = hostWidth - _verticalScroller.width;
-				_verticalScroller.y = 0;
+				_verticalScroller.x = UIBase(_strand).width - borderMetrics.right - _verticalScroller.width;
+				_verticalScroller.y = borderMetrics.top;
 				_verticalScroller.setHeight(hostHeight - (needH ? _horizontalScroller.height : 0), true);
 				
 				ScrollBarModel(_verticalScroller.model).maximum = contentSize.height;
@@ -232,7 +239,7 @@ package org.apache.flex.html.supportClasses
 			{
 				_horizontalScroller.visible = true;
 				_horizontalScroller.x = 0;
-				_horizontalScroller.y = hostHeight - _horizontalScroller.height - 1;
+				_horizontalScroller.y = UIBase(_strand).height - borderMetrics.bottom - _horizontalScroller.height;
 				_horizontalScroller.setWidth(hostWidth - (needV ? _verticalScroller.width : 0), true);
 				
 				ScrollBarModel(_horizontalScroller.model).maximum = contentSize.width;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
index 53e4a63..d2e8efb 100644
--- a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
@@ -124,8 +124,7 @@
     <component id="DataGridColumn" class="org.apache.flex.html.supportClasses.DataGridColumn"/>
     <component id="DataGridLinesBead" class="org.apache.flex.html.beads.DataGridLinesBead"/>
     <component id="DataGridColumnList" class="org.apache.flex.html.supportClasses.DataGridColumnList"/>
-    <component id="DataGridLayout" class="org.apache.flex.html.beads.layouts.DataGridLayout" />
-    <component id="DataGridPercentageLayout" class="org.apache.flex.html.beads.layouts.DataGridPercentageLayout" />
+    <component id="DataGridPercentageView" class="org.apache.flex.html.beads.DataGridPercentageView" />
     
     <component id="DataItemRendererFactoryForArrayData" class="org.apache.flex.html.beads.DataItemRendererFactoryForArrayData" />
     <component id="DataItemRendererFactoryForArrayList" class="org.apache.flex.html.beads.DataItemRendererFactoryForArrayList" />

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/resources/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/resources/defaults.css b/frameworks/projects/HTML/src/main/resources/defaults.css
index 999fb82..2a23422 100644
--- a/frameworks/projects/HTML/src/main/resources/defaults.css
+++ b/frameworks/projects/HTML/src/main/resources/defaults.css
@@ -114,9 +114,15 @@ ComboBox
 
 ComboBoxList
 {
+	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");
 	IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
 	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-radius: 4px;
 	border-color: #000000;
@@ -169,7 +175,7 @@ DataGrid
 	IDataGridPresentationModel: ClassReference("org.apache.flex.html.beads.models.DataGridPresentationModel");
 	IBeadView: ClassReference("org.apache.flex.html.beads.DataGridView");
 	IBeadModel: ClassReference("org.apache.flex.html.beads.models.DataGridModel");
-	IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.DataGridLayout");
+	IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalFlexLayout");
 	
 	background-color: #FFFFFF;
 	border-style: solid;
@@ -206,8 +212,9 @@ DataGridColumnList {
 
 .DataGridListArea {
 	background-color: #FFFFFF;
-	border-style: solid;
-	border-color: #333333;
+	IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.HorizontalLayout");
+	IViewport: ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+	IViewportModel: ClassReference("org.apache.flex.html.beads.models.ViewportModel");
 }
 
 /* DateChooser */
@@ -441,7 +448,7 @@ Spinner
 StringItemRenderer
 {
 	IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ItemRendererMouseController");
-	height: 16;
+	height: 24;
 	flex-shrink: 0;
 	flex-grow: 1;
 }