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"/>

Reply via email to