http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
index 29a8b6d,501799f..148866b
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
@@@ -18,11 -18,10 +18,14 @@@
  
////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads.layouts
  {
++      import org.apache.flex.core.LayoutBase;
++      
        import org.apache.flex.core.IBeadLayout;
        import org.apache.flex.core.IBeadModel;
        import org.apache.flex.core.ILayoutChild;
        import org.apache.flex.core.ILayoutHost;
-     import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutView;
++      import org.apache.flex.core.ILayoutParent;
        import org.apache.flex.core.IParentIUIBase;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.IUIBase;
@@@ -32,8 -31,8 +35,10 @@@
        import org.apache.flex.geom.Rectangle;
        import org.apache.flex.utils.CSSContainerUtils;
        import org.apache.flex.utils.CSSUtils;
--    COMPILE::JS
--    {
++      COMPILE::SWF {
++                      import org.apache.flex.core.UIBase;
++      }
++    COMPILE::JS {
          import org.apache.flex.core.WrappedHTMLElement;
      }
  
@@@ -42,17 -41,17 +47,17 @@@
       *  bead.  It takes the set of children and lays them out
       *  horizontally in one row, separating them according to
       *  CSS layout rules for margin and vertical-align styles.
--     *  
++     *
       *  @langversion 3.0
       *  @playerversion Flash 10.2
       *  @playerversion AIR 2.6
       *  @productversion FlexJS 0.0
       */
--      public class HorizontalLayout implements IBeadLayout
++      public class HorizontalLayout extends LayoutBase implements IBeadLayout
        {
          /**
           *  Constructor.
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -60,272 -59,268 +65,140 @@@
           */
                public function HorizontalLayout()
                {
++                      super();
                }
--              
--        // 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
--               *  @flexjsignorecoercion HTMLElement
++         *  @flexjsignorecoercion HTMLElement
++         *  @flexjsignorecoercion org.apache.flex.core.IUIBase
           */
--              public function set strand(value:IStrand):void
++              override public function set strand(value:IStrand):void
                {
--                      host = value as ILayoutChild;
++                      super.strand = value;
++                      
              COMPILE::JS
              {
-                 var base:IUIBase = value as IUIBase;
-                 if (base.element.style.display !== "none") {
-                     base.element.style.display = "block";
-                 }
 -                ((value as IUIBase).element as HTMLElement).style.display = 
'block';
++                              var base:IUIBase = value as IUIBase;
++                              if (base.element.style.display !== "none") {
++                                      base.element.style.display = "block";
++                              }
              }
                }
--      
++
          /**
           * @copy org.apache.flex.core.IBeadLayout#layout
           * @flexjsignorecoercion org.apache.flex.core.ILayoutHost
           * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
           */
--              public function layout():Boolean
++              override public function layout():Boolean
                {
              COMPILE::SWF
              {
--                //trace(DOMPathUtil.getPath(host), event ? event.type : 
"fixed size");
-                 var layoutParent:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
 -                var layoutParent:ILayoutHost = 
host.getBeadByType(ILayoutHost) as ILayoutHost;
--                var contentView:IParentIUIBase = layoutParent.contentView;
--                var padding:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
--                
--                var n:int = contentView.numElements;
--                var hostSizedToContent:Boolean = 
host.isHeightSizedToContent();
--                var ilc:ILayoutChild;
--                var marginLeft:Object;
--                var marginRight:Object;
--                var marginTop:Object;
--                var marginBottom:Object;
--                var margin:Object;
--                var maxHeight:Number = 0;
--                // asking for contentView.height can result in infinite loop 
if host isn't sized already
--                var h:Number = hostSizedToContent ? 0 : contentView.height;
--                var w:Number = contentView.width;
--                var verticalMargins:Array = [];
--                
--                for (var i:int = 0; i < n; i++)
--                {
--                    var child:IUIBase = contentView.getElementAt(i) as 
IUIBase;
--                    if (child == null || !child.visible) continue;
--                    var top:Number = ValuesManager.valuesImpl.getValue(child, 
"top");
--                    var bottom:Number = 
ValuesManager.valuesImpl.getValue(child, "bottom");
--                    margin = ValuesManager.valuesImpl.getValue(child, 
"margin");
--                    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");
--                    var ml:Number = CSSUtils.getLeftValue(marginLeft, margin, 
w);
--                    var mr:Number = CSSUtils.getRightValue(marginRight, 
margin, w);
--                    var mt:Number = CSSUtils.getTopValue(marginTop, margin, 
h);
--                    var mb:Number = CSSUtils.getBottomValue(marginBottom, 
margin, h);
--                    
--                    ilc = child as ILayoutChild;
--                    var lastmr:Number;
--                    if (marginLeft == "auto")
--                        ml = 0;
--                    if (marginRight == "auto")
--                        mr = 0;
--                    var xx:Number;
--                    if (i == 0)
--                    {
--                        if (ilc)
--                            ilc.setX(ml + padding.left);
--                        else
--                            child.x = ml + padding.left;
--                    }
--                    else
--                    {
--                        if (ilc)
--                            ilc.setX(xx + ml + lastmr);
--                        else
--                            child.x = xx + ml + lastmr;
--                    }
--                    if (ilc)
--                    {
--                        if (!isNaN(ilc.percentWidth))
--                            ilc.setWidth(contentView.width * ilc.percentWidth 
/ 100, !isNaN(ilc.percentHeight));
--                    }
--                    lastmr = mr;
--                    var marginObject:Object = {};
--                    verticalMargins[i] = marginObject;
--                    var valign:* = ValuesManager.valuesImpl.getValue(child, 
"vertical-align");
--                    marginObject.valign = valign;
--                    if (!hostSizedToContent)
--                    {
--                        // if host is sized by parent,
--                        // we can position and size children horizontally now
--                        setPositionAndHeight(child, top, mt, padding.top, 
bottom, mb, padding.bottom, h, valign);
--                        maxHeight = Math.max(maxHeight, mt + child.height + 
mb);
--                    }
--                    else
--                    {
--                        if (!isNaN(top))
--                        {
--                            mt = top;
--                            marginObject.top = mt;
--                        }
--                        if (!isNaN(bottom))
--                        {
--                            mb = bottom;
--                            marginObject.bottom = mb;
--                        }
--                        maxHeight = Math.max(maxHeight, mt + child.height + 
mb);
--                    }
--                    xx = child.x + child.width;
--                }
--                if (hostSizedToContent)
--                {
--                    ILayoutChild(contentView).setHeight(maxHeight, true);
--                    if (host.isWidthSizedToContent())
--                        ILayoutChild(contentView).setWidth(xx, true);
--                    for (i = 0; i < n; i++)
--                    {
--                        child = contentView.getElementAt(i) as IUIBase;
--                        if (child == null || !child.visible) continue;
--                        var obj:Object = verticalMargins[i];
--                        setPositionAndHeight(child, obj.top, obj.marginTop, 
padding.top,
--                            obj.bottom, obj.marginBottom, padding.bottom, 
maxHeight, obj.valign);
--                    }
--                }
--                
--                // Only return true if the contentView needs to be larger; 
that new
--                // size is stored in the model.
--                var sizeChanged:Boolean = true;
--                
--                host.dispatchEvent( new Event("layoutComplete") );
--                
--                return sizeChanged;
--                
++                              var contentView:ILayoutView = layoutView;
++
++                              var n:Number = contentView.numElements;
++                              if (n == 0) return false;
++
++                              var maxWidth:Number = 0;
++                              var maxHeight:Number = 0;
++                              var hostWidthSizedToContent:Boolean = 
host.isWidthSizedToContent();
++                              var hostHeightSizedToContent:Boolean = 
host.isHeightSizedToContent();
++                              var hostWidth:Number = hostWidthSizedToContent 
? 0 : contentView.width;
++                              var hostHeight:Number = 
hostHeightSizedToContent ? 0 : contentView.height;
++
++                              var ilc:ILayoutChild;
++                              var data:Object;
++                              var canAdjust:Boolean = false;
++
++                              var paddingMetrics:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
++                              var borderMetrics:Rectangle = 
CSSContainerUtils.getBorderMetrics(host);
++                              
++                              // adjust the host's usable size by the 
metrics. If hostSizedToContent, then the
++                              // resulting adjusted value may be less than 
zero.
++                              hostWidth -= paddingMetrics.left + 
paddingMetrics.right + borderMetrics.left + borderMetrics.right;
++                              hostHeight -= paddingMetrics.top + 
paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
++
++                              var xpos:Number = borderMetrics.left + 
paddingMetrics.left;
++                              var ypos:Number = borderMetrics.top + 
paddingMetrics.left;
++
++                              // First pass determines the data about the 
child.
++                              for(var i:int=0; i < n; i++)
++                              {
++                                      var child:IUIBase = 
contentView.getElementAt(i) as IUIBase;
++                                      if (child == null || !child.visible) 
continue;
++                                      var positions:Object = 
childPositions(child);
++                                      var margins:Object = 
childMargins(child, hostWidth, hostHeight);
++
++                                      ilc = child as ILayoutChild;
++
++                                      xpos += margins.left;
++
++                                      var childYpos:Number = ypos + 
margins.top; // default y position
++
++                                      if (!hostHeightSizedToContent) {
++                                              var childHeight:Number = 
child.height;
++                                              if (ilc != null && 
!isNaN(ilc.percentHeight)) {
++                                                      childHeight = 
hostHeight * ilc.percentHeight/100.0;
++                                                      
ilc.setHeight(childHeight);
++                                              }
++                                              // the following code 
middle-aligns the child, but since HTML does not
++                                              // do this normally, this code 
is commented. (Use HorizontalFlexLayout for
++                                              // vertically centered elements 
in a horizontal row).
++//                                            childYpos = hostHeight/2 - 
(childHeight + mt + mb)/2;
++                                      }
++
++                                      if (ilc) {
++                                              ilc.setX(xpos);
++                                              ilc.setY(childYpos);
++
++                                              if (!hostWidthSizedToContent && 
!isNaN(ilc.percentWidth)) {
++                                                      var newWidth:Number = 
hostWidth * ilc.percentWidth / 100;
++                                                      ilc.setWidth(newWidth);
++                                              }
++
++                                      } else {
++                                              child.x = xpos;
++                                              child.y = childYpos;
++                                      }
++
++                                      xpos += child.width + margins.right;
++                              }
++
++                              return true;
++
              }
              COMPILE::JS
              {
                  var children:Array;
                  var i:int;
                  var n:int;
--                
-                 var viewBead:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
 -                var viewBead:ILayoutHost = host.getBeadByType(ILayoutHost) as 
ILayoutHost;
--                var contentView:IParentIUIBase = viewBead.contentView;
++                              var contentView:IParentIUIBase = layoutView as 
IParentIUIBase;
++
++                              contentView.element.style["white-space"] = 
"nowrap";
++
                  children = contentView.internalChildren();
--                var hasHeight:Boolean = !host.isHeightSizedToContent();
--                var hasWidth:Boolean = !host.isWidthSizedToContent();
--                var maxHeight:Number = 0;
--                var computedWidth:Number = 0;
++
++
                  n = children.length;
                  for (i = 0; i < n; i++)
                  {
                      var child:WrappedHTMLElement = children[i] as 
WrappedHTMLElement;
-                     if (child == null) continue;
--                    child.flexjs_wrapper.internalDisplay = 'inline-block';
--                    if (child.style.display == 'none')
--                        
child.flexjs_wrapper.setDisplayStyleForLayout('inline-block');
--                    else
--                        child.style.display = 'inline-block';
--                    maxHeight = Math.max(maxHeight, child.offsetHeight);
--                    if (!hasWidth) {
--                        var cv:Object = getComputedStyle(child);
--                        var mls:String = cv['margin-left'];
--                        var ml:Number = Number(mls.substring(0, mls.length - 
2));
--                        var mrs:String = cv['margin-right'];
--                        var mr:Number = Number(mrs.substring(0, mrs.length - 
2));
--                        computedWidth += ml + child.offsetWidth + mr;
--                    }
--                    child.flexjs_wrapper.dispatchEvent('sizeChanged');
--                }
--                // if there are children and maxHeight is ok, use it.
--                // maxHeight can be NaN if the child hasn't been rendered yet.
--                if (!hasHeight && n > 0 && !isNaN(maxHeight)) {
--                    contentView.height = maxHeight;
--                }
--                if (!hasWidth && n > 0 && !isNaN(computedWidth)) {
--                    contentView.width = computedWidth + 1; // some browser 
need one more pixel
--                }
++                                      if (child == null) continue;
++                                      
child.flexjs_wrapper.setDisplayStyleForLayout('inline-block');
++                                      if (child.style.display !== 'none')
++                                      {
++                                              child.style.display = 
'inline-block';
++                                      }
++                              }
++
                  return true;
              }
                }
--        
--        COMPILE::SWF
--        private function setPositionAndHeight(child:IUIBase, top:Number, 
mt:Number, pt:Number,
--                                             bottom:Number, mb:Number, 
pb:Number, h:Number,
--                                             valign:*):void
--        {
--            var heightSet:Boolean = false;
--            
--            var hh:Number = h;
--            var ilc:ILayoutChild = child as ILayoutChild;
--            if (ilc)
--            {
--                if (!isNaN(ilc.percentHeight))
--                    ilc.setHeight(h * ilc.percentHeight / 100, true);
--            }
--            if (valign == "top")
--            {
--                if (!isNaN(top))
--                {
--                    if (ilc)
--                        ilc.setY(top + mt);
--                    else
--                        child.y = top + mt;
--                    hh -= top + mt;
--                }
--                else 
--                {
--                    if (ilc)
--                        ilc.setY(mt + pt);
--                    else
--                        child.y = mt + pt;
--                    hh -= mt + pt;
--                }
--                if (ilc.isHeightSizedToContent())
--                {
--                    if (!isNaN(bottom))
--                    {
--                        if (!isNaN(top))
--                        {
--                            if (ilc)
--                                ilc.setHeight(hh - bottom - mb, true);
--                            else 
--                            {
--                                child.height = hh - bottom - mb;
--                                heightSet = true;
--                            }
--                        }
--                    }
--                }
--            }
--            else if (valign == "bottom")
--            {
--                if (!isNaN(bottom))
--                {
--                    if (ilc)
--                        ilc.setY(h - bottom - mb - child.height);
--                    else
--                        child.y = h - bottom - mb - child.height;
--                }
--                else
--                {
--                    if (ilc)
--                        ilc.setY(h - mb - child.height);
--                    else
--                        child.y = h - mb - child.height;
--                }
--            }
--            else
--                child.y = (h - child.height) / 2;                    
--            if (!heightSet)
--                child.dispatchEvent(new Event("sizeChanged"));
--        }
        }
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
index e4d1cd5,c052442..c90f223
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
@@@ -18,18 -18,20 +18,21 @@@
  
////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads.layouts
  {
 -      import org.apache.flex.core.IBeadLayout;
++      import org.apache.flex.core.LayoutBase;
        import org.apache.flex.core.IDocument;
        import org.apache.flex.core.ILayoutChild;
        import org.apache.flex.core.ILayoutHost;
-     import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutView;
++      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.UIBase;
        import org.apache.flex.core.ValuesManager;
++      import org.apache.flex.core.UIBase;
        import org.apache.flex.events.Event;
 -      import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.geom.Rectangle;
++      import org.apache.flex.utils.CSSContainerUtils;
        import org.apache.flex.utils.CSSUtils;
--    import org.apache.flex.utils.CSSContainerUtils;
  
      /**
       *  The OneFlexibleChildHorizontalLayout class is a simple layout
@@@ -38,17 -40,17 +41,17 @@@
       *  CSS layout rules for margin and padding styles. But it
       *  will size the one child to take up as much or little
       *  room as possible.
--     *  
++     *
       *  @langversion 3.0
       *  @playerversion Flash 10.2
       *  @playerversion AIR 2.6
       *  @productversion FlexJS 0.0
       */
-       public class OneFlexibleChildHorizontalLayout implements 
IOneFlexibleChildLayout, IDocument
 -      public class OneFlexibleChildHorizontalLayout implements IBeadLayout, 
IDocument
++      public class OneFlexibleChildHorizontalLayout extends HorizontalLayout 
implements IOneFlexibleChildLayout, IDocument
        {
          /**
           *  Constructor.
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -56,63 -58,50 +59,46 @@@
           */
                public function OneFlexibleChildHorizontalLayout()
                {
++                      super();
                }
--              
 -        
 -        /**
 -         *  The id of the flexible child
 -         *  
 -         *  @langversion 3.0
 -         *  @playerversion Flash 10.2
 -         *  @playerversion AIR 2.6
 -         *  @productversion FlexJS 0.0
 -         */
 -        public var flexibleChild:String;
--        
++
++
 +        private var _flexibleChild:String;
-         
++
          private var actualChild:ILayoutChild;
--        
--        // 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;
--              
++
          /**
           *  @private
           *  The document.
           */
          private var document:Object;
-         
-         /**
-          *  The id of the flexible child
-          *  
-          *  @langversion 3.0
-          *  @playerversion Flash 10.2
-          *  @playerversion AIR 2.6
-          *  @productversion FlexJS 0.0
-          */
-         public function get flexibleChild():String
-         {
-             return _flexibleChild;
-         }
-         
-         /**
-          * @private
-          */
-         public function set flexibleChild(value:String):void
-         {
-             _flexibleChild = value;
-         }
--        
--        /**
--         *  @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
++
++              /**
++               *  The id of the flexible child
++               *
++               *  @langversion 3.0
++               *  @playerversion Flash 10.2
++               *  @playerversion AIR 2.6
++               *  @productversion FlexJS 0.0
++               */
++              public function get flexibleChild():String
+               {
 -            host = value as ILayoutChild;
++                      return _flexibleChild;
+               }
 -      
++
++              /**
++               * @private
++               */
++              public function set flexibleChild(value:String):void
 +              {
-             host = value as ILayoutChild;
++                      _flexibleChild = value;
 +              }
-       
++
          private var _maxWidth:Number;
--        
++
          /**
           *  @copy org.apache.flex.core.IBead#maxWidth
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -122,20 -111,20 +108,20 @@@
          {
              return _maxWidth;
          }
--        
++
          /**
--         *  @private 
++         *  @private
           */
          public function set maxWidth(value:Number):void
          {
              _maxWidth = value;
          }
--        
++
          private var _maxHeight:Number;
--        
++
          /**
           *  @copy org.apache.flex.core.IBead#maxHeight
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -145,201 -134,199 +131,201 @@@
          {
              return _maxHeight;
          }
--        
++
          /**
--         *  @private 
++         *  @private
           */
          public function set maxHeight(value:Number):void
          {
              _maxHeight = value;
          }
--        
++
          /**
           * @copy org.apache.flex.core.IBeadLayout#layout
           */
--              public function layout():Boolean
++              COMPILE::JS
++              override public function layout():Boolean
                {
-             var layoutParent:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
 -            var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as 
ILayoutHost;
--            var contentView:IParentIUIBase = layoutParent ? 
layoutParent.contentView : IParentIUIBase(host);
--            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
--            actualChild = document[flexibleChild];
++                      var contentView:ILayoutView = layoutView;
++
++                      actualChild = document[flexibleChild];
++
++                      // set the display on the contentView
++                      contentView.element.style["display"] = "flex";
++                      contentView.element.style["flex-flow"] = "row";
++                      contentView.element.style["align-items"] = "center";
  
--            var ilc:ILayoutChild;
                        var n:int = contentView.numElements;
--                      var marginLeft:Object;
--                      var marginRight:Object;
--                      var marginTop:Object;
--                      var marginBottom:Object;
--                      var margin:Object;
--                      maxHeight = 0;
--                      var verticalMargins:Array = new Array(n);
++                      if (n == 0) return false;
++
++                      for(var i:int=0; i < n; i++) {
++                              var child:UIBase = contentView.getElementAt(i) 
as UIBase;
++                              child.element.style["flex-grow"] = (child == 
actualChild) ? "1" : "0";
++                              child.element.style["flex-shrink"] = "0";
++                      }
++
++                      return true;
++              }
++
++              COMPILE::SWF
++              override public function layout():Boolean
++              {
++                      var contentView:ILayoutView = layoutView;
++                      var actualChild:IUIBase = 
document.hasOwnProperty(flexibleChild) ? document[flexibleChild] : null;
++
++                      var n:Number = contentView.numElements;
++                      if (n == 0) return false;
+                       
 -            var ww:Number = contentView.width - padding.right;
 -            var hh:Number = contentView.height;
 -            var xx:int = padding.left;
 -            var flexChildIndex:int;
 -            var ml:Number;
 -            var mr:Number;
 -            var mt:Number;
 -            var mb:Number;
 -            var lastmr:Number;
 -            var lastml:Number;
 -            var valign:Object;
 -            var hostSizedToContent:Boolean = host.isHeightSizedToContent();
 -            
 -            for (var i:int = 0; i < n; i++)
 -            {
 -                var child:IUIBase = contentView.getElementAt(i) as IUIBase;
 -                if (child == actualChild)
 -                {
 -                    flexChildIndex = i;
 -                    break;
 -                }
 -                margin = ValuesManager.valuesImpl.getValue(child, "margin");
 -                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");
 -                mt = CSSUtils.getTopValue(marginTop, margin, hh);
 -                mb = CSSUtils.getBottomValue(marginBottom, margin, hh);
 -                mr = CSSUtils.getRightValue(marginRight, margin, ww);
 -                ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
 -                child.y = mt + padding.top;
 -                if (child is ILayoutChild)
 -                {
 -                    ilc = child as ILayoutChild;
 -                    if (!isNaN(ilc.percentHeight))
 -                        ilc.setHeight(contentView.height * ilc.percentHeight 
/ 100, true);
 -                }
 -                maxHeight = Math.max(maxHeight, mt + child.height + mb);
 -                child.x = xx + ml;
 -                xx += child.width + ml + mr;
 -                lastmr = mr;
 -                valign = ValuesManager.valuesImpl.getValue(child, 
"vertical-align");
 -                verticalMargins[i] = { marginTop: mt, marginBottom: mb, 
valign: valign };
 -            }
 -
 -            if (n > 0 && n > flexChildIndex)
 -            {
 -                for (i = n - 1; i > flexChildIndex; i--)
 -                      {
 -                              child = contentView.getElementAt(i) as IUIBase;
 -                              margin = 
ValuesManager.valuesImpl.getValue(child, "margin");
 -                                      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");
 -                              mt = CSSUtils.getTopValue(marginTop, margin, 
hh);
 -                              mb = CSSUtils.getTopValue(marginBottom, margin, 
hh);
 -                    mr = CSSUtils.getRightValue(marginRight, margin, ww);
 -                    ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
 -                    child.y = mt + padding.top;
 -                    if (child is ILayoutChild)
 -                    {
 -                        ilc = child as ILayoutChild;
 -                        if (!isNaN(ilc.percentHeight))
 -                            ilc.setHeight(contentView.height * 
ilc.percentHeight / 100, true);
 -                    }
 -                    maxHeight = Math.max(maxHeight, mt + child.height + mb);
 -                    child.x = ww - child.width - mr;
 -                              ww -= child.width + ml + mr;
 -                              lastml = ml;
 -                    valign = ValuesManager.valuesImpl.getValue(child, 
"vertical-align");
 -                    verticalMargins[i] = { marginTop: mt, marginBottom: mb, 
valign: valign };
 -                      }
 -            
 -                child = contentView.getElementAt(flexChildIndex) as IUIBase;
 -                margin = ValuesManager.valuesImpl.getValue(child, "margin");
 -                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");
 -                mt = CSSUtils.getTopValue(marginTop, margin, hh);
 -                mb = CSSUtils.getTopValue(marginBottom, margin, hh);
 -                mr = CSSUtils.getRightValue(marginRight, margin, ww);
 -                ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
 -                if (child is ILayoutChild)
 -                {
 -                    ilc = child as ILayoutChild;
 -                    if (!isNaN(ilc.percentHeight))
 -                        ilc.setHeight(contentView.height * ilc.percentHeight 
/ 100, true);
 -                }
 -                child.x = xx + ml;
 -                child.width = ww - child.x;
 -                maxHeight = Math.max(maxHeight, mt + child.height + mb);
 -                valign = ValuesManager.valuesImpl.getValue(child, 
"vertical-align");
 -                verticalMargins[flexChildIndex] = { marginTop: mt, 
marginBottom: mb, valign: valign };
 -            }
 -            if (hostSizedToContent)
 -                ILayoutChild(contentView).setHeight(maxHeight + padding.top + 
padding.bottom, true);
 -            
 -            for (i = 0; i < n; i++)
++                      // if the layoutView's width cannot be determined then 
this layout
++                      // will not work, so default to HorizontalLayout
++                      if (host.isWidthSizedToContent()) {
++                              return super.layout();
++                      }
++
++                      var maxWidth:Number = 0;
++                      var maxHeight:Number = 0;
++                      var hostSizedToContent:Boolean = 
host.isHeightSizedToContent();
++                      var hostWidth:Number = contentView.width;
++                      var hostHeight:Number = hostSizedToContent ? 0 : 
contentView.height;
++
++                      var ilc:ILayoutChild;
++                      var data:Object;
++                      var canAdjust:Boolean = false;
++                      var margins:Object;
++
++                      var paddingMetrics:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
++                      var borderMetrics:Rectangle = 
CSSContainerUtils.getBorderMetrics(host);
 +                      
-             var ww:Number = contentView.width - padding.right;
-             var hh:Number = contentView.height;
-             var xx:int = padding.left;
-             var flexChildIndex:int;
-             var ml:Number;
-             var mr:Number;
-             var mt:Number;
-             var mb:Number;
-             var lastmr:Number;
-             var lastml:Number;
-             var valign:Object;
-             var hostSizedToContent:Boolean = host.isHeightSizedToContent();
-             
-             for (var i:int = 0; i < n; i++)
-             {
-                 var child:IUIBase = contentView.getElementAt(i) as IUIBase;
-                 if (child == null || !child.visible) continue;
-                 if (child == actualChild)
-                 {
-                     flexChildIndex = i;
-                     break;
-                 }
-                 margin = ValuesManager.valuesImpl.getValue(child, "margin");
-                 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");
-                 mt = CSSUtils.getTopValue(marginTop, margin, hh);
-                 mb = CSSUtils.getBottomValue(marginBottom, margin, hh);
-                 mr = CSSUtils.getRightValue(marginRight, margin, ww);
-                 ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
-                 child.y = mt + padding.top;
-                 if (child is ILayoutChild)
-                 {
-                     ilc = child as ILayoutChild;
-                     if (!isNaN(ilc.percentHeight))
-                         ilc.setHeight(contentView.height * ilc.percentHeight 
/ 100, true);
-                 }
-                 maxHeight = Math.max(maxHeight, mt + child.height + mb);
-                 child.x = xx + ml;
-                 xx += child.width + ml + mr;
-                 lastmr = mr;
-                 valign = ValuesManager.valuesImpl.getValue(child, 
"vertical-align");
-                 verticalMargins[i] = { marginTop: mt, marginBottom: mb, 
valign: valign };
-             }
- 
-             if (n > 0 && n > flexChildIndex)
-             {
-                 for (i = n - 1; i > flexChildIndex; i--)
-                       {
-                               child = contentView.getElementAt(i) as IUIBase;
-                     if (child == null || !child.visible) continue;
-                               margin = 
ValuesManager.valuesImpl.getValue(child, "margin");
-                                       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");
-                               mt = CSSUtils.getTopValue(marginTop, margin, 
hh);
-                               mb = CSSUtils.getTopValue(marginBottom, margin, 
hh);
-                     mr = CSSUtils.getRightValue(marginRight, margin, ww);
-                     ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
-                     child.y = mt + padding.top;
-                     if (child is ILayoutChild)
-                     {
-                         ilc = child as ILayoutChild;
-                         if (!isNaN(ilc.percentHeight))
-                             ilc.setHeight(contentView.height * 
ilc.percentHeight / 100, true);
-                     }
-                     maxHeight = Math.max(maxHeight, mt + child.height + mb);
-                     child.x = ww - child.width - mr;
-                               ww -= child.width + ml + mr;
-                               lastml = ml;
-                     valign = ValuesManager.valuesImpl.getValue(child, 
"vertical-align");
-                     verticalMargins[i] = { marginTop: mt, marginBottom: mb, 
valign: valign };
-                       }
-             
-                 child = contentView.getElementAt(flexChildIndex) as IUIBase;
-                 margin = ValuesManager.valuesImpl.getValue(child, "margin");
-                 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");
-                 mt = CSSUtils.getTopValue(marginTop, margin, hh);
-                 mb = CSSUtils.getTopValue(marginBottom, margin, hh);
-                 mr = CSSUtils.getRightValue(marginRight, margin, ww);
-                 ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
-                 if (child is ILayoutChild)
-                 {
-                     ilc = child as ILayoutChild;
-                     if (!isNaN(ilc.percentHeight))
-                         ilc.setHeight(contentView.height * ilc.percentHeight 
/ 100, true);
-                 }
-                 child.x = xx + ml;
-                 child.width = ww - child.x;
-                 maxHeight = Math.max(maxHeight, mt + child.height + mb);
-                 valign = ValuesManager.valuesImpl.getValue(child, 
"vertical-align");
-                 verticalMargins[flexChildIndex] = { marginTop: mt, 
marginBottom: mb, valign: valign };
-             }
-             if (hostSizedToContent)
-                 ILayoutChild(contentView).setHeight(maxHeight + padding.top + 
padding.bottom, true);
-             
-             for (i = 0; i < n; i++)
++                      // adjust the host's usable size by the metrics. If 
hostSizedToContent, then the
++                      // resulting adjusted value may be less than zero.
++                      hostWidth -= paddingMetrics.left + paddingMetrics.right 
+ borderMetrics.left + borderMetrics.right;
++                      hostHeight -= paddingMetrics.top + 
paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
++
++                      var xpos:Number = borderMetrics.left + 
paddingMetrics.left;
++                      var ypos:Number = borderMetrics.top + 
paddingMetrics.left;
++                      var child:IUIBase;
++                      var childHeight:Number;
++                      var i:int;
++                      var childYpos:Number;
++                      var adjustLeft:Number = 0;
++                      var adjustRight:Number = hostWidth + borderMetrics.left 
+ paddingMetrics.left;
++
++                      // first work from left to right
++                      for(i=0; i < n; i++)
++                      {
++                              child = contentView.getElementAt(i) as IUIBase;
++                              if (child == null || !child.visible) continue;
++                              if (child == actualChild) break;
++
++                              margins = childMargins(child, hostWidth, 
hostHeight);
++                              ilc = child as ILayoutChild;
++
++                              xpos += margins.left;
++
++                              childYpos = ypos + margins.top; // default y 
position
++
++                              if (!hostSizedToContent) {
++                                      childHeight = child.height;
++                                      if (ilc != null && 
!isNaN(ilc.percentHeight)) {
++                                              childHeight = host.height * 
ilc.percentHeight/100.0;
++                                              ilc.setHeight(childHeight);
++                                      }
++                                      // the following code middle-aligns the 
child
++                                      childYpos = hostHeight/2 - 
childHeight/2 + ypos;
++                              }
++
++                              if (ilc) {
++                                      ilc.setX(xpos);
++                                      ilc.setY(childYpos);
++
++                                      if (!isNaN(ilc.percentWidth)) {
++                                              ilc.setWidth(hostWidth * 
ilc.percentWidth / 100);
++                                      }
++
++                              } else {
++                                      child.x = xpos;
++                                      child.y = childYpos;
++                              }
++
++                              xpos += child.width + margins.right;
++                              adjustLeft = xpos;
++                      }
++
++                      // then work from right to left
++                      xpos = hostWidth + borderMetrics.left + 
paddingMetrics.left;
++
++                      for(i=(n-1); actualChild != null && i >= 0; i--)
                        {
--                              var obj:Object = verticalMargins[i]
                                child = contentView.getElementAt(i) as IUIBase;
--                setPositionAndHeight(child, obj.top, obj.marginTop, 
padding.top,
--                    obj.bottom, obj.marginBottom, padding.bottom, maxHeight, 
obj.valign);
++                              if (child == null || !child.visible) continue;
++                              if (child == actualChild) break;
++
++                              margins = childMargins(child, hostWidth, 
hostHeight);
++                              ilc = child as ILayoutChild;
++
++                              childYpos = ypos + margins.top; // default y 
position
++
++                              if (!hostSizedToContent) {
++                                      childHeight = child.height;
++                                      if (ilc != null && 
!isNaN(ilc.percentHeight)) {
++                                              childHeight = hostHeight * 
ilc.percentHeight/100.0;
++                                              ilc.setHeight(childHeight);
++                                      }
++                                      // the following code middle-aligns the 
child
++                                      childYpos = hostHeight/2 - 
childHeight/2 + ypos;
++                              }
++
++                              if (ilc) {
++                                      if (!isNaN(ilc.percentWidth)) {
++                                              ilc.setWidth(hostWidth * 
ilc.percentWidth / 100);
++                                      }
++                              }
++
++                              xpos -= child.width + margins.right;
++
++                              if (ilc) {
++                                      ilc.setX(xpos);
++                                      ilc.setY(childYpos);
++                              } else {
++                                      child.x = xpos;
++                                      child.y = childYpos;
++                              }
++
++                              xpos -= margins.left;
++                              adjustRight = xpos;
++                      }
++
++                      // now adjust the actualChild to fill the space.
++                      if (actualChild != null) {
++                              margins = childMargins(actualChild, hostWidth, 
hostHeight);
++                              ilc = actualChild as ILayoutChild;
++                              if (!hostSizedToContent) {
++                                      childHeight = actualChild.height;
++                                      if (ilc != null && 
!isNaN(ilc.percentHeight)) {
++                                              childHeight = hostHeight * 
ilc.percentHeight/100.0;
++                                              ilc.setHeight(childHeight);
++                                      }
++                              }
++                              childYpos = ypos + margins.top;
++                              if (!hostSizedToContent) {
++                                      childYpos = hostHeight/2 - 
childHeight/2 + ypos;
++                              }
++                              actualChild.x = adjustLeft + margins.left;
++                              actualChild.y = childYpos;
++                              if (ilc) {
++                                      
ilc.setWidth((adjustRight-margins.right) - (adjustLeft+margins.left));
++                              } else {
++                                      actualChild.width = 
(adjustRight-margins.right) - (adjustLeft+margins.left);
++                              }
                        }
++
              return true;
                }
  
--        private function setPositionAndHeight(child:IUIBase, top:Number, 
mt:Number, pt:Number,
--                                              bottom:Number, mb:Number, 
pb:Number, h:Number, valign:String):void
--        {
--            var heightSet:Boolean = false; // if we've set the height in a 
way that gens a change event
--            var ySet:Boolean = false; // if we've set the y yet.
--            
--            var hh:Number = h;
--            var ilc:ILayoutChild = child as ILayoutChild;
--            if (!isNaN(top))
--            {
--                child.y = top + mt;
--                ySet = true;
--                hh -= top + mt;
--            }
--            else 
--            {
--                hh -= mt;
--            }
--            if (!isNaN(bottom))
--            {
--                if (!isNaN(top))
--                {
--                    if (ilc)
--                        ilc.setHeight(hh - bottom - mb, true);
--                    else 
--                    {
--                        child.height = hh - bottom - mb;
--                        heightSet = true;
--                    }
--                }
--                else
--                {
--                    child.y = h - bottom - mb - child.height - 1; // some 
browsers don't like going to the edge
--                    ySet = true;
--                }
--            }
--            if (ilc)
--            {
--                if (!isNaN(ilc.percentHeight))
--                    ilc.setHeight(h * ilc.percentHeight / 100, true);
--            }
--            if (valign == "middle")
--                child.y = (h - child.height) / 2;
--            else if (valign == "bottom")
--                child.y = h - child.height - mb;
--            else
--                child.y = mt + pt;
--            if (!heightSet)
--                child.dispatchEvent(new Event("sizeChanged"));
--        }
--        
          public function setDocument(document:Object, id:String = null):void
          {
--            this.document = document; 
++            this.document = document;
          }
      }
--        
++
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
index 23dd88a,77af305..9242d91
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
@@@ -18,19 -18,19 +18,22 @@@
  
////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads.layouts
  {
 -      import org.apache.flex.core.IBeadLayout;
++      import org.apache.flex.core.LayoutBase;
        import org.apache.flex.core.IDocument;
        import org.apache.flex.core.ILayoutChild;
        import org.apache.flex.core.ILayoutHost;
-     import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutView;
++      import org.apache.flex.core.ILayoutParent;
        import org.apache.flex.core.IParentIUIBase;
        import org.apache.flex.core.IStrand;
-     import org.apache.flex.core.IStyleableObject;
++      import org.apache.flex.core.IStyleableObject;
        import org.apache.flex.core.IUIBase;
--      import org.apache.flex.core.UIBase;
        import org.apache.flex.core.ValuesManager;
++      import org.apache.flex.core.UIBase;
        import org.apache.flex.events.Event;
 -      import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.geom.Rectangle;
--    import org.apache.flex.utils.CSSContainerUtils;
++      import org.apache.flex.utils.CSSContainerUtils;
++      import org.apache.flex.utils.CSSUtils;
  
      /**
       *  The OneFlexibleChildVerticalLayout class is a simple layout
@@@ -39,17 -39,17 +42,17 @@@
       *  CSS layout rules for margin and padding styles. But it
       *  will size the one child to take up as much or little
       *  room as possible.
--     *  
++     *
       *  @langversion 3.0
       *  @playerversion Flash 10.2
       *  @playerversion AIR 2.6
       *  @productversion FlexJS 0.0
       */
-       public class OneFlexibleChildVerticalLayout implements 
IOneFlexibleChildLayout, IDocument
 -      public class OneFlexibleChildVerticalLayout implements IBeadLayout, 
IDocument
++      public class OneFlexibleChildVerticalLayout extends VerticalLayout 
implements IOneFlexibleChildLayout, IDocument
        {
          /**
           *  Constructor.
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -57,62 -57,50 +60,46 @@@
           */
                public function OneFlexibleChildVerticalLayout()
                {
++                      super();
                }
--              
 -        
 -        /**
 -         *  The id of the flexible child
 -         *  
 -         *  @langversion 3.0
 -         *  @playerversion Flash 10.2
 -         *  @playerversion AIR 2.6
 -         *  @productversion FlexJS 0.0
 -         */
 -        public var flexibleChild:String;
 -        
++
++
 +        private var _flexibleChild:String;
-         
++
          private var actualChild:ILayoutChild;
--        
--        // 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;
--              
++
          /**
           *  @private
           *  The document.
           */
          private var document:Object;
-         
-         /**
-          *  The id of the flexible child
-          *  
-          *  @langversion 3.0
-          *  @playerversion Flash 10.2
-          *  @playerversion AIR 2.6
-          *  @productversion FlexJS 0.0
-          */
-         public function get flexibleChild():String
-         {
-             return _flexibleChild;
-         }
-         
-         /**
-          * @private
-          */
-         public function set flexibleChild(value:String):void
-         {
-             _flexibleChild = value;
-         }
--        
--        /**
--         *  @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
++
++              /**
++               *  The id of the flexible child
++               *
++               *  @langversion 3.0
++               *  @playerversion Flash 10.2
++               *  @playerversion AIR 2.6
++               *  @productversion FlexJS 0.0
++               */
++              public function get flexibleChild():String
 +              {
-             host = value as ILayoutChild;
++                      return _flexibleChild;
 +              }
-              
++
++              /**
++               * @private
++               */
++              public function set flexibleChild(value:String):void
+               {
 -            host = value as ILayoutChild;
++                      _flexibleChild = value;
+               }
 -             
++
          private var _maxWidth:Number;
--        
++
          /**
           *  @copy org.apache.flex.core.IBead#maxWidth
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -122,20 -110,20 +109,20 @@@
          {
              return _maxWidth;
          }
--        
++
          /**
--         *  @private 
++         *  @private
           */
          public function set maxWidth(value:Number):void
          {
              _maxWidth = value;
          }
--        
++
          private var _maxHeight:Number;
--        
++
          /**
           *  @copy org.apache.flex.core.IBead#maxHeight
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -145,351 -133,327 +132,202 @@@
          {
              return _maxHeight;
          }
--        
++
          /**
--         *  @private 
++         *  @private
           */
          public function set maxHeight(value:Number):void
          {
              _maxHeight = value;
          }
-         
-         // TODO get rid of this
-         private function getActualChildById(contentView:IParentIUIBase, 
id:String):ILayoutChild
-         {
-             var result:ILayoutChild;
-             for (var i:int = 0; i < contentView.numElements; i++)
-             {
-                 var child:IStyleableObject = contentView.getElementAt(i) as 
IStyleableObject;
-                 if (child.id == id)
-                 {
-                     return child as ILayoutChild;
-                 }
-             }
-             return null;
-         }
--        
++
          /**
           * @copy org.apache.flex.core.IBeadLayout#layout
           */
--              public function layout():Boolean
++              COMPILE::JS
++              override public function layout():Boolean
                {
-             var layoutParent:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
 -            var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as 
ILayoutHost;
--            var contentView:IParentIUIBase = layoutParent ? 
layoutParent.contentView : IParentIUIBase(host);
--            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
-             if (document && document.hasOwnProperty(flexibleChild))
-             {
-                 actualChild = document[flexibleChild];
-             } 
-             else
-             {
-                 actualChild = getActualChildById(contentView, flexibleChild);
-             }
-             
-             var ilc:ILayoutChild;
++                      var contentView:ILayoutView = layoutView;
++
+                       actualChild = document[flexibleChild];
 -            
 -            var ilc:ILayoutChild;
++
++                      // set the display on the contentView
++                      contentView.element.style["display"] = "flex";
++                      contentView.element.style["flex-flow"] = "column";
++                      contentView.element.style["align-items"] = "center";
++
                        var n:int = contentView.numElements;
--                      var marginLeft:Object;
--                      var marginRight:Object;
--                      var marginTop:Object;
--                      var marginBottom:Object;
--                      var margin:Object;
--                      maxWidth = 0;
--            
--            var w:Number = contentView.width;                 
--            var hh:Number = contentView.height - padding.bottom;
--            var yy:int = padding.top;
--            var flexChildIndex:int;
--            var ml:Number;
--            var mr:Number;
--            var mt:Number;
--            var mb:Number;
--            var lastmb:Number;
--            var lastmt:Number;
--            var halign:Object;
--            var left:Number;
--            var right:Number;
--            
--            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;
--                left = ValuesManager.valuesImpl.getValue(child, "left");
--                right = ValuesManager.valuesImpl.getValue(child, "right");
--                if (child == actualChild)
--                {
--                    flexChildIndex = i;
--                    break;
--                }
--                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;
--                }
--                mt = Number(marginTop);
--                if (isNaN(mt))
--                    mt = 0;
--                mb = Number(marginBottom);
--                if (isNaN(mb))
--                    mb = 0;
--                if (ilc)
--                {
--                    if (!isNaN(ilc.percentHeight))
--                        ilc.setHeight(contentView.height * ilc.percentHeight 
/ 100, !isNaN(ilc.percentWidth));
--                }
--                if (marginLeft == "auto")
--                    ml = 0;
--                else
--                {
--                    ml = Number(marginLeft);
--                    if (isNaN(ml))
--                        ml = 0;
--                }
--                if (marginRight == "auto")
--                    mr = 0;
--                else
--                {
--                    mr = Number(marginRight);
--                    if (isNaN(mr))
--                        mr = 0;
--                }
--                if (child is ILayoutChild)
--                {
--                    ilc = child as ILayoutChild;
--                    if (!isNaN(ilc.percentWidth))
--                        ilc.setWidth(contentView.width * ilc.percentWidth / 
100, !isNaN(ilc.percentHeight));
--                }
--                maxWidth = Math.max(maxWidth, ml + child.width + mr);
--                setPositionAndWidth(child, left, ml, padding.left, right, mr, 
padding.right, w);
--                child.y = yy + mt;
--                yy += child.height + mt + mb;
--                lastmb = mb;
--            }
--
--            if (n > 0 && n > flexChildIndex)
--            {
--                for (i = n - 1; i > flexChildIndex; i--)
--                      {
--                              child = contentView.getElementAt(i) as IUIBase;
-                     if (child == null || !child.visible) continue;
--                    ilc = child as ILayoutChild;
--                    left = ValuesManager.valuesImpl.getValue(child, "left");
--                    right = 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;
--                              }
--                              mt = Number(marginTop);
--                              if (isNaN(mt))
--                                      mt = 0;
--                              mb = Number(marginBottom);
--                              if (isNaN(mb))
--                                      mb = 0;
--                    if (ilc)
--                    {
--                        if (!isNaN(ilc.percentHeight))
--                            ilc.setHeight(contentView.height * 
ilc.percentHeight / 100, !isNaN(ilc.percentWidth));
--                    }
--                              if (marginLeft == "auto")
--                                      ml = 0;
--                              else
--                              {
--                                      ml = Number(marginLeft);
--                                      if (isNaN(ml))
--                                              ml = 0;
--                              }
--                              if (marginRight == "auto")
--                                      mr = 0;
--                              else
--                              {
--                                      mr = Number(marginRight);
--                                      if (isNaN(mr))
--                                              mr = 0;
--                              }
--                    if (child is ILayoutChild)
--                    {
--                        ilc = child as ILayoutChild;
--                        if (!isNaN(ilc.percentWidth))
--                            ilc.setWidth(contentView.width * ilc.percentWidth 
/ 100, !isNaN(ilc.percentHeight));
--                    }
--                    setPositionAndWidth(child, left, ml, padding.left, right, 
mr, padding.right, w);
--                    maxWidth = Math.max(maxWidth, ml + child.width + mr);
--                    child.y = hh - child.height - mb;
--                              hh -= child.height + mt + mb;
--                              lastmt = mt;
--                      }
--            } 
--            
--            child = contentView.getElementAt(flexChildIndex) as IUIBase;
--            ilc = child as ILayoutChild;
--            left = ValuesManager.valuesImpl.getValue(child, "left");
--            right = 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;
--            }
--            mt = Number(marginTop);
--            if (isNaN(mt))
--                mt = 0;
--            mb = Number(marginBottom);
--            if (isNaN(mb))
--                mb = 0;
--            if (ilc)
--            {
--                if (!isNaN(ilc.percentHeight))
--                    ilc.setHeight(contentView.height * ilc.percentHeight / 
100, !isNaN(ilc.percentWidth));
--            }
--            if (marginLeft == "auto")
--                ml = 0;
--            else
--            {
--                ml = Number(marginLeft);
--                if (isNaN(ml))
--                    ml = 0;
--            }
--            if (marginRight == "auto")
--                mr = 0;
--            else
--            {
--                mr = Number(marginRight);
--                if (isNaN(mr))
--                    mr = 0;
--            }
--            if (child is ILayoutChild)
--            {
--                ilc = child as ILayoutChild;
--                if (!isNaN(ilc.percentWidth))
--                    ilc.setWidth(contentView.width * ilc.percentWidth / 100, 
!isNaN(ilc.percentHeight));
--            }
--            setPositionAndWidth(child, left, ml, padding.left, right, mr, 
padding.right, w);
--            maxWidth = Math.max(maxWidth, ml + child.width + mr);
--            child.y = yy + mt;
--            child.height = hh - mb - child.y;
--            
--            return true;
++                      if (n == 0) return false;
++
++                      for(var i:int=0; i < n; i++) {
++                              var child:UIBase = contentView.getElementAt(i) 
as UIBase;
++                              child.element.style["flex-grow"] = (child == 
actualChild) ? "1" : "0";
++                              child.element.style["flex-shrink"] = "0";
++                      }
++
++                      return true;
++              }
++
++              COMPILE::SWF
++              override public function layout():Boolean
++              {
++                      var contentView:ILayoutView = layoutView;
++                      var actualChild:IUIBase = 
document.hasOwnProperty(flexibleChild) ? document[flexibleChild] : null;
++
++                      var n:Number = contentView.numElements;
++                      if (n == 0) return false;
++                      
++                      // if the layoutView has no determined height, this 
layout cannot run
++                      // so fall back to VerticalLayout
++                      if (host.isHeightSizedToContent()) {
++                              return super.layout();
++                      }
++
++                      var maxWidth:Number = 0;
++                      var maxHeight:Number = 0;
++                      var hostSizedToContent:Boolean = 
host.isWidthSizedToContent();
++                      var hostWidth:Number = hostSizedToContent ? 0 : 
contentView.width;
++                      var hostHeight:Number = contentView.height;
++
++                      var ilc:ILayoutChild;
++                      var data:Object;
++                      var canAdjust:Boolean = false;
++                      var margins:Object;
++
++                      var paddingMetrics:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
++                      var borderMetrics:Rectangle = 
CSSContainerUtils.getBorderMetrics(host);
++                      
++                      // adjust the host's usable size by the metrics. If 
hostSizedToContent, then the
++                      // resulting adjusted value may be less than zero.
++                      hostWidth -= paddingMetrics.left + paddingMetrics.right 
+ borderMetrics.left + borderMetrics.right;
++                      hostHeight -= paddingMetrics.top + 
paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
++
++                      var xpos:Number = borderMetrics.left + 
paddingMetrics.left;
++                      var ypos:Number = borderMetrics.top + 
paddingMetrics.left;
++                      var child:IUIBase;
++                      var childWidth:Number;
++                      var i:int;
++                      var childXpos:Number;
++                      var adjustTop:Number = 0;
++                      var adjustBottom:Number = hostHeight + 
borderMetrics.top + paddingMetrics.top;
++
++                      // first work from top to bottom
++                      for(i=0; i < n; i++)
++                      {
++                              child = contentView.getElementAt(i) as IUIBase;
++                              if (child == null || !child.visible) continue;
++                              if (child == actualChild) break;
++
++                              margins = childMargins(child, hostWidth, 
hostHeight);
++                              ilc = child as ILayoutChild;
++
++                              ypos += margins.top;
++
++                              childXpos = xpos + margins.left; // default x 
position
++
++                              if (!hostSizedToContent) {
++                                      childWidth = child.width;
++                                      if (ilc != null && 
!isNaN(ilc.percentWidth)) {
++                                              childWidth = hostWidth * 
ilc.percentWidth/100.0;
++                                              ilc.setWidth(childWidth);
++                                      }
++                                      // the following code middle-aligns the 
child
++                                      childXpos = hostWidth/2 - childWidth/2 
+ xpos;
++                              }
++
++                              if (ilc) {
++                                      ilc.setX(childXpos);
++                                      ilc.setY(ypos);
++
++                                      if (!isNaN(ilc.percentHeight)) {
++                                              ilc.setHeight(hostHeight * 
ilc.percentHeight / 100);
++                                      }
++
++                              } else {
++                                      child.x = childXpos;
++                                      child.y = ypos;
++                              }
++
++                              ypos += child.height + margins.bottom;
++                              adjustTop = ypos;
++                      }
++
++                      // then work from bottom to top
++                      ypos = hostHeight + borderMetrics.top + 
paddingMetrics.top;
++
++                      for(i=(n-1); actualChild != null && i >= 0; i--)
++                      {
++                              child = contentView.getElementAt(i) as IUIBase;
++                              if (child == null || !child.visible) continue;
++                              if (child == actualChild) break;
++
++                              margins = childMargins(child, hostWidth, 
hostHeight);
++                              ilc = child as ILayoutChild;
++
++                              childXpos = xpos + margins.left; // default x 
position
++
++                              if (!hostSizedToContent) {
++                                      childWidth = child.width;
++                                      if (ilc != null && 
!isNaN(ilc.percentWidth)) {
++                                              childWidth = hostWidth * 
ilc.percentWidth/100.0;
++                                              ilc.setWidth(childWidth);
++                                      }
++                                      // the following code middle-aligns the 
child
++                                      childXpos = hostWidth/2 - childWidth/2 
+ xpos;
++                              }
++
++                              if (ilc) {
++                                      if (!isNaN(ilc.percentHeight)) {
++                                              ilc.setHeight(hostHeight * 
ilc.percentHeight / 100);
++                                      }
++                              }
++
++                              ypos -= child.height + margins.bottom;
++
++                              if (ilc) {
++                                      ilc.setX(childXpos);
++                                      ilc.setY(ypos);
++                              } else {
++                                      child.x = childXpos;
++                                      child.y = ypos;
++                              }
++
++                              ypos -= margins.top;
++                              adjustBottom = ypos;
++                      }
++
++                      // now adjust the actualChild to fill the space.
++                      if (actualChild != null) {
++                              margins = childMargins(actualChild, hostWidth, 
hostHeight);
++                              ilc = actualChild as ILayoutChild;
++                              if (!hostSizedToContent) {
++                                      childWidth = actualChild.width;
++                                      if (ilc != null && 
!isNaN(ilc.percentWidth)) {
++                                              childWidth = hostWidth * 
ilc.percentWidth/100.0;
++                                              ilc.setWidth(childWidth);
++                                      }
++                              }
++                              childXpos = xpos + margins.left;
++                              if (!hostSizedToContent) {
++                                      childXpos = hostWidth/2 - childWidth/2 
+ xpos;
++                              }
++                              actualChild.x = childXpos
++                              actualChild.y = adjustTop + margins.top;
++                              if (ilc) {
++                                      
ilc.setHeight((adjustBottom-margins.bottom) - (adjustTop+margins.top));
++                              } else {
++                                      actualChild.height = 
(adjustBottom-margins.bottom) - (adjustTop+margins.top);
++                              }
++                      }
++
++                      return true;
                }
  
--        private function setPositionAndWidth(child:IUIBase, left:Number, 
ml:Number, pl:Number,
--                                             right:Number, mr:Number, 
pr: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 
--            {
--                if (isNaN(right))
--                    child.x = ml + pl;
--                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 - 1; // some 
browsers don't like going all the way to the edge
--            }
--            if (ilc)
--            {
--                if (!isNaN(ilc.percentWidth))
--                    ilc.setWidth(w * ilc.percentWidth / 100, true);
--            }
--            if (!widthSet)
--                child.dispatchEvent(new Event("sizeChanged"));
--        }
--        
          public function setDocument(document:Object, id:String = null):void
          {
--            this.document = document; 
++            this.document = document;
          }
--        
++
      }
--        
++
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
index 8c489d6,a7917ff..4ff6565
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
@@@ -18,16 -18,14 +18,21 @@@
  
////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads.layouts
  {
++      import org.apache.flex.core.LayoutBase;
        import org.apache.flex.core.IBeadLayout;
-     import org.apache.flex.core.IChild;
        import org.apache.flex.core.ILayoutHost;
-     import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutView;
++      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.IChild;
        import org.apache.flex.core.UIBase;
        import org.apache.flex.events.Event;
        import org.apache.flex.events.IEventDispatcher;
++      import org.apache.flex.geom.Rectangle;
++      import org.apache.flex.utils.CSSUtils;
++      import org.apache.flex.utils.CSSContainerUtils;
  
        /**
         *  The TileLayout class bead sizes and positions the elements it 
manages into rows and columns.
@@@ -40,7 -38,7 +45,7 @@@
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
--      public class TileLayout implements IBeadLayout
++      public class TileLayout extends LayoutBase implements IBeadLayout
        {
                /**
                 *  constructor.
@@@ -52,21 -50,21 +57,7 @@@
                 */
                public function TileLayout()
                {
--              }
--
--              private var _strand:IStrand;
--
--              /**
--               *  @copy org.apache.flex.core.IBead#strand
--               *
--               *  @langversion 3.0
--               *  @playerversion Flash 10.2
--               *  @playerversion AIR 2.6
--               *  @productversion FlexJS 0.0
--               */
--              public function set strand(value:IStrand):void
--              {
--                      _strand = value;
++                      super();
                }
  
                private var _numColumns:Number = 4;
@@@ -131,14 -129,14 +122,14 @@@
          /**
           * @copy org.apache.flex.core.IBeadLayout#layout
           */
--              public function layout():Boolean
++              override public function layout():Boolean
                {
++                      var paddingMetrics:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
++                      var borderMetrics:Rectangle = 
CSSContainerUtils.getBorderMetrics(host);
++                      
                        COMPILE::SWF
                        {
--                              // this is where the layout is calculated
--                              var host:UIBase = _strand as UIBase;
-                 var p:ILayoutHost = (host as ILayoutParent).getLayoutHost();
 -                              var p:ILayoutHost = 
_strand.getBeadByType(ILayoutHost) as ILayoutHost;
--                              var area:UIBase = p.contentView as UIBase;
++                              var area:UIBase = layoutView as UIBase;
  
                                var xpos:Number = 0;
                                var ypos:Number = 0;
@@@ -146,20 -144,19 +137,23 @@@
                                var useHeight:Number = rowHeight;
                                var n:Number = area.numElements;
                                if (n == 0) return false;
++                              
++                              var adjustedWidth:Number = 
Math.floor(host.width - borderMetrics.left - borderMetrics.right);
++                              var adjustedHeight:Number = 
Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
  
                                var realN:Number = n;
                                for(var j:int=0; j < n; j++)
                                {
                                        var testChild:IUIBase = 
area.getElementAt(i) as IUIBase;
-                     if (testChild == null || !testChild.visible) realN--;
 -                                      if (testChild && !testChild.visible) 
realN--;
++                                      if (testChild == null || 
!testChild.visible) realN--;
                                }
  
--                              if (isNaN(useWidth)) useWidth = 
Math.floor(host.width / numColumns); // + gap
++                              if (isNaN(useWidth)) useWidth = 
Math.floor(adjustedWidth / numColumns); // + gap
                                if (isNaN(useHeight)) {
                                        // given the width and total number of 
items, how many rows?
                                        var numRows:Number = 
Math.floor(realN/numColumns);
-                     if (host.isHeightSizedToContent) useHeight = 30; // 
default height
-                     else useHeight = Math.floor(host.height / numRows);
 -                                      useHeight = Math.floor(host.height / 
numRows);
++                                      if (host.isHeightSizedToContent) 
useHeight = 30; // default height
++                                      else useHeight = 
Math.floor(adjustedHeight / numRows);
                                }
  
                                var maxWidth:Number = useWidth;
@@@ -168,7 -165,7 +162,7 @@@
                                for(var i:int=0; i < n; i++)
                                {
                                        var child:IUIBase = 
area.getElementAt(i) as IUIBase;
-                     if (child == null || !child.visible) continue;
 -                                      if (child && !child.visible) continue;
++                                      if (child == null || !child.visible) 
continue;
                                        child.width = useWidth;
                                        child.height = useHeight;
                                        child.x = xpos;
@@@ -193,8 -190,8 +187,6 @@@
                                // size is stored in the model.
                                var sizeChanged:Boolean = true;
  
--                              IEventDispatcher(_strand).dispatchEvent( new 
Event("layoutComplete") );
--
                                return sizeChanged;
                        }
                        COMPILE::JS
@@@ -207,17 -204,15 +199,17 @@@
                                var ypos:Number;
                                var useWidth:Number;
                                var useHeight:Number;
++                              var adjustedWidth:Number = 
Math.floor(host.width - borderMetrics.left - borderMetrics.right);
++                              var adjustedHeight:Number = 
Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
  
--                              var host:UIBase = _strand as UIBase;
-                 var viewBead:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
 -                              var viewBead:ILayoutHost = 
_strand.getBeadByType(ILayoutHost) as ILayoutHost;
--                              var contentView:IParentIUIBase = 
viewBead.contentView;
++                              var contentView:IParentIUIBase = layoutView as 
IParentIUIBase;
++                              
                                children = contentView.internalChildren();
                                n = children.length;
                                if (n === 0) return false;
  
--                              viewBead.contentView.width = host.width;
-                 viewBead.contentView.element.style["display"] = "flex";
-                 viewBead.contentView.element.style["flex-flow"] = "row wrap";
++                              contentView.element.style["display"] = "flex";
++                              contentView.element.style["flex-flow"] = "row 
wrap";
  
                                var realN:int = n;
                                for (i = 0; i < n; i++)
@@@ -231,12 -226,11 +223,14 @@@
                                useWidth = columnWidth;
                                useHeight = rowHeight;
  
--                              if (isNaN(useWidth)) useWidth = 
Math.floor(host.width / numColumns); // + gap
++                              if (isNaN(useWidth)) {
++                                      useWidth = Math.floor(adjustedWidth / 
numColumns); // + gap
++                              }
                                if (isNaN(useHeight)) {
                                        // given the width and total number of 
items, how many rows?
                                        var numRows:Number = Math.floor(realN / 
numColumns);
-                     if (host.isHeightSizedToContent) useHeight = 30; // 
default height
-                     else useHeight = Math.floor(host.height / numRows);
 -                                      useHeight = Math.floor(host.height / 
numRows);
++                                      if (host.isHeightSizedToContent) 
useHeight = 30; // default height
++                                      else useHeight = 
Math.floor(adjustedHeight / numRows);
                                }
  
                                for (i = 0; i < n; i++)

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
index 3117d22,6eaa30a..e489d85
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
@@@ -17,11 -17,10 +17,13 @@@
  //
  
////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads.layouts
--{     
++{
++      import org.apache.flex.core.LayoutBase;
        import org.apache.flex.core.IBeadLayout;
        import org.apache.flex.core.IContainer;
        import org.apache.flex.core.ILayoutHost;
-     import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutView;
++      import org.apache.flex.core.ILayoutParent;
        import org.apache.flex.core.IMeasurementBead;
        import org.apache.flex.core.IParent;
        import org.apache.flex.core.IStrand;
@@@ -32,23 -31,23 +34,23 @@@
        import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.geom.Rectangle;
        import org.apache.flex.utils.CSSUtils;
--    import org.apache.flex.utils.CSSContainerUtils;    
--      
++    import org.apache.flex.utils.CSSContainerUtils;
++
        /**
         * ColumnLayout is a class that organizes the positioning of children
         * of a container into a set of columns where each column's width is 
set to
         * the maximum size of all of the children in that column.
--       *  
++       *
         *  @langversion 3.0
         *  @playerversion Flash 10.2
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
--      public class VerticalColumnLayout implements IBeadLayout
++      public class VerticalColumnLayout extends LayoutBase implements 
IBeadLayout
        {
                /**
                 *  constructor
--               *  
++               *
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
@@@ -56,29 -55,29 +58,15 @@@
                 */
                public function VerticalColumnLayout()
                {
++                      super();
                }
--              
--              private var _strand:IStrand;
--              
--              /**
--               *  @copy org.apache.flex.core.IBead#strand
--               *  
--               *  @langversion 3.0
--               *  @playerversion Flash 10.2
--               *  @playerversion AIR 2.6
--               *  @productversion FlexJS 0.0
--               */
--              public function set strand(value:IStrand):void
--              {
--                      _strand = value;
--              }
--              
--              
++
++
                private var _numColumns:int;
--              
++
                /**
                 * The number of columns.
--               *  
++               *
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
@@@ -92,19 -91,19 +80,18 @@@
                {
                        _numColumns = value;
                }
--              
++
          /**
           * @copy org.apache.flex.core.IBeadLayout#layout
           */
--              public function layout():Boolean
--              {                       
--            var host:UIBase = UIBase(_strand);
-             var layoutParent:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
 -            var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as 
ILayoutHost;
--            var contentView:IParent = layoutParent.contentView;
++              override public function layout():Boolean
++              {
++                      var contentView:ILayoutView = layoutView;
++                      
              var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
                        var sw:Number = host.width;
                        var sh:Number = host.height;
--                      
++
              var hasWidth:Boolean = !host.isWidthSizedToContent();
              var hasHeight:Boolean = !host.isHeightSizedToContent();
                        var e:IUIBase;
@@@ -116,45 -115,44 +103,29 @@@
                        for (i = 0; i < numColumns; i++)
                                columns[i] = 0;
  
--            var marginLeft:Object;
--            var marginRight:Object;
--            var marginTop:Object;
--            var marginBottom:Object;
--            var margin:Object;
--            var ml:Number;
--            var mr:Number;
--            var mt:Number;
--            var mb:Number;
                        var n:int = contentView.numElements;
              var rowData:Object = { rowHeight: 0 };
--                      
++
                        // determine max widths of columns
                        for (i = 0; i < n; i++) {
                                e = contentView.getElementAt(i) as IUIBase;
-                 if (e == null || !e.visible) continue;
--                margin = ValuesManager.valuesImpl.getValue(e, "margin");
--                marginLeft = ValuesManager.valuesImpl.getValue(e, 
"margin-left");
--                marginTop = ValuesManager.valuesImpl.getValue(e, 
"margin-top");
--                marginRight = ValuesManager.valuesImpl.getValue(e, 
"margin-right");
--                marginBottom = ValuesManager.valuesImpl.getValue(e, 
"margin-bottom");
--                mt = CSSUtils.getTopValue(marginTop, margin, sh);
--                mb = CSSUtils.getBottomValue(marginBottom, margin, sh);
--                mr = CSSUtils.getRightValue(marginRight, margin, sw);
--                ml = CSSUtils.getLeftValue(marginLeft, margin, sw);
--                data.push({ mt: mt, mb: mb, mr: mr, ml: ml});
++                              if (e == null || !e.visible) continue;
++                              var margins:Object = childMargins(e, sw, sh);
++                              
++                data.push({ mt: margins.top, mb: margins.bottom, mr: 
margins.right, ml: margins.left});
                                var thisPrefWidth:int = 0;
                                if (e is IStrand)
                                {
                                        var measure:IMeasurementBead = 
e.getBeadByType(IMeasurementBead) as IMeasurementBead;
                                        if (measure)
--                                              thisPrefWidth = 
measure.measuredWidth + ml + mr;
++                                              thisPrefWidth = 
measure.measuredWidth + margins.left + margins.right;
                                        else
--                                              thisPrefWidth = e.width + ml + 
mr;                                              
++                                              thisPrefWidth = e.width + 
margins.left + margins.right;
                                }
                                else
--                                      thisPrefWidth = e.width + ml + mr;
--                              
--                rowData.rowHeight = Math.max(rowData.rowHeight, e.height + mt 
+ mb);
++                                      thisPrefWidth = e.width + margins.left 
+ margins.right;
++
++                rowData.rowHeight = Math.max(rowData.rowHeight, e.height + 
margins.top + margins.bottom);
                                columns[col] = Math.max(columns[col], 
thisPrefWidth);
                  col = col + 1;
                  if (col == numColumns)
@@@ -164,18 -162,17 +135,18 @@@
                      col = 0;
                  }
                        }
--                      
++
              var lastmb:Number = 0;
                        var curx:int = padding.left;
                        var cury:int = padding.top;
                        var maxHeight:int = 0;
              var maxWidth:int = 0;
                        col = 0;
--                      for (i = 0; i < n; i++) 
++                      for (i = 0; i < n; i++)
              {
                                e = contentView.getElementAt(i) as IUIBase;
-                 if (e == null || !e.visible) continue;
--                              e.x = curx + ml;
++                              if (e == null || !e.visible) continue;
++                              e.x = curx + data[i].ml;
                                e.y = cury + data[i].mt;
                                curx += columns[col++];
                  maxHeight = Math.max(maxHeight, e.y + e.height + data[i].mb);
@@@ -188,14 -185,14 +159,6 @@@
                                        curx = padding.left;
                                }
                        }
--                      if (!hasWidth && n > 0 && !isNaN(maxWidth))
--            {
--                UIBase(contentView).setWidth(maxWidth, true);
--            }
--            if (!hasHeight && n > 0 && !isNaN(maxHeight))
--            {
--                UIBase(contentView).setHeight(maxHeight, true);
--            }
                        return true;
                }
        }

Reply via email to