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;  
+        }
+    }
+        
+}

Reply via email to