You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2015/11/20 21:18:57 UTC

[08/41] git commit: [flex-asjs] [refs/heads/core_js_to_as] - Changed DataGrid so that all of the columns (lists) scroll together. Fixed roll out bug in DataGrid.

Changed DataGrid so that all of the columns (lists) scroll together. Fixed roll out bug in DataGrid.


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

Branch: refs/heads/core_js_to_as
Commit: 657ce8bddff41e840eed3dd556d8db11cf8b52d8
Parents: e494d4b
Author: Peter Ent <pe...@apache.org>
Authored: Mon Oct 5 12:03:42 2015 -0400
Committer: Peter Ent <pe...@apache.org>
Committed: Mon Oct 5 12:03:42 2015 -0400

----------------------------------------------------------------------
 .../apache/flex/core/IListPresentationModel.as  |  11 +
 frameworks/projects/Core/asjs/defaults.css      |   1 -
 .../projects/Core/asjs/src/CoreASJSClasses.as   |   1 -
 .../src/org/apache/flex/core/IDataGridLayout.as |  55 ----
 .../apache/flex/core/IListPresentationModel.js  |   5 +
 frameworks/projects/Flat/as/defaults.css        |   1 -
 frameworks/projects/Flat/flat-manifest.xml      |   1 -
 frameworks/projects/HTML/as/defaults.css        |   5 +-
 .../DataItemRendererFactoryForArrayData.as      |  11 +-
 .../controllers/ItemRendererMouseController.as  |   1 +
 .../html/beads/models/ListPresentationModel.as  |  21 ++
 .../html/supportClasses/DataItemRenderer.as     |   2 +-
 .../html/supportClasses/ScrollingViewport.as    | 122 +++++++-
 .../html/supportClasses/UIItemRendererBase.as   |   9 +-
 .../apache/flex/html/supportClasses/Viewport.as |  54 +++-
 .../projects/HTML/asjs/src/HTMLASJSClasses.as   |   1 -
 .../org/apache/flex/html/beads/DataGridView.as  | 302 +++++++++++--------
 .../org/apache/flex/html/beads/IDataGridView.as |  36 ---
 .../flex/html/beads/layouts/DataGridLayout.as   | 157 ----------
 .../beads/models/DataGridPresentationModel.as   |   2 +
 frameworks/projects/HTML/basic-manifest.xml     |   1 -
 .../DataItemRendererFactoryForArrayData.js      |   5 +-
 .../html/beads/models/ListPresentationModel.js  |  19 ++
 23 files changed, 435 insertions(+), 388 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/Core/as/src/org/apache/flex/core/IListPresentationModel.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/IListPresentationModel.as b/frameworks/projects/Core/as/src/org/apache/flex/core/IListPresentationModel.as
index 0e523aa..8166c59 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/IListPresentationModel.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/IListPresentationModel.as
@@ -39,5 +39,16 @@ package org.apache.flex.core
 		 */
 		function get rowHeight():Number;
 		function set rowHeight(value:Number):void;
+		
+		/**
+		 * The distance each row should be separated from the row above.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		function get separatorThickness():Number;
+		function set separatorThickness(value:Number):void;
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/Core/asjs/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/asjs/defaults.css b/frameworks/projects/Core/asjs/defaults.css
index 1cbc544..cb9a50f 100644
--- a/frameworks/projects/Core/asjs/defaults.css
+++ b/frameworks/projects/Core/asjs/defaults.css
@@ -65,7 +65,6 @@ 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");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
     IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/Core/asjs/src/CoreASJSClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/asjs/src/CoreASJSClasses.as b/frameworks/projects/Core/asjs/src/CoreASJSClasses.as
index ef6790d..e385ade 100644
--- a/frameworks/projects/Core/asjs/src/CoreASJSClasses.as
+++ b/frameworks/projects/Core/asjs/src/CoreASJSClasses.as
@@ -27,7 +27,6 @@ package
  */
 internal class CoreASJSClasses
 {
-    import org.apache.flex.core.IDataGridLayout; IDataGridLayout;
     import org.apache.flex.core.IDataGridModel; IDataGridModel;
     import org.apache.flex.core.IDataGridPresentationModel; IDataGridPresentationModel;
     import org.apache.flex.core.IDateChooserModel; IDateChooserModel;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/Core/asjs/src/org/apache/flex/core/IDataGridLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/asjs/src/org/apache/flex/core/IDataGridLayout.as b/frameworks/projects/Core/asjs/src/org/apache/flex/core/IDataGridLayout.as
deleted file mode 100644
index d50bc27..0000000
--- a/frameworks/projects/Core/asjs/src/org/apache/flex/core/IDataGridLayout.as
+++ /dev/null
@@ -1,55 +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.core
-{
-	/**
-	 *  The IDataGridLayout interface provides the features necessary to lay
-	 *  out the components of a DataGrid: the size and position of its column
-	 *  headers and the size and position of each column.
-	 *  
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion FlexJS 0.0
-	 */
-	public interface IDataGridLayout extends IBeadLayout
-	{
-		/**
-		 *  The component used as the column header.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		function get header():IUIBase;
-		function set header(value:IUIBase):void;
-		
-		/**
-		 *  The set of components used for the columns of the DataGrid.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		function get columns():Array;
-		function set columns(value:Array):void;
-	}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/Core/js/src/org/apache/flex/core/IListPresentationModel.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/core/IListPresentationModel.js b/frameworks/projects/Core/js/src/org/apache/flex/core/IListPresentationModel.js
index 5b8be2e..4c78c74 100644
--- a/frameworks/projects/Core/js/src/org/apache/flex/core/IListPresentationModel.js
+++ b/frameworks/projects/Core/js/src/org/apache/flex/core/IListPresentationModel.js
@@ -41,6 +41,11 @@ Object.defineProperties(org.apache.flex.core.IListPresentationModel.prototype, {
     rowHeight: {
         set: function(value) {},
         get: function() {}
+    },
+    /** @export */
+    separatorThickness: {
+        set: function(value) {},
+        get: function() {}
     }
 });
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/Flat/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/defaults.css b/frameworks/projects/Flat/as/defaults.css
index 32ca37d..53a91f1 100644
--- a/frameworks/projects/Flat/as/defaults.css
+++ b/frameworks/projects/Flat/as/defaults.css
@@ -193,7 +193,6 @@ 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");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
     IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/Flat/flat-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/flat-manifest.xml b/frameworks/projects/Flat/flat-manifest.xml
index 355a76a..ac05bf7 100644
--- a/frameworks/projects/Flat/flat-manifest.xml
+++ b/frameworks/projects/Flat/flat-manifest.xml
@@ -82,7 +82,6 @@
 
     <component id="DataGrid" class="org.apache.flex.html.DataGrid" lookupOnly="true" />
     <component id="DataGridColumn" class="org.apache.flex.html.supportClasses.DataGridColumn" lookupOnly="true" />
-    <component id="DataGridLayout" class="org.apache.flex.html.beads.layouts.DataGridLayout"  lookupOnly="true" />
 
     <component id="DateChooser" class="org.apache.flex.html.DateChooser" lookupOnly="true" />
     <component id="DateField" class="org.apache.flex.html.DateField" lookupOnly="true" />

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css
index da3cb48..f3c15b9 100644
--- a/frameworks/projects/HTML/as/defaults.css
+++ b/frameworks/projects/HTML/as/defaults.css
@@ -104,7 +104,6 @@ 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");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
     IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
 
@@ -114,6 +113,10 @@ DataGrid
 	border-width: 1px;
 }
 
+.DataGridListArea {
+	background-color: #999999;
+}
+
 DateChooser {
     IBeadView:   ClassReference("org.apache.flex.html.beads.DateChooserView");
     IBeadModel:  ClassReference("org.apache.flex.html.beads.models.DateChooserModel");

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
index 0889efa..609bfbc 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
@@ -27,6 +27,8 @@ package org.apache.flex.html.beads
 	import org.apache.flex.core.ISelectionModel;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.SimpleCSSStyles;
+	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
@@ -139,11 +141,16 @@ package org.apache.flex.html.beads
 			
 			var n:int = dp.length; 
 			for (var i:int = 0; i < n; i++)
-			{
+			{				
 				var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
 				ir.index = i;
 				ir.labelField = labelField;
-				if (presentationModel) IUIBase(ir).height = presentationModel.rowHeight;
+				if (presentationModel) {
+					var style:SimpleCSSStyles = new SimpleCSSStyles();
+					style.marginBottom = presentationModel.separatorThickness;
+					UIBase(ir).style = style;
+					UIBase(ir).height = presentationModel.rowHeight;
+				}
 				dataGroup.addElement(ir);
 				ir.data = dp[i];
 			}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/ItemRendererMouseController.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/ItemRendererMouseController.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/ItemRendererMouseController.as
index 517cc5a..0b67de8 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/ItemRendererMouseController.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/controllers/ItemRendererMouseController.as
@@ -91,6 +91,7 @@ package org.apache.flex.html.beads.controllers
 			{
                 target.hovered = false;
                 target.down = false;
+				target.dispatchEvent(new Event("rollout",true));
 			}
 		}
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ListPresentationModel.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ListPresentationModel.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ListPresentationModel.as
index a97819f..897d8d6 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ListPresentationModel.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ListPresentationModel.as
@@ -68,6 +68,27 @@ package org.apache.flex.html.beads.models
 			dispatchEvent(new Event("rowHeightChanged"));
 		}
 		
+		private var _separatorThickness:Number = 0;
+		
+		/**
+		 *  The distance between rows.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get separatorThickness():Number
+		{
+			return _separatorThickness;
+		}
+		
+		public function set separatorThickness(value:Number):void
+		{
+			_separatorThickness = value;
+			dispatchEvent(new Event("separatorThicknessChanged"));
+		}
+		
 		private var _strand:IStrand;
 		
 		/**

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataItemRenderer.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataItemRenderer.as
index bf3f284..f14c736 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataItemRenderer.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataItemRenderer.as
@@ -123,7 +123,7 @@ package org.apache.flex.html.supportClasses
 			super.updateRenderer();
 			
 			background.graphics.clear();
-			background.graphics.beginFill(backgroundColor, (down||selected||hovered)?1:0);
+			background.graphics.beginFill(useColor, 1);
 			background.graphics.drawRect(0, 0, this.width, this.height);
 			background.graphics.endFill();
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
index 2de82b1..96318c7 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
@@ -35,25 +35,113 @@ package org.apache.flex.html.supportClasses
 	import org.apache.flex.html.beads.ScrollBarView;
 	import org.apache.flex.html.beads.models.ScrollBarModel;
 	
+	/**
+	 * The ScrollingViewport extends the Viewport class by adding horizontal and 
+	 * vertical scroll bars, if needed, to the content area of a Container. In
+	 * addition, the content of the Container is clipped so that items extending
+	 * outside the Container are hidden and reachable only by scrolling.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
 	public class ScrollingViewport extends Viewport implements IBead, IViewport
 	{		
+		/**
+		 * Constructor
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
 		public function ScrollingViewport()
 		{
 		}
+		
+		private var _showsVerticalScrollBar:Boolean = true;
+		
+		/**
+		 * Determines whether or not the vertical scroll bar will show if needed.
+		 * The default is true, it will show when needed.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get showsVerticalScrollBar():Boolean
+		{
+			return _showsVerticalScrollBar;
+		}
+		public function set showsVerticalScrollBar(value:Boolean):void
+		{
+			_showsVerticalScrollBar = value;
+		}
+		
+		private var _showsHorizontalScrollBar:Boolean = true;
+		
+		/**
+		 * Determines whether or not the horizontal scroll bar will show if needed.
+		 * The default is true, it will show when needed.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get showsHorizontalScrollBar():Boolean
+		{
+			return _showsHorizontalScrollBar;
+		}
+		public function set showsHorizontalScrollBar(value:Boolean):void
+		{
+			_showsHorizontalScrollBar = value;
+		}
 				
 		private var _verticalScroller:ScrollBar;
+		
+		/**
+		 * The vertical scrolling component element.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
 		public function get verticalScroller():IViewportScroller
 		{
 			return _verticalScroller;
 		}
 		
 		private var _horizontalScroller:ScrollBar
+		
+		/**
+		 * The horizontal scrolling component element.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
 		public function get horizontalScroller():IViewportScroller
 		{
 			return _horizontalScroller;
 		}
         
         private var _verticalScrollPosition:Number = 0;
+		
+		
+		/**
+		 * The position of top of the content, measured in pixels, represented by
+		 * the vertical scroller. 
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
         public function get verticalScrollPosition():Number
         {
             return _verticalScrollPosition;
@@ -65,6 +153,16 @@ package org.apache.flex.html.supportClasses
         }
         
         private var _horizontalScrollPosition:Number = 0;
+		
+		/**
+		 * The position of the left edge of the content, measured in pixels, 
+		 * represented by the horizontal scroller.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
         public function get horizontalScrollPosition():Number
         {
             return _horizontalScrollPosition;
@@ -77,6 +175,7 @@ package org.apache.flex.html.supportClasses
 		
         private var viewportWidth:Number;
         private var viewportHeight:Number;
+		
         /**
          * @copy org.apache.flex.core.IViewport 
          */
@@ -106,8 +205,8 @@ package org.apache.flex.html.supportClasses
     			var host:UIBase = UIBase(_strand);
     			var visibleWidth:Number;
                 var visibleHeight:Number;
-                var needV:Boolean = contentSize.height > viewportHeight;
-                var needH:Boolean = contentSize.width > viewportWidth;
+                var needV:Boolean = (contentSize.height > viewportHeight) && showsVerticalScrollBar;
+                var needH:Boolean = (contentSize.width > viewportWidth) && showsHorizontalScrollBar;
                 
                 if (needV)
                 {
@@ -193,7 +292,9 @@ package org.apache.flex.html.supportClasses
             return contentSize;
 		}
 		
-		
+		/**
+		 * @private
+		 */
 		private function createVerticalScrollBar():ScrollBar
 		{
 			var vsbm:ScrollBarModel = new ScrollBarModel();
@@ -211,6 +312,9 @@ package org.apache.flex.html.supportClasses
 			return vsb;
 		}
 		
+		/**
+		 * @private
+		 */
 		private function createHorizontalScrollBar():ScrollBar
 		{
 			var hsbm:ScrollBarModel = new ScrollBarModel();
@@ -228,6 +332,9 @@ package org.apache.flex.html.supportClasses
 			return hsb;
 		}
 		
+		/**
+		 * @private
+		 */
 		private function handleVerticalScroll(event:Event):void
 		{
 			var host:UIBase = UIBase(_strand);
@@ -239,6 +346,9 @@ package org.apache.flex.html.supportClasses
 			_verticalScrollPosition = vpos;
 		}
 		
+		/**
+		 * @private
+		 */
 		private function handleHorizontalScroll(event:Event):void
 		{
 			var host:UIBase = UIBase(_strand);
@@ -250,6 +360,9 @@ package org.apache.flex.html.supportClasses
 			_horizontalScrollPosition = hpos;
 		}
 		
+		/**
+		 * @private
+		 */
 		private function handleVerticalScrollChange():void
 		{
 			if (_verticalScroller) {
@@ -257,6 +370,9 @@ package org.apache.flex.html.supportClasses
 			}
 		}
 		
+		/**
+		 * @private
+		 */
 		private function handleHorizontalScrollChange():void
 		{
 			if (_horizontalScroller) {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/UIItemRendererBase.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/UIItemRendererBase.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/UIItemRendererBase.as
index d33a3aa..90c66fa 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/UIItemRendererBase.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/UIItemRendererBase.as
@@ -124,6 +124,7 @@ package org.apache.flex.html.supportClasses
 		public var highlightColor:uint = 0xCEDBEF;
 		public var selectedColor:uint = 0xA8C6EE;
 		public var downColor:uint = 0x808080;
+		protected var useColor:uint = backgroundColor;
 		
 		private var _data:Object;
 		
@@ -247,11 +248,13 @@ package org.apache.flex.html.supportClasses
 		public function updateRenderer():void
 		{
 			if (down)
-				backgroundColor = downColor;
+				useColor = downColor;
 			else if (hovered)
-				backgroundColor = highlightColor;
+				useColor = highlightColor;
 			else if (selected)
-				backgroundColor = selectedColor;
+				useColor = selectedColor;
+			else
+				useColor = backgroundColor;
 		}
 		
 		/**

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
index d731fa6..dc228f7 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
@@ -35,15 +35,38 @@ package org.apache.flex.html.supportClasses
     import org.apache.flex.utils.CSSContainerUtils;
 	
     /**
-     * @copy org.apache.flex.core.IViewport
+     * A Viewport is the area of a Container set aside for displaying
+     * content and any scrolling controls.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
      */
 	public class Viewport implements IBead, IViewport
 	{	
+		/**
+		 * Constructor
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
 		public function Viewport()
 		{
 		}
 		
 		protected var contentArea:UIBase;
+		
+		/**
+		 * Get the actual parent of the container's content.
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
         public function get contentView():IUIBase
         {
             return contentArea;
@@ -51,6 +74,14 @@ package org.apache.flex.html.supportClasses
         
 		protected var _strand:IStrand;
 		
+		/**
+		 * @copy org.apache.flex.core.IStrand
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
 		public function set strand(value:IStrand):void
 		{
 			_strand = value;
@@ -63,7 +94,12 @@ package org.apache.flex.html.supportClasses
 		}
 		
         /**
-         * @copy org.apache.flex.core.IViewport 
+         * @copy org.apache.flex.core.IViewport#setPosition()
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
          */
         public function setPosition(x:Number, y:Number):void
         {
@@ -72,7 +108,12 @@ package org.apache.flex.html.supportClasses
         }
         
         /**
-         * @copy org.apache.flex.core.IViewport 
+         * @copy org.apache.flex.core.IViewport#layoutViewportBeforeContentLayout()
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
          */
 		public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
 		{
@@ -83,7 +124,12 @@ package org.apache.flex.html.supportClasses
 		}
 		
         /**
-         * @copy org.apache.flex.core.IViewport 
+         * @copy org.apache.flex.core.IViewport#layoutViewportAfterContentLayout()
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
          */
 		public function layoutViewportAfterContentLayout():Size
 		{

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/asjs/src/HTMLASJSClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/HTMLASJSClasses.as b/frameworks/projects/HTML/asjs/src/HTMLASJSClasses.as
index 4e7b67f..73547db 100644
--- a/frameworks/projects/HTML/asjs/src/HTMLASJSClasses.as
+++ b/frameworks/projects/HTML/asjs/src/HTMLASJSClasses.as
@@ -31,7 +31,6 @@ internal class HTMLASJSClasses
 	import org.apache.flex.html.beads.DataGridView; DataGridView;
 	import org.apache.flex.html.beads.DateChooserView; DateChooserView;
 	import org.apache.flex.html.beads.DateFieldView; DateFieldView;
-	import org.apache.flex.html.beads.layouts.DataGridLayout; DataGridLayout;
     import org.apache.flex.html.beads.layouts.FlexibleFirstChildHorizontalLayout; FlexibleFirstChildHorizontalLayout;
 	import org.apache.flex.html.beads.models.DataGridModel; DataGridModel;
 	import org.apache.flex.html.beads.models.DateChooserModel; DateChooserModel;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/DataGridView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/DataGridView.as b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/DataGridView.as
index d578a6e..150294c 100644
--- a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/DataGridView.as
+++ b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/DataGridView.as
@@ -18,24 +18,26 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.beads
 {	
-    import org.apache.flex.core.BeadViewBase;
-    import org.apache.flex.core.IBead;
-    import org.apache.flex.core.IBeadModel;
-    import org.apache.flex.core.IDataGridLayout;
-    import org.apache.flex.core.IDataGridModel;
-    import org.apache.flex.core.ISelectionModel;
-    import org.apache.flex.core.IStrand;
-    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.Container;
-    import org.apache.flex.html.List;
-    import org.apache.flex.html.beads.layouts.ButtonBarLayout;
-    import org.apache.flex.html.beads.layouts.DataGridLayout;
-    import org.apache.flex.html.beads.models.ArraySelectionModel;
-    import org.apache.flex.html.beads.models.DataGridPresentationModel;
-    import org.apache.flex.html.supportClasses.DataGridColumn;
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IDataGridModel;
+	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.SimpleCSSStyles;
+	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.Container;
+	import org.apache.flex.html.List;
+	import org.apache.flex.html.beads.layouts.ButtonBarLayout;
+	import org.apache.flex.html.beads.layouts.VerticalLayout;
+	import org.apache.flex.html.beads.models.ArraySelectionModel;
+	import org.apache.flex.html.beads.models.DataGridPresentationModel;
+	import org.apache.flex.html.supportClasses.DataGridColumn;
+	import org.apache.flex.html.supportClasses.ScrollingViewport;
 	import org.apache.flex.html.supportClasses.Viewport;
 	
 	/**
@@ -48,7 +50,7 @@ package org.apache.flex.html.beads
 	 *  @playerversion AIR 2.6
 	 *  @productversion FlexJS 0.0
 	 */
-	public class DataGridView extends BeadViewBase implements IDataGridView
+	public class DataGridView implements IBeadView
 	{
 		/**
 		 *  constructor.
@@ -62,27 +64,19 @@ package org.apache.flex.html.beads
 		{
 		}
 		
-		//private var background:Shape;
-		private var buttonBar:ButtonBar;
-		private var buttonBarModel:ArraySelectionModel;
-		private var columnContainer:Container;
-		private var columns:Array;
+		private var _strand:IStrand;
+		private var _header:ButtonBar;
+		private var _listArea:Container;
+		private var _lists:Array;
 		
 		/**
-		 *  The array of org.apache.flex.html.supportClasses.DataGridColumn instances.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
+		 * @private
 		 */
-		public function getColumnLists():Array
+		public function get host():IUIBase
 		{
-			return columns;
+			return _strand as IUIBase;
 		}
 		
-		private var _strand:IStrand;
-		
 		/**
 		 *  @copy org.apache.flex.core.IBead#strand
 		 *  
@@ -91,130 +85,146 @@ package org.apache.flex.html.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		override public function set strand(value:IStrand):void
+		public function set strand(value:IStrand):void
 		{
 			_strand = value;
-			super.strand = value;
 			
-			IEventDispatcher(_strand).addEventListener("sizeChanged", onSizeChanged);
-			IEventDispatcher(_strand).addEventListener("widthChanged", onSizeChanged);
-			IEventDispatcher(_strand).addEventListener("heightChanged", onSizeChanged);
+			var host:UIBase = value as UIBase;
+			
+			_header = new ButtonBar();
+			_header.id = "dataGridHeader";
+			
+			var scrollPort:ScrollingViewport = new ScrollingViewport();
+			scrollPort.showsHorizontalScrollBar = false;
+			
+			_listArea = new Container();
+			_listArea.id = "dataGridListArea";
+			_listArea.className = "DataGridListArea";
+			_listArea.addBead(scrollPort);
+			
+			// place a border around the list area
+			var style:SimpleCSSStyles = new SimpleCSSStyles();
+			style.borderWidth = 1;
+			style.borderColor = 0x333333;
+			style.borderStyle = "solid";
+			_listArea.style = style;
+			
+			finishSetup(null);
+		}
+		
+		/**
+		 * @private
+		 */
+		private function finishSetup(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
 			
 			// see if there is a presentation model already in place. if not, add one.
-			var modBead:IBead = _strand.getBeadByType(DataGridPresentationModel);
-			var presentationModel:DataGridPresentationModel;
-			if (modBead == null) {
+			var presentationModel:DataGridPresentationModel = _strand.getBeadByType(DataGridPresentationModel) as DataGridPresentationModel;
+			if (presentationModel == null) {
 				presentationModel = new DataGridPresentationModel();
 				_strand.addBead(presentationModel);
 			}
-			else {
-				presentationModel = modBead as DataGridPresentationModel;
-			}
 			
 			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
-			IEventDispatcher(sharedModel).addEventListener("dataProviderChanged",onDataProviderChanged);
+			IEventDispatcher(sharedModel).addEventListener("dataProviderChanged",handleDataProviderChanged);
 			
-			// create an array of columnLabels for use by the ButtonBar/DataGrid header.
 			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);
+				if (!isNaN(dgc.columnWidth)) buttonWidths.push(dgc.columnWidth);
 			}
+			
 			var bblayout:ButtonBarLayout = new ButtonBarLayout();
+			if (buttonWidths.length == sharedModel.columns.length) {
+				bblayout.buttonWidths = buttonWidths;
+			}
 			
-			buttonBarModel = new ArraySelectionModel();
+			var buttonBarModel:ArraySelectionModel = new ArraySelectionModel();
 			buttonBarModel.dataProvider = columnLabels;
 			
-			buttonBar = new ButtonBar();
-			buttonBar.addBead(buttonBarModel);
-			buttonBar.addBead(bblayout);
-			buttonBar.addBead(new Viewport());
-			buttonBar.height = 25;
-			buttonBar.width = UIBase(_strand).width;
-			UIBase(_strand).addElement(buttonBar);
-			
-			// Create a List for each column, storing a reference to each List in
-			// the columns property.
-			columns = new Array();
-			for(i=0; i < sharedModel.columns.length; i++) 
-			{
-				// Each list shares the same dataProvider but needs its own model to
-				// keep track of its own data.
-				var listModel:ISelectionModel = new ArraySelectionModel();
-				listModel.dataProvider = sharedModel.dataProvider;
-				
-				var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
-				
-				var list:List = new List();
-				list.addBead(listModel); 
-				list.itemRenderer = dataGridColumn.itemRenderer;
-				list.labelField = dataGridColumn.dataField;
-				list.addBead(presentationModel);
-				
-				var colWidth:Number = dataGridColumn.columnWidth;
-				if (!isNaN(colWidth)) list.width = colWidth;
-
-				UIBase(_strand).addElement(list);
-				columns.push(list);
-				list.addEventListener('change',columnListChangeHandler);
-				list.addEventListener('rollover',columnListRollOverHandler);
-				list.addEventListener('layoutComplete',forwardEvent);
-			}
+			_header.addBead(buttonBarModel);
+			_header.addBead(bblayout);
+			_header.addBead(new Viewport());
+			host.addElement(_header);
+			
+			host.addElement(_listArea);
 			
-			// TODO: allow a developer to specify their own DataGridLayout
-			// possibly by seeing if a bead already exists
+			// do we know what the size is? If not, wait to be sized
 			
-			onSizeChanged(null);
-			IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
+			if (host.isHeightSizedToContent() || host.isWidthSizedToContent()) {
+				host.addEventListener("sizeChanged", handleSizeChanges);
+			}
+				
+				// else size now
+			else {
+				handleDataProviderChanged(event);
+			}
 		}
 		
-		private function onSizeChanged(event:Event):void
+		/**
+		 * @private
+		 */
+		private function handleSizeChanges(event:Event):void
 		{
-			var bead:IBead = _strand.getBeadByType(IDataGridLayout);
-			var layout:IDataGridLayout;
-			if (bead == null) {
-				// NOTE: the following line will not cross-compile correctly into JavaScript
-				// so it has been commented and the class hard-coded.
-				//layout = new ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout")) as IDataGridLayout;
-				layout = new DataGridLayout();
-				_strand.addBead(layout);
-			} else {
-				layout = bead as IDataGridLayout;
+			_header.x = 0;
+			_header.y = 0;
+			_header.width = host.width;
+			_header.height = 25;
+			
+			_listArea.x = 0;
+			_listArea.y = 26;
+			_listArea.width = host.width;
+			_listArea.height = host.height - _header.height;
+			
+			if (_lists != null) {
+				var xpos:Number = 0;
+				for (var i:int=0; i < _lists.length; i++) {
+					var list:List = _lists[i] as List;
+					list.x = xpos;
+					list.y = 0;
+					
+					xpos += list.width + 1;
+				}
 			}
-			layout.header = buttonBar;
-			layout.columns = columns;
-			layout.layout();
 		}
 		
 		/**
 		 * @private
-		 * When the dataProvider is changed for the DataGrid, this updates each List (column)
-		 * with the new (or changed) dataProvider.
 		 */
-		private function onDataProviderChanged(event:Event):void
+		private function handleDataProviderChanged(event:Event):void
 		{
 			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
 			
-			for (var i:int=0; i < columns.length; i++)
+			if (_lists == null || _lists.length == 0) {
+				createLists();
+			}
+			
+			for (var i:int=0; i < _lists.length; i++)
 			{
-				var list:List = columns[i] as List;
+				var list:List = _lists[i] as List;
 				var listModel:ISelectionModel = list.getBeadByType(IBeadModel) as ISelectionModel;
 				listModel.dataProvider = sharedModel.dataProvider;
 			}
+			
+			handleSizeChanges(event);
 		}
 		
 		/**
 		 * @private
 		 */
-		private function columnListChangeHandler(event:Event):void
+		private function handleColumnListChange(event:Event):void
 		{
 			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
 			var list:List = event.target as List;
 			sharedModel.selectedIndex = list.selectedIndex;
 			
-			for(var i:int=0; i < columns.length; i++) {
-				if (list != columns[i]) {
-					var otherList:List = columns[i] as List;
+			for(var i:int=0; i < _lists.length; i++) {
+				if (list != _lists[i]) {
+					var otherList:List = _lists[i] as List;
 					otherList.selectedIndex = list.selectedIndex;
 				}
 			}
@@ -225,14 +235,15 @@ package org.apache.flex.html.beads
 		/**
 		 * @private
 		 */
-		private function columnListRollOverHandler(event:Event):void
+		private function handleColumnListRollOver(event:Event):void
 		{
-			var list:List = event.target as List;
+			var itemRenderer:ISelectableItemRenderer = event.target as ISelectableItemRenderer;
+			var list:List = event.currentTarget as List;
 			if (list == null) return;
-			for(var i:int=0; i < columns.length; i++) {
-				if (list != columns[i]) {
-					var otherList:List = columns[i] as List;
-					otherList.rollOverIndex = list.rollOverIndex;
+			for(var i:int=0; i < _lists.length; i++) {
+				if (list != _lists[i]) {
+					var otherList:List = _lists[i] as List;
+					otherList.rollOverIndex = itemRenderer.index;
 				}
 			}
 			
@@ -242,10 +253,63 @@ package org.apache.flex.html.beads
 		/**
 		 * @private
 		 */
-		private function forwardEvent(event:Event):void
+		private function handleColumnListRollOut(event:Event):void
+		{
+			for(var i:int=0; i < _lists.length; i++) {
+				var otherList:List = _lists[i] as List;
+				otherList.rollOverIndex = -1;
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event('rollOver'));
+		}
+		
+		/**
+		 * @private
+		 */
+		private function createLists():void
 		{
-			IEventDispatcher(_strand).dispatchEvent(event);
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			var presentationModel:DataGridPresentationModel = _strand.getBeadByType(DataGridPresentationModel) as DataGridPresentationModel;
+			var listWidth:Number = host.width / sharedModel.columns.length;
+			
+			_lists = new Array();
+			
+			for (var i:int=0; i < sharedModel.columns.length; i++) {
+				
+				var listModel:ISelectionModel = new ArraySelectionModel();
+				listModel.dataProvider = sharedModel.dataProvider;
+				
+				var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+				
+				var list:List = new List();
+				list.id = "dataGridColumn"+String(i);
+				list.className = "DataGridColumn";
+				list.addBead(listModel); 
+				list.addBead(new Viewport()); // do not want lists to scroll independently
+				list.addBead(new VerticalLayout());
+				list.itemRenderer = dataGridColumn.itemRenderer;
+				list.labelField = dataGridColumn.dataField;
+				list.addEventListener('change',handleColumnListChange);
+				list.addEventListener('rollover',handleColumnListRollOver);
+				list.addEventListener('rollout',handleColumnListRollOut);
+				list.addBead(presentationModel);
+				
+				// do not want lists to have their own sizes
+				var style:SimpleCSSStyles = new SimpleCSSStyles();
+				style.borderWidth = 0;
+				style.backgroundColor = 0xFFFFFF;
+				list.style = style;
+				
+				var colWidth:Number = dataGridColumn.columnWidth;
+				if (!isNaN(colWidth)) list.width = colWidth - 1;
+				else list.width = listWidth - 1;
+				
+				_listArea.addElement(list);	
+				_lists.push(list);
+			}
+			
+			_listArea.dispatchEvent(new Event("layoutNeeded"));
 		}
-		 
 	}
 }
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/IDataGridView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/IDataGridView.as b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/IDataGridView.as
deleted file mode 100644
index 8f04d11..0000000
--- a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/IDataGridView.as
+++ /dev/null
@@ -1,36 +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
-{
-	import org.apache.flex.core.IBeadView;
-	
-	/**
-	 *  The IDataGridView interface marks as a component as being the bead that
-	 *  can create the visual pieces for a org.apache.flex.html.DataGrid. 
-	 *  
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion FlexJS 0.0
-	 */
-	public interface IDataGridView extends IBeadView
-	{
-		
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/DataGridLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/DataGridLayout.as b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/DataGridLayout.as
deleted file mode 100644
index f6849ce..0000000
--- a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/DataGridLayout.as
+++ /dev/null
@@ -1,157 +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.IDataGridLayout;
-	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 class DataGridLayout implements IBeadLayout, 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;
-		}
-		
-		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;
-		}
-		
-        /**
-         * @copy org.apache.flex.core.IBeadLayout#layout
-         */
-		public function layout():Boolean
-		{						
-			var sw:Number = UIBase(_strand).width;
-			var sh:Number = UIBase(_strand).height;
-			
-			var columnHeight:Number = Math.floor(sh - header.height);
-			var columnWidth:Number  = Math.floor(sw / columns.length);
-			
-			var xpos:Number = 0;
-			var ypos:Number = Math.floor(header.height);
-			
-			// TODO: change the layout so that the model's DataGridColumn.columnWidth
-			// isn't used blindly, but is considered in the overall width. In other words,
-			// right now the width could exceed the strand's width.
-			var model:IDataGridModel = _strand.getBeadByType(IDataGridModel) as IDataGridModel;
-			
-			var buttonWidths:Array = new Array();
-			
-			for(var i:int=0; i < columns.length; i++) {
-				var column:UIBase = columns[i] as UIBase;
-				column.x = xpos;
-				column.y = ypos;
-				column.height = columnHeight;
-				
-				var dgc:DataGridColumn = model.columns[i];
-				if (!isNaN(dgc.columnWidth)) column.width = dgc.columnWidth;
-				else column.width  = columnWidth;
-				
-				xpos += column.width;
-				
-				buttonWidths.push(column.width);
-			}
-			
-			var bar:ButtonBar = header as ButtonBar;
-			var barLayout:ButtonBarLayout = bar.getBeadByType(ButtonBarLayout) as ButtonBarLayout;
-			barLayout.buttonWidths = buttonWidths;
-			
-			header.x = 0;
-			header.y = 0;
-			header.width = sw;
-			header.dispatchEvent(new Event("layoutNeeded"));
-			
-			return true;
-		}
-	}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/models/DataGridPresentationModel.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/models/DataGridPresentationModel.as b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/models/DataGridPresentationModel.as
index 2959aad..0a00edb 100644
--- a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/models/DataGridPresentationModel.as
+++ b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/models/DataGridPresentationModel.as
@@ -44,6 +44,8 @@ package org.apache.flex.html.beads.models
 		public function DataGridPresentationModel()
 		{
 			super();
+			
+			separatorThickness = 1;
 		}
 		
 		private var _columnLabels:Array;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/basic-manifest.xml b/frameworks/projects/HTML/basic-manifest.xml
index 5ddd403..71a4049 100644
--- a/frameworks/projects/HTML/basic-manifest.xml
+++ b/frameworks/projects/HTML/basic-manifest.xml
@@ -81,7 +81,6 @@
 
     <component id="DataGrid" class="org.apache.flex.html.DataGrid"/>
     <component id="DataGridColumn" class="org.apache.flex.html.supportClasses.DataGridColumn"/>
-    <component id="DataGridLayout" class="org.apache.flex.html.beads.layouts.DataGridLayout" />
 
     <component id="DateChooser" class="org.apache.flex.html.DateChooser"/>
     <component id="DateField" class="org.apache.flex.html.DateField"/>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js
index 73fe84e..4971449 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js
@@ -129,7 +129,10 @@ org.apache.flex.html.beads.DataItemRendererFactoryForArrayData.
     ir.index = i;
     ir.labelField = this.model.labelField;
     ir.data = dp[i];
-    if (presModel) ir.height = presModel.rowHeight;
+    if (presModel) {
+      ir.element.style['margin-bottom'] = presModel.separatorThickness;
+      ir.height = presModel.rowHeight;
+    }
   }
 
   var newEvent = new org.apache.flex.events.Event('itemsCreated');

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/657ce8bd/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ListPresentationModel.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ListPresentationModel.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ListPresentationModel.js
index 9b9bfeb..91d4371 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ListPresentationModel.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ListPresentationModel.js
@@ -42,6 +42,13 @@ org.apache.flex.html.beads.models.ListPresentationModel.prototype.rowHeight_ = 3
 
 
 /**
+ * @private
+ * @type {number}
+ */
+org.apache.flex.html.beads.models.ListPresentationModel.prototype.separatorThickness_ = 0;
+
+
+/**
  * Metadata
  *
  * @type {Object.<string, Array.<Object>>}
@@ -71,5 +78,17 @@ Object.defineProperties(org.apache.flex.html.beads.models.ListPresentationModel.
             this.rowHeight_ = value;
             this.dispatchEvent('rowHeightChanged');
         }
+    },
+    /** @export */
+    separatorThickness: {
+        /** @this {org.apache.flex.html.beads.models.ListPresentationModel} */
+        get: function() {
+            return this.separatorThickness_;
+        },
+        /** @this {org.apache.flex.html.beads.models.ListPresentationModel} */
+        set: function(value) {
+            this.separatorThickness_ = value;
+            this.dispatchEvent('separatorThicknessChanged');
+        }
     }
 });