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:33 UTC

[34/50] [abbrv] git commit: [flex-asjs] [refs/heads/develop] - HorizontalLayoutWithPaddingAndGap, VerticalLayoutWithPaddingAndGap: versions of HorizontalLayout and VerticalLayout that have properties for padding and gap

HorizontalLayoutWithPaddingAndGap, VerticalLayoutWithPaddingAndGap: versions of HorizontalLayout and VerticalLayout that have properties for padding and gap


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/df6f560a
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/df6f560a
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/df6f560a

Branch: refs/heads/develop
Commit: df6f560aa381878b94d5862f720b4bf66929f8eb
Parents: 16c4fea
Author: Josh Tynjala <jo...@apache.org>
Authored: Thu Apr 27 12:20:18 2017 -0700
Committer: Josh Tynjala <jo...@apache.org>
Committed: Thu Apr 27 12:20:18 2017 -0700

----------------------------------------------------------------------
 .../Basic/src/main/flex/BasicClasses.as         |   2 +
 .../HorizontalLayoutWithPaddingAndGap.as        | 348 +++++++++++++++++++
 .../layouts/VerticalLayoutWithPaddingAndGap.as  | 329 ++++++++++++++++++
 .../Basic/src/main/resources/basic-manifest.xml |   2 +
 .../src/main/resources/express-manifest.xml     |   2 +
 5 files changed, 683 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/df6f560a/frameworks/projects/Basic/src/main/flex/BasicClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/BasicClasses.as b/frameworks/projects/Basic/src/main/flex/BasicClasses.as
index 70665e1..4436e43 100644
--- a/frameworks/projects/Basic/src/main/flex/BasicClasses.as
+++ b/frameworks/projects/Basic/src/main/flex/BasicClasses.as
@@ -140,8 +140,10 @@ internal class BasicClasses
 	}
 	import org.apache.flex.html.beads.layouts.ButtonBarLayout; ButtonBarLayout;
     import org.apache.flex.html.beads.layouts.VerticalLayout; VerticalLayout;
+    import org.apache.flex.html.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
 	import org.apache.flex.html.beads.layouts.VerticalFlexLayout; VerticalFlexLayout;
 	import org.apache.flex.html.beads.layouts.HorizontalLayout; HorizontalLayout;
+    import org.apache.flex.html.beads.layouts.HorizontalLayoutWithPaddingAndGap; HorizontalLayoutWithPaddingAndGap;
 	import org.apache.flex.html.beads.layouts.HorizontalFlexLayout; HorizontalFlexLayout;
     import org.apache.flex.html.beads.layouts.BasicLayout; BasicLayout;
 	import org.apache.flex.html.beads.layouts.OneFlexibleChildHorizontalLayout; OneFlexibleChildHorizontalLayout;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/df6f560a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayoutWithPaddingAndGap.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
new file mode 100644
index 0000000..7aec7f3
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
@@ -0,0 +1,348 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads.layouts
+{
+	import 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.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.ValuesManager;
+	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;
+	COMPILE::SWF {
+			import org.apache.flex.core.UIBase;
+	}
+    COMPILE::JS {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+
+    /**
+	 *  The HorizontalLayoutWithPaddingAndGap class is a simple layout
+	 *  bead similar to HorizontalLayout, but it adds support for
+	 *  padding and gap values.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function HorizontalLayoutWithPaddingAndGap()
+		{
+			super();
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingTop:Number = 0;
+
+		/**
+		 *  The top padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingTop():Number
+		{
+			return _paddingTop;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingTop(value:Number):void
+		{
+			_paddingTop = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingRight:Number = 0;
+
+		/**
+		 *  The right padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingRight():Number
+		{
+			return _paddingRight;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingRight(value:Number):void
+		{
+			_paddingRight = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingBottom:Number = 0;
+
+		/**
+		 *  The top padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingBottom():Number
+		{
+			return _paddingBottom;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingBottom(value:Number):void
+		{
+			_paddingBottom = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingLeft:Number = 0;
+
+		/**
+		 *  The left padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingLeft():Number
+		{
+			return _paddingLeft;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingLeft(value:Number):void
+		{
+			_paddingLeft = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _gap:Number = 0;
+
+		/**
+		 *  The gap between items.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get gap():Number
+		{
+			return _gap;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set gap(value:Number):void
+		{
+			_gap = value;
+		}
+
+        /**
+         *  @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 org.apache.flex.core.IUIBase
+         */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+            COMPILE::JS
+            {
+				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
+         */
+		override public function layout():Boolean
+		{
+            COMPILE::SWF
+            {
+				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 = new Rectangle(_paddingLeft, _paddingTop, _paddingRight - _paddingLeft, _paddingBottom - _paddingTop);
+				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);
+
+					ilc = child as ILayoutChild;
+
+					var childYpos:Number = ypos; // 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 + _gap;
+				}
+
+				return true;
+
+            }
+            COMPILE::JS
+            {
+                var children:Array;
+                var i:int;
+                var n:int;
+				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+
+				contentView.element.style["white-space"] = "nowrap";
+
+                children = contentView.internalChildren();
+
+
+                n = children.length;
+                for (i = 0; i < n; i++)
+                {
+                    var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+					if (child == null) continue;
+					child.style.marginTop = _paddingTop + 'px';
+					if(i === (n - 1))
+					{
+						child.style.marginRight = _paddingRight + 'px';
+					}
+					else
+					{
+						child.style.marginRight = '0px';
+					}
+					child.style.marginBottom = _paddingBottom + 'px';
+					if(i == 0)
+					{
+						child.style.marginLeft = _paddingLeft + 'px';
+					}
+					else
+					{
+						child.style.marginLeft = _gap + 'px';
+					}
+					child.flexjs_wrapper.setDisplayStyleForLayout('inline-block');
+					if (child.style.display !== 'none')
+					{
+						child.style.display = 'inline-block';
+					}
+				}
+
+                return true;
+            }
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/df6f560a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayoutWithPaddingAndGap.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayoutWithPaddingAndGap.as
new file mode 100644
index 0000000..9a137b4
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -0,0 +1,329 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads.layouts
+{
+	import 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.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.ValuesManager;
+	COMPILE::JS
+	{
+		import org.apache.flex.core.WrappedHTMLElement;
+	}
+	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;
+
+	/**
+	 *  The VerticalLayoutWithPaddingAndGap class is a simple layout
+	 *  bead similar to VerticalLayout, but it adds support for
+	 *  padding and gap values.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+	{
+		/**
+		 *  Constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function VerticalLayoutWithPaddingAndGap()
+		{
+			super();
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingTop:Number = 0;
+
+		/**
+		 *  The top padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingTop():Number
+		{
+			return _paddingTop;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingTop(value:Number):void
+		{
+			_paddingTop = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingRight:Number = 0;
+
+		/**
+		 *  The right padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingRight():Number
+		{
+			return _paddingRight;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingRight(value:Number):void
+		{
+			_paddingRight = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingBottom:Number = 0;
+
+		/**
+		 *  The top padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingBottom():Number
+		{
+			return _paddingBottom;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingBottom(value:Number):void
+		{
+			_paddingBottom = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingLeft:Number = 0;
+
+		/**
+		 *  The left padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get paddingLeft():Number
+		{
+			return _paddingLeft;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingLeft(value:Number):void
+		{
+			_paddingLeft = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _gap:Number = 0;
+
+		/**
+		 *  The gap between items.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get gap():Number
+		{
+			return _gap;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set gap(value:Number):void
+		{
+			_gap = value;
+		}
+
+		/**
+		 *  Layout children vertically
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 *  @flexjsignorecoercion org.apache.flex.core.ILayoutHost
+		 */
+		override public function layout():Boolean
+		{
+			COMPILE::SWF
+			{
+				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 = new Rectangle(_paddingLeft, _paddingTop, _paddingRight - _paddingLeft, _paddingBottom - _paddingTop);
+				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);
+
+					ilc = child as ILayoutChild;
+
+					var childXpos:Number = xpos; // default x position
+
+					if (!hostWidthSizedToContent) {
+						var childWidth:Number = child.width;
+						if (ilc != null && !isNaN(ilc.percentWidth)) {
+							childWidth = hostWidth * ilc.percentWidth/100.0;
+							ilc.setWidth(childWidth);
+						}
+						// the following code center-aligns the child, but since HTML does not
+						// do this normally, this code is commented. (Use VerticalFlexLayout for
+						// horizontally centered elements in a vertical column).
+						//					childXpos = hostWidth/2 - (childWidth + ml + mr)/2;
+					}
+
+					if (ilc) {
+						ilc.setX(childXpos);
+						ilc.setY(ypos);
+
+						if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
+							var newHeight:Number = hostHeight * ilc.percentHeight / 100;
+							ilc.setHeight(newHeight);
+						}
+
+					} else {
+						child.x = childXpos;
+						child.y = ypos;
+					}
+
+					ypos += child.height + _gap;
+				}
+
+				return true;
+			}
+			COMPILE::JS
+			{
+				var children:Array;
+				var i:int;
+				var n:int;
+				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				
+				children = contentView.internalChildren();
+				n = children.length;
+				for (i = 0; i < n; i++)
+				{
+					var child:WrappedHTMLElement = children[i];
+					if(i == 0)
+					{
+						child.style.marginTop = _paddingTop + 'px';
+					}
+					else
+					{
+						child.style.marginTop = _gap + 'px';
+					}
+					child.style.marginRight = _paddingRight + 'px';
+					if(i === (n - 1))
+					{
+						child.style.marginBottom = _paddingBottom + 'px';
+					}
+					else
+					{
+						child.style.marginBottom = '0px';
+					}
+					child.style.marginLeft = _paddingLeft + 'px';
+					child.flexjs_wrapper.setDisplayStyleForLayout('block');
+					if (child.style.display === 'none')
+					{
+						child.flexjs_wrapper.setDisplayStyleForLayout('block');
+					}
+					else
+					{
+						// block elements don't measure width correctly so set to inline for a second
+						child.style.display = 'inline-block';
+						child.style.display = 'block';
+					}
+					child.flexjs_wrapper.dispatchEvent('sizeChanged');
+				}
+
+				return true;
+			}
+		}
+
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/df6f560a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
index c9b49b8..204d10c 100644
--- a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
@@ -67,8 +67,10 @@
     <component id="Tree" class="org.apache.flex.html.Tree"/>
     <component id="BasicLayout" class="org.apache.flex.html.beads.layouts.BasicLayout"/>
     <component id="VerticalLayout" class="org.apache.flex.html.beads.layouts.VerticalLayout"/>
+    <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.flex.html.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
     <component id="VerticalFlexLayout" class="org.apache.flex.html.beads.layouts.VerticalFlexLayout"/>
     <component id="HorizontalLayout" class="org.apache.flex.html.beads.layouts.HorizontalLayout"/>
+    <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.flex.html.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
     <component id="HorizontalFlexLayout" class="org.apache.flex.html.beads.layouts.HorizontalFlexLayout"/>
     <component id="HorizontalFlowLayout" class="org.apache.flex.html.beads.layouts.HorizontalFlowLayout" />
     <component id="TileLayout" class="org.apache.flex.html.beads.layouts.TileLayout"/>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/df6f560a/frameworks/projects/Express/src/main/resources/express-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/Express/src/main/resources/express-manifest.xml b/frameworks/projects/Express/src/main/resources/express-manifest.xml
index 9ea226e..63551e2 100644
--- a/frameworks/projects/Express/src/main/resources/express-manifest.xml
+++ b/frameworks/projects/Express/src/main/resources/express-manifest.xml
@@ -61,7 +61,9 @@
     <component id="ToolTip" class="org.apache.flex.html.ToolTip"  lookupOnly="true" />
     <component id="BasicLayout" class="org.apache.flex.html.beads.layouts.BasicLayout"  lookupOnly="true" />
     <component id="VerticalLayout" class="org.apache.flex.html.beads.layouts.VerticalLayout"  lookupOnly="true" />
+    <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.flex.html.beads.layouts.VerticalLayoutWithPaddingAndGap"  lookupOnly="true" />
     <component id="HorizontalLayout" class="org.apache.flex.html.beads.layouts.HorizontalLayout"  lookupOnly="true" />
+    <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.flex.html.beads.layouts.HorizontalLayoutWithPaddingAndGap"  lookupOnly="true" />
     <component id="TileLayout" class="org.apache.flex.html.beads.layouts.TileLayout"  lookupOnly="true" />
     <component id="ListView" class="org.apache.flex.html.beads.ListView" lookupOnly="true" />
     <component id="MultilineTextFieldView" class="org.apache.flex.html.beads.MultilineTextFieldView" lookupOnly="true" />