You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by cd...@apache.org on 2016/11/05 15:22:11 UTC

[05/54] [abbrv] git commit: [flex-asjs] [refs/heads/feature-autobuild/example-maven-dirs] - try to copy HTML to Basic without losing history

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
new file mode 100644
index 0000000..b566354
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
@@ -0,0 +1,445 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadLayout;
+	import org.apache.flex.core.ILayoutChild;
+	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+    import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.utils.CSSUtils;
+	//import org.apache.flex.utils.dbg.DOMPathUtil;
+
+    /**
+     *  The BasicLayout class is a simple layout
+     *  bead.  It takes the set of children and lays them out
+     *  as specified by CSS properties like left, right, top
+     *  and bottom.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class BasicLayout implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function BasicLayout()
+		{
+		}
+		
+        // the strand/host container is also an ILayoutChild because
+        // can have its size dictated by the host's parent which is
+        // important to know for layout optimization
+        private var host:ILayoutChild;
+        		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function set strand(value:IStrand):void
+		{
+            host = value as ILayoutChild;
+		}
+	        
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+		 * @flexjsignorecoercion org.apache.flex.core.ILayoutHost
+		 * @flexjsignorecoercion org.apache.flex.core.UIBase
+         */
+		public function layout():Boolean
+		{
+            COMPILE::SWF
+            {
+                //trace(DOMPathUtil.getPath(host), event ? event.type : "fixed size");
+                var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as ILayoutHost;
+                var contentView:IParentIUIBase = layoutParent ? layoutParent.contentView : IParentIUIBase(host);
+                
+                var gotMargin:Boolean;
+                var marginLeft:Object;
+                var marginRight:Object;
+                var marginTop:Object;
+                var marginBottom:Object;
+                var margin:Object;
+                var ml:Number;
+                var mr:Number;
+                var mt:Number;
+                var mb:Number;
+                var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+                var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+                var w:Number = hostWidthSizedToContent ? 0 : contentView.width;
+                var h:Number = hostHeightSizedToContent ? 0 : contentView.height;
+                var n:int = contentView.numElements;
+                var maxWidth:Number = 0;
+                var maxHeight:Number = 0;
+                var childData:Array = [];
+                for (var i:int = 0; i < n; i++)
+                {
+                    var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+                    var left:Number = ValuesManager.valuesImpl.getValue(child, "left");
+                    var right:Number = ValuesManager.valuesImpl.getValue(child, "right");
+                    var top:Number = ValuesManager.valuesImpl.getValue(child, "top");
+                    var bottom:Number = ValuesManager.valuesImpl.getValue(child, "bottom");
+                    var ww:Number = w;
+                    var hh:Number = h;
+                    
+                    var ilc:ILayoutChild = child as ILayoutChild;
+                    if (!isNaN(left))
+                    {
+                        if (ilc)
+                            ilc.setX(left);
+                        else
+                            child.x = left;
+                        ww -= left;
+                    }
+                    if (!isNaN(top))
+                    {
+                        if (ilc)
+                            ilc.setY(top);
+                        else
+                            child.y = top;
+                        hh -= top;
+                    }
+                    if (ilc)
+                    {
+                        if (!hostWidthSizedToContent)
+                        {
+                            if (!isNaN(ilc.percentWidth))
+                                ilc.setWidth((ww - (isNaN(right) ? 0 : right)) * ilc.percentWidth / 100, true);
+                        }
+                        else
+                            childData[i] = { bottom: bottom, right: right, ww: ww, ilc: ilc, child: child };
+                    }
+                    if (!isNaN(right))
+                    {
+                        if (!hostWidthSizedToContent)
+                        {
+                            if (!isNaN(left))
+                            {
+                                if (ilc)
+                                    ilc.setWidth(ww - right, true);
+                                else
+                                    child.width = ww - right;
+                            }
+                            else
+                            {
+                                if (ilc)
+                                    ilc.setX( w - right - child.width);
+                                else
+                                    child.x = w - right - child.width;
+                            }
+                        }
+                        else
+                            childData[i] = { ww: ww, left: left, right: right, ilc: ilc, child: child };
+                    }
+                    
+                    if (isNaN(right) && isNaN(left))
+                    {
+                        margin = ValuesManager.valuesImpl.getValue(child, "margin");
+                        gotMargin = true;
+                        marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
+                        marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
+                        var horizontalCenter:Boolean = 
+                            (marginLeft == "auto" && marginRight == "auto") ||
+                            (margin is String && margin == "auto") ||
+                            (margin is Array && 
+                                ((margin.length < 4 && margin[1] == "auto") ||
+                                    (margin.length == 4 && margin[1] == "auto" && margin[3] == "auto")));
+                        if (!hostWidthSizedToContent)
+                        {
+                            if (!horizontalCenter)
+                            {
+                                mr = CSSUtils.getRightValue(marginRight, margin, ww);
+                                ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
+                                if (ilc)
+                                    ilc.setX(ml);
+                                else
+                                    child.x = ml;
+                                if (ilc && isNaN(ilc.percentWidth) && isNaN(ilc.explicitWidth))
+                                    child.width = ww - child.x - mr;
+                            }
+                            else
+                            {
+                                if (ilc)
+                                    ilc.setX((ww - child.width) / 2);
+                                else
+                                    child.x = (ww - child.width) / 2;    
+                            }
+                        }
+                        else 
+                        {
+                            if (!horizontalCenter)
+                            {
+                                mr = CSSUtils.getRightValue(marginRight, margin, ww);
+                                ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
+                                if (ilc)
+                                    ilc.setX(ml);
+                                else
+                                    child.x = ml;
+                                if (ilc && isNaN(ilc.percentWidth) && isNaN(ilc.explicitWidth))
+                                    childData[i] = { ww: ww, left: ml, right: mr, ilc: ilc, child: child };
+                            }
+                            else
+                            {
+                                childData[i] = { ww: ww, center: true, ilc: ilc, child: child };                            
+                            }
+                        }
+                        
+                    }
+                    if (isNaN(top) && isNaN(bottom))
+                    {
+                        if (!gotMargin)
+                            margin = ValuesManager.valuesImpl.getValue(child, "margin");
+                        marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
+                        marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+                        mt = CSSUtils.getTopValue(marginTop, margin, hh);
+                        mb = CSSUtils.getBottomValue(marginBottom, margin, hh);
+                        if (ilc)
+                            ilc.setY(mt);
+                        else
+                            child.y = mt;
+                        /* browsers don't use margin-bottom to stretch things vertically
+                        if (!hostHeightSizedToContent)
+                        {
+                        if (ilc && isNaN(ilc.percentHeight) && isNaN(ilc.explicitHeight))
+                        child.height = hh - child.y - mb;
+                        }
+                        else
+                        {
+                        if (!childData[i])
+                        childData[i] = { hh: hh, bottom: mb, ilc: ilc, child: child };
+                        else
+                        {
+                        childData[i].hh = hh;
+                        childData[i].bottom = mb;
+                        }
+                        }
+                        */
+                    }
+                    
+                    if (ilc)
+                    {
+                        if (!hostHeightSizedToContent)
+                        {
+                            if (!isNaN(ilc.percentHeight))
+                                ilc.setHeight((hh - (isNaN(bottom) ? 0 : bottom)) * ilc.percentHeight / 100, true);
+                        }
+                        else
+                        {
+                            if (!childData[i])
+                                childData[i] = { hh: hh, bottom: bottom, ilc: ilc, child: child };
+                            else
+                            {
+                                childData[i].hh = hh;
+                                childData[i].bottom = bottom;
+                            }
+                        }
+                    }
+                    if (!isNaN(bottom))
+                    {
+                        if (!hostHeightSizedToContent)
+                        {
+                            if (!isNaN(top))
+                            {
+                                if (ilc)
+                                    ilc.setHeight(hh - bottom, true);
+                                else
+                                    child.height = hh - bottom;
+                            }
+                            else
+                            {
+                                if (ilc)
+                                    ilc.setY(h - bottom - child.height);
+                                else
+                                    child.y = h - bottom - child.height;
+                            }
+                        }
+                        else
+                        {
+                            if (!childData[i])
+                                childData[i] = { top: top, bottom: bottom, hh:hh, ilc: ilc, child: child };
+                            else
+                            {
+                                childData[i].top = top;
+                                childData[i].bottom = bottom;
+                                childData[i].hh = hh;
+                            }
+                        }
+                    }
+                    if (!childData[i])
+                        child.dispatchEvent(new Event("sizeChanged"));
+                    maxWidth = Math.max(maxWidth, child.x + child.width);
+                    maxHeight = Math.max(maxHeight, child.y + child.height);
+                }
+                if (hostHeightSizedToContent || hostWidthSizedToContent)
+                {
+                    for (i = 0; i < n; i++)
+                    {
+                        var data:Object = childData[i];
+                        if (data)
+                        {
+                            if (hostWidthSizedToContent)
+                            {
+                                if (data.ilc && !isNaN(data.ilc.percentWidth))
+                                    data.ilc.setWidth((data.ww - (isNaN(data.right) ? 0 : data.right)) * data.ilc.percentWidth / 100, true);
+                                if (data.center)
+                                {
+                                    if (data.ilc)
+                                        data.ilc.setX((data.ww - data.child.width) / 2);
+                                    else
+                                        data.child.x = (data.ww - data.child.width) / 2; 
+                                }
+                                else if (!isNaN(data.right))
+                                {
+                                    if (!isNaN(data.left))
+                                    {
+                                        if (data.ilc)
+                                            data.ilc.setWidth(data.ww - data.right, true);
+                                        else
+                                            data.child.width = data.ww - data.right;
+                                    }
+                                    else
+                                    {
+                                        if (data.ilc)
+                                            data.ilc.setX(maxWidth - data.right - data.child.width);
+                                        else
+                                            data.child.x = maxWidth - data.right - data.child.width;
+                                    }
+                                }
+                            }
+                            if (hostHeightSizedToContent)
+                            {
+                                if (data.ilc && !isNaN(data.ilc.percentHeight))
+                                    data.ilc.setHeight((data.hh - (isNaN(data.bottom) ? 0 : data.bottom)) * data.ilc.percentHeight / 100, true);
+                                if (!isNaN(data.bottom))
+                                {
+                                    if (!isNaN(data.top))
+                                    {
+                                        if (data.ilc)
+                                            data.ilc.setHeight(data.hh - data.bottom, true);
+                                        else
+                                            data.child.height = data.hh - data.bottom;
+                                    }
+                                    else
+                                    {
+                                        if (data.ilc)
+                                            data.ilc.setY(maxHeight - data.bottom - data.child.height);
+                                        else
+                                            data.child.y = maxHeight - data.bottom - data.child.height;
+                                    }
+                                }
+                            }
+                            child.dispatchEvent(new Event("sizeChanged"));
+                        }
+                    }
+                }
+                
+                host.dispatchEvent( new Event("layoutComplete") );
+                
+                return true;
+                
+            }
+            COMPILE::JS
+            {
+                var i:int
+                var n:int;
+                var h:Number;
+                var w:Number;
+                
+                var viewBead:ILayoutHost = host.getBeadByType(ILayoutHost) as ILayoutHost;
+                var contentView:IParentIUIBase = viewBead.contentView;
+                w = contentView.width;
+                var hasWidth:Boolean = !host.isWidthSizedToContent();
+                h = contentView.height;
+                var hasHeight:Boolean = !host.isHeightSizedToContent();
+                var maxHeight:Number = 0;
+                var maxWidth:Number = 0;
+                n = contentView.numElements;
+                for (i = 0; i < n; i++) {
+                    var child:UIBase = contentView.getElementAt(i) as UIBase;
+                    child.setDisplayStyleForLayout('block');
+                    var left:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'left');
+                    var right:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'right');
+                    var top:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'top');
+                    var bottom:Number = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'bottom');
+                    var margin:String = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'margin');
+                    var marginLeft:String = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'margin-left');
+                    var marginRight:String = org.apache.flex.core.ValuesManager.valuesImpl.getValue(child, 'margin-right');
+                    var horizontalCenter:Boolean =
+                        (marginLeft == 'auto' && marginRight == 'auto') ||
+                        (typeof(margin) === 'string' && margin == 'auto') ||
+                        (margin && margin.hasOwnProperty('length') &&
+                            ((margin.length < 4 && margin[1] == 'auto') ||
+                                (margin.length == 4 && margin[1] == 'auto' && margin[3] == 'auto')));
+                    
+                    if (!isNaN(left)) {
+                        child.positioner.style.position = 'absolute';
+                        child.positioner.style.left = left.toString() + 'px';
+                    }
+                    if (!isNaN(top)) {
+                        child.positioner.style.position = 'absolute';
+                        child.positioner.style.top = top.toString() + 'px';
+                    }
+                    if (!isNaN(right)) {
+                        child.positioner.style.position = 'absolute';
+                        child.positioner.style.right = right.toString() + 'px';
+                    }
+                    if (!isNaN(bottom)) {
+                        child.positioner.style.position = 'absolute';
+                        child.positioner.style.bottom = bottom.toString() + 'px';
+                    }
+                    if (horizontalCenter)
+                    {
+                        child.positioner.style.position = 'absolute';
+                        child.positioner.style.left = ((w - child.width) / 2).toString() + 'px';
+                    }
+                    child.dispatchEvent('sizeChanged');
+                    maxWidth = Math.max(maxWidth, child.positioner.offsetLeft + child.positioner.offsetWidth);
+                    maxHeight = Math.max(maxHeight, child.positioner.offsetTop + child.positioner.offsetHeight);
+                }
+                // if there are children and maxHeight is ok, use it.
+                // maxHeight can be NaN if the child hasn't been rendered yet.
+                if (!hasWidth && n > 0 && !isNaN(maxWidth)) {
+                    contentView.width = maxWidth;
+                }
+                if (!hasHeight && n > 0 && !isNaN(maxHeight)) {
+                    contentView.height = maxHeight;
+                }
+                return true;
+            }
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
new file mode 100644
index 0000000..5bd1159
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
@@ -0,0 +1,143 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadLayout;
+	import org.apache.flex.core.IItemRendererClassFactory;
+	import org.apache.flex.core.IItemRendererParent;
+	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.ISelectableItemRenderer;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.List;
+	import org.apache.flex.html.beads.ButtonBarView;
+	
+	/**
+	 *  The ButtonBarLayout class bead sizes and positions the org.apache.flex.html.Button 
+	 *  elements that make up a org.apache.flex.html.ButtonBar. This bead arranges the Buttons 
+	 *  horizontally and makes them all the same width unless the buttonWidths property has been set in which case
+	 *  the values stored in that array are used.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class ButtonBarLayout implements IBeadLayout
+	{
+		/**
+		 *  constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function ButtonBarLayout()
+		{
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+		
+		private var _buttonWidths:Array = null;
+		
+		/**
+		 *  An array of widths (Number), one per button. These values supersede the
+		 *  default of equally-sized buttons.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get buttonWidths():Array
+		{
+			return _buttonWidths;
+		}
+		public function set buttonWidths(value:Array):void
+		{
+			_buttonWidths = value;
+		}
+		
+		/**
+		 * @copy org.apache.flex.core.IBeadLayout#layout
+		 */
+		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 n:int = contentView.numElements;
+			var realN:int = n;
+			
+			for (var j:int=0; j < n; j++)
+			{
+				var child:IUIBase = itemRendererParent.getElementAt(j) as IUIBase;
+				if (child == null || !child.visible) realN--;
+			}
+			
+			var xpos:Number = 0;
+			var useWidth:Number = contentView.width / realN;
+			var useHeight:Number = contentView.height;
+			
+			for (var i:int=0; i < n; i++)
+			{
+				var ir:ISelectableItemRenderer = itemRendererParent.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;
+				}
+				
+				if (buttonWidths) UIBase(ir).width = Number(buttonWidths[i]);
+				else if (!isNaN(useWidth) && useWidth > 0) {
+					UIBase(ir).width = useWidth;
+				}
+				xpos += UIBase(ir).width;
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent( new Event("layoutComplete") );
+			
+            return true;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
new file mode 100644
index 0000000..1d22956
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
@@ -0,0 +1,208 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadLayout;
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	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.supportClasses.DataGridColumnList;
+	import org.apache.flex.html.supportClasses.DataGridColumn;
+	
+	/**
+	 * DataGridLayout is a class that handles the size and positioning of the
+	 * elements of a DataGrid. This includes the ButtonBar used for the column
+	 * headers and the Lists that are the columns.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class DataGridLayout implements IDataGridLayout
+	{
+		/**
+		 *  constructor
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function DataGridLayout()
+		{
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			var host:UIBase = _strand as UIBase;
+			host.addEventListener("widthChanged", handleSizeChanges);
+			host.addEventListener("heightChanged", handleSizeChanges);
+			host.addEventListener("sizeChanged", handleSizeChanges);
+			host.addEventListener("layoutNeeded", handleSizeChanges);
+			
+			var view:DataGridView = host.view as DataGridView;
+			header = view.header;
+			listArea = view.listArea;
+			listArea.addBead(new BasicLayout());
+		}
+		
+		private var _header:UIBase;
+		
+		/**
+		 * The element that is the header for the DataGrid
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get header():IUIBase
+		{
+			return _header;
+		}
+		public function set header(value:IUIBase):void
+		{
+			_header = UIBase(value);
+		}
+		
+		private var _columns:Array;
+		
+		/**
+		 * The array of column elements.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get columns():Array
+		{
+			return _columns;
+		}
+		public function set columns(value:Array):void
+		{
+			_columns = value;
+		}
+		
+		private var _listArea:IUIBase;
+		
+		public function get listArea():IUIBase
+		{
+			return _listArea;
+		}
+		public function set listArea(value:IUIBase):void
+		{
+			_listArea = value;
+		}
+		
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         */
+		public function layout():Boolean
+		{						
+			if (columns == null || columns.length == 0) {
+				return false;
+			}
+			var host:UIBase = _strand as UIBase;
+			
+			var useWidth:Number = host.width;
+			var useHeight:Number = host.height;
+
+			if (host.height > 0) {
+				useHeight = host.height - _header.height;
+			}
+			
+			var thisisnothing:Number = -1234;
+
+			_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.width = colWidth;
+					else list.width = listWidth;
+
+					xpos += list.width;
+					
+					buttonWidths.push(list.width);
+				}
+			}
+			
+			var bar:ButtonBar = header as ButtonBar;
+			var barLayout:ButtonBarLayout = bar.getBeadByType(ButtonBarLayout) as ButtonBarLayout;
+			barLayout.buttonWidths = buttonWidths;
+			bar.dispatchEvent(new Event("layoutNeeded"));
+			
+			_header.x = 0;
+			_header.y = 0;
+			_header.width = useWidth;
+			_header.height = 25;
+			_header.dispatchEvent(new Event("layoutNeeded"));
+			
+			return true;
+		}
+		
+		/**
+		 * @private
+		 */
+		private function handleSizeChanges(event:Event):void
+		{
+			var view:DataGridView = UIBase(_strand).view as DataGridView;
+			if (view == null) return;
+			
+			columns = view.columnLists;
+			
+			layout();
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
new file mode 100644
index 0000000..7459a24
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
@@ -0,0 +1,224 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBead;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	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.supportClasses.DataGridColumn;
+	
+	/**
+	 * DataGridPercentageLayout is a class that handles the size and positioning of the
+	 * elements of a DataGrid. This includes the ButtonBar used for the column
+	 * headers and the Lists that are the columns. The columns are sized on their
+	 * percentage of the width of the DataGrid space.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class DataGridPercentageLayout implements IDataGridLayout
+	{
+		/**
+		 *  constructor
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function DataGridPercentageLayout()
+		{
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			var host:UIBase = value as UIBase;
+			
+			var view:DataGridView = host.view as DataGridView;
+			
+			header = view.header;
+			listArea = view.listArea;
+			
+			var anylayout:IBead = listArea.getBeadByType(IBeadLayout);
+			if (anylayout != null) {
+				listArea.removeBead(anylayout);
+			}
+			listArea.addBead(new HorizontalLayout());
+			
+			host.addEventListener("widthChanged", handleSizeChanges);
+			host.addEventListener("heightChanged", handleSizeChanges);
+			host.addEventListener("sizeChanged", handleSizeChanges);
+			host.addEventListener("layoutNeeded", handleSizeChanges);
+		}
+		
+		private var _header:UIBase;
+		
+		/**
+		 * The element that is the header for the DataGrid
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get header():IUIBase
+		{
+			return _header;
+		}
+		public function set header(value:IUIBase):void
+		{
+			_header = UIBase(value);
+		}
+		
+		private var _columns:Array;
+		
+		/**
+		 * The array of column elements.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get columns():Array
+		{
+			return _columns;
+		}
+		public function set columns(value:Array):void
+		{
+			_columns = value;
+		}
+		
+		private var _listArea:IUIBase;
+		
+		public function get listArea():IUIBase
+		{
+			return _listArea;
+		}
+		public function set listArea(value:IUIBase):void
+		{
+			_listArea = value;
+		}
+		
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         */
+		public function layout():Boolean
+		{			
+			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 columnHeight:Number = Math.floor(sh - header.height);
+			var columnWidth:Number  = Math.floor(sw / columns.length);
+			
+			var xpos:Number = 0;
+			var ypos:Number = 26;
+			
+			_header.x = 0;
+			_header.y = 0;
+			_header.width = sw;
+			_header.height = 25;
+			
+			if (sh > 0) {
+				sh = sh - _header.height;
+			}
+			
+			// 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);
+				}
+				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;
+			
+			_header.x = 0;
+			_header.y = 0;
+			_header.width = sw;
+			_header.height = 25;
+			_header.dispatchEvent(new Event("layoutNeeded"));
+			
+			return true;
+		}
+		
+		/**
+		 * @private
+		 */
+		private function handleSizeChanges(event:Event):void
+		{
+			var view:DataGridView = UIBase(_strand).view as DataGridView;
+			if (view == null) return;
+			
+			columns = view.columnLists;
+			
+			layout();
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
new file mode 100644
index 0000000..4198fea
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
@@ -0,0 +1,244 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadLayout;
+	import org.apache.flex.core.ILayoutChild;
+    import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewport;
+	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.core.UIBase;
+	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.html.supportClasses.Viewport;
+    import org.apache.flex.utils.CSSContainerUtils;
+
+    /**
+     *  The FlexibleFirstChildHorizontalLayout class is a simple layout
+     *  bead.  It takes the set of children and lays them out
+     *  horizontally in one row, separating them according to
+     *  CSS layout rules for margin and padding styles. But it
+     *  will size the first child to take up as much or little
+     *  room as possible.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class FlexibleFirstChildHorizontalLayout implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function FlexibleFirstChildHorizontalLayout()
+		{
+		}
+		
+        // the strand/host container is also an ILayoutChild because
+        // can have its size dictated by the host's parent which is
+        // important to know for layout optimization
+        private var host:ILayoutChild;
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function set strand(value:IStrand):void
+		{
+            host = value as ILayoutChild;
+		}
+		
+        private var _maxWidth:Number;
+        
+        /**
+         *  @copy org.apache.flex.core.IBead#maxWidth
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get maxWidth():Number
+        {
+            return _maxWidth;
+        }
+        
+        /**
+         *  @private 
+         */
+        public function set maxWidth(value:Number):void
+        {
+            _maxWidth = value;
+        }
+        
+        private var _maxHeight:Number;
+        
+        /**
+         *  @copy org.apache.flex.core.IBead#maxHeight
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get maxHeight():Number
+        {
+            return _maxHeight;
+        }
+        
+        /**
+         *  @private 
+         */
+        public function set maxHeight(value:Number):void
+        {
+            _maxHeight = value;
+        }
+        
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         */
+		public function layout():Boolean
+		{
+			var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as ILayoutHost;
+			var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
+            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+            var hostSizedToContent:Boolean = host.isHeightSizedToContent();
+			
+			var n:int = contentView.numElements;
+			var marginLeft:Object;
+			var marginRight:Object;
+			var marginTop:Object;
+			var marginBottom:Object;
+			var margin:Object;
+			maxHeight = 0;
+			var verticalMargins:Array = [];
+			
+            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 child:IUIBase = contentView.getElementAt(i) as IUIBase;
+				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;
+				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;
+				}
+				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 });
+			}
+			for (i = 0; i < n; i++)
+			{
+				var obj:Object = verticalMargins[0]
+				child = contentView.getElementAt(i) as IUIBase;
+				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;
+			}
+            if (hostSizedToContent)
+                ILayoutChild(contentView).setHeight(maxHeight + padding.top + padding.bottom, true);
+			
+            return true;
+		}
+
+    }
+        
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
new file mode 100644
index 0000000..38b97ec
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads.layouts
+{
+	import flash.display.DisplayObject;
+	
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IScrollBarModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.geom.Rectangle;
+	import org.apache.flex.html.beads.IScrollBarView;
+	import org.apache.flex.utils.CSSContainerUtils;
+
+    /**
+     *  The HScrollBarLayout class is a layout
+     *  bead that displays lays out the pieces of a
+     *  horizontal ScrollBar like the thumb, track
+     *  and arrow buttons.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class HScrollBarLayout implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function HScrollBarLayout()
+		{
+		}
+		
+		private var sbModel:IScrollBarModel;
+		private var sbView:IScrollBarView;
+		
+		private var _strand:IStrand;
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			sbView = _strand.getBeadByType(IScrollBarView) as IScrollBarView;
+		}
+			
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         */
+		public function layout():Boolean
+		{
+            if (!sbModel)
+                sbModel = _strand.getBeadByType(IScrollBarModel) as IScrollBarModel
+					
+			var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
+                    
+			var w:Number = DisplayObject(_strand).width + metrics.left + metrics.right;
+			var increment:DisplayObject = sbView.increment;
+			var decrement:DisplayObject = sbView.decrement;
+			var track:DisplayObject = sbView.track;
+			var thumb:DisplayObject = sbView.thumb;
+			
+			decrement.x = 0;
+			decrement.y = 0;
+			decrement.height = DisplayObject(_strand).height;
+			decrement.width = DisplayObject(_strand).height;
+			
+			increment.height = DisplayObject(_strand).height;
+			increment.width = DisplayObject(_strand).height;
+			increment.x = w - increment.width - 1;
+			increment.y = 0;
+
+			track.x = decrement.width;
+			track.y = 0;
+			track.height = DisplayObject(_strand).height;
+			track.width = increment.x - decrement.width;
+            thumb.width = sbModel.pageSize / (sbModel.maximum - sbModel.minimum) * track.width;
+			if (track.width > thumb.width)
+			{
+				thumb.visible = true;
+				thumb.x = (sbModel.value / (sbModel.maximum - sbModel.minimum - sbModel.pageSize) * (track.width - thumb.width)) + track.x;
+			}
+			else
+			{
+				thumb.visible = false;
+			}
+			
+            return true;
+		}
+						
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
new file mode 100644
index 0000000..225e0ac
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
@@ -0,0 +1,325 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadLayout;
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.ILayoutChild;
+	import org.apache.flex.core.ILayoutHost;
+	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::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+
+    /**
+     *  The HorizontalLayout class is a simple layout
+     *  bead.  It takes the set of children and lays them out
+     *  horizontally in one row, separating them according to
+     *  CSS layout rules for margin and vertical-align styles.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class HorizontalLayout implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function HorizontalLayout()
+		{
+		}
+		
+        // the strand/host container is also an ILayoutChild because
+        // can have its size dictated by the host's parent which is
+        // important to know for layout optimization
+		private var host:ILayoutChild;
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function set strand(value:IStrand):void
+		{
+			host = value as ILayoutChild;
+            COMPILE::JS
+            {
+                (value as IUIBase).element.style.display = 'block';
+            }
+		}
+	
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         * @flexjsignorecoercion org.apache.flex.core.ILayoutHost
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         */
+		public function layout():Boolean
+		{
+            COMPILE::SWF
+            {
+                //trace(DOMPathUtil.getPath(host), event ? event.type : "fixed size");
+                var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as ILayoutHost;
+                var contentView:IParentIUIBase = layoutParent.contentView;
+                var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+                
+                var n:int = contentView.numElements;
+                var hostSizedToContent:Boolean = host.isHeightSizedToContent();
+                var ilc:ILayoutChild;
+                var marginLeft:Object;
+                var marginRight:Object;
+                var marginTop:Object;
+                var marginBottom:Object;
+                var margin:Object;
+                var maxHeight:Number = 0;
+                // asking for contentView.height can result in infinite loop if host isn't sized already
+                var h:Number = hostSizedToContent ? 0 : contentView.height;
+                var w:Number = contentView.width;
+                var verticalMargins:Array = [];
+                
+                for (var i:int = 0; i < n; i++)
+                {
+                    var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+                    if (child == null || !child.visible) continue;
+                    var top:Number = ValuesManager.valuesImpl.getValue(child, "top");
+                    var bottom:Number = ValuesManager.valuesImpl.getValue(child, "bottom");
+                    margin = ValuesManager.valuesImpl.getValue(child, "margin");
+                    marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
+                    marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
+                    marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
+                    marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+                    var ml:Number = CSSUtils.getLeftValue(marginLeft, margin, w);
+                    var mr:Number = CSSUtils.getRightValue(marginRight, margin, w);
+                    var mt:Number = CSSUtils.getTopValue(marginTop, margin, h);
+                    var mb:Number = CSSUtils.getBottomValue(marginBottom, margin, h);
+                    
+                    ilc = child as ILayoutChild;
+                    var lastmr:Number;
+                    if (marginLeft == "auto")
+                        ml = 0;
+                    if (marginRight == "auto")
+                        mr = 0;
+                    var xx:Number;
+                    if (i == 0)
+                    {
+                        if (ilc)
+                            ilc.setX(ml + padding.left);
+                        else
+                            child.x = ml + padding.left;
+                    }
+                    else
+                    {
+                        if (ilc)
+                            ilc.setX(xx + ml + lastmr);
+                        else
+                            child.x = xx + ml + lastmr;
+                    }
+                    if (ilc)
+                    {
+                        if (!isNaN(ilc.percentWidth))
+                            ilc.setWidth(contentView.width * ilc.percentWidth / 100, !isNaN(ilc.percentHeight));
+                    }
+                    lastmr = mr;
+                    var marginObject:Object = {};
+                    verticalMargins[i] = marginObject;
+                    var valign:* = ValuesManager.valuesImpl.getValue(child, "vertical-align");
+                    marginObject.valign = valign;
+                    if (!hostSizedToContent)
+                    {
+                        // if host is sized by parent,
+                        // we can position and size children horizontally now
+                        setPositionAndHeight(child, top, mt, padding.top, bottom, mb, padding.bottom, h, valign);
+                        maxHeight = Math.max(maxHeight, mt + child.height + mb);
+                    }
+                    else
+                    {
+                        if (!isNaN(top))
+                        {
+                            mt = top;
+                            marginObject.top = mt;
+                        }
+                        if (!isNaN(bottom))
+                        {
+                            mb = bottom;
+                            marginObject.bottom = mb;
+                        }
+                        maxHeight = Math.max(maxHeight, mt + child.height + mb);
+                    }
+                    xx = child.x + child.width;
+                }
+                if (hostSizedToContent)
+                {
+                    ILayoutChild(contentView).setHeight(maxHeight, true);
+                    if (host.isWidthSizedToContent())
+                        ILayoutChild(contentView).setWidth(xx, true);
+                    for (i = 0; i < n; i++)
+                    {
+                        child = contentView.getElementAt(i) as IUIBase;
+                        if (child == null || !child.visible) continue;
+                        var obj:Object = verticalMargins[i];
+                        setPositionAndHeight(child, obj.top, obj.marginTop, padding.top,
+                            obj.bottom, obj.marginBottom, padding.bottom, maxHeight, obj.valign);
+                    }
+                }
+                
+                // Only return true if the contentView needs to be larger; that new
+                // size is stored in the model.
+                var sizeChanged:Boolean = true;
+                
+                host.dispatchEvent( new Event("layoutComplete") );
+                
+                return sizeChanged;
+                
+            }
+            COMPILE::JS
+            {
+                var children:Array;
+                var i:int;
+                var n:int;
+                
+                var viewBead:ILayoutHost = host.getBeadByType(ILayoutHost) as ILayoutHost;
+                var contentView:IParentIUIBase = viewBead.contentView;
+                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;
+                    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
+                }
+                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/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
new file mode 100644
index 0000000..2f22ec4
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadLayout;
+	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.ButtonBar;
+	import org.apache.flex.html.supportClasses.DataGridColumn;
+	
+	/**
+	 * DataGridLayout is a class that handles the size and positioning of the
+	 * elements of a DataGrid. This includes the ButtonBar used for the column
+	 * headers and the Lists that are the columns.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public interface IDataGridLayout extends IBeadLayout
+	{
+		function get header():IUIBase;
+		function set header(value:IUIBase):void;
+		
+		function get columns():Array;
+		function set columns(value:Array):void;
+		
+		function get listArea():IUIBase;
+		function set listArea(value:IUIBase):void;
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/LayoutChangeNotifier.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/LayoutChangeNotifier.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/LayoutChangeNotifier.as
new file mode 100644
index 0000000..00d328b
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/LayoutChangeNotifier.as
@@ -0,0 +1,103 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBead;
+    import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	
+	/**
+	 *  The LayoutChangeNotifier notifies layouts when a property
+     *  it is watching changes.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class LayoutChangeNotifier implements IBead
+	{
+		/**
+		 *  constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function LayoutChangeNotifier()
+		{
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+			
+        private var _value:* = undefined;
+        
+        /**
+         *  The value of the property being watched.  This is usually
+         *  a data binding expression.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function set initialValue(value:Object):void
+        {
+            _value = value;
+        }
+        
+		/**
+		 *  The value of the property being watched.  This is usually
+         *  a data binding expression.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set watchedProperty(value:Object):void
+		{
+			if (_value !== value)
+            {
+                _value = value;
+                if (_strand is IBeadView)
+                    IBeadView(_strand).host.dispatchEvent(new Event("layoutNeeded"));
+                else
+                    IEventDispatcher(_strand).dispatchEvent(new Event("layoutNeeded"));
+            }
+		}
+		
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
new file mode 100644
index 0000000..c052442
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
@@ -0,0 +1,332 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadLayout;
+	import org.apache.flex.core.IDocument;
+	import org.apache.flex.core.ILayoutChild;
+	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.geom.Rectangle;
+	import org.apache.flex.utils.CSSUtils;
+    import org.apache.flex.utils.CSSContainerUtils;
+
+    /**
+     *  The OneFlexibleChildHorizontalLayout class is a simple layout
+     *  bead.  It takes the set of children and lays them out
+     *  horizontally in one row, separating them according to
+     *  CSS layout rules for margin and padding styles. But it
+     *  will size the one child to take up as much or little
+     *  room as possible.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class OneFlexibleChildHorizontalLayout implements IBeadLayout, IDocument
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function OneFlexibleChildHorizontalLayout()
+		{
+		}
+		
+        
+        /**
+         *  The id of the flexible child
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public var flexibleChild:String;
+        
+        private var actualChild:ILayoutChild;
+        
+        // the strand/host container is also an ILayoutChild because
+        // can have its size dictated by the host's parent which is
+        // important to know for layout optimization
+        private var host:ILayoutChild;
+		
+        /**
+         *  @private
+         *  The document.
+         */
+        private var document:Object;
+        
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function set strand(value:IStrand):void
+		{
+            host = value as ILayoutChild;
+		}
+	
+        private var _maxWidth:Number;
+        
+        /**
+         *  @copy org.apache.flex.core.IBead#maxWidth
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get maxWidth():Number
+        {
+            return _maxWidth;
+        }
+        
+        /**
+         *  @private 
+         */
+        public function set maxWidth(value:Number):void
+        {
+            _maxWidth = value;
+        }
+        
+        private var _maxHeight:Number;
+        
+        /**
+         *  @copy org.apache.flex.core.IBead#maxHeight
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get maxHeight():Number
+        {
+            return _maxHeight;
+        }
+        
+        /**
+         *  @private 
+         */
+        public function set maxHeight(value:Number):void
+        {
+            _maxHeight = value;
+        }
+        
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         */
+		public function layout():Boolean
+		{
+            var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as ILayoutHost;
+            var contentView:IParentIUIBase = layoutParent ? layoutParent.contentView : IParentIUIBase(host);
+            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+            actualChild = document[flexibleChild];
+
+            var ilc:ILayoutChild;
+			var n:int = contentView.numElements;
+			var marginLeft:Object;
+			var marginRight:Object;
+			var marginTop:Object;
+			var marginBottom:Object;
+			var margin:Object;
+			maxHeight = 0;
+			var verticalMargins:Array = new Array(n);
+			
+            var ww:Number = contentView.width - padding.right;
+            var hh:Number = contentView.height;
+            var xx:int = padding.left;
+            var flexChildIndex:int;
+            var ml:Number;
+            var mr:Number;
+            var mt:Number;
+            var mb:Number;
+            var lastmr:Number;
+            var lastml:Number;
+            var valign:Object;
+            var hostSizedToContent:Boolean = host.isHeightSizedToContent();
+            
+            for (var i:int = 0; i < n; i++)
+            {
+                var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+                if (child == actualChild)
+                {
+                    flexChildIndex = i;
+                    break;
+                }
+                margin = ValuesManager.valuesImpl.getValue(child, "margin");
+                marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
+                marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
+                marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
+                marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+                mt = CSSUtils.getTopValue(marginTop, margin, hh);
+                mb = CSSUtils.getBottomValue(marginBottom, margin, hh);
+                mr = CSSUtils.getRightValue(marginRight, margin, ww);
+                ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
+                child.y = mt + padding.top;
+                if (child is ILayoutChild)
+                {
+                    ilc = child as ILayoutChild;
+                    if (!isNaN(ilc.percentHeight))
+                        ilc.setHeight(contentView.height * ilc.percentHeight / 100, true);
+                }
+                maxHeight = Math.max(maxHeight, mt + child.height + mb);
+                child.x = xx + ml;
+                xx += child.width + ml + mr;
+                lastmr = mr;
+                valign = ValuesManager.valuesImpl.getValue(child, "vertical-align");
+                verticalMargins[i] = { marginTop: mt, marginBottom: mb, valign: valign };
+            }
+
+            if (n > 0 && n > flexChildIndex)
+            {
+                for (i = n - 1; i > flexChildIndex; i--)
+    			{
+    				child = contentView.getElementAt(i) as IUIBase;
+    				margin = ValuesManager.valuesImpl.getValue(child, "margin");
+					marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
+					marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
+					marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
+					marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+    				mt = CSSUtils.getTopValue(marginTop, margin, hh);
+    				mb = CSSUtils.getTopValue(marginBottom, margin, hh);
+                    mr = CSSUtils.getRightValue(marginRight, margin, ww);
+                    ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
+                    child.y = mt + padding.top;
+                    if (child is ILayoutChild)
+                    {
+                        ilc = child as ILayoutChild;
+                        if (!isNaN(ilc.percentHeight))
+                            ilc.setHeight(contentView.height * ilc.percentHeight / 100, true);
+                    }
+                    maxHeight = Math.max(maxHeight, mt + child.height + mb);
+                    child.x = ww - child.width - mr;
+    				ww -= child.width + ml + mr;
+    				lastml = ml;
+                    valign = ValuesManager.valuesImpl.getValue(child, "vertical-align");
+                    verticalMargins[i] = { marginTop: mt, marginBottom: mb, valign: valign };
+    			}
+            
+                child = contentView.getElementAt(flexChildIndex) as IUIBase;
+                margin = ValuesManager.valuesImpl.getValue(child, "margin");
+                marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
+                marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
+                marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
+                marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+                mt = CSSUtils.getTopValue(marginTop, margin, hh);
+                mb = CSSUtils.getTopValue(marginBottom, margin, hh);
+                mr = CSSUtils.getRightValue(marginRight, margin, ww);
+                ml = CSSUtils.getLeftValue(marginLeft, margin, ww);
+                if (child is ILayoutChild)
+                {
+                    ilc = child as ILayoutChild;
+                    if (!isNaN(ilc.percentHeight))
+                        ilc.setHeight(contentView.height * ilc.percentHeight / 100, true);
+                }
+                child.x = xx + ml;
+                child.width = ww - child.x;
+                maxHeight = Math.max(maxHeight, mt + child.height + mb);
+                valign = ValuesManager.valuesImpl.getValue(child, "vertical-align");
+                verticalMargins[flexChildIndex] = { marginTop: mt, marginBottom: mb, valign: valign };
+            }
+            if (hostSizedToContent)
+                ILayoutChild(contentView).setHeight(maxHeight + padding.top + padding.bottom, true);
+            
+            for (i = 0; i < n; i++)
+			{
+				var obj:Object = verticalMargins[i]
+				child = contentView.getElementAt(i) as IUIBase;
+                setPositionAndHeight(child, obj.top, obj.marginTop, padding.top,
+                    obj.bottom, obj.marginBottom, padding.bottom, maxHeight, obj.valign);
+			}
+            return true;
+		}
+
+        private function setPositionAndHeight(child:IUIBase, top:Number, mt:Number, pt:Number,
+                                              bottom:Number, mb:Number, pb:Number, h:Number, valign:String):void
+        {
+            var heightSet:Boolean = false; // if we've set the height in a way that gens a change event
+            var ySet:Boolean = false; // if we've set the y yet.
+            
+            var hh:Number = h;
+            var ilc:ILayoutChild = child as ILayoutChild;
+            if (!isNaN(top))
+            {
+                child.y = top + mt;
+                ySet = true;
+                hh -= top + mt;
+            }
+            else 
+            {
+                hh -= mt;
+            }
+            if (!isNaN(bottom))
+            {
+                if (!isNaN(top))
+                {
+                    if (ilc)
+                        ilc.setHeight(hh - bottom - mb, true);
+                    else 
+                    {
+                        child.height = hh - bottom - mb;
+                        heightSet = true;
+                    }
+                }
+                else
+                {
+                    child.y = h - bottom - mb - child.height - 1; // some browsers don't like going to the edge
+                    ySet = true;
+                }
+            }
+            if (ilc)
+            {
+                if (!isNaN(ilc.percentHeight))
+                    ilc.setHeight(h * ilc.percentHeight / 100, true);
+            }
+            if (valign == "middle")
+                child.y = (h - child.height) / 2;
+            else if (valign == "bottom")
+                child.y = h - child.height - mb;
+            else
+                child.y = mt + pt;
+            if (!heightSet)
+                child.dispatchEvent(new Event("sizeChanged"));
+        }
+        
+        public function setDocument(document:Object, id:String = null):void
+        {
+            this.document = document;	
+        }
+    }
+        
+}