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/05/01 03:48:08 UTC

[09/50] [abbrv] git commit: [flex-asjs] [refs/heads/develop] - Merge branch 'develop' into dual. Clean build. Now to get it to run

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as
index 3bd2e94,d62e799..4de5634
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as
@@@ -17,18 -17,18 +17,20 @@@
  //
  ////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads
--{		
++{
  	import org.apache.flex.core.BeadViewBase;
  	import org.apache.flex.core.ContainerBase;
  	import org.apache.flex.core.IBead;
  	import org.apache.flex.core.IBeadLayout;
  	import org.apache.flex.core.IBeadView;
--    import org.apache.flex.core.IChild;
++	import org.apache.flex.core.IChild;
  	import org.apache.flex.core.IContainer;
  	import org.apache.flex.core.IContainerView;
  	import org.apache.flex.core.IContentViewHost;
  	import org.apache.flex.core.ILayoutChild;
  	import org.apache.flex.core.ILayoutHost;
++	import org.apache.flex.core.ILayoutView;
++	import org.apache.flex.core.IParent;
  	import org.apache.flex.core.IParentIUIBase;
  	import org.apache.flex.core.IStrand;
  	import org.apache.flex.core.IUIBase;
@@@ -39,37 -39,37 +41,40 @@@
  	import org.apache.flex.events.Event;
  	import org.apache.flex.events.IEventDispatcher;
  	import org.apache.flex.geom.Rectangle;
--    import org.apache.flex.geom.Size;
++	import org.apache.flex.geom.Size;
++	import org.apache.flex.html.Container;
  	import org.apache.flex.html.beads.models.ViewportModel;
  	import org.apache.flex.html.supportClasses.Border;
  	import org.apache.flex.html.supportClasses.ContainerContentArea;
  	import org.apache.flex.html.supportClasses.Viewport;
  	import org.apache.flex.utils.CSSContainerUtils;
--    
++
  	/**
  	 * This class creates and manages the contents of a Container. On the ActionScript
  	 * side, a Container has a contentView into which the offical children can be
  	 * placed. When adding an element that implements IChrome, that element is not
  	 * placed into the contentView, but is made a child of the Container directly.
--	 * 
++	 *
  	 * Containers also have a layout associated with them which controls the size and
  	 * placement of the elements in the contentView. When a Container does not have an
  	 * explicit size (including a percent size), the content dictates the size of the
  	 * Container.
--     *  
++     *
++	 *  @viewbead
       *  @langversion 3.0
       *  @playerversion Flash 10.2
       *  @playerversion AIR 2.6
       *  @productversion FlexJS 0.0
  	 */
--	public class ContainerView extends BeadViewBase implements IBeadView, IContainerView, ILayoutHost
++	COMPILE::SWF
++	public class ContainerView extends GroupView
  	{
  		/**
       	 *  The ContainerView class is the default view for
           *  the org.apache.flex.core.ContainerBase classes.
           *  It lets you use some CSS styles to manage the border, background
           *  and padding around the content area.
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -78,41 -78,41 +83,26 @@@
  		public function ContainerView()
  		{
  			super();
--			
--			layoutRunning = false;
  		}
--		
++
  		/**
  		 * The sub-element used as the parent of the container's elements. This does not
  		 * include the chrome elements.
--		 *  
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--		public function get contentView():IParentIUIBase
--		{
--			return viewport.contentView as IParentIUIBase;
--		}
--		
--		/**
--		 * The view that can be resized.
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		public function get resizableView():IUIBase
++		override public function get contentView():ILayoutView
  		{
--			return host;
++			return viewport.contentView as ILayoutView;
  		}
--		
++
  		/**
  		 * The viewport used to present the content and may display
  		 * scroll bars (depending on the actual type of viewport).
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
@@@ -122,11 -122,11 +112,11 @@@
  		{
  			return _viewport;
  		}
--		
++
  		/**
  		 * The data model used by the viewport to determine how it should
  		 * present the content area.
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
@@@ -136,62 -136,62 +126,14 @@@
  		{
  			return _viewportModel;
  		}
--		
++
  		private var _viewportModel:IViewportModel;
  		private var _viewport:IViewport;
  		private var layoutRunning:Boolean;
--		
--		/**
--		 * @private
--		 */
--		public function addElement(c:IChild, dispatchEvent:Boolean = true):void
--		{
--			contentView.addElement(c, dispatchEvent);
--		}
--		
--		/**
--		 * @private
--		 */
--		public function addElementAt(c:IChild, index:int, dispatchEvent:Boolean = true):void
--		{
--			contentView.addElementAt(c, index, dispatchEvent);
--		}
--		
--		/**
--		 * @private
--		 */
--		public function getElementIndex(c:IChild):int
--		{
--			return contentView.getElementIndex(c);
--		}
--		
--		/**
--		 * @private
--		 */
--		public function removeElement(c:IChild, dispatchEvent:Boolean = true):void
--		{
--			contentView.removeElement(c, dispatchEvent);
--		}
--		
--		/**
--		 * @private
--		 */
--		public function get numElements():int
--		{
--			return contentView.numElements;
--		}
--		
--		/**
--		 * @private
--		 */
--		public function getElementAt(index:int):IChild
--		{
--			return contentView.getElementAt(index);
--		}
--		
++
  		/**
  		 * Strand setter.
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
@@@ -200,127 -200,127 +142,37 @@@
  		override public function set strand(value:IStrand):void
  		{
  			_strand = value;
--			super.strand = value;
--			
++
              createViewport();
--			
--			(host as IContentViewHost).strandChildren.addElement(viewport.contentView, false);
--			
--			displayBackgroundAndBorder(host as UIBase);
--			
--			// listen for initComplete to signal that the strand is set with its size
--			// and beads.
-             host.addEventListener("beadsAdded", beadsAddedHandler);
 -			host.addEventListener("initComplete", initCompleteHandler);
--		}
--		
--		/**
--		 * Handles the initComplete event by completing the setup and kicking off the
--		 * presentation of the Container.
--		 *  
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
- 		protected function beadsAddedHandler(event:Event):void
 -		protected function initCompleteHandler(event:Event):void
--		{
--            var ilc:ILayoutChild = host as ILayoutChild;
--			// Complete the setup if the height is sized to content or has been explicitly set
--            // and the width is sized to content or has been explicitly set
--			if ((ilc.isHeightSizedToContent() || !isNaN(ilc.explicitHeight)) &&
--                (ilc.isWidthSizedToContent() || !isNaN(ilc.explicitWidth))) {
--				completeSetup();
--				
--				var num:Number = contentView.numElements;
--				if (num > 0) performLayout(event);
--			}
--			else {
--				// otherwise, wait until the unknown sizes have been set and then finish
--				host.addEventListener("sizeChanged", deferredSizeHandler);
--                host.addEventListener("widthChanged", deferredSizeHandler);
--                host.addEventListener("heightChanged", deferredSizeHandler);
--			}
--		}
--		
--		/**
--		 * Handles the case where the size of the host is not immediately known, usually do
--		 * to one of its dimensions being indicated as a percent size.
--		 *  
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--		private function deferredSizeHandler(event:Event):void
--		{
--            host.removeEventListener("sizeChanged", deferredSizeHandler);
--            host.removeEventListener("widthChanged", deferredSizeHandler);
--            host.removeEventListener("heightChanged", deferredSizeHandler);
--			completeSetup();
--			
--			var num:Number = contentView.numElements;
--			if (num > 0) 
--            {
--                performLayout(event);
--            }
++
++			var chost:IContainer = host as IContainer;
++			chost.strandChildren.addElement(viewport.contentView);
++
++			super.strand = value;
  		}
--		
++
  		/**
  		 * Called when the host is ready to complete its setup (usually after its size has been
  		 * determined).
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		protected function completeSetup():void
++		override protected function completeSetup():void
  		{
++			super.completeSetup();
++
  			// when the first layout is complete, set up listeners for changes
  			// to the childrens' sizes.
  			host.addEventListener("layoutComplete", childrenChangedHandler);
--			
--			host.addEventListener("childrenAdded", performLayout);
--			host.addEventListener("layoutNeeded", performLayout);
--			host.addEventListener("widthChanged", resizeHandler);
--			host.addEventListener("heightChanged", resizeHandler);
--			host.addEventListener("sizeChanged", resizeHandler);
--			host.addEventListener("viewCreated", viewCreatedHandler);
--		}
--		
--		/**
--		 * Handles the viewCreated event by performing the first layout if
--		 * there are children already present (ie, from MXML).
--		 *  
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--		protected function viewCreatedHandler(event:Event):void
--		{			
--			if ((host as UIBase).numElements > 0) {
--				performLayout(null);
--			}
  		}
--		
--        /**
--         * Calculate the space taken up by non-content children like a TItleBar in a Panel.
--         *  
--         *  @langversion 3.0
--         *  @playerversion Flash 10.2
--         *  @playerversion AIR 2.6
--         *  @productversion FlexJS 0.0
--         */
--        protected function getChromeMetrics():Rectangle
--        {
--            return new Rectangle(0, 0, 0, 0);
--        }
--        
++
  		/**
  		 * Creates the Viewport (or ScrollableViewport) through which the content
  		 * area is presented.
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
@@@ -340,7 -340,7 +192,7 @@@
                      }
                  }
  			}
--			
++
  			if (viewport == null) {
  				_viewport = _strand.getBeadByType(IViewport) as IViewport;
  				if (viewport == null) {
@@@ -351,72 -351,72 +203,48 @@@
  						_strand.addBead(viewport);
  					}
  				}
--			}			
++			}
  		}
--		
++
  		/**
--		 *  Positions the viewport, then sets any known sizes of the Viewport prior
--         *  to laying out its content.
--		 *  
++		 * Calculate the space taken up by non-content children like a TitleBar in a Panel.
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		protected function layoutViewBeforeContentLayout():void
++		protected function getChromeMetrics():Rectangle
  		{
--            var host:ILayoutChild = this.host as ILayoutChild;
--            var vm:IViewportModel = viewportModel;
--            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
--            vm.chromeMetrics = getChromeMetrics();
--            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
--                                 vm.borderMetrics.top + vm.chromeMetrics.top)
--            viewport.layoutViewportBeforeContentLayout(
--                !host.isWidthSizedToContent() ? 
--			        host.width - vm.borderMetrics.left - vm.borderMetrics.right -
--                        vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
--                !host.isHeightSizedToContent() ? 
--                    host.height - vm.borderMetrics.top - vm.borderMetrics.bottom -
--                        vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
--			
++			var paddingMetrics:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
++			return paddingMetrics;
  		}
  		
  		/**
--		 * Executes the layout associated with this container. Once the layout has been
--		 * run, it may affect the size of the host or may cause the host to present scroll
--		 * bars view its viewport.
--		 *  
++		 *  Positions the viewport, then sets any known sizes of the Viewport prior
++         *  to laying out its content.
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		protected function performLayout(event:Event):void
++		override protected function layoutViewBeforeContentLayout():void
  		{
--			layoutRunning = true;
--			
--			layoutViewBeforeContentLayout();
--			
--			var host:UIBase = _strand as UIBase;
--			
--			var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
--			if (layout == null) {
--				var c:Class = ValuesManager.valuesImpl.getValue(host, "iBeadLayout");
--				if (c) {
--					layout = new c() as IBeadLayout;
--					_strand.addBead(layout);
--				}
--			}
--			
--			if (layout) {
--				layout.layout();
--			}
--			
--			layoutViewAfterContentLayout();
--			
--			layoutRunning = false;
++            var host:ILayoutChild = this.host as ILayoutChild;
++            var vm:IViewportModel = viewportModel;
++			var hostWidth:Number = host.width;
++			var hostHeight:Number = host.height;
++
++            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
++
++            viewport.setPosition(vm.borderMetrics.left, vm.borderMetrics.top);
++
++			viewport.layoutViewportBeforeContentLayout(
++				host.isWidthSizedToContent() ? NaN : hostWidth - vm.borderMetrics.left - vm.borderMetrics.right,
++				host.isHeightSizedToContent() ? NaN : hostHeight - vm.borderMetrics.top - vm.borderMetrics.bottom);
  		}
--		
++
  		/**
  		 * @private
  		 */
@@@ -425,61 -425,61 +253,46 @@@
  		/**
  		 * Adjusts the size of the host, or adds scrollbars to the viewport, after
  		 * the layout has been run.
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		protected function layoutViewAfterContentLayout():void
++		override protected function layoutViewAfterContentLayout():void
  		{
--			var host:UIBase = _strand as UIBase;
--            var vm:IViewportModel = viewportModel;
--            
++			if (adjusting) return;
++
  			adjusting = true;
--			
--            var viewportSize:Size = viewport.layoutViewportAfterContentLayout();
--            
--			if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {					
--				host.setWidthAndHeight(viewportSize.width + vm.borderMetrics.left + vm.borderMetrics.right +
--                                           vm.chromeMetrics.left + vm.chromeMetrics.right, 
--					                   viewportSize.height + vm.borderMetrics.top + vm.borderMetrics.bottom +
--                                           vm.chromeMetrics.top + vm.chromeMetrics.bottom,
--                                       false);
--			}
--			else if (!host.isWidthSizedToContent() && host.isHeightSizedToContent())
--			{
--				host.setHeight(viewportSize.height + vm.borderMetrics.top + vm.borderMetrics.bottom +
--                    vm.chromeMetrics.top + vm.chromeMetrics.bottom, false);
--			}
--			else if (host.isWidthSizedToContent() && !host.isHeightSizedToContent())
--			{
--				host.setWidth(viewportSize.width + vm.borderMetrics.left + vm.borderMetrics.right +
--                    vm.chromeMetrics.left + vm.chromeMetrics.right, false);
--			}			
++
++			super.layoutViewAfterContentLayout();
++
++			var contentSize:Size = calculateContentSize();
++			viewport.layoutViewportAfterContentLayout(contentSize);
++
  			adjusting = false;
  		}
--		
++
  		/**
  		 * Handles dynamic changes to the host's size by running the layout once
  		 * the viewport has been adjusted.
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		protected function resizeHandler(event:Event):void
++		override protected function resizeHandler(event:Event):void
  		{
  			if (!adjusting) {
  				performLayout(event);
  			}
  		}
--		
++
  		/**
  		 * Whenever children are added, listeners are added to detect changes
--		 * in their size. 
--		 *  
++		 * in their size.
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
@@@ -489,7 -489,7 +302,7 @@@
  		{
  			var host:UIBase = _strand as UIBase;
  			host.removeEventListener(event.type, childrenChangedHandler);
--			
++
  			var n:Number = contentView.numElements;
  			for (var i:int=0; i < n; i++) {
  				var child:IUIBase = contentView.getElementAt(i) as IUIBase;
@@@ -498,55 -498,55 +311,79 @@@
  				child.addEventListener("sizeChanged", childResizeHandler);
  			}
  		}
--				
++	}
++
++	COMPILE::JS
++	public class ContainerView extends GroupView //??implements IParent
++	{
++		private var _viewport:IViewport;
++
  		/**
--		 * This event handles changes to the size of children of the container by running
--		 * the layout again and adjusting the size of the container or viewport as necessary. 
--		 *  
++		 * The viewport used to present the content and may display
++		 * scroll bars (depending on the actual type of viewport).
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		protected function childResizeHandler(event:Event):void
++		protected function get viewport():IViewport
  		{
--			// during this process we don't want the layout to trigger
--			// an endless event chain should any children get resized
--			// by the layout.
--			if (layoutRunning) return;			
--			performLayout(event);
++			return _viewport;
  		}
  		
--		protected function displayBackgroundAndBorder(host:UIBase) : void
++		/**
++		 * The sub-element used as the parent of the container's elements. This does not
++		 * include the chrome elements.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		override public function get contentView():ILayoutView
  		{
--			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(host, "background-color");
--			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(host, "background-image");
--			if (backgroundColor != null || backgroundImage != null)
--			{
--				if (host.getBeadByType(IBackgroundBead) == null)
--					var c:Class = ValuesManager.valuesImpl.getValue(host, "iBackgroundBead");
--				if (c) {
--					host.addBead( new c() as IBead );
++			if (viewport != null) {
++				return viewport.contentView as ILayoutView;
++			} else {
++				return host as ILayoutView;
++			}
++		}
++
++		/**
++		 * Strand setter.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		override public function set strand(value:IStrand):void
++		{
++			_strand = value;
++			super.strand = value;
++
++			var c:Class;
++
++			if (viewport == null) {
++				_viewport = _strand.getBeadByType(IViewport) as IViewport;
++				if (viewport == null) {
++					c = ValuesManager.valuesImpl.getValue(host, "iViewport");
++					if (c)
++					{
++						_viewport = new c() as IViewport;
++						_strand.addBead(viewport);
++					}
  				}
  			}
  			
--			var borderStyle:String;
--			var borderStyles:Object = ValuesManager.valuesImpl.getValue(host, "border");
--			if (borderStyles is Array)
--			{
--				borderStyle = borderStyles[1];
--			}
--			if (borderStyle == null)
--			{
--				borderStyle = ValuesManager.valuesImpl.getValue(host, "border-style") as String;
--			}
--			if (borderStyle != null && borderStyle != "none")
--			{
--				if (host.getBeadByType(IBorderBead) == null) {
--					c = ValuesManager.valuesImpl.getValue(host, "iBorderBead");
--					if (c) {
--						host.addBead( new c() as IBead );
--					}
++			if (viewport != null) {
++				var chost:IContainer = host as IContainer;
++				// add the viewport's contentView to this host ONLY if
++				// the contentView is not the host itself, which is likely
++				// most situations.
++				if (chost != viewport.contentView) {
++					chost.addElement(viewport.contentView);
  				}
  			}
  		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
index b32df59,0000000..36ed489
mode 100644,000000..100644
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
@@@ -1,170 -1,0 +1,230 @@@
 +////////////////////////////////////////////////////////////////////////////////
 +//
 +//  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.BeadViewBase;
 +	import org.apache.flex.core.ContainerBase;
 +	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.IList;
 +	import org.apache.flex.core.ISelectableItemRenderer;
 +	import org.apache.flex.core.IItemRenderer;
 +	import org.apache.flex.core.IItemRendererParent;
 +	import org.apache.flex.core.IParent;
 +    import org.apache.flex.core.IParentIUIBase;
 +	import org.apache.flex.core.IDataProviderModel;
++	import org.apache.flex.core.ISelectionModel;
 +	import org.apache.flex.core.IStrand;
 +    import org.apache.flex.core.IUIBase;
 +	import org.apache.flex.core.Strand;
 +	import org.apache.flex.core.UIBase;
 +	import org.apache.flex.core.ValuesManager;
 +	import org.apache.flex.events.Event;
 +	import org.apache.flex.events.IEventDispatcher;
 +	import org.apache.flex.html.beads.models.ScrollBarModel;
 +	import org.apache.flex.html.beads.models.SingleLineBorderModel;
 +	import org.apache.flex.html.supportClasses.Border;
 +	import org.apache.flex.html.supportClasses.DataGroup;
 +	import org.apache.flex.html.supportClasses.ScrollBar;
 +
 +	/**
- 	 *  The List class creates the visual elements of the org.apache.flex.html.List 
- 	 *  component. A List consists of the area to display the data (in the dataGroup), any 
- 	 *  scrollbars, and so forth.
++	 *  The DataContainerView provides the visual elements for the DataContainer.
 +	 *  
 +	 *  @viewbead
 +	 *  @langversion 3.0
 +	 *  @playerversion Flash 10.2
 +	 *  @playerversion AIR 2.6
- 	 *  @productversion FlexJS 0.0
++	 *  @productversion FlexJS 0.8
 +	 */
++	COMPILE::JS
 +	public class DataContainerView extends ContainerView implements IListView
 +	{
 +		public function DataContainerView()
 +		{
++			super();
 +		}
- 						
- 		protected var listModel:IDataProviderModel;
- 		
- 		private var _border:Border;
 +		
 +		/**
- 		 *  The border surrounding the org.apache.flex.html.List.
- 		 *
++		 *  @copy org.apache.flex.core.IBead#strand
++		 *  
 +		 *  @langversion 3.0
 +		 *  @playerversion Flash 10.2
 +		 *  @playerversion AIR 2.6
- 		 *  @productversion FlexJS 0.0
++		 *  @productversion FlexJS 0.8
 +		 */
-         public function get border():Border
-         {
-             return _border;
-         }
++		override public function set strand(value:IStrand):void
++		{
++			_strand = value;
++			super.strand = value;
++			
++			host.addEventListener("beadsAdded", beadsAddedHandler);
++		}
++		
++		protected var dataModel:IDataProviderModel;
 +		
 +		/**
- 		 *  The area holding the itemRenderers.
- 		 *
- 		 *  @langversion 3.0
- 		 *  @playerversion Flash 10.2
- 		 *  @playerversion AIR 2.6
- 		 *  @productversion FlexJS 0.0
++		 * @flexjsignorecoercion org.apache.flex.core.IItemRendererParent
 +		 */
 +		public function get dataGroup():IItemRendererParent
 +		{
- 			(contentView as UIBase).className = "ListDataGroup";
- 			return contentView as IItemRendererParent;
++			return super.contentView as IItemRendererParent;
 +		}
- 				
++		
++		protected function beadsAddedHandler(event:Event):void
++		{
++			dataModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
++			host.addEventListener("itemsCreated", itemsCreatedHandler);
++			dataModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
++		}
++		
 +		/**
 +		 * @private
 +		 */
- 		override public function get resizableView():IUIBase
++		override protected function handleInitComplete(event:Event):void
++		{
++			super.handleInitComplete(event);
++		}
++		
++		/**
++		 * @private
++		 */
++		protected function itemsCreatedHandler(event:Event):void
++		{
++			performLayout(event);
++		}
++		
++		/**
++		 * @private
++		 */
++		protected function dataProviderChangeHandler(event:Event):void
++		{
++			performLayout(event);
++		}
++	}
++	
++	COMPILE::SWF
++	public class DataContainerView extends ContainerView implements IListView
++	{
++		public function DataContainerView()
++		{
++			super();
++		}
++						
++		protected var dataModel:IDataProviderModel;
++		
++		/**
++		 * @private
++		 */
++		override public function get host():IUIBase
 +		{
 +			return _strand as IUIBase;
 +		}
-         
-         /**
-          * @private
-          */
-         override public function get host():IUIBase
-         {
-             return _strand as IUIBase;
-         }
-         		
++		
 +		/**
 +		 *  @copy org.apache.flex.core.IBead#strand
 +		 *  
 +		 *  @langversion 3.0
 +		 *  @playerversion Flash 10.2
 +		 *  @playerversion AIR 2.6
- 		 *  @productversion FlexJS 0.0
++		 *  @productversion FlexJS 0.8
 +		 */
 +		override public function set strand(value:IStrand):void
 +		{
 +			_strand = value;
 +			super.strand = value;
++			
++			host.addEventListener("beadsAdded", beadsAddedHandler);
 +		}
 +		
 +		override protected function completeSetup():void
 +		{
 +			super.completeSetup();
 +			
 +			// list is not interested in UI children, it wants to know when new items
 +			// have been added or the dataProvider has changed.
- 			
 +			host.removeEventListener("childrenAdded", childrenChangedHandler);
 +			host.removeEventListener("childrenAdded", performLayout);
 +			host.addEventListener("itemsCreated", itemsCreatedHandler);
- 			
- 			listModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
- 			listModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
 +		}
 +		
- 		protected var lastSelectedIndex:int = -1;
++		protected function beadsAddedHandler(event:Event):void
++		{
++			dataModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
++			dataModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
++		}
++		
++		override protected function handleInitComplete(event:Event):void
++		{
++			super.handleInitComplete(event);
++		}
++		
++		/**
++		 *  The area holding the itemRenderers.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		public function get dataGroup():IItemRendererParent
++		{
++			return super.contentView as IItemRendererParent;
++		}
++				
++		/**
++		 * @private
++		 */
++		override public function get resizableView():IUIBase
++		{
++			return _strand as IUIBase;
++		}
 +		
 +		/**
 +		 * @private
 +		 */
 +		protected function itemsCreatedHandler(event:Event):void
 +		{
 +			performLayout(event);
 +		}
 +		
 +		/**
 +		 * @private
 +		 */
 +		protected function dataProviderChangeHandler(event:Event):void
 +		{
 +			performLayout(event);
 +		}
 +		        
 +        /**
 +         *  respond to a change in size or request to re-layout everything
 +         *  
 +         *  @langversion 3.0
 +         *  @playerversion Flash 10.2
 +         *  @playerversion AIR 2.6
 +         *  @productversion FlexJS 0.0
 +         */
 +		override protected function resizeHandler(event:Event):void
 +		{
++			// might need to do something here, not sure yet.
 +			super.resizeHandler(event);
 +		}
 +	}
 +}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
index 0000000,0000000..510e18d
new file mode 100644
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
@@@ -1,0 -1,0 +1,293 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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;
++			_header.percentWidth = 100;
++
++			_listArea = new Container();
++			_listArea.percentWidth = 100;
++			_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";
++				_header.element.style["min-height"] = "30px";
++				_listArea.element.style["flex-grow"] = "1";
++			}
++			
++			IEventDispatcher(_strand).addEventListener("initComplete", finishSetup);
++		}
++
++		/**
++		 * @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/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as
index fe4b14f,8393057..68e5d95
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as
@@@ -18,263 -18,249 +18,283 @@@
  ////////////////////////////////////////////////////////////////////////////////
  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.IDataGridPresentationModel;
  	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;
-     import org.apache.flex.html.DataGrid;
++	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.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.ArraySelectionModel;
 -	import org.apache.flex.html.beads.models.DataGridPresentationModel;
++	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;
--
--	/**
--	 *  The DataGridView 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.
--	 *
--	 *  @langversion 3.0
--	 *  @playerversion Flash 10.2
--	 *  @playerversion AIR 2.6
--	 *  @productversion FlexJS 0.0
--	 */
--	public class DataGridView implements IBeadView
--	{
--		/**
--		 *  constructor.
--		 *
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--		public function DataGridView()
--		{
--		}
--
--		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;
--		}
--
--		/**
--		 * @private
--		 */
--		public function get host():IUIBase
--		{
--			return _strand as IUIBase;
--		}
++	
++	COMPILE::SWF {
++		import org.apache.flex.core.SimpleCSSStyles;
++	}
  		
  		/**
--		 * Returns the component used as the header for the DataGrid.
--		 */
--		public function get header():IUIBase
--		{
--			return _header;
--		}
--
--		/**
--		 *  @copy org.apache.flex.core.IBead#strand
++		 *  The DataGridView 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.
  		 *
++		 *  @viewbead
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		public function set strand(value:IStrand):void
++		public class DataGridView extends GroupView implements IBeadView
  		{
--			_strand = value;
--
--			var host:UIBase = value as UIBase;
--
--			_header = new DataGridButtonBar();
--			_header.id = "dataGridHeader";
--
--			var scrollPort:ScrollingViewport = new ScrollingViewport();
--
--			_listArea = new Container();
--			_listArea.id = "dataGridListArea";
--			_listArea.className = "DataGridListArea";
--			_listArea.addBead(scrollPort);
++			/**
++			 *  constructor.
++			 *
++			 *  @langversion 3.0
++			 *  @playerversion Flash 10.2
++			 *  @playerversion AIR 2.6
++			 *  @productversion FlexJS 0.0
++			 */
++			public function DataGridView()
++			{
++				super();
++			}
  			
--			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);
++			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;
++				_header.percentWidth = 100;
++				
++				_listArea = new Container();
++				_listArea.percentWidth = 100;
++				_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";
++					_header.element.style["min-height"] = "30px";
++					_listArea.element.style["flex-grow"] = "1";
++				}
++				
++				IEventDispatcher(_strand).addEventListener("initComplete", finishSetup);
  			}
--
--			finishSetup(null);
--		}
--
--		/**
--		 * @private
--		 */
--		private function finishSetup(event:Event):void
--		{
-             var host:DataGrid = _strand as DataGrid;
-             
- 			// 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 host:UIBase = _strand as UIBase;
--
- 			for(var i:int=0; i < sharedModel.columns.length; i++) {
- 				var dgc:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
- 				columnLabels.push(dgc.label);
 -			// see if there is a presentation model already in place. if not, add one.
 -			var presentationModel:DataGridPresentationModel = _strand.getBeadByType(DataGridPresentationModel) as DataGridPresentationModel;
 -			if (presentationModel == null) {
 -				presentationModel = new DataGridPresentationModel();
 -				_strand.addBead(presentationModel);
++			
++			/**
++			 * @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();
++				
++				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();
++				_header.buttonWidths = buttonWidths
++				_header.widthType = ButtonBarModel.PIXEL_WIDTHS;
++				_header.dataProvider = columnLabels;
++				_header.addBead(bblayout);
++				_header.addBead(new Viewport());
++				host.addElement(_header);
++				
++				host.addElement(_listArea);
++				
++				handleDataProviderChanged(event);
++				
++				host.addEventListener("widthChanged", handleSizeChanges);
++				host.addEventListener("heightChanged", handleSizeChanges);
  			}
- 
- 			var bblayout:ButtonBarLayout = new ButtonBarLayout();
- 			var buttonBarModel:ArraySelectionModel = new ArraySelectionModel();
- 			buttonBarModel.dataProvider = columnLabels;
- 
- 			_header.addBead(buttonBarModel);
- 			_header.addBead(bblayout);
- 			_header.addBead(new Viewport());
- 			host.addElement(_header);
- 
- 			host.addElement(_listArea);
- 
- 			handleDataProviderChanged(event);
- 		}
- 
- 		/**
- 		 * @private
- 		 */
- 		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();
- 		}
--
- 		/**
- 		 * @private
- 		 */
- 		private function handleDataProviderChanged(event:Event):void
- 		{
--			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
 -			IEventDispatcher(sharedModel).addEventListener("dataProviderChanged",handleDataProviderChanged);
--
- 			if (_lists == null || _lists.length == 0) {
- 				createLists();
 -			var columnLabels: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);
++			
++			/**
++			 * @private
++			 */
++			private function handleSizeChanges(event:Event):void
++			{	
++				_header.dispatchEvent(new Event("layoutChanged"));
++				_listArea.dispatchEvent(new Event("layoutChanged"));
  			}
--
- 			for (var i:int=0; i < _lists.length; i++)
 -			var bblayout:ButtonBarLayout = new ButtonBarLayout();
 -			var buttonBarModel:ArraySelectionModel = new ArraySelectionModel();
 -			buttonBarModel.dataProvider = columnLabels;
 -
 -			_header.addBead(buttonBarModel);
 -			_header.addBead(bblayout);
 -			_header.addBead(new Viewport());
 -			host.addElement(_header);
 -
 -			host.addElement(_listArea);
 -
 -			handleDataProviderChanged(event);
 -		}
 -
 -		/**
 -		 * @private
 -		 */
 -		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();
 -		}
 -
 -		/**
 -		 * @private
 -		 */
 -		private function handleDataProviderChanged(event:Event):void
 -		{
 -			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
 -
 -			if (_lists == null || _lists.length == 0) {
 -				createLists();
++			
++			/**
++			 * @private
++			 */
++			private function handleDataProviderChanged(event:Event):void
 +			{
- 				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
- 				var listModel:ISelectionModel = list.getBeadByType(IBeadModel) as ISelectionModel;
- 				listModel.dataProvider = sharedModel.dataProvider;
++				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"));
  			}
- 
- 			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;
 -			for (var i:int=0; i < _lists.length; i++)
++			
++			/**
++			 * @private
++			 */
++			private function handleSelectedIndexChanged(event:Event):void
+ 			{
 -				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
 -				var listModel:ISelectionModel = list.getBeadByType(IBeadModel) as ISelectionModel;
 -				listModel.dataProvider = sharedModel.dataProvider;
++				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;
 +				}
  			}
--
- 			host.dispatchEvent(new Event('change'));
 -			host.dispatchEvent(new Event("layoutNeeded"));
--		}
--
--		/**
--		 * @private
--		 */
- 		private function createLists():void
 -		private function handleColumnListChange(event:Event):void
--		{
-             var host:DataGrid = _strand as DataGrid;
-             
-             var sharedModel:IDataGridModel = host.model as IDataGridModel;
-             var presentationModel:IDataGridPresentationModel = host.presentationModel;
- 			var listWidth:Number = host.width / sharedModel.columns.length;
- 
- 			_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);
 -			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
 -			var list:DataGridColumnList = event.target as DataGridColumnList;
 -			sharedModel.selectedIndex = list.selectedIndex;
--
- 				_listArea.addElement(list);
- 				_lists.push(list);
 -			for(var i:int=0; i < _lists.length; i++) {
 -				if (list != _lists[i]) {
 -					var otherList:DataGridColumnList = _lists[i] as DataGridColumnList;
 -					otherList.selectedIndex = list.selectedIndex;
++			
++			/**
++			 * @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'));
+ 			}
 -
 -			host.dispatchEvent(new Event('change'));
 -		}
 -
 -		/**
 -		 * @private
 -		 */
 -		private function createLists():void
 -		{
 -			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 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);
 -
 -				_listArea.addElement(list);
 -				_lists.push(list);
++			
++			/**
++			 * @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"));
  			}
--
--			host.dispatchEvent(new Event("layoutNeeded"));
  		}
--	}
  }
  

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
index 30024ec,fdfd9b3..bcd837b
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
@@@ -36,6 -36,6 +36,11 @@@ package org.apache.flex.html.bead
  	import org.apache.flex.events.ItemRendererEvent;
  	import org.apache.flex.html.List;
  	
++	import org.apache.flex.core.IList;
++	import org.apache.flex.core.IChild;
++	import org.apache.flex.core.ILayoutHost;
++	import org.apache.flex.core.IParentIUIBase;
++	
  	[Event(name="itemRendererCreated",type="org.apache.flex.events.ItemRendererEvent")]
  	
      /**
@@@ -64,11 -64,11 +69,11 @@@
  		{
  			super(target);
  		}
--		
-         protected var dataProviderModel:IDataProviderModel;
 -		private var selectionModel:ISelectionModel;
--		
-         protected var labelField:String;
 -		private var labelField:String;
--		
++
++		protected var dataProviderModel:IDataProviderModel;
++
++		protected var labelField:String;
++
  		private var _strand:IStrand;
  		
          /**
@@@ -82,21 -82,21 +87,22 @@@
  		public function set strand(value:IStrand):void
  		{
  			_strand = value;
--			IEventDispatcher(value).addEventListener("beadsAdded",finishSetup);
  			IEventDispatcher(value).addEventListener("initComplete",finishSetup);
  		}
  		
++		/**
++		 * @private
++		 */
  		private function finishSetup(event:Event):void
--		{
-             dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
 -			selectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
--			var listView:IListView = _strand.getBeadByType(IListView) as IListView;
--			dataGroup = listView.dataGroup;
-             dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
 -			selectionModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
++		{			
++			dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
++			dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
++			labelField = dataProviderModel.labelField;
  			
-             labelField = dataProviderModel.labelField;
 -			labelField = (listView.host as List).labelField;
--			
--			if (!itemRendererFactory)
--			{
++			// if the host component inherits from DataContainerBase, the itemRendererClassFactory will 
++			// already have been loaded by DataContainerBase.addedToParent function.
++			_itemRendererFactory = _strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
++			if (itemRendererFactory == null) {
  				_itemRendererFactory = new (ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as IItemRendererClassFactory;
  				_strand.addBead(_itemRendererFactory);
  			}
@@@ -136,25 -136,24 +142,25 @@@
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
           *  @productversion FlexJS 0.0
--         */
--		protected var dataGroup:IItemRendererParent;
--		
-         protected function dataProviderChangeHandler(event:Event):void
 -		private function dataProviderChangeHandler(event:Event):void
++         */		
++		protected function dataProviderChangeHandler(event:Event):void
  		{
-             var dp:Array = dataProviderModel.dataProvider as Array;
 -			var dp:Array = selectionModel.dataProvider as Array;
++			var dp:Array = dataProviderModel.dataProvider as Array;
  			if (!dp)
  				return;
  			
--			dataGroup.removeAllElements();
++			var list:IList = _strand as IList;
++			var dataGroup:IItemRendererParent = list.dataGroup;
++			
++			dataGroup.removeAllItemRenderers();
  			
--			var listView:IListView = _strand.getBeadByType(IListView) as IListView;
  			var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
  			
  			var n:int = dp.length; 
  			for (var i:int = 0; i < n; i++)
  			{				
  				var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
-                 dataGroup.addElement(ir);
++				dataGroup.addItemRenderer(ir);
  				ir.index = i;
  				ir.labelField = labelField;
  				if (presentationModel) {
@@@ -162,8 -161,8 +168,8 @@@
  					style.marginBottom = presentationModel.separatorThickness;
  					UIBase(ir).style = style;
  					UIBase(ir).height = presentationModel.rowHeight;
-                     UIBase(ir).percentWidth = 100;
-                 }
++					UIBase(ir).percentWidth = 100;
+ 				}
 -				dataGroup.addElement(ir);
  				ir.data = dp[i];
  				
  				var newEvent:ItemRendererEvent = new ItemRendererEvent(ItemRendererEvent.CREATED);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
index 3d8f1fc,42b159c..c35f07f
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
@@@ -35,7 -35,7 +35,8 @@@ package org.apache.flex.html.bead
  	import org.apache.flex.events.IEventDispatcher;
  	import org.apache.flex.events.EventDispatcher;
  	import org.apache.flex.events.ItemRendererEvent;
--	import org.apache.flex.html.List;
++	//import org.apache.flex.html.List;
++	import org.apache.flex.core.IList;
  	
  	[Event(name="itemRendererCreated",type="org.apache.flex.events.ItemRendererEvent")]
  	
@@@ -66,7 -66,7 +67,7 @@@
  			super(target);
  		}
  		
-         protected var dataProviderModel:IDataProviderModel;
 -		protected var selectionModel:ISelectionModel;
++		protected var dataProviderModel:IDataProviderModel;
  		
  		protected var labelField:String;
  		
@@@ -83,26 -83,26 +84,21 @@@
  		public function set strand(value:IStrand):void
  		{
  			_strand = value;
--			IEventDispatcher(_strand).addEventListener("beadsAdded", finishSetup);
  			IEventDispatcher(_strand).addEventListener("initComplete", finishSetup);
  		}
  		
  		private function finishSetup(event:Event):void
--		{
-             dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
 -			selectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
--			var listView:IListView = _strand.getBeadByType(IListView) as IListView;
--			dataGroup = listView.dataGroup;
-             dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
 -			selectionModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
--			
 -			labelField = (listView.host as List).labelField;
++		{			
++			dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
++			dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
 +			labelField = dataProviderModel.labelField;
  			
--			if (!itemRendererFactory)
--			{
--				_itemRendererFactory = _strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
--				if (_itemRendererFactory == null) {
--					_itemRendererFactory = new (ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as IItemRendererClassFactory;
--					_strand.addBead(_itemRendererFactory);
--				}
++			// if the host component inherits from DataContainerBase, the itemRendererClassFactory will 
++			// already have been loaded by DataContainerBase.addedToParent function.
++			_itemRendererFactory = _strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
++			if (itemRendererFactory == null) {
++				_itemRendererFactory = new (ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as IItemRendererClassFactory;
++				_strand.addBead(_itemRendererFactory);
  			}
  			
  			dataProviderChangeHandler(null);
@@@ -132,17 -132,17 +128,6 @@@
  			_itemRendererFactory = value;
  		}
  		
--        /**
--         *  The org.apache.flex.core.IItemRendererParent that will
--         *  parent the item renderers.
--         *  
--         *  @langversion 3.0
--         *  @playerversion Flash 10.2
--         *  @playerversion AIR 2.6
--         *  @productversion FlexJS 0.0
--         */
--		protected var dataGroup:IItemRendererParent;
--		
  		/**
  		 * @private
  		 */
@@@ -162,25 -162,25 +147,25 @@@
  			if (!dp)
  				return;
  			
--			dataGroup.removeAllElements();
++			var list:IList = _strand as IList;
++			var dataGroup:IItemRendererParent = list.dataGroup;
++			
++			dataGroup.removeAllItemRenderers();
  			
--			var listView:IListView = _strand.getBeadByType(IListView) as IListView;
  			var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
  			
  			var n:int = dp.length; 
  			for (var i:int = 0; i < n; i++)
  			{				
  				var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
++				dataGroup.addItemRenderer(ir);
  				if (presentationModel) {
--					UIBase(ir).height = presentationModel.rowHeight;
--					
--					// ensure that the IR spans the width of its column
  					var style:SimpleCSSStyles = new SimpleCSSStyles();
--					style.right = 0;
--					style.left = 0;
++					style.marginBottom = presentationModel.separatorThickness;
  					UIBase(ir).style = style;
++					UIBase(ir).height = presentationModel.rowHeight;
++					UIBase(ir).percentWidth = 100;
  				}
--				dataGroup.addElement(ir);
  				setData(ir, dp.getItemAt(i), i);
  				
  				var newEvent:ItemRendererEvent = new ItemRendererEvent(ItemRendererEvent.CREATED);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
index 4cd66ef,d399cfb..554a9c9
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
@@@ -24,6 -24,6 +24,7 @@@ package org.apache.flex.html.bead
  	import org.apache.flex.core.IDataProviderItemRendererMapper;
  	import org.apache.flex.core.IItemRendererClassFactory;
  	import org.apache.flex.core.IItemRendererParent;
++	import org.apache.flex.core.IList;
  	import org.apache.flex.core.IStrand;
  	import org.apache.flex.core.ValuesManager;
  	import org.apache.flex.events.Event;
@@@ -69,13 -69,13 +70,21 @@@
  		public function set strand(value:IStrand):void
  		{
  			_strand = value;
--			selectionModel = value.getBeadByType(IDataGridModel) as IDataGridModel;
--			var listView:IListView = value.getBeadByType(IListView) as IListView;
--			dataGroup = listView.dataGroup;
++			IEventDispatcher(value).addEventListener("initComplete",finishSetup);
++		}
++		
++		/**
++		 * @private
++		 */
++		private function finishSetup(event:Event):void
++		{			
++			selectionModel = _strand.getBeadByType(IDataGridModel) as IDataGridModel;
  			selectionModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
  			
--			if (!itemRendererFactory)
--			{
++			// if the host component inherits from DataContainerBase, the itemRendererClassFactory will 
++			// already have been loaded by DataContainerBase.addedToParent function.
++			_itemRendererFactory = _strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
++			if (itemRendererFactory == null) {
  				_itemRendererFactory = new (ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as IItemRendererClassFactory;
  				_strand.addBead(_itemRendererFactory);
  			}
@@@ -110,7 -110,7 +119,7 @@@
  		 *  @playerversion AIR 2.6
  		 *  @productversion FlexJS 0.0
  		 */
--		protected var dataGroup:IItemRendererParent;
++//		protected var dataGroup:IItemRendererParent;
  		
  		/**
  		 * @private
@@@ -121,8 -121,8 +130,11 @@@
  			if (!dp)
  				return;
  			
--			dataGroup.removeAllElements();
++			var list:IList = _strand as IList;
++			var dataGroup:IItemRendererParent = list.dataGroup;
  			
++			dataGroup.removeAllItemRenderers();
++						
  			var view:DataGridColumnView = _strand.getBeadByType(IBeadView) as DataGridColumnView;
  			if (view == null) return;
  						
@@@ -130,9 -130,9 +142,9 @@@
  			for (var i:int = 0; i < n; i++)
  			{
  				var tf:DataItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as DataItemRenderer;
-                 dataGroup.addElement(tf);
++				dataGroup.addItemRenderer(tf);
  				tf.index = i;
  				tf.labelField = view.column.dataField;
 -				dataGroup.addElement(tf);
  				tf.data = dp[i];
  			}
  			

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderChangeNotifier.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderChangeNotifier.as
index a24810b,a24810b..e8c28bd
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderChangeNotifier.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderChangeNotifier.as
@@@ -18,17 -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.IDocument;
  	import org.apache.flex.core.ISelectionModel;
--	import org.apache.flex.core.IStrand;
--	import org.apache.flex.core.UIBase;
  	import org.apache.flex.events.IEventDispatcher;
  	import org.apache.flex.events.Event;
  	import org.apache.flex.collections.ArrayList;
--	
--	/**
++    import org.apache.flex.html.supportClasses.DataProviderNotifierBase;
++
++    /**
  	 *  The DataProviderChangeNotifier notifies listeners when a selection model's
  	 *  ArrayList dataProvider has changed.
  	 *  
@@@ -37,7 -37,7 +33,7 @@@
  	 *  @playerversion AIR 2.6
  	 *  @productversion FlexJS 0.0
  	 */
--	public class DataProviderChangeNotifier implements IBead, IDocument
++	public class DataProviderChangeNotifier extends DataProviderNotifierBase
  	{
  		/**
  		 *  constructor.
@@@ -51,144 -51,144 +47,31 @@@
  		{
  		}
  		
--		protected var _dataProvider:ArrayList;
--		
--		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
++		override protected function destinationChangedHandler(event:Event):void
  		{
--			_strand = value;
--			
--			if (_strand[destinationPropertyName] == null) {
--				var model:IBeadModel = UIBase(_strand).model as IBeadModel;
--				IEventDispatcher(model).addEventListener(changeEventName, destinationChangedHandler);
--			}
--			else {
--				destinationChangedHandler(null);
--			}
--		}
--		
--		private function destinationChangedHandler(event:Event):void
--		{
--			if (_dataProvider == null) {
++			if (dataProvider == null)
++			{
  				var object:Object = document[sourceID];
--				_dataProvider = object[propertyName] as ArrayList;
++				dataProvider = object[propertyName] as ArrayList;
  			}
--			else {
--				_dataProvider.removeEventListener("itemAdded", handleItemAdded);
--				_dataProvider.removeEventListener("itemRemoved", handleItemRemoved);
--				_dataProvider.removeEventListener("itemUpdated", handleItemUpdated);
++			else
++			{
++                dataProvider.removeEventListener("itemAdded", handleDataProviderChanges);
++                dataProvider.removeEventListener("itemRemoved", handleDataProviderChanges);
++                dataProvider.removeEventListener("itemUpdated", handleDataProviderChanges);
++                dataProvider.removeEventListener("collectionChanged", handleDataProviderChanges);
  			}
--			
--			_dataProvider.addEventListener("itemAdded", handleItemAdded);
--			_dataProvider.addEventListener("itemRemoved", handleItemRemoved);
--			_dataProvider.addEventListener("itemUpdated", handleItemUpdated);
--		}
--		
--		protected var document:Object;
--		
--		/**
--		 * @private
--		 */
--		public function setDocument(document:Object, id:String = null):void
--		{
--			this.document = document;
--		}
--		
--		private var _destinationPropertyName:String;
--		
--		public function get destinationPropertyName():String
--		{
--			return _destinationPropertyName;
--		}
--		public function set destinationPropertyName(value:String):void
--		{
--			_destinationPropertyName = value;
--		}
--		
--		private var _changeEventName:String;
--		
--		public function get changeEventName():String
--		{
--			return _changeEventName;
--		}
--		public function set changeEventName(value:String):void
--		{
--			_changeEventName = value;
--		}
--		
--		private var _sourceID:String;
--		
--		/**
--		 *  The ID of the object holding the ArrayList, usually a model.
--		 *  
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--		public function get sourceID():String
--		{
--			return _sourceID;
--		}
--		public function set sourceID(value:String):void
--		{
--			_sourceID = value;
--		}
--		
--		private var _propertyName:String;
--		
--		/**
--		 *  The property in the sourceID that is the ArrayList.
--		 *  
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--		public function get propertyName():String
--		{
--			return _propertyName;
--		}
--		
--		public function set propertyName(value:String):void
--		{
--			_propertyName = value;
--		}
--		
--		/**
--		 * @private
--		 */
--		private function handleItemAdded(event:Event):void
--		{
--			var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
--			selectionModel.dispatchEvent(new Event("dataProviderChanged"));
++
++            dataProvider.addEventListener("itemAdded", handleDataProviderChanges);
++            dataProvider.addEventListener("itemRemoved", handleDataProviderChanges);
++            dataProvider.addEventListener("itemUpdated", handleDataProviderChanges);
++            dataProvider.addEventListener("collectionChanged", handleDataProviderChanges);
  		}
--		
--		/**
--		 * @private
--		 */
--		private function handleItemRemoved(event:Event):void
--		{
--			var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
--			selectionModel.dispatchEvent(new Event("dataProviderChanged"));
--		}
--		
--		/**
--		 * @private
--		 */
--		private function handleItemUpdated(event:Event):void
++
++		private function handleDataProviderChanges(event:Event):void
  		{
--			var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
--			selectionModel.dispatchEvent(new Event("dataProviderChanged"));
++            var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
++            selectionModel.dispatchEvent(new Event("dataProviderChanged"));
  		}
  	}
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderCollectionChangeNotifier.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderCollectionChangeNotifier.as
index 0000000,0000000..2d58795
new file mode 100644
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderCollectionChangeNotifier.as
@@@ -1,0 -1,0 +1,71 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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.ISelectionModel;
++	import org.apache.flex.events.IEventDispatcher;
++	import org.apache.flex.events.Event;
++	import org.apache.flex.collections.ArrayList;
++    import org.apache.flex.html.supportClasses.DataProviderNotifierBase;
++
++    /**
++	 *  The DataProviderCollectionChangeNotifier notifies listeners when a selection model's
++	 *  ArrayList dataProvider disptached collectionChanged event.
++	 *  
++	 *  @langversion 3.0
++	 *  @playerversion Flash 10.2
++	 *  @playerversion AIR 2.6
++	 *  @productversion FlexJS 0.0
++	 */
++	public class DataProviderCollectionChangeNotifier extends DataProviderNotifierBase
++	{
++		/**
++		 *  constructor.
++		 *  
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		public function DataProviderCollectionChangeNotifier()
++		{
++		}
++		
++		override protected function destinationChangedHandler(event:Event):void
++		{
++			if (dataProvider == null)
++			{
++				var object:Object = document[sourceID];
++				dataProvider = object[propertyName] as ArrayList;
++			}
++			else
++			{
++                dataProvider.removeEventListener("collectionChanged", handleCollectionChanged);
++			}
++
++            dataProvider.addEventListener("collectionChanged", handleCollectionChanged);
++		}
++
++		private function handleCollectionChanged(event:Event):void
++		{
++            var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
++            selectionModel.dispatchEvent(new Event("dataProviderChanged"));
++		}
++	}
++}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderItemsChangeNotifier.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderItemsChangeNotifier.as
index 0000000,0000000..eee1990
new file mode 100644
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataProviderItemsChangeNotifier.as
@@@ -1,0 -1,0 +1,95 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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.ISelectionModel;
++	import org.apache.flex.events.IEventDispatcher;
++	import org.apache.flex.events.Event;
++	import org.apache.flex.collections.ArrayList;
++	import org.apache.flex.events.CollectionEvent;
++    import org.apache.flex.html.supportClasses.DataProviderNotifierBase;
++
++    /**
++	 *  The DataProviderItemsChangeNotifier notifies listeners when to selection model's
++	 *  ArrayList dataProvider item has been added, removed or updated.
++	 *  
++	 *  @langversion 3.0
++	 *  @playerversion Flash 10.2
++	 *  @playerversion AIR 2.6
++	 *  @productversion FlexJS 0.0
++	 */
++	public class DataProviderItemsChangeNotifier extends DataProviderNotifierBase
++	{
++		/**
++		 *  constructor.
++		 *  
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		public function DataProviderItemsChangeNotifier()
++		{
++		}
++
++		private function destinationChangedHandler(event:Event):void
++		{
++			if (dataProvider == null) {
++				var object:Object = document[sourceID];
++				dataProvider = object[propertyName] as ArrayList;
++			}
++			else {
++				dataProvider.removeEventListener(CollectionEvent.ITEM_ADDED, handleItemAdded);
++				dataProvider.removeEventListener(CollectionEvent.ITEM_REMOVED, handleItemRemoved);
++				dataProvider.removeEventListener(CollectionEvent.ITEM_UPDATED, handleItemUpdated);
++			}
++			
++			dataProvider.addEventListener(CollectionEvent.ITEM_ADDED, handleItemAdded);
++			dataProvider.addEventListener(CollectionEvent.ITEM_REMOVED, handleItemRemoved);
++            dataProvider.addEventListener(CollectionEvent.ITEM_UPDATED, handleItemUpdated);
++		}
++
++		/**
++		 * @private
++		 */
++		private function handleItemAdded(event:CollectionEvent):void
++		{
++			var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
++			selectionModel.dispatchEvent(event.cloneEvent() as CollectionEvent);
++		}
++		
++		/**
++		 * @private
++		 */
++		private function handleItemRemoved(event:CollectionEvent):void
++		{
++			var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
++			selectionModel.dispatchEvent(event.cloneEvent() as CollectionEvent);
++		}
++
++        /**
++         * @private
++         */
++        private function handleItemUpdated(event:CollectionEvent):void
++        {
++            var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
++            selectionModel.dispatchEvent(event.cloneEvent() as CollectionEvent);
++        }
++	}
++}