flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From p...@apache.org
Subject [03/12] git commit: [flex-asjs] [refs/heads/develop] - Major overhaul of containers and layouts.
Date Thu, 23 Mar 2017 15:59:33 GMT
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
index 5bd1159..24e3ef0 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
@@ -19,9 +19,9 @@
 package org.apache.flex.html.beads.layouts
 {	
 	import org.apache.flex.core.IBeadLayout;
-	import org.apache.flex.core.IItemRendererClassFactory;
-	import org.apache.flex.core.IItemRendererParent;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
+	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.ISelectableItemRenderer;
 	import org.apache.flex.core.ISelectionModel;
@@ -34,6 +34,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.events.IEventDispatcher;
 	import org.apache.flex.html.List;
 	import org.apache.flex.html.beads.ButtonBarView;
+	import org.apache.flex.html.beads.models.ButtonBarModel;
 	
 	/**
 	 *  The ButtonBarLayout class bead sizes and positions the org.apache.flex.html.Button 
@@ -75,6 +76,7 @@ package org.apache.flex.html.beads.layouts
 			_strand = value;
 		}
 		
+		private var _widthType:Number = ButtonBarModel.PIXEL_WIDTHS;
 		private var _buttonWidths:Array = null;
 		
 		/**
@@ -100,17 +102,26 @@ package org.apache.flex.html.beads.layouts
 		 */
 		public function layout():Boolean
 		{
-			var layoutParent:ILayoutHost = _strand.getBeadByType(ILayoutHost) as ILayoutHost;
-			var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
-			var itemRendererParent:IItemRendererParent = contentView as IItemRendererParent;
-			var viewportModel:IViewportModel = (layoutParent as ButtonBarView).viewportModel;
+			var layoutHost:ILayoutHost = (_strand as ILayoutParent).getLayoutHost(); 
+			var contentView:ILayoutObject = layoutHost.contentView;
+			
+			var model:ButtonBarModel = _strand.getBeadByType(ButtonBarModel) as ButtonBarModel;
+			if (model) {
+				buttonWidths = model.buttonWidths;
+				_widthType = model.widthType;
+			}
 			
 			var n:int = contentView.numElements;
 			var realN:int = n;
 			
+			COMPILE::JS {
+				contentView.element.style["display"] = "flex";
+				contentView.element.style["flex-flow"] = "row";
+			}
+			
 			for (var j:int=0; j < n; j++)
 			{
-				var child:IUIBase = itemRendererParent.getElementAt(j) as IUIBase;
+				var child:IUIBase = contentView.getElementAt(j) as IUIBase;
 				if (child == null || !child.visible) realN--;
 			}
 			
@@ -120,17 +131,46 @@ package org.apache.flex.html.beads.layouts
 			
 			for (var i:int=0; i < n; i++)
 			{
-				var ir:ISelectableItemRenderer = itemRendererParent.getElementAt(i) as ISelectableItemRenderer;
+				var ir:ISelectableItemRenderer = contentView.getElementAt(i) as ISelectableItemRenderer;
 				if (ir == null || !UIBase(ir).visible) continue;
-				UIBase(ir).y = 0;
-				UIBase(ir).x = xpos;
-				if (!isNaN(useHeight) && useHeight > 0) {
-					UIBase(ir).height = useHeight;
+				COMPILE::SWF {
+					UIBase(ir).y = 0;
+					UIBase(ir).x = xpos;
+
+					if (buttonWidths) {
+						var widthValue:* = buttonWidths[i];
+						
+						if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
+							if (widthValue != null) UIBase(ir).width = Number(widthValue);
+						}
+						else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
+							if (widthValue != null) UIBase(ir).width = useWidth; // - need to replicate this for SWF side element.style["flex-grow"] = String(widthValue);
+						}
+						else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
+							if (widthValue != null) UIBase(ir).percentWidth = Number(widthValue);
+						}
+					} else {
+						UIBase(ir).width = useWidth;
+					}
 				}
 				
-				if (buttonWidths) UIBase(ir).width = Number(buttonWidths[i]);
-				else if (!isNaN(useWidth) && useWidth > 0) {
-					UIBase(ir).width = useWidth;
+				COMPILE::JS {
+					// otherwise let the flexbox layout handle matters on its own.
+					if (buttonWidths) {
+						var widthValue:* = buttonWidths[i];
+						
+						if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
+							if (widthValue != null) UIBase(ir).width = Number(widthValue);
+						}
+						else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
+							if (widthValue != null) UIBase(ir).element.style["flex-grow"] = String(widthValue);
+						}
+						else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
+							if (widthValue != null) UIBase(ir).percentWidth = Number(widthValue);
+						}
+					} else {
+						UIBase(ir).width = useWidth;
+					}
 				}
 				xpos += UIBase(ir).width;
 			}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
index a3bd4e8..cc37382 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
@@ -23,6 +23,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadModel;
 	import org.apache.flex.core.IBeadView;
 	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.ILayoutHost;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
 	import org.apache.flex.core.UIBase;
@@ -31,6 +32,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.html.ButtonBar;
 	import org.apache.flex.html.beads.DataGridView;
 	import org.apache.flex.html.beads.layouts.BasicLayout;
+	import org.apache.flex.html.beads.models.ButtonBarModel;
 	import org.apache.flex.html.supportClasses.DataGridColumnList;
 	import org.apache.flex.html.supportClasses.DataGridColumn;
 	
@@ -143,6 +145,7 @@ package org.apache.flex.html.beads.layouts
         /**
          * @copy org.apache.flex.core.IBeadLayout#layout
          */
+		COMPILE::SWF
 		public function layout():Boolean
 		{						
 			if (columns == null || columns.length == 0) {
@@ -157,8 +160,6 @@ package org.apache.flex.html.beads.layouts
 				useHeight = host.height - _header.height;
 			}
 			
-			var thisisnothing:Number = -1234;
-
 			_listArea.x = 0;
 			_listArea.y = 26;
 			_listArea.width = useWidth;
@@ -187,8 +188,8 @@ package org.apache.flex.html.beads.layouts
 			}
 			
 			var bar:ButtonBar = header as ButtonBar;
-			var barLayout:ButtonBarLayout = bar.getBeadByType(ButtonBarLayout) as ButtonBarLayout;
-			barLayout.buttonWidths = buttonWidths;
+			bar.buttonWidths = buttonWidths;
+			bar.widthType = ButtonBarModel.PIXEL_WIDTHS;
 			bar.dispatchEvent(new Event("layoutNeeded"));
 			
 			_header.x = 0;
@@ -201,6 +202,60 @@ package org.apache.flex.html.beads.layouts
 		}
 		
 		/**
+		 * @copy org.apache.flex.core.IBeadLayout#layout
+		 */
+		COMPILE::JS
+		public function layout():Boolean
+		{						
+			if (columns == null || columns.length == 0) {
+				return false;
+			}
+			var host:UIBase = _strand as UIBase;
+			
+			var sharedModel:IDataGridModel = host.model as IDataGridModel;
+			var buttonWidths:Array = [];
+			
+			if (_columns != null && _columns.length > 0) {
+				var listWidth:Number = host.width / _columns.length;
+				for (var i:int=0; i < _columns.length; i++) {
+					var list:DataGridColumnList = _columns[i] as DataGridColumnList;
+					list.element.style["position"] = null;
+					list.element.style["height"] = null;
+					
+					
+					var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+					var colWidth:Number = dataGridColumn.columnWidth;
+					if (!isNaN(colWidth)) list.width = colWidth;
+					else list.width = listWidth;
+										
+					buttonWidths.push(list.width);
+				}
+			}
+			
+			var bar:ButtonBar = header as ButtonBar;
+			bar.buttonWidths = buttonWidths;
+			bar.widthType = ButtonBarModel.PIXEL_WIDTHS;
+			bar.dispatchEvent(new Event("layoutNeeded"));
+			
+			host.element.style.display = "flex";
+			host.element.style["flex-flow"] = "column";
+			host.element.style["justify-content"] = "stretch";
+			
+			_header.height = 25;
+			_header.percentWidth = 100;
+			
+			_listArea.element.style["flex-grow"] = "2";
+			_listArea.element.style["position"] = null;
+			_listArea.element.style["height"] = null;
+			
+			var listView:ILayoutHost = UIBase(_listArea).view as ILayoutHost;
+			listView.contentView.element.style["display"] = "flex";
+			listView.contentView.element.style["flex-flow"] = "row";
+			
+			return true;
+		}
+		
+		/**
 		 * @private
 		 */
 		private function handleSizeChanges(event:Event):void

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
index 7459a24..907cf9d 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
@@ -22,6 +22,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.IBeadView;
 	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.ILayoutHost;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
 	import org.apache.flex.core.UIBase;
@@ -30,6 +31,8 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.html.ButtonBar;
 	import org.apache.flex.html.beads.DataGridView;
 	import org.apache.flex.html.beads.layouts.HorizontalLayout;
+	import org.apache.flex.html.beads.models.ButtonBarModel;
+	import org.apache.flex.html.supportClasses.DataGridColumnList;
 	import org.apache.flex.html.supportClasses.DataGridColumn;
 	
 	/**
@@ -82,14 +85,21 @@ package org.apache.flex.html.beads.layouts
 			if (anylayout != null) {
 				listArea.removeBead(anylayout);
 			}
-			listArea.addBead(new HorizontalLayout());
+			listArea.addBead(new BasicLayout());
 			
 			host.addEventListener("widthChanged", handleSizeChanges);
 			host.addEventListener("heightChanged", handleSizeChanges);
 			host.addEventListener("sizeChanged", handleSizeChanges);
 			host.addEventListener("layoutNeeded", handleSizeChanges);
+			
+			// listen for beadsAdded to signal that the strand is set with its size
+			// and beads.
+			host.addEventListener("beadsAdded", beadsAddedHandler);
 		}
 		
+		private var runNeeded:Boolean = false;
+		private var hostReady:Boolean = false;
+		
 		private var _header:UIBase;
 		
 		/**
@@ -139,71 +149,140 @@ package org.apache.flex.html.beads.layouts
 			_listArea = value;
 		}
 		
-        /**
-         * @copy org.apache.flex.core.IBeadLayout#layout
-         */
+		private function beadsAddedHandler(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
+			
+			var useWidth:Number = host.width;
+			var useHeight:Number = host.height;
+			
+			hostReady = true;
+			if (runNeeded) {
+				runNeeded = false;
+				layout();
+			}
+		}
+		
+		/**
+		 * @copy org.apache.flex.core.IBeadLayout#layout
+		 */
+		COMPILE::SWF
 		public function layout():Boolean
 		{			
-			if (columns == null || columns.length == 0) {
+			if (!hostReady) {
+				runNeeded = true;
 				return false;
 			}
 			
+			if (columns == null || columns.length == 0) {
+				return false;
+			}
 			var host:UIBase = _strand as UIBase;
 			
-			var sw:Number = host.width;
-			var sh:Number = host.height;
+			var useWidth:Number = host.width;
+			var useHeight:Number = host.height;
+			
+			if (host.height > 0) {
+				useHeight = host.height - _header.height;
+			}
 			
-			var columnHeight:Number = Math.floor(sh - header.height);
-			var columnWidth:Number  = Math.floor(sw / columns.length);
+			_listArea.x = 0;
+			_listArea.y = 26;
+			_listArea.width = useWidth;
+			_listArea.height = useHeight;
+			
+			var sharedModel:IDataGridModel = host.model as IDataGridModel;
+			var buttonWidths:Array = [];
+			
+			if (_columns != null && _columns.length > 0) {
+				var xpos:Number = 0;
+				var listWidth:Number = host.width / _columns.length;
+				for (var i:int=0; i < _columns.length; i++) {
+					var list:DataGridColumnList = _columns[i] as DataGridColumnList;
+					list.x = xpos;
+					list.y = 0;
+					
+					var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+					var colWidth:Number = dataGridColumn.columnWidth;
+					if (!isNaN(colWidth)) {
+						list.percentWidth = colWidth;
+						colWidth = host.width * (colWidth/100.0);
+					}
+					else {
+						list.width = listWidth;
+						colWidth = listWidth;
+					}
+					
+					xpos += colWidth;
+					
+					buttonWidths.push(colWidth);
+				}
+			}
 			
-			var xpos:Number = 0;
-			var ypos:Number = 26;
+			var bar:ButtonBar = header as ButtonBar;
+			bar.buttonWidths = buttonWidths;
+			bar.widthType = ButtonBarModel.PERCENT_WIDTHS;
+			bar.dispatchEvent(new Event("layoutNeeded"));
 			
 			_header.x = 0;
 			_header.y = 0;
-			_header.width = sw;
+			_header.width = useWidth;
 			_header.height = 25;
+			_header.dispatchEvent(new Event("layoutNeeded"));
 			
-			if (sh > 0) {
-				sh = sh - _header.height;
+			return true;
+		}
+		
+		/**
+		 * @copy org.apache.flex.core.IBeadLayout#layout
+		 */
+		COMPILE::JS
+		public function layout():Boolean
+		{						
+			if (columns == null || columns.length == 0) {
+				return false;
 			}
+			var host:UIBase = _strand as UIBase;
+			
+			var sharedModel:IDataGridModel = host.model as IDataGridModel;
+			var buttonWidths:Array = [];
 			
-			// TODO: change the layout so that the model's DataGridColumn.columnWidth
-			// isn't used blindly, but is considered in the overall width. In other words,
-			// right now the width could exceed the strand's width.
-			var model:IDataGridModel = host.model as IDataGridModel;
-			
-			var buttonWidths:Array = new Array();
-						
-			for(var i:int=0; i < columns.length; i++) {
-				var column:UIBase = columns[i] as UIBase;
-				column.percentHeight = 100;
-
-				var dgc:DataGridColumn = model.columns[i];
-				if (!isNaN(dgc.columnWidth)) {
-					column.percentWidth = dgc.columnWidth;
-					columnWidth = sw * (dgc.columnWidth/100.0);
+			if (_columns != null && _columns.length > 0) {
+				var listWidth:Number = host.width / _columns.length;
+				for (var i:int=0; i < _columns.length; i++) {
+					var list:DataGridColumnList = _columns[i] as DataGridColumnList;
+					list.element.style["position"] = null;
+					list.element.style["height"] = null;
+					
+					
+					var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+					var colWidth:Number = dataGridColumn.columnWidth;
+					if (!isNaN(colWidth)) list.percentWidth = colWidth;
+					else list.width = listWidth;
+					
+					buttonWidths.push(list.width);
 				}
-				else column.explicitWidth = columnWidth;
-				
-				buttonWidths.push(columnWidth);
 			}
 			
-			_listArea.x = 0;
-			_listArea.y = 26;
-			_listArea.width = sw;
-			_listArea.height = sh;
-			_listArea.dispatchEvent(new Event("layoutNeeded"));
-			
 			var bar:ButtonBar = header as ButtonBar;
-			var barLayout:ButtonBarLayout = bar.getBeadByType(ButtonBarLayout) as ButtonBarLayout;
-			barLayout.buttonWidths = buttonWidths;
+			bar.buttonWidths = buttonWidths;
+			bar.widthType = ButtonBarModel.PERCENT_WIDTHS;
+			bar.dispatchEvent(new Event("layoutNeeded"));
+			
+			host.element.style.display = "flex";
+			host.element.style["flex-flow"] = "column";
+			host.element.style["justify-content"] = "stretch";
 			
-			_header.x = 0;
-			_header.y = 0;
-			_header.width = sw;
 			_header.height = 25;
-			_header.dispatchEvent(new Event("layoutNeeded"));
+			_header.percentWidth = 100;
+			
+			_listArea.element.style["flex-grow"] = "2";
+			_listArea.element.style["position"] = null;
+			_listArea.element.style["height"] = null;
+			
+			var listView:ILayoutHost = UIBase(_listArea).view as ILayoutHost;
+			listView.contentView.element.style["display"] = "flex";
+			listView.contentView.element.style["flex-flow"] = "row";
 			
 			return true;
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
index 13d4092..347c304 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
@@ -20,6 +20,7 @@ package org.apache.flex.html.beads.layouts
 {
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ILayoutChild;
+	import org.apache.flex.core.ILayoutObject;
     import org.apache.flex.core.ILayoutHost;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IParentIUIBase;
@@ -34,6 +35,7 @@ package org.apache.flex.html.beads.layouts
     import org.apache.flex.geom.Rectangle;
     import org.apache.flex.html.supportClasses.Viewport;
     import org.apache.flex.utils.CSSContainerUtils;
+	import org.apache.flex.utils.CSSUtils;
 
     /**
      *  The FlexibleFirstChildHorizontalLayout class is a simple layout
@@ -129,117 +131,125 @@ package org.apache.flex.html.beads.layouts
         /**
          * @copy org.apache.flex.core.IBeadLayout#layout
          */
+		COMPILE::SWF
 		public function layout():Boolean
-		{
-			var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost();
-			var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
-            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
-            var hostSizedToContent:Boolean = host.isHeightSizedToContent();
+		{			
+			var layoutHost:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
+			var contentView:ILayoutObject = layoutHost.contentView;
 			
-			var n:int = contentView.numElements;
+			var n:Number = contentView.numElements;
+			if (n == 0) return false;
+			
+			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 marginLeft:Object;
 			var marginRight:Object;
 			var marginTop:Object;
 			var marginBottom:Object;
 			var margin:Object;
-			maxHeight = 0;
-			var verticalMargins:Array = [];
 			
-            var xx:Number = contentView.width;
-            if (isNaN(xx) || xx <= 0)
-                return true;
-            xx -= padding.right + 1; // some browsers won't layout to the edge
-            
-            for (var i:int = n - 1; i >= 0; i--)
+			var paddingMetrics:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+			var borderMetrics:Rectangle = CSSContainerUtils.getBorderMetrics(host);
+			
+			var xpos:Number = hostWidth - borderMetrics.right - paddingMetrics.right;
+			var ypos:Number = borderMetrics.top + paddingMetrics.left;
+			var adjustedWidth:Number = 0;
+			
+			for(var i:int=(n-1); i >= 0; 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");
-				if (margin is Array)
-				{
-					if (margin.length == 1)
-						marginLeft = marginTop = marginRight = marginBottom = margin[0];
-					else if (margin.length <= 3)
-					{
-						marginLeft = marginRight = margin[1];
-						marginTop = marginBottom = margin[0];
-					}
-					else if (margin.length == 4)
-					{
-						marginLeft = margin[3];
-						marginBottom = margin[2];
-						marginRight = margin[1];
-						marginTop = margin[0];					
-					}
-				}
-				else if (margin == null)
-				{
-					marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
-					marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
-					marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
-					marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
-				}
-				else
-				{
-					marginLeft = marginTop = marginBottom = marginRight = margin;
-				}
-				var ml:Number;
-				var mr:Number;
-				var mt:Number;
-				var mb:Number;
-				var lastmr:Number;
-				mt = Number(marginTop);
-				if (isNaN(mt))
-					mt = 0;
-				mb = Number(marginBottom);
-				if (isNaN(mb))
-					mb = 0;
+				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, hostWidth);
+				var mr:Number = CSSUtils.getRightValue(marginRight, margin, hostWidth);
+				var mt:Number = CSSUtils.getTopValue(marginTop, margin, hostHeight);
+				var mb:Number = CSSUtils.getBottomValue(marginBottom, margin, hostHeight);
 				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;
+				
+				ilc = child as ILayoutChild;
+								
+				var childYpos:Number = ypos + mt; // default y position
+				
+				if (!hostSizedToContent) {
+					var childHeight:Number = child.height;
+					if (ilc != null && !isNaN(ilc.percentHeight)) {
+						childHeight = (hostHeight-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * ilc.percentHeight/100.0;
+						ilc.setHeight(childHeight);
+					}			
+					// the following code middle-aligns the child
+					childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
+				}
+				
+				if (ilc) {
+					if (!isNaN(ilc.percentWidth)) {
+						ilc.setWidth((contentView.width-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * ilc.percentWidth / 100);
+					}
 				}
-				child.y = mt + padding.top;
-				if (i == 0)
-                {
-                    child.x = ml + padding.left;
-                    child.width = xx - mr - child.x;
-                }
-				else
-                    child.x = xx - child.width - mr;
-                maxHeight = Math.max(maxHeight, mt + child.height + mb);
-				xx -= child.width + mr + ml;
-				lastmr = mr;
-				var valign:Object = ValuesManager.valuesImpl.getValue(child, "vertical-align");
-				verticalMargins.push({ marginTop: mt, marginBottom: mb, valign: valign });
+				
+				if (i > 0) {
+					xpos -= child.width + mr;
+					adjustedWidth = child.width;
+				} else {
+					adjustedWidth = xpos - (borderMetrics.left + paddingMetrics.left + ml + mr);
+					xpos = borderMetrics.left + paddingMetrics.left + ml;
+				}
+				
+				if (ilc) {
+					ilc.setX(xpos);
+					ilc.setY(childYpos);
+					ilc.setWidth(adjustedWidth);
+					
+				} else {
+					child.x = xpos;
+					child.y = childYpos;
+					child.width = adjustedWidth;
+				}
+				
+				xpos -= ml;
 			}
-			for (i = 0; i < n; i++)
-			{
-				var obj:Object = verticalMargins[0]
-				child = contentView.getElementAt(i) as IUIBase;
-				if (child == null || !child.visible) continue;
-				if (obj.valign == "middle")
-					child.y = (maxHeight - child.height) / 2;
-				else if (valign == "bottom")
-					child.y = maxHeight - child.height - obj.marginBottom;
-				else
-					child.y = obj.marginTop;
+			
+			host.dispatchEvent( new Event("layoutComplete") );
+			
+			return true;
+		}
+		
+		COMPILE::JS
+		public function layout():Boolean
+		{
+			var viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
+			var contentView:ILayoutObject = viewBead.contentView;
+			
+			// set the display on the contentView
+			contentView.element.style["display"] = "flex";
+			contentView.element.style["flex-flow"] = "row";
+			contentView.element.style["align-items"] = "center";
+			
+			var n:int = contentView.numElements;
+			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"] = (i == 0) ? "1" : "0";
+				child.element.style["flex-shrink"] = "0";
 			}
-            if (hostSizedToContent)
-                ILayoutChild(contentView).setHeight(maxHeight + padding.top + padding.bottom, true);
 			
-            return true;
+			return true;
 		}
 
     }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
index 1ca2e52..03a34a7 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
@@ -22,13 +22,14 @@ package org.apache.flex.html.beads.layouts
 	
 	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.UIBase;
 	
 	COMPILE::SWF {
-		import org.apache.flex.core.UIBase;
 		import org.apache.flex.core.IUIBase;
-		import org.apache.flex.core.IParentIUIBase;
 		import org.apache.flex.core.ValuesManager;
 		import org.apache.flex.events.Event;
 		import org.apache.flex.events.IEventDispatcher;
@@ -39,6 +40,14 @@ package org.apache.flex.html.beads.layouts
 	
 	public class HorizontalFlexLayout extends HorizontalLayout
 	{
+		/**
+		 * Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
+		 */
 		public function HorizontalFlexLayout()
 		{
 			super();
@@ -55,27 +64,71 @@ package org.apache.flex.html.beads.layouts
 			host = value as ILayoutChild;
 		}
 		
+		private var _grow:Number = -1;
+		
+		/**
+		 * Sets the amount items grow in proportion to other items.
+		 * The default is 0 which prevents the items from expanding to
+		 * fit the space. Use a negative value to unset this property.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
+		 */
+		public function get grow():Number {
+			return _grow;
+		}
+		public function set grow(value:Number):void {
+			_grow = value;
+		}
+		
+		private var _shrink:Number = -1;
+		
+		/**
+		 * Sets the amount an item may shrink in proportion to other items.
+		 * The default is 1 which allows items to shrink to fit into the space. 
+		 * Set this to 0 if you want to allow scrolling of the space. Use a 
+		 * negative value to unset this property.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
+		 */
+		public function get shrink():Number {
+			return _shrink;
+		}
+		public function set shrink(value:Number):void {
+			_shrink = value;
+		}
+		
 		/**
 		 * @copy org.apache.flex.core.IBeadLayout#layout
 		 * @flexjsignorecoercion org.apache.flex.core.ILayoutHost
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
 		 */
 		override public function layout():Boolean
 		{
 			COMPILE::SWF {
 				//return super.layout();
 				// this is where the layout is calculated
-				var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
-				var contentView:IParentIUIBase = layoutParent.contentView;
+				var layoutHost:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
+				var contentView:ILayoutObject = layoutHost.contentView;
 				
 				var n:Number = contentView.numElements;
 				if (n == 0) return false;
-				
-				trace("HorizontalFlexLayout: contentView size: "+contentView.width+" x "+contentView.height+"; explicit: "+UIBase(contentView).explicitWidth+" x "+UIBase(contentView).explicitHeight);
-				
+								
 				var spacing:String = "none";
 				
 				var maxWidth:Number = 0;
 				var maxHeight:Number = 0;
+				var growCount:Number = 0;
+				var remainingWidth:Number = contentView.width;
 				var childData:Array = [];
 				
 				var ilc:ILayoutChild;
@@ -98,11 +151,12 @@ package org.apache.flex.html.beads.layouts
 					
 					ilc = child as ILayoutChild;
 					
-					var useWidth:Number = -1;
-					if (ilc) {
-						if (!isNaN(ilc.explicitWidth)) useWidth = ilc.explicitWidth;
-						else if (!isNaN(ilc.percentWidth)) useWidth = contentView.width * (ilc.percentWidth/100.0);
-						else canAdjust = true;
+					var flexGrow:Object = ValuesManager.valuesImpl.getValue(child, "flex-grow");
+					var growValue:Number = -1;
+					if (flexGrow != null) {
+						growValue = Number(flexGrow);
+						if (!isNaN(growValue) && growValue > 0) growCount++;
+						else growValue = 0;
 					}
 					
 					var useHeight:Number = -1;
@@ -111,6 +165,14 @@ package org.apache.flex.html.beads.layouts
 						else if (!isNaN(ilc.percentHeight)) useHeight = contentView.height * (ilc.percentHeight/100.0);
 						else useHeight = contentView.height;
 					}
+					if (useHeight > contentView.height) useHeight = contentView.height;
+					
+					var useWidth:Number = -1;
+					if (ilc) {
+						if (!isNaN(ilc.explicitWidth)) useWidth = ilc.explicitWidth;
+						else if (!isNaN(ilc.percentWidth)) useWidth = contentView.width * (ilc.percentWidth/100.0);
+						else useWidth = ilc.width;
+					}
 					
 					margin = ValuesManager.valuesImpl.getValue(child, "margin");
 					marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
@@ -129,7 +191,7 @@ package org.apache.flex.html.beads.layouts
 					if (maxWidth < useWidth) maxWidth = useWidth;
 					if (maxHeight < useHeight) maxHeight = useHeight;
 					
-					childData.push({width:useWidth, height:useHeight, mt:mt, ml:ml, mr:mr, mb:mb, canAdjust:canAdjust});
+					childData.push({width:useWidth, height:useHeight, mt:mt, ml:ml, mr:mr, mb:mb, grow:growValue, canAdjust:canAdjust});
 				}
 				
 				var xpos:Number = 0;
@@ -142,15 +204,23 @@ package org.apache.flex.html.beads.layouts
 					data = childData[i];
 					if (data.width == 0 || data.height == 0) continue;
 					
-					useWidth = (data.width < 0 ? maxWidth : data.width);
 					useHeight = (data.height < 0 ? maxHeight : data.height);
+					if (data.width > 0) {
+						if (data.grow > 0 && growCount > 0) {
+							useWidth = remainingWidth / growCount;
+						} else {
+							useWidth = data.width;
+						}
+					} else {
+						useWidth = child.width;
+					}
 					
 					ilc = child as ILayoutChild;
 					if (ilc) {
 						ilc.setX(xpos + data.ml);
 						ilc.setY(ypos + data.mt);
 						ilc.setHeight(useHeight - data.mt - data.mb);
-						if (data.width > 0) {
+						if (useWidth > 0) {
 							ilc.setWidth(useWidth - data.ml - data.mr);
 						}
 					} else {
@@ -162,7 +232,7 @@ package org.apache.flex.html.beads.layouts
 						}
 					}
 					
-					xpos += child.width + data.ml + data.mr;
+					xpos += useWidth + data.ml + data.mr;
 					
 					trace("HorizontalFlexLayout: setting child "+i+" to "+child.width+" x "+child.height+" at "+child.x+", "+child.y);
 				}
@@ -176,11 +246,20 @@ package org.apache.flex.html.beads.layouts
 				
 			COMPILE::JS {
 				var viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
+				var contentView:ILayoutObject = viewBead.contentView;
 				
 				// set the display on the contentView
-				viewBead.contentView.width = host.width;
-				viewBead.contentView.element.style["display"] = "flex";
-				viewBead.contentView.element.style["flex-flow"] = "row";
+				contentView.element.style["display"] = "flex";
+				contentView.element.style["flex-flow"] = "row";
+				
+				var n:int = contentView.numElements;
+				if (n == 0) return false;
+				
+				for(var i:int=0; i < n; i++) {
+					var child:UIBase = contentView.getElementAt(i) as UIBase;
+					if (grow >= 0) child.element.style["flex-grow"] = String(grow);
+					if (shrink >= 0) child.element.style["flex-shrink"] = String(shrink);
+				}
 				
 				return true;
 			}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
index 8f3561a..066bc8b 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
@@ -21,6 +21,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ILayoutHost;
 	import org.apache.flex.core.ILayoutParent;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
index 4230c5e..ec96c20 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
@@ -22,6 +22,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadModel;
 	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
@@ -32,8 +33,10 @@ package org.apache.flex.html.beads.layouts
 	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;
     }
 
@@ -98,117 +101,92 @@ package org.apache.flex.html.beads.layouts
 		{
             COMPILE::SWF
             {
-                //trace(DOMPathUtil.getPath(host), event ? event.type : "fixed size");
-                var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost(); //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 layoutHost:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
+				var contentView:ILayoutObject = layoutHost.contentView;
+				
+				var n:Number = contentView.numElements;
+				if (n == 0) return false;
+												
+				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 marginLeft:Object;
+				var marginRight:Object;
+				var marginTop:Object;
+				var marginBottom:Object;
+				var margin:Object;
+				
+				var paddingMetrics:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+				var borderMetrics:Rectangle = CSSContainerUtils.getBorderMetrics(host);
+				
+				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 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, hostWidth);
+					var mr:Number = CSSUtils.getRightValue(marginRight, margin, hostWidth);
+					var mt:Number = CSSUtils.getTopValue(marginTop, margin, hostHeight);
+					var mb:Number = CSSUtils.getBottomValue(marginBottom, margin, hostHeight);
+					if (marginLeft == "auto")
+						ml = 0;
+					if (marginRight == "auto")
+						mr = 0;
+					
+					ilc = child as ILayoutChild;
+					
+					xpos += ml;
+					
+					var childYpos:Number = ypos + mt; // default y position
+					
+					if (!hostSizedToContent) {
+						var childHeight:Number = child.height;
+						if (ilc != null && !isNaN(ilc.percentHeight)) {
+							childHeight = (hostHeight-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * ilc.percentHeight/100.0;
+							ilc.setHeight(childHeight - mt - mb);
+						}			
+						// 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 (!isNaN(ilc.percentWidth)) {
+							var newWidth:Number = (contentView.width-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * ilc.percentWidth / 100;
+							ilc.setWidth(newWidth - mr - ml);
+						}
+						
+					} else {
+						child.x = xpos;
+						child.y = childYpos;
+					}
+					
+					xpos += child.width + mr;
+				}
+				
+				host.dispatchEvent( new Event("layoutComplete") );
+				
+				return true;
                 
             }
             COMPILE::JS
@@ -218,116 +196,27 @@ package org.apache.flex.html.beads.layouts
                 var n:int;
                 
                 var viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
-                var contentView:IParentIUIBase = viewBead.contentView;
+                var contentView:IParentIUIBase = viewBead.contentView 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
-                }
+					child.flexjs_wrapper.setDisplayStyleForLayout('inline-block');
+					if (child.style.display !== 'none') 
+					{
+						child.style.display = 'inline-block';
+					}
+				}
 				host.dispatchEvent( new Event("layoutComplete") );
                 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/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
index ff09b9c..2f88b01 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
@@ -21,11 +21,13 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IDocument;
 	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	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.ValuesManager;
+	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.geom.Rectangle;
 	import org.apache.flex.utils.CSSContainerUtils;
@@ -157,185 +159,202 @@ package org.apache.flex.html.beads.layouts
         /**
          * @copy org.apache.flex.core.IBeadLayout#layout
          */
+		COMPILE::JS
 		public function layout():Boolean
 		{
-            var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost(); //host.getBeadByType(ILayoutHost) as ILayoutHost;
-            var contentView:IParentIUIBase = layoutParent ? layoutParent.contentView : IParentIUIBase(host);
-            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
-            actualChild = document[flexibleChild];
-
-            var ilc:ILayoutChild;
+			var viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
+			var contentView:ILayoutObject = viewBead.contentView;
+			
+			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 n:int = contentView.numElements;
+			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
+		protected function childMargins(child:Object, hostWidth:Number, hostHeight:Number):Object
+		{
+			var margin:Object = ValuesManager.valuesImpl.getValue(child, "margin");
+			var marginLeft:Object = ValuesManager.valuesImpl.getValue(child, "margin-left");
+			var marginTop:Object = ValuesManager.valuesImpl.getValue(child, "margin-top");
+			var marginRight:Object = ValuesManager.valuesImpl.getValue(child, "margin-right");
+			var marginBottom:Object = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+			var ml:Number = CSSUtils.getLeftValue(marginLeft, margin, hostWidth);
+			var mr:Number = CSSUtils.getRightValue(marginRight, margin, hostWidth);
+			var mt:Number = CSSUtils.getTopValue(marginTop, margin, hostHeight);
+			var mb:Number = CSSUtils.getBottomValue(marginBottom, margin, hostHeight);
+			if (marginLeft == "auto")
+				ml = 0;
+			if (marginRight == "auto")
+				mr = 0;
+			
+			return {left:ml, top:mt, right:mr, bottom:mb};
+		}
+		
+		COMPILE::SWF
+		public function layout():Boolean
+		{			
+			var layoutHost:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
+			var contentView:ILayoutObject = layoutHost.contentView;
+			var actualChild:IUIBase = document.hasOwnProperty(flexibleChild) ? document[flexibleChild] : null;
+			
+			var n:Number = contentView.numElements;
+			if (n == 0) return false;
+			
+			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 marginLeft:Object;
 			var marginRight:Object;
 			var marginTop:Object;
 			var marginBottom:Object;
 			var margin:Object;
-			maxHeight = 0;
-			var verticalMargins:Array = new Array(n);
+			var ml:Number;
+			var mr:Number;
+			var mt:Number;
+			var mb:Number;
+			var margins:Object;
 			
-            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;
+			var paddingMetrics:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+			var borderMetrics:Rectangle = CSSContainerUtils.getBorderMetrics(host);
+			
+			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.right - paddingMetrics.right;
+			
+			// 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)
-                {
-                    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++)
+				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 = (hostHeight-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * ilc.percentHeight/100.0;
+						ilc.setHeight(childHeight);
+					}			
+					// the following code middle-aligns the child
+					childYpos = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2;
+				}
+				
+				if (ilc) {
+					ilc.setX(xpos);
+					ilc.setY(childYpos);
+					
+					if (!isNaN(ilc.percentWidth)) {
+						ilc.setWidth((contentView.width-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * 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.right - paddingMetrics.right;
+			
+			for(i=(n-1); actualChild != null && i >= 0; i--)
 			{
-				var obj:Object = verticalMargins[i]
 				child = contentView.getElementAt(i) as IUIBase;
 				if (child == null || !child.visible) continue;
-                setPositionAndHeight(child, obj.top, obj.marginTop, padding.top,
-                    obj.bottom, obj.marginBottom, padding.bottom, maxHeight, obj.valign);
+				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-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * ilc.percentHeight/100.0;
+						ilc.setHeight(childHeight);
+					}			
+					// the following code middle-aligns the child
+					childYpos = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2;
+				}
+				
+				if (ilc) {
+					if (!isNaN(ilc.percentWidth)) {
+						ilc.setWidth((contentView.width-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * 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-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * ilc.percentHeight/100.0;
+						ilc.setHeight(childHeight);
+					}
+				}
+				actualChild.y = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2;
+				actualChild.x = adjustLeft + margins.left;
+				if (ilc) {
+					ilc.setWidth((adjustRight-margins.right) - (adjustLeft+margins.left));
+				} else {
+					actualChild.width = (adjustRight-margins.right) - (adjustLeft+margins.left);
+				}
 			}
+			
+			host.dispatchEvent( new Event("layoutComplete") );
+			
             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
         {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
index a2ad24c..6099388 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
@@ -21,16 +21,18 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IDocument;
 	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	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.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.geom.Rectangle;
 	import org.apache.flex.utils.CSSContainerUtils;
+	import org.apache.flex.utils.CSSUtils;
 
     /**
      *  The OneFlexibleChildVerticalLayout class is a simple layout
@@ -154,335 +156,206 @@ package org.apache.flex.html.beads.layouts
         {
             _maxHeight = value;
         }
-        
-		// TODO get rid of this
-		private function getActualChildById(contentView:IParentIUIBase, id:String):ILayoutChild
+		
+		COMPILE::SWF
+		protected function childMargins(child:Object, hostWidth:Number, hostHeight:Number):Object
 		{
-			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;
+			var margin:Object = ValuesManager.valuesImpl.getValue(child, "margin");
+			var marginLeft:Object = ValuesManager.valuesImpl.getValue(child, "margin-left");
+			var marginTop:Object = ValuesManager.valuesImpl.getValue(child, "margin-top");
+			var marginRight:Object = ValuesManager.valuesImpl.getValue(child, "margin-right");
+			var marginBottom:Object = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+			var ml:Number = CSSUtils.getLeftValue(marginLeft, margin, hostWidth);
+			var mr:Number = CSSUtils.getRightValue(marginRight, margin, hostWidth);
+			var mt:Number = CSSUtils.getTopValue(marginTop, margin, hostHeight);
+			var mb:Number = CSSUtils.getBottomValue(marginBottom, margin, hostHeight);
+			if (marginLeft == "auto")
+				ml = 0;
+			if (marginRight == "auto")
+				mr = 0;
+			
+			return {left:ml, top:mt, right:mr, bottom:mb};
 		}
+		
         /**
          * @copy org.apache.flex.core.IBeadLayout#layout
          */
+		COMPILE::JS
 		public function layout():Boolean
 		{
-            var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost();
-            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 viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
+			var contentView:ILayoutObject = viewBead.contentView;
+			
+			actualChild = document[flexibleChild];
+			
+			// 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;
+			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
+		public function layout():Boolean
+		{
+			var layoutHost:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
+			var contentView:ILayoutObject = layoutHost.contentView;
+			var actualChild:IUIBase = document.hasOwnProperty(flexibleChild) ? document[flexibleChild] : null;
+			
+			var n:Number = contentView.numElements;
+			if (n == 0) return false;
+			
+			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 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;
+			var ml:Number;
+			var mr:Number;
+			var mt:Number;
+			var mb:Number;
+			var margins:Object;
+			
+			var paddingMetrics:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+			var borderMetrics:Rectangle = CSSContainerUtils.getBorderMetrics(host);
+			
+			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.bottom;
+			
+			// first work from top to bottom
+			for(i=0; i < n; 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");
-                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 (child == actualChild) break;
+				
+				margins = childMargins(child, hostWidth, hostHeight);
+				ilc = child as ILayoutChild;
+				
+				ypos += margins.top;
+				
+				childXpos = xpos + margins.left; // default y position
+				
+				if (!hostSizedToContent) {
+					childWidth = child.width;
+					if (ilc != null && !isNaN(ilc.percentWidth)) {
+						childWidth = (hostWidth-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * ilc.percentWidth/100.0;
+						ilc.setWidth(childWidth);
+					}			
+					// the following code middle-aligns the child
+					childXpos = hostWidth/2 - (childWidth + margins.left + margins.right)/2;
+				}
+				
+				if (ilc) {
+					ilc.setX(childXpos);
+					ilc.setY(ypos);
+					
+					if (!isNaN(ilc.percentHeight)) {
+						ilc.setHeight((contentView.height-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * 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.bottom - paddingMetrics.bottom;
+			
+			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 y position
+				
+				if (!hostSizedToContent) {
+					childWidth = child.width;
+					if (ilc != null && !isNaN(ilc.percentWidth)) {
+						childWidth = (hostWidth-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * ilc.percentWidth/100.0;
+						ilc.setWidth(childWidth);
+					}			
+					// the following code middle-aligns the child
+					childXpos = hostWidth/2 - (childWidth + margins.left + margins.right)/2;
+				}
+				
+				if (ilc) {
+					if (!isNaN(ilc.percentHeight)) {
+						ilc.setHeight((contentView.height-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * 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-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * ilc.percentWidth/100.0;
+						ilc.width = childWidth;
+					}
+				}
+				actualChild.x = hostWidth/2 - (childWidth + margins.left + margins.right)/2;
+				actualChild.y = adjustTop + margins.top;
+				if (ilc) {
+					ilc.setHeight((adjustBottom-margins.bottom) - (adjustTop+margins.top));
+				} else {
+					actualChild.height = (adjustBottom-margins.bottom) - (adjustTop+margins.top);
+				}
+			}
+			
+			host.dispatchEvent( new Event("layoutComplete") );
+			
+			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
         {


Mime
View raw message