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/06/22 16:40:00 UTC

[2/3] git commit: [flex-asjs] [refs/heads/develop] - Updated layout and scrolling. Removed scrolling-specific layouts because that is now handled by new viewports. Modified ContainerView to work with viewports.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalLayout.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalLayout.as
index 462d46e..97eda29 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalLayout.as
@@ -18,94 +18,112 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.beads.layouts
 {
-	
 	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IBeadModel;
 	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewport;
+	import org.apache.flex.core.IViewportModel;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
 	import org.apache.flex.utils.dbg.DOMPathUtil;
-
-    /**
-     *  The VerticalLayout class is a simple layout
-     *  bead.  It takes the set of children and lays them out
-     *  vertically in one column, separating them according to
-     *  CSS layout rules for margin and horizontal-align styles.
-     *  
-     *  @langversion 3.0
-     *  @playerversion Flash 10.2
-     *  @playerversion AIR 2.6
-     *  @productversion FlexJS 0.0
-     */
+	
+	/**
+	 *  The VerticalLayout class is a simple layout
+	 *  bead.  It takes the set of children and lays them out
+	 *  vertically in one column, separating them according to
+	 *  CSS layout rules for margin and horizontal-align styles.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
 	public class VerticalLayout implements IBeadLayout
 	{
-        /**
-         *  Constructor.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
 		public function VerticalLayout()
 		{
 		}
 		
-        // the strand/host container is also an ILayoutChild because
-        // can have its size dictated by the host's parent which is
-        // important to know for layout optimization
-        private var host:ILayoutChild;
-        		
-        /**
-         *  @copy org.apache.flex.core.IBead#strand
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
+		// the strand/host container is also an ILayoutChild because
+		// can have its size dictated by the host's parent which is
+		// important to know for layout optimization
+		private var host:ILayoutChild;
+		
+		/**
+		 *  @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
 		{
-            host = value as ILayoutChild;            
+			host = value as ILayoutChild; 
 		}
-	
-        /**
-         *  @copy org.apache.flex.core.IBeadLayout#layout
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
+		
+		private var _viewportModel:IViewportModel;
+		
+		/**
+		 *  The data that describes the viewport used by this layout.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get viewportModel():IViewportModel
+		{
+			return _viewportModel;
+		}
+		public function set viewportModel(value:IViewportModel):void
+		{
+			_viewportModel = value;
+		}
+		
 		public function layout():Boolean
 		{
 			var layoutParent:ILayoutParent = host.getBeadByType(ILayoutParent) as ILayoutParent;
 			var contentView:IParentIUIBase = layoutParent ? layoutParent.contentView : IParentIUIBase(host);
 			
+			// this layout will use and modify the IViewportMode
+			var viewport:IViewport = host.getBeadByType(IViewport) as IViewport;
+			viewportModel = viewport.model;
+
 			var n:int = contentView.numElements;
 			var hasHorizontalFlex:Boolean;
-            var hostSizedToContent:Boolean = host.isWidthSizedToContent();
+			var hostSizedToContent:Boolean = host.isWidthSizedToContent();
 			var flexibleHorizontalMargins:Array = [];
-            var ilc:ILayoutChild;
+			var ilc:ILayoutChild;
 			var marginLeft:Object;
 			var marginRight:Object;
 			var marginTop:Object;
 			var marginBottom:Object;
 			var margin:Object;
 			var maxWidth:Number = 0;
-            // asking for contentView.width can result in infinite loop if host isn't sized already
-            var w:Number = hostSizedToContent ? 0 : contentView.width;
+			// asking for contentView.width can result in infinite loop if host isn't sized already
+			var w:Number = hostSizedToContent ? 0 : contentView.width;
+			
 			for (var i:int = 0; i < n; i++)
 			{
 				var child:IUIBase = contentView.getElementAt(i) as IUIBase;
 				if (child == null || !child.visible) continue;
-                ilc = child as ILayoutChild;
-                var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
-                var right:Number = ValuesManager.valuesImpl.getValue(child, "right");
+				ilc = child as ILayoutChild;
+				var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
+				var right:Number = ValuesManager.valuesImpl.getValue(child, "right");
 				margin = ValuesManager.valuesImpl.getValue(child, "margin");
 				if (margin is Array)
 				{
@@ -151,18 +169,18 @@ package org.apache.flex.html.beads.layouts
 					child.y = mt;
 				else
 					child.y = yy + Math.max(mt, lastmb);
-                if (ilc)
-                {
-                    if (!isNaN(ilc.percentHeight))
-                        ilc.setHeight(contentView.height * ilc.percentHeight / 100, !isNaN(ilc.percentWidth));
-                }
+				if (ilc)
+				{
+					if (!isNaN(ilc.percentHeight))
+						ilc.setHeight(contentView.height * ilc.percentHeight / 100, !isNaN(ilc.percentWidth));
+				}
 				lastmb = mb;
-                var marginObject:Object = {};
+				var marginObject:Object = {};
 				flexibleHorizontalMargins[i] = marginObject;
 				if (marginLeft == "auto")
 				{
 					ml = 0;
-                    marginObject.marginLeft = marginLeft;
+					marginObject.marginLeft = marginLeft;
 					hasHorizontalFlex = true;
 				}
 				else
@@ -171,15 +189,15 @@ package org.apache.flex.html.beads.layouts
 					if (isNaN(ml))
 					{
 						ml = 0;
-                        marginObject.marginLeft = marginLeft;
+						marginObject.marginLeft = marginLeft;
 					}
 					else
-                        marginObject.marginLeft = ml;
+						marginObject.marginLeft = ml;
 				}
 				if (marginRight == "auto")
 				{
 					mr = 0;
-                    marginObject.marginRight = marginRight;
+					marginObject.marginRight = marginRight;
 					hasHorizontalFlex = true;
 				}
 				else
@@ -188,107 +206,123 @@ package org.apache.flex.html.beads.layouts
 					if (isNaN(mr))
 					{
 						mr = 0;
-                        marginObject.marginRight = marginRight;
+						marginObject.marginRight = marginRight;
 					}
 					else
-                        marginObject.marginRight = mr;
+						marginObject.marginRight = mr;
 				}
-                if (!hostSizedToContent)
-                {
-                    // if host is sized by parent,
-                    // we can position and size children horizontally now
-                    setPositionAndWidth(child, left, ml, right, mr, w);
-                }
-                else
-                {
-                    if (!isNaN(left))
-                    {
-                        ml = left;
-                        marginObject.left = ml;
-                    }
-                    if (!isNaN(right))
-                    {
-                        mr = right;
-                        marginObject.right = mr;
-                    }
-                    maxWidth = Math.max(maxWidth, ml + child.width + mr);                    
-                }
-                yy = child.y + child.height;
+				if (!hostSizedToContent)
+				{
+					// if host is sized by parent,
+					// we can position and size children horizontally now
+					setPositionAndWidth(child, left, ml, right, mr, w);
+				}
+				else
+				{
+					if (!isNaN(left))
+					{
+						ml = left;
+						marginObject.left = ml;
+					}
+					if (!isNaN(right))
+					{
+						mr = right;
+						marginObject.right = mr;
+					}
+					maxWidth = Math.max(maxWidth, ml + child.width + mr);                    
+				}
+				yy = child.y + child.height;
 			}
-            if (hostSizedToContent)
-            {
-                ILayoutChild(contentView).setWidth(maxWidth, true);
-                if (host.isHeightSizedToContent())
-                    ILayoutChild(contentView).setHeight(yy, true);
-    			for (i = 0; i < n; i++)
-    			{
-                    child = contentView.getElementAt(i) as IUIBase;
-    				if (child == null || !child.visible) continue;
-                    var obj:Object = flexibleHorizontalMargins[i];
-                    setPositionAndWidth(child, obj.left, obj.marginLeft,
-                        obj.right, obj.marginRight, maxWidth);
-    			}
-            }
-            if (hasHorizontalFlex)
-            {
-                for (i = 0; i < n; i++)
-                {
-                    child = contentView.getElementAt(i) as IUIBase;
-                    if (child == null || !child.visible) continue;
-                    ilc = child as ILayoutChild;
-                    obj = flexibleHorizontalMargins[i];
-                    if (hasHorizontalFlex)
-                    {
-                        if (obj.marginLeft == "auto" && obj.marginRight == "auto")
-                            child.x = maxWidth - child.width / 2;
-                        else if (obj.marginLeft == "auto")
-                            child.x = maxWidth - child.width - obj.marginRight;
-                    }
-                }
-            }
-            return true;
-		}
-    
-        private function setPositionAndWidth(child:IUIBase, left:Number, ml:Number,
-                                             right:Number, mr:Number, w:Number):void
-        {
-            var widthSet:Boolean = false;
-            
-            var ww:Number = w;
-            var ilc:ILayoutChild = child as ILayoutChild;
-            if (!isNaN(left))
-            {
-                child.x = left + ml;
-                ww -= left + ml;
-            }
-            else 
-            {
-                child.x = ml;
-                ww -= ml;
-            }
-            if (!isNaN(right))
-            {
-                if (!isNaN(left))
-                {
-                    if (ilc)
-                        ilc.setWidth(ww - right - mr, true);
-                    else
-                    {
-                        child.width = ww - right - mr;
-                        widthSet = true;
-                    }
-                }
-                else
-                    child.x = w - right - mr - child.width;
-            }
-            if (ilc)
-            {
-                if (!isNaN(ilc.percentWidth))
-                    ilc.setWidth(w * ilc.percentWidth / 100, true);
-            }
-            if (!widthSet)
-                child.dispatchEvent(new Event("sizeChanged"));
-        }
+			if (hostSizedToContent)
+			{
+				for (i = 0; i < n; i++)
+				{
+					child = contentView.getElementAt(i) as IUIBase;
+					if (child == null || !child.visible) continue;
+					var obj:Object = flexibleHorizontalMargins[i];
+					setPositionAndWidth(child, obj.left, obj.marginLeft,
+						obj.right, obj.marginRight, maxWidth);
+				}
+			}
+			if (hasHorizontalFlex)
+			{
+				for (i = 0; i < n; i++)
+				{
+					child = contentView.getElementAt(i) as IUIBase;
+					if (child == null || !child.visible) continue;
+					ilc = child as ILayoutChild;
+					obj = flexibleHorizontalMargins[i];
+					if (hasHorizontalFlex)
+					{
+						if (obj.marginLeft == "auto" && obj.marginRight == "auto")
+							child.x = maxWidth - child.width / 2;
+						else if (obj.marginLeft == "auto")
+							child.x = maxWidth - child.width - obj.marginRight;
+					}
+				}
+			}
+			
+			// Only return true if the contentView needs to be larger; that new
+			// size is stored in the model.
+			var sizeChanged:Boolean = false;
+			if (viewportModel != null) {
+				if (viewportModel.contentHeight < yy) {
+					viewportModel.contentHeight = yy;
+					sizeChanged = true;
+				}
+				if (viewportModel.contentWidth < maxWidth) {
+					viewportModel.contentWidth = maxWidth;
+					sizeChanged = true;
+				}
+			}
+			
+			host.dispatchEvent( new Event("layoutComplete") );
 
+			return sizeChanged;
+		}
+		
+		private function setPositionAndWidth(child:IUIBase, left:Number, ml:Number,
+											 right:Number, mr:Number, w:Number):void
+		{
+			var widthSet:Boolean = false;
+			
+			var ww:Number = w;
+			var ilc:ILayoutChild = child as ILayoutChild;
+			if (!isNaN(left))
+			{
+				child.x = left + ml;
+				ww -= left + ml;
+			}
+			else 
+			{
+				child.x = ml;
+				ww -= ml;
+			}
+			if (!isNaN(right))
+			{
+				if (!isNaN(left))
+				{
+					if (ilc)
+						ilc.setWidth(ww - right - mr, true);
+					else
+					{
+						child.width = ww - right - mr;
+						widthSet = true;
+					}
+				}
+				else
+					child.x = w - right - mr - child.width;
+			}
+			if (ilc)
+			{
+				if (!isNaN(ilc.percentWidth))
+					ilc.setWidth(w * ilc.percentWidth / 100, true);
+				else
+					ilc.setWidth(w, true);
+			}
+			if (!widthSet)
+				child.dispatchEvent(new Event("sizeChanged"));
+		}
+		
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalScrollingLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalScrollingLayout.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalScrollingLayout.as
deleted file mode 100644
index 91f3f7c..0000000
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VerticalScrollingLayout.as
+++ /dev/null
@@ -1,341 +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 flash.display.DisplayObject;
-	import flash.geom.Rectangle;
-	
-	import org.apache.flex.core.IBeadLayout;
-	import org.apache.flex.core.IBorderModel;
-	import org.apache.flex.core.ILayoutChild;
-	import org.apache.flex.core.ILayoutParent;
-	import org.apache.flex.core.IParentIUIBase;
-	import org.apache.flex.core.IScrollBarModel;
-	import org.apache.flex.core.IScrollingLayoutParent;
-	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.supportClasses.Border;
-	import org.apache.flex.html.supportClasses.ScrollBar;
-
-    /**
-     *  The VerticalScrollingLayout class is a layout
-     *  bead that displays a set of children vertically in one row, 
-     *  separating them according to CSS layout rules for margin and 
-     *  vertical-align styles and lays out a vertical ScrollBar
-     *  to the right of the children.
-     *  
-     *  @langversion 3.0
-     *  @playerversion Flash 10.2
-     *  @playerversion AIR 2.6
-     *  @productversion FlexJS 0.0
-     */
-	public class VerticalScrollingLayout implements IBeadLayout
-	{
-        /**
-         *  Constructor.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-		public function VerticalScrollingLayout()
-		{
-		}
-        
-        private var vScrollBar:ScrollBar;
-		
-		// the strand/host container is also an ILayoutChild because
-		// can have its size dictated by the host's parent which is
-		// important to know for layout optimization
-		private var host:ILayoutChild;
-		
-        /**
-         *  @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
-		{
-			host = value as ILayoutChild; 
-		}
-		
-        /**
-         * @copy org.apache.flex.core.IBeadLayout#layout
-         */
-		public function layout():Boolean
-		{            
-			var layoutParent:IScrollingLayoutParent = host.getBeadByType(IScrollingLayoutParent) as IScrollingLayoutParent;
-			var contentView:IParentIUIBase = layoutParent ? layoutParent.contentView : IParentIUIBase(host);
-			
-			var n:int = contentView.numElements;
-			var hasHorizontalFlex:Boolean;
-			var hostSizedToContent:Boolean = host.isWidthSizedToContent();
-			var flexibleHorizontalMargins:Array = [];
-			var ilc:ILayoutChild;
-			var marginLeft:Object;
-			var marginRight:Object;
-			var marginTop:Object;
-			var marginBottom:Object;
-			var margin:Object;
-			var maxWidth:Number = 0;
-			// asking for contentView.width can result in infinite loop if host isn't sized already
-			var w:Number = hostSizedToContent ? 0 : contentView.width;
-			for (var i:int = 0; i < n; i++)
-			{
-				var child:IUIBase = contentView.getElementAt(i) as IUIBase;
-				if (child == null || !child.visible) continue;
-				ilc = child as ILayoutChild;
-				var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
-				var right:Number = ValuesManager.valuesImpl.getValue(child, "right");
-				margin = ValuesManager.valuesImpl.getValue(child, "margin");
-				if (margin is Array)
-				{
-					if (margin.length == 1)
-						marginLeft = marginTop = marginRight = marginBottom = margin[0];
-					else if (margin.length <= 3)
-					{
-						marginLeft = marginRight = margin[1];
-						marginTop = marginBottom = margin[0];
-					}
-					else if (margin.length == 4)
-					{
-						marginLeft = margin[3];
-						marginBottom = margin[2];
-						marginRight = margin[1];
-						marginTop = margin[0];					
-					}
-				}
-				else if (margin == null)
-				{
-					marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
-					marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
-					marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
-					marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
-				}
-				else
-				{
-					marginLeft = marginTop = marginBottom = marginRight = margin;
-				}
-				var ml:Number;
-				var mr:Number;
-				var mt:Number;
-				var mb:Number;
-				var lastmb:Number;
-				mt = Number(marginTop);
-				if (isNaN(mt))
-					mt = 0;
-				mb = Number(marginBottom);
-				if (isNaN(mb))
-					mb = 0;
-				var yy:Number;
-				if (i == 0)
-					child.y = mt;
-				else
-					child.y = yy + Math.max(mt, lastmb);
-				if (ilc)
-				{
-					if (!isNaN(ilc.percentHeight))
-						ilc.setHeight(contentView.height * ilc.percentHeight / 100, !isNaN(ilc.percentWidth));
-				}
-				lastmb = mb;
-				var marginObject:Object = {};
-				flexibleHorizontalMargins[i] = marginObject;
-				if (marginLeft == "auto")
-				{
-					ml = 0;
-					marginObject.marginLeft = marginLeft;
-					hasHorizontalFlex = true;
-				}
-				else
-				{
-					ml = Number(marginLeft);
-					if (isNaN(ml))
-					{
-						ml = 0;
-						marginObject.marginLeft = marginLeft;
-					}
-					else
-						marginObject.marginLeft = ml;
-				}
-				if (marginRight == "auto")
-				{
-					mr = 0;
-					marginObject.marginRight = marginRight;
-					hasHorizontalFlex = true;
-				}
-				else
-				{
-					mr = Number(marginRight);
-					if (isNaN(mr))
-					{
-						mr = 0;
-						marginObject.marginRight = marginRight;
-					}
-					else
-						marginObject.marginRight = mr;
-				}
-				if (!hostSizedToContent)
-				{
-					// if host is sized by parent,
-					// we can position and size children horizontally now
-					setPositionAndWidth(child, left, ml, right, mr, w);
-				}
-				else
-				{
-					if (!isNaN(left))
-					{
-						ml = left;
-						marginObject.left = ml;
-					}
-					if (!isNaN(right))
-					{
-						mr = right;
-						marginObject.right = mr;
-					}
-					maxWidth = Math.max(maxWidth, ml + child.width + mr);                    
-				}
-				yy = child.y + child.height;
-			}
-			if (hostSizedToContent)
-			{
-				ILayoutChild(contentView).setWidth(maxWidth, true);
-				if (host.isHeightSizedToContent())
-					ILayoutChild(contentView).setHeight(yy, true);
-				for (i = 0; i < n; i++)
-				{
-					child = contentView.getElementAt(i) as IUIBase;
-					if (child == null || !child.visible) continue;
-					var obj:Object = flexibleHorizontalMargins[i];
-					setPositionAndWidth(child, obj.left, obj.marginLeft,
-						obj.right, obj.marginRight, maxWidth);
-				}
-			}
-			if (hasHorizontalFlex)
-			{
-				for (i = 0; i < n; i++)
-				{
-					child = contentView.getElementAt(i) as IUIBase;
-					if (child == null || !child.visible) continue;
-					ilc = child as ILayoutChild;
-					obj = flexibleHorizontalMargins[i];
-					if (hasHorizontalFlex)
-					{
-						if (obj.marginLeft == "auto" && obj.marginRight == "auto")
-							child.x = maxWidth - child.width / 2;
-						else if (obj.marginLeft == "auto")
-							child.x = maxWidth - child.width - obj.marginRight;
-					}
-				}
-			}
-			if (yy > contentView.height)
-			{
-				if (vScrollBar == null) {
-					vScrollBar = layoutParent.vScrollBar;
-					vScrollBar.addEventListener("scroll", scrollHandler);
-					contentView.width -= vScrollBar.width;
-				}
-                if (ilc)
-    				ilc.setWidth(contentView.width - vScrollBar.width);
-				IScrollBarModel(vScrollBar.model).maximum = yy;
-				IScrollBarModel(vScrollBar.model).pageSize = contentView.height;
-				IScrollBarModel(vScrollBar.model).pageStepSize = contentView.height;
-				vScrollBar.visible = true;
-                var vpos:Number = IScrollBarModel(vScrollBar.model).value;
-				if (DisplayObject(contentView).scrollRect == null) {
-					var rect:Rectangle = new Rectangle(0, 0, contentView.width, contentView.height);
-					DisplayObject(contentView).scrollRect = rect;
-				}
-				rect = DisplayObject(contentView).scrollRect;
-				rect.y = vpos;
-                DisplayObject(contentView).scrollRect = rect;//new Rectangle(0, vpos, contentView.width, vpos + contentView.height);
-			}
-			else if (vScrollBar)
-			{
-                DisplayObject(contentView).scrollRect = null;
-				vScrollBar.visible = false;
-			}
-			
-			
-			return true;
-		}
-		
-		private function setPositionAndWidth(child:IUIBase, left:Number, ml:Number,
-											 right:Number, mr:Number, w:Number):void
-		{
-			var widthSet:Boolean = false;
-			
-			var ww:Number = w;
-			var ilc:ILayoutChild = child as ILayoutChild;
-			if (!isNaN(left))
-			{
-				child.x = left + ml;
-				ww -= left + ml;
-			}
-			else 
-			{
-				child.x = ml;
-				ww -= ml;
-			}
-			if (!isNaN(right))
-			{
-				if (!isNaN(left))
-				{
-					if (ilc)
-						ilc.setWidth(ww - right - mr, true);
-					else
-					{
-						child.width = ww - right - mr;
-						widthSet = true;
-					}
-				}
-				else
-					child.x = w - right - mr - child.width;
-			}
-			if (ilc)
-			{
-				if (!isNaN(ilc.percentWidth))
-					ilc.setWidth(w * ilc.percentWidth / 100, true);
-				else {
-					child.width = ww;
-					widthSet = true;
-				}
-			}
-			if (!widthSet)
-				child.dispatchEvent(new Event("sizeChanged"));
-		}
-
-        private function scrollHandler(event:Event):void
-        {
-			var layoutParent:ILayoutParent = host.getBeadByType(ILayoutParent) as ILayoutParent;
-			var contentView:IParentIUIBase = layoutParent.contentView;
-			
-            var vpos:Number = IScrollBarModel(vScrollBar.model).value;
-			var rect:Rectangle = DisplayObject(contentView).scrollRect;
-			rect.y = vpos;
-			DisplayObject(contentView).scrollRect = rect;//new Rectangle(0, vpos, contentView.width, vpos + contentView.height);
-        }
-	}
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as
new file mode 100644
index 0000000..1cdfa55
--- /dev/null
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as
@@ -0,0 +1,149 @@
+package org.apache.flex.html.beads.models
+{
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.EventDispatcher;
+	
+	public class ViewportModel extends EventDispatcher implements IViewportModel
+	{
+		public function ViewportModel()
+		{
+			super();
+		}
+		
+		private var _layout:IBeadLayout;
+		private var _contentArea:IUIBase;
+		private var _contentWidth:Number = 0;
+		private var _contentHeight:Number = 0;
+		private var _contentX:Number = 0;
+		private var _contentY:Number = 0;
+		private var _viewportWidth:Number = 0;
+		private var _viewportHeight:Number = 0;
+		private var _viewportX:Number = 0;
+		private var _viewportY:Number = 0;
+		private var _verticalScrollPosition:Number = 0;
+		private var _horizontalScrollPosition:Number = 0;
+		
+		public function get layout():IBeadLayout
+		{
+			return _layout;
+		}
+		public function set layout(value:IBeadLayout):void
+		{
+			_layout = value;
+			dispatchEvent( new Event("layoutChanged") );
+		}
+		
+		public function get contentArea():IUIBase
+		{
+			return _contentArea;
+		}
+		public function set contentArea(value:IUIBase):void
+		{
+			_contentArea = value;
+			dispatchEvent( new Event("contentAreaChanged") );
+		}
+		
+		public function get viewportWidth():Number
+		{
+			return _viewportWidth;
+		}
+		public function set viewportWidth(value:Number):void
+		{
+			_viewportWidth = value;
+		}
+		
+		public function get viewportHeight():Number
+		{
+			return _viewportHeight;
+		}
+		public function set viewportHeight(value:Number):void
+		{
+			_viewportHeight = value;
+		}
+		
+		public function get viewportX():Number
+		{
+			return _viewportX;
+		}
+		public function set viewportX(value:Number):void
+		{
+			_viewportX = value;
+		}
+		
+		public function get viewportY():Number
+		{
+			return _viewportY;
+		}
+		public function set viewportY(value:Number):void
+		{
+			_viewportY = value;
+		}
+		
+		public function get contentWidth():Number
+		{
+			return _contentWidth;
+		}
+		public function set contentWidth(value:Number):void
+		{
+			_contentWidth = value;
+		}
+		
+		public function get contentHeight():Number
+		{
+			return _contentHeight;
+		}
+		public function set contentHeight(value:Number):void
+		{
+			_contentHeight = value;
+		}
+		
+		public function get contentX():Number
+		{
+			return _contentX;
+		}
+		public function set contentX(value:Number):void
+		{
+			_contentX = value;
+		}
+		
+		public function get contentY():Number
+		{
+			return _contentY;
+		}
+		public function set contentY(value:Number):void
+		{
+			_contentY = value;
+		}
+		
+		public function get verticalScrollPosition():Number
+		{
+			return _verticalScrollPosition;
+		}
+		public function set verticalScrollPosition(value:Number):void
+		{
+			_verticalScrollPosition = value;
+			dispatchEvent( new Event("verticalScrollPositionChanged") );
+		}
+		
+		public function get horizontalScrollPosition():Number
+		{
+			return _horizontalScrollPosition;
+		}
+		public function set horizontalScrollPosition(value:Number):void
+		{
+			_horizontalScrollPosition = value;
+		}
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ContainerContentArea.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ContainerContentArea.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ContainerContentArea.as
index 95b507c..5549f8d 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ContainerContentArea.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ContainerContentArea.as
@@ -18,6 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.supportClasses
 {
+	import org.apache.flex.core.IContentView;
 	import org.apache.flex.core.UIBase;
     import org.apache.flex.events.Event;
 	
@@ -31,7 +32,7 @@ package org.apache.flex.html.supportClasses
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
      */
-	public class ContainerContentArea extends UIBase
+	public class ContainerContentArea extends UIBase implements IContentView
 	{
         /**
          *  Constructor.
@@ -52,5 +53,18 @@ package org.apache.flex.html.supportClasses
             if (parent)
                 parent.dispatchEvent(event);
         }
+		
+		/**
+		 *  @copy org.apache.flex.core.IItemRendererParent#removeAllElements()
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function removeAllElements():void
+		{
+			this.removeChildren(0);
+		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataGroup.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataGroup.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataGroup.as
index 5725f2c..b84dc5c 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataGroup.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DataGroup.as
@@ -32,7 +32,7 @@ package org.apache.flex.html.supportClasses
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
      */
-	public class DataGroup extends UIBase implements IItemRendererParent, IContentView
+	public class DataGroup extends ContainerContentArea implements IItemRendererParent, IContentView
 	{
         /**
          *  Constructor.
@@ -61,17 +61,25 @@ package org.apache.flex.html.supportClasses
             return getChildAt(index) as IItemRenderer;
         }
 		
-        /**
-         *  @copy org.apache.flex.core.IItemRendererParent#removeAllElements()
+		/**
+		 *  Refreshes the itemRenderers. Useful after a size change by the data group.
          *  
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
          *  @productversion FlexJS 0.0
-         */
-		public function removeAllElements():void
+		 */
+		public function updateAllItemRenderers():void
 		{
-			this.removeChildren(0);
+			var n:Number = numElements;
+			for (var i:Number = 0; i < n; i++)
+			{
+				var renderer:DataItemRenderer = getItemRendererForIndex(i) as DataItemRenderer;
+				if (renderer) {
+					renderer.setWidth(this.width,true);
+					renderer.adjustSize();
+				}
+			}
 		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollBar.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollBar.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollBar.as
index 3aa2571..0bef2e6 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollBar.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollBar.as
@@ -20,6 +20,7 @@ package org.apache.flex.html.supportClasses
 {
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.IChrome;
+	import org.apache.flex.core.IViewportScroller;
 	
 	/**
 	 *  The ScrollBar class represents either a vertical or horizontal control
@@ -31,7 +32,7 @@ package org.apache.flex.html.supportClasses
 	 *  @playerversion AIR 2.6
 	 *  @productversion FlexJS 0.0
 	 */
-	public class ScrollBar extends UIBase implements IChrome
+	public class ScrollBar extends UIBase implements IChrome, IViewportScroller
 	{
 		/**
 		 *  constructor.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/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
new file mode 100644
index 0000000..1b154e3
--- /dev/null
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
@@ -0,0 +1,367 @@
+package org.apache.flex.html.supportClasses
+{
+	import flash.geom.Rectangle;
+	
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewport;
+	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.core.IViewportScroller;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.UIMetrics;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.html.beads.models.ScrollBarModel;
+	import org.apache.flex.utils.BeadMetrics;
+	
+	public class ScrollingViewport implements IBead, IViewport
+	{
+		static private const scrollerSize:int = 16;
+		static private const scrollerSizeWithBorder:int = 17;
+		
+		public function ScrollingViewport()
+		{
+		}
+		
+		private var contentArea:UIBase;
+		private var layout:IBeadLayout;
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+		
+		private var _model:IViewportModel;
+		
+		public function set model(value:IViewportModel):void
+		{
+			_model = value;
+			
+			if (model.layout) layout = model.layout as IBeadLayout;
+			if (model.contentArea) contentArea = model.contentArea as UIBase;
+			
+			model.addEventListener("layoutChanged", handleLayoutChange);
+			model.addEventListener("contentAreaChanged", handleContentChange);
+			model.addEventListener("verticalScrollPositionChanged", handleVerticalScrollChange);
+			model.addEventListener("horizontalScrollPositionChanged", handleHorizontalScrollChange);
+		}
+		public function get model():IViewportModel
+		{
+			return _model;
+		}
+		
+		private var _verticalScroller:ScrollBar;
+		public function get verticalScroller():IViewportScroller
+		{
+			return _verticalScroller;
+		}
+		
+		private var _horizontalScroller:ScrollBar
+		public function get horizontalScroller():IViewportScroller
+		{
+			return _horizontalScroller;
+		}
+		
+		public function runLayout():Boolean
+		{
+			return layout.layout();
+		}
+		
+		/**
+		 * Invoke this function to reshape and set the contentArea being managed by
+		 * this viewport. If scrollers are present this will update them as well to
+		 * reflect the current location of the visible portion of the contentArea
+		 * within the viewport.
+		 */
+		public function updateContentAreaSize():void
+		{
+			var host:UIBase = UIBase(_strand);
+			var rect:Rectangle;
+			var vbarAdjustHeightBy:Number = 0;
+			var hbarAdjustWidthBy:Number = 0;
+			
+			if (_verticalScroller) {
+				ScrollBarModel(_verticalScroller.model).maximum = model.contentHeight;
+				_verticalScroller.x = model.viewportWidth - scrollerSizeWithBorder;
+				_verticalScroller.y = model.viewportY;
+				
+				rect = contentArea.scrollRect;
+				rect.y = ScrollBarModel(_verticalScroller.model).value;
+				contentArea.scrollRect = rect;
+				
+				hbarAdjustWidthBy = scrollerSizeWithBorder;
+			}
+			
+			if (_horizontalScroller) {
+				ScrollBarModel(_horizontalScroller.model).maximum = model.contentWidth;
+				_horizontalScroller.x = model.viewportX;
+				_horizontalScroller.y = model.viewportHeight - scrollerSizeWithBorder;
+				
+				rect = contentArea.scrollRect;
+				rect.x = ScrollBarModel(_horizontalScroller.model).value;
+				contentArea.scrollRect = rect;
+				
+				vbarAdjustHeightBy = scrollerSizeWithBorder;
+			}
+			
+			if (_verticalScroller) {
+				_verticalScroller.setWidthAndHeight(scrollerSize, model.viewportHeight - vbarAdjustHeightBy, false);
+			}
+			if (_horizontalScroller) {
+				_horizontalScroller.setWidthAndHeight(model.viewportHeight - hbarAdjustWidthBy, scrollerSize, false);
+			} 
+			
+			contentArea.x = model.contentX;
+			contentArea.y = model.contentY;
+			contentArea.setWidthAndHeight(model.contentWidth, model.contentHeight, true);
+		}
+		
+		public function updateSize():void
+		{
+			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+			var host:UIBase = UIBase(_strand);
+			var vbarGone:Boolean = _verticalScroller == null;
+			var hbarGone:Boolean = _horizontalScroller == null;
+			var addVbar:Boolean = false;
+			var addHbar:Boolean = false;
+			
+			if (model.viewportHeight >= model.contentHeight) {
+				if (_verticalScroller) {
+					host.removeElement(_verticalScroller);
+					_verticalScroller = null;
+					vbarGone = true;
+				}
+			}
+			else if (model.contentHeight > model.viewportHeight) {
+				if (_verticalScroller == null) {
+					addVbar = true;
+					vbarGone = false;
+				}
+			}
+			
+			if (model.viewportWidth >= model.contentWidth) {
+				if (_horizontalScroller) {
+					host.removeElement(_horizontalScroller);
+					_horizontalScroller = null;
+					hbarGone = true;
+				}
+			}
+			else if (model.contentWidth > model.viewportWidth) {
+				if (_horizontalScroller == null) {
+					addHbar = true;
+					hbarGone = false;
+				}
+			}
+			
+			if (addVbar) needsVerticalScroller();
+			if (_verticalScroller) {
+				ScrollBarModel(_verticalScroller.model).maximum = model.contentHeight;
+				ScrollBarModel(_verticalScroller.model).pageSize = model.viewportHeight - metrics.top - metrics.bottom;
+				ScrollBarModel(_verticalScroller.model).pageStepSize = model.viewportHeight - metrics.top - metrics.bottom;
+			}
+			
+			if (addHbar) needsHorizontalScroller();
+			if (_horizontalScroller) {
+				ScrollBarModel(_horizontalScroller.model).maximum = model.contentWidth;
+				ScrollBarModel(_horizontalScroller.model).pageSize = model.viewportWidth - metrics.left - metrics.right;
+				ScrollBarModel(_horizontalScroller.model).pageStepSize = model.viewportWidth - metrics.left - metrics.right
+			}
+			
+			if (hbarGone && vbarGone) {
+				contentArea.scrollRect = null;
+			}
+			else {
+				var rect:Rectangle = contentArea.scrollRect;
+				if (rect) {
+					rect.x = 0;
+					rect.y = 0;
+					rect.width = model.viewportWidth - metrics.left - metrics.right;
+					rect.height = model.viewportHeight - 2*metrics.top - 2*metrics.bottom;
+					contentArea.scrollRect = rect;
+				}
+			}
+			
+			updateContentAreaSize();
+			
+			// NOTE: this might make the scrollbars go away OR it might make them needed!
+		}
+		
+		/**
+		 * Call this function when at least one scroller is needed to view the entire
+		 * contentArea.
+		 */
+		public function needsScrollers():void
+		{
+			needsVerticalScroller();
+			needsHorizontalScroller();
+		}
+		
+		/**
+		 * Call this function when only a vertical scroller is needed
+		 */
+		public function needsVerticalScroller():void
+		{
+			var host:UIBase = UIBase(_strand);
+			
+			var needVertical:Boolean = model.contentHeight > model.viewportHeight;
+			
+			if (needVertical && _verticalScroller == null) {
+				_verticalScroller = createVerticalScrollBar();
+				var vMetrics:UIMetrics = BeadMetrics.getMetrics(_verticalScroller);
+				_verticalScroller.visible = true;
+				_verticalScroller.x = model.viewportWidth - scrollerSizeWithBorder - vMetrics.left - vMetrics.right;
+				_verticalScroller.y = model.viewportY;
+				_verticalScroller.setWidthAndHeight(scrollerSize, model.viewportHeight, true);
+				
+				host.addElement(_verticalScroller, false);
+			}
+		}
+		
+		/**
+		 * Call this function when only a horizontal scroller is needed
+		 */
+		public function needsHorizontalScroller():void
+		{
+			var host:UIBase = UIBase(_strand);
+			
+			var needHorizontal:Boolean = model.contentWidth > model.viewportWidth;
+			
+			if (needHorizontal && _horizontalScroller == null) {
+				_horizontalScroller = createHorizontalScrollBar();
+				var hMetrics:UIMetrics = BeadMetrics.getMetrics(_horizontalScroller);
+				_horizontalScroller.visible = true;
+				_horizontalScroller.x = model.viewportX;
+				_horizontalScroller.y = model.viewportHeight - scrollerSizeWithBorder - hMetrics.top - hMetrics.bottom;
+				_horizontalScroller.setWidthAndHeight(model.viewportWidth, scrollerSize, true);
+				
+				host.addElement(_horizontalScroller, false);
+			}
+		}
+		
+		public function scrollerWidth():Number
+		{
+			if (_verticalScroller) return _verticalScroller.width;
+			return 0;
+		}
+		
+		public function scrollerHeight():Number
+		{
+			if (_horizontalScroller) return _horizontalScroller.height;
+			return 0;
+		}
+		
+		private function createVerticalScrollBar():ScrollBar
+		{
+			var host:UIBase = UIBase(_strand);
+			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
+			
+			var vsbm:ScrollBarModel = new ScrollBarModel();
+			vsbm.maximum = model.contentHeight;
+			vsbm.minimum = 0;
+			vsbm.pageSize = model.viewportHeight - metrics.top - metrics.bottom;
+			vsbm.pageStepSize = model.viewportHeight - metrics.top - metrics.bottom;
+			vsbm.snapInterval = 1;
+			vsbm.stepSize = 1;
+			vsbm.value = 0;
+			
+			var vsb:ScrollBar;
+			vsb = new ScrollBar();
+			vsb.model = vsbm;
+			vsb.visible = false;
+			
+			vsb.addEventListener("scroll",handleVerticalScroll);
+			
+			var rect:Rectangle = contentArea.scrollRect;
+			if (rect == null) {
+				rect = new Rectangle(0, 0, 
+					                 model.viewportWidth - metrics.left - metrics.right, 
+									 model.viewportHeight - metrics.top - metrics.bottom);
+				contentArea.scrollRect = rect;
+			}
+			
+			return vsb;
+		}
+		
+		private function createHorizontalScrollBar():ScrollBar
+		{
+			var host:UIBase = UIBase(_strand);
+			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
+			
+			var hsbm:ScrollBarModel = new ScrollBarModel();
+			hsbm.maximum = model.contentWidth;
+			hsbm.minimum = 0;
+			hsbm.pageSize = model.viewportWidth - metrics.left - metrics.right;
+			hsbm.pageStepSize = model.viewportWidth - metrics.left - metrics.right;
+			hsbm.snapInterval = 1;
+			hsbm.stepSize = 1;
+			hsbm.value = 0;
+			
+			var hsb:ScrollBar;
+			hsb = new ScrollBar();
+			hsb.model = hsbm;
+			hsb.visible = false;
+			
+			hsb.addEventListener("scroll",handleHorizontalScroll);
+			
+			var rect:Rectangle = contentArea.scrollRect;
+			if (rect == null) {
+				rect = new Rectangle(0, 0, 
+					model.viewportWidth - metrics.left - metrics.right, 
+					model.viewportHeight - metrics.top - metrics.bottom);
+				contentArea.scrollRect = rect;
+			}
+			
+			return hsb;
+		}
+		
+		private function handleVerticalScroll(event:Event):void
+		{
+			var host:UIBase = UIBase(_strand);
+			var vpos:Number = ScrollBarModel(_verticalScroller.model).value;
+			var rect:Rectangle = contentArea.scrollRect;
+			rect.y = vpos;
+			contentArea.scrollRect = rect;
+			
+			model.verticalScrollPosition = vpos;
+		}
+		
+		private function handleHorizontalScroll(event:Event):void
+		{
+			var host:UIBase = UIBase(_strand);
+			var hpos:Number = ScrollBarModel(_horizontalScroller.model).value;
+			var rect:Rectangle = contentArea.scrollRect;
+			rect.x = hpos;
+			contentArea.scrollRect = rect;
+			
+			model.horizontalScrollPosition = hpos;
+		}
+		
+		private function handleLayoutChange(event:Event):void
+		{
+			layout = model.layout as IBeadLayout;
+		}
+		
+		private function handleContentChange(event:Event):void
+		{
+			contentArea = model.contentArea as UIBase;
+		}
+		
+		private function handleVerticalScrollChange(event:Event):void
+		{
+			if (_verticalScroller) {
+				ScrollBarModel(_verticalScroller.model).value = model.verticalScrollPosition;
+			}
+		}
+		
+		private function handleHorizontalScrollChange(event:Event):void
+		{
+			if (_horizontalScroller) {
+				ScrollBarModel(_horizontalScroller.model).value = model.horizontalScrollPosition;
+			}
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/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 44208c1..d33a3aa 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
@@ -60,6 +60,7 @@ package org.apache.flex.html.supportClasses
             // very common for item renderers to be resized by their containers,
             addEventListener("widthChanged", sizeChangeHandler);
             addEventListener("heightChanged", sizeChangeHandler);
+			addEventListener("sizeChanged", sizeChangeHandler);
 
             // each MXML file can also have styles in fx:Style block
             ValuesManager.valuesImpl.init(this);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/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
new file mode 100644
index 0000000..b83b838
--- /dev/null
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
@@ -0,0 +1,132 @@
+package org.apache.flex.html.supportClasses
+{
+	import flash.geom.Rectangle;
+	
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewport;
+	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.core.IViewportScroller;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.UIMetrics;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.html.beads.models.ScrollBarModel;
+	import org.apache.flex.utils.BeadMetrics;
+	
+	public class Viewport implements IBead, IViewport
+	{	
+		public function Viewport()
+		{
+		}
+		
+		private var contentArea:UIBase;
+		private var layout:IBeadLayout;
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+		
+		private var _model:IViewportModel;
+		
+		public function set model(value:IViewportModel):void
+		{
+			_model = value;
+			
+			if (model.layout) layout = model.layout as IBeadLayout;
+			if (model.contentArea) contentArea = model.contentArea as UIBase;
+			
+			model.addEventListener("layoutChanged", handleLayoutChange);
+			model.addEventListener("contentAreaChanged", handleContentChange);
+		}
+		public function get model():IViewportModel
+		{
+			return _model;
+		}
+		
+		public function get verticalScroller():IViewportScroller
+		{
+			return null;
+		}
+		
+		public function get horizontalScroller():IViewportScroller
+		{
+			return null;
+		}
+		
+		public function runLayout():Boolean
+		{
+			return layout.layout();
+		}
+		
+		/**
+		 * Invoke this function to reshape and set the contentArea being managed by
+		 * this viewport. If scrollers are present this will update them as well to
+		 * reflect the current location of the visible portion of the contentArea
+		 * within the viewport.
+		 */
+		public function updateContentAreaSize():void
+		{
+			contentArea.x = model.contentX;
+			contentArea.y = model.contentY;
+			contentArea.setWidthAndHeight(model.contentWidth, model.contentHeight, true);
+		}
+		
+		public function updateSize():void
+		{
+			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+			var host:UIBase = UIBase(_strand);
+			
+			updateContentAreaSize();
+		}
+		
+		/**
+		 * Call this function when at least one scroller is needed to view the entire
+		 * contentArea.
+		 */
+		public function needsScrollers():void
+		{
+		}
+		
+		/**
+		 * Call this function when only a vertical scroller is needed
+		 */
+		public function needsVerticalScroller():void
+		{
+			
+		}
+		
+		/**
+		 * Call this function when only a horizontal scroller is needed
+		 */
+		public function needsHorizontalScroller():void
+		{
+			
+		}
+		
+		public function scrollerWidth():Number
+		{
+			return 0;
+		}
+		
+		public function scrollerHeight():Number
+		{
+			return 0;
+		}
+		
+		private function handleLayoutChange(event:Event):void
+		{
+			layout = model.layout as IBeadLayout;
+		}
+		
+		private function handleContentChange(event:Event):void
+		{
+			contentArea = model.contentArea as UIBase;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/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 2c67e70..61bac6b 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
@@ -120,6 +120,7 @@ package org.apache.flex.html.beads
 			buttonBar = new ButtonBar();
 			buttonBar.addBead(buttonBarModel);
 			buttonBar.addBead(bblayout);
+			buttonBar.height = 25;
 			UIBase(_strand).addElement(buttonBar);
 			
 			// Create a List for each column, storing a reference to each List in
@@ -147,6 +148,7 @@ package org.apache.flex.html.beads
 				columns.push(list);
 				list.addEventListener('change',columnListChangeHandler);
 				list.addEventListener('rollover',columnListRollOverHandler);
+				list.addEventListener('layoutComplete',forwardEvent);
 			}
 			
 			// TODO: allow a developer to specify their own DataGridLayout
@@ -221,5 +223,14 @@ package org.apache.flex.html.beads
 			
 			IEventDispatcher(_strand).dispatchEvent(new Event('rollOver'));
 		}
+		
+		/**
+		 * @private
+		 */
+		private function forwardEvent(event:Event):void
+		{
+			IEventDispatcher(_strand).dispatchEvent(event);
+		}
+		 
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
index 6b3c0bc..4f72ad8 100644
--- a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
+++ b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
@@ -24,6 +24,9 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IParent;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewport;
+	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.html.supportClasses.Viewport;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
@@ -73,6 +76,25 @@ package org.apache.flex.html.beads.layouts
 		{
             host = value as ILayoutChild;
 		}
+		
+		private var _viewportModel:IViewportModel;
+		
+		/**
+		 *  The data that describes the viewport used by this layout.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get viewportModel():IViewportModel
+		{
+			return _viewportModel;
+		}
+		public function set viewportModel(value:IViewportModel):void
+		{
+			_viewportModel = value;
+		}
 	
         private var _maxWidth:Number;
         
@@ -128,6 +150,10 @@ package org.apache.flex.html.beads.layouts
 			var layoutParent:ILayoutParent = host.getBeadByType(ILayoutParent) as ILayoutParent;
 			var contentView:IParent = layoutParent.contentView;
             var hostSizedToContent:Boolean = host.isHeightSizedToContent();
+			
+			// this layout will use and modify the IViewportMode
+			var viewport:IViewport = host.getBeadByType(IViewport) as IViewport;
+			if (viewport) viewportModel = viewport.model;
 
 			var n:int = contentView.numElements;
 			var marginLeft:Object;
@@ -231,8 +257,24 @@ package org.apache.flex.html.beads.layouts
 			}
             if (hostSizedToContent)
                 ILayoutChild(contentView).setHeight(maxHeight, true);
+			
+			// Only return true if the contentView needs to be larger; that new
+			// size is stored in the model.
+			var sizeChanged:Boolean = false;
+			if (viewportModel != null) {
+				if (viewportModel.contentHeight < maxHeight) {
+					viewportModel.contentHeight = maxHeight;
+					sizeChanged = true;
+				}
+				if (viewportModel.contentWidth < xx) {
+					viewportModel.contentWidth = xx;
+					sizeChanged = true;
+				}
+			} else {
+				sizeChanged = true;
+			}
 
-            return true;
+            return sizeChanged;
 		}
 
         // TODO (aharui): utility class or base class

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f62f49c7/frameworks/projects/HTML/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/basic-manifest.xml b/frameworks/projects/HTML/basic-manifest.xml
index 4fa3887..fcd23d5 100644
--- a/frameworks/projects/HTML/basic-manifest.xml
+++ b/frameworks/projects/HTML/basic-manifest.xml
@@ -40,7 +40,6 @@
     <component id="RadioButton" class="org.apache.flex.html.RadioButton"/>
     <component id="ComboBox" class="org.apache.flex.html.ComboBox"/>
     <component id="Container" class="org.apache.flex.html.Container"/>
-    <component id="ScrollingContainerView" class="org.apache.flex.html.beads.ScrollingContainerView"/>
     <component id="HContainer" class="org.apache.flex.html.HContainer"/>
     <component id="VContainer" class="org.apache.flex.html.VContainer"/>
     <component id="Panel" class="org.apache.flex.html.Panel"/>
@@ -51,11 +50,8 @@
     <component id="TitleBarModel" class="org.apache.flex.html.beads.models.TitleBarModel"/>
     <component id="ToolTip" class="org.apache.flex.html.ToolTip"/>
     <component id="BasicLayout" class="org.apache.flex.html.beads.layouts.BasicLayout"/>
-    <component id="BasicScrollingLayout" class="org.apache.flex.html.beads.layouts.BasicScrollingLayout"/>
     <component id="VerticalLayout" class="org.apache.flex.html.beads.layouts.VerticalLayout"/>
     <component id="HorizontalLayout" class="org.apache.flex.html.beads.layouts.HorizontalLayout"/>
-    <component id="VerticalScrollingLayout" class="org.apache.flex.html.beads.layouts.VerticalScrollingLayout"/>
-    <component id="HorizontalScrollingLayout" class="org.apache.flex.html.beads.layouts.HorizontalScrollingLayout"/>
     <component id="TileLayout" class="org.apache.flex.html.beads.layouts.TileLayout"/>
     <component id="ListView" class="org.apache.flex.html.beads.ListView"/>
     <component id="ListViewNoSelectionState" class="org.apache.flex.html.beads.ListViewNoSelectionState"/>
@@ -78,6 +74,7 @@
     <component id="HRule" class="org.apache.flex.html.HRule" />
     <component id="Spacer" class="org.apache.flex.html.Spacer" />
     <component id="ImageAndTextButtonView" class="org.apache.flex.html.beads.ImageAndTextButtonView" />
+    <component id="ScrollingViewport" class="org.apache.flex.html.supportClasses.ScrollingViewport" />
 
     <component id="DataGrid" class="org.apache.flex.html.DataGrid"/>
     <component id="DataGridColumn" class="org.apache.flex.html.supportClasses.DataGridColumn"/>