You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2017/05/01 03:48:05 UTC

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

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/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;
  		}
  	}