http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayout.as
new file mode 100644
index 0000000..13c8c8b
--- /dev/null
+++ 
b/frameworks/projects/HTML/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::AS3
+            {
+                //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::AS3
+        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/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/LayoutChangeNotifier.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/LayoutChangeNotifier.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/LayoutChangeNotifier.as
new file mode 100644
index 0000000..00d328b
--- /dev/null
+++ 
b/frameworks/projects/HTML/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/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildHorizontalLayout.as
new file mode 100644
index 0000000..309ef3b
--- /dev/null
+++ 
b/frameworks/projects/HTML/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 == "center")
+                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;  
+        }
+    }
+        
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
new file mode 100644
index 0000000..77af305
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/OneFlexibleChildVerticalLayout.as
@@ -0,0 +1,459 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.CSSContainerUtils;
+
+    /**
+     *  The OneFlexibleChildVerticalLayout class is a simple layout
+     *  bead.  It takes the set of children and lays them out
+     *  vertically in one column, 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 OneFlexibleChildVerticalLayout implements IBeadLayout, 
IDocument
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function OneFlexibleChildVerticalLayout()
+               {
+               }
+               
+        
+        /**
+         *  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;
+                       maxWidth = 0;
+            
+            var w:Number = contentView.width;                  
+            var hh:Number = contentView.height - padding.bottom;
+            var yy:int = padding.top;
+            var flexChildIndex:int;
+            var ml:Number;
+            var mr:Number;
+            var mt:Number;
+            var mb:Number;
+            var lastmb:Number;
+            var lastmt:Number;
+            var halign:Object;
+            var left:Number;
+            var right:Number;
+            
+            for (var i:int = 0; i < n; i++)
+            {
+                var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+                ilc = child as ILayoutChild;
+                left = ValuesManager.valuesImpl.getValue(child, "left");
+                right = ValuesManager.valuesImpl.getValue(child, "right");
+                if (child == actualChild)
+                {
+                    flexChildIndex = i;
+                    break;
+                }
+                margin = ValuesManager.valuesImpl.getValue(child, "margin");
+                if (margin is Array)
+                {
+                    if (margin.length == 1)
+                        marginLeft = marginTop = marginRight = marginBottom = 
margin[0];
+                    else if (margin.length <= 3)
+                    {
+                        marginLeft = marginRight = margin[1];
+                        marginTop = marginBottom = margin[0];
+                    }
+                    else if (margin.length == 4)
+                    {
+                        marginLeft = margin[3];
+                        marginBottom = margin[2];
+                        marginRight = margin[1];
+                        marginTop = margin[0];                                 
+                    }
+                }
+                else if (margin == null)
+                {
+                    marginLeft = ValuesManager.valuesImpl.getValue(child, 
"margin-left");
+                    marginTop = ValuesManager.valuesImpl.getValue(child, 
"margin-top");
+                    marginRight = ValuesManager.valuesImpl.getValue(child, 
"margin-right");
+                    marginBottom = ValuesManager.valuesImpl.getValue(child, 
"margin-bottom");
+                }
+                else
+                {
+                    marginLeft = marginTop = marginBottom = marginRight = 
margin;
+                }
+                mt = Number(marginTop);
+                if (isNaN(mt))
+                    mt = 0;
+                mb = Number(marginBottom);
+                if (isNaN(mb))
+                    mb = 0;
+                if (ilc)
+                {
+                    if (!isNaN(ilc.percentHeight))
+                        ilc.setHeight(contentView.height * ilc.percentHeight / 
100, !isNaN(ilc.percentWidth));
+                }
+                if (marginLeft == "auto")
+                    ml = 0;
+                else
+                {
+                    ml = Number(marginLeft);
+                    if (isNaN(ml))
+                        ml = 0;
+                }
+                if (marginRight == "auto")
+                    mr = 0;
+                else
+                {
+                    mr = Number(marginRight);
+                    if (isNaN(mr))
+                        mr = 0;
+                }
+                if (child is ILayoutChild)
+                {
+                    ilc = child as ILayoutChild;
+                    if (!isNaN(ilc.percentWidth))
+                        ilc.setWidth(contentView.width * ilc.percentWidth / 
100, !isNaN(ilc.percentHeight));
+                }
+                maxWidth = Math.max(maxWidth, ml + child.width + mr);
+                setPositionAndWidth(child, left, ml, padding.left, right, mr, 
padding.right, w);
+                child.y = yy + mt;
+                yy += child.height + mt + mb;
+                lastmb = mb;
+            }
+
+            if (n > 0 && n > flexChildIndex)
+            {
+                for (i = n - 1; i > flexChildIndex; i--)
+                       {
+                               child = contentView.getElementAt(i) as IUIBase;
+                    ilc = child as ILayoutChild;
+                    left = ValuesManager.valuesImpl.getValue(child, "left");
+                    right = ValuesManager.valuesImpl.getValue(child, "right");
+                               margin = 
ValuesManager.valuesImpl.getValue(child, "margin");
+                               if (margin is Array)
+                               {
+                                       if (margin.length == 1)
+                                               marginLeft = marginTop = 
marginRight = marginBottom = margin[0];
+                                       else if (margin.length <= 3)
+                                       {
+                                               marginLeft = marginRight = 
margin[1];
+                                               marginTop = marginBottom = 
margin[0];
+                                       }
+                                       else if (margin.length == 4)
+                                       {
+                                               marginLeft = margin[3];
+                                               marginBottom = margin[2];
+                                               marginRight = margin[1];
+                                               marginTop = margin[0];          
                        
+                                       }
+                               }
+                               else if (margin == null)
+                               {
+                                       marginLeft = 
ValuesManager.valuesImpl.getValue(child, "margin-left");
+                                       marginTop = 
ValuesManager.valuesImpl.getValue(child, "margin-top");
+                                       marginRight = 
ValuesManager.valuesImpl.getValue(child, "margin-right");
+                                       marginBottom = 
ValuesManager.valuesImpl.getValue(child, "margin-bottom");
+                               }
+                               else
+                               {
+                                       marginLeft = marginTop = marginBottom = 
marginRight = margin;
+                               }
+                               mt = Number(marginTop);
+                               if (isNaN(mt))
+                                       mt = 0;
+                               mb = Number(marginBottom);
+                               if (isNaN(mb))
+                                       mb = 0;
+                    if (ilc)
+                    {
+                        if (!isNaN(ilc.percentHeight))
+                            ilc.setHeight(contentView.height * 
ilc.percentHeight / 100, !isNaN(ilc.percentWidth));
+                    }
+                               if (marginLeft == "auto")
+                                       ml = 0;
+                               else
+                               {
+                                       ml = Number(marginLeft);
+                                       if (isNaN(ml))
+                                               ml = 0;
+                               }
+                               if (marginRight == "auto")
+                                       mr = 0;
+                               else
+                               {
+                                       mr = Number(marginRight);
+                                       if (isNaN(mr))
+                                               mr = 0;
+                               }
+                    if (child is ILayoutChild)
+                    {
+                        ilc = child as ILayoutChild;
+                        if (!isNaN(ilc.percentWidth))
+                            ilc.setWidth(contentView.width * ilc.percentWidth 
/ 100, !isNaN(ilc.percentHeight));
+                    }
+                    setPositionAndWidth(child, left, ml, padding.left, right, 
mr, padding.right, w);
+                    maxWidth = Math.max(maxWidth, ml + child.width + mr);
+                    child.y = hh - child.height - mb;
+                               hh -= child.height + mt + mb;
+                               lastmt = mt;
+                       }
+            } 
+            
+            child = contentView.getElementAt(flexChildIndex) as IUIBase;
+            ilc = child as ILayoutChild;
+            left = ValuesManager.valuesImpl.getValue(child, "left");
+            right = ValuesManager.valuesImpl.getValue(child, "right");
+            margin = ValuesManager.valuesImpl.getValue(child, "margin");
+            if (margin is Array)
+            {
+                if (margin.length == 1)
+                    marginLeft = marginTop = marginRight = marginBottom = 
margin[0];
+                else if (margin.length <= 3)
+                {
+                    marginLeft = marginRight = margin[1];
+                    marginTop = marginBottom = margin[0];
+                }
+                else if (margin.length == 4)
+                {
+                    marginLeft = margin[3];
+                    marginBottom = margin[2];
+                    marginRight = margin[1];
+                    marginTop = margin[0];                                     
+                }
+            }
+            else if (margin == null)
+            {
+                marginLeft = ValuesManager.valuesImpl.getValue(child, 
"margin-left");
+                marginTop = ValuesManager.valuesImpl.getValue(child, 
"margin-top");
+                marginRight = ValuesManager.valuesImpl.getValue(child, 
"margin-right");
+                marginBottom = ValuesManager.valuesImpl.getValue(child, 
"margin-bottom");
+            }
+            else
+            {
+                marginLeft = marginTop = marginBottom = marginRight = margin;
+            }
+            mt = Number(marginTop);
+            if (isNaN(mt))
+                mt = 0;
+            mb = Number(marginBottom);
+            if (isNaN(mb))
+                mb = 0;
+            if (ilc)
+            {
+                if (!isNaN(ilc.percentHeight))
+                    ilc.setHeight(contentView.height * ilc.percentHeight / 
100, !isNaN(ilc.percentWidth));
+            }
+            if (marginLeft == "auto")
+                ml = 0;
+            else
+            {
+                ml = Number(marginLeft);
+                if (isNaN(ml))
+                    ml = 0;
+            }
+            if (marginRight == "auto")
+                mr = 0;
+            else
+            {
+                mr = Number(marginRight);
+                if (isNaN(mr))
+                    mr = 0;
+            }
+            if (child is ILayoutChild)
+            {
+                ilc = child as ILayoutChild;
+                if (!isNaN(ilc.percentWidth))
+                    ilc.setWidth(contentView.width * ilc.percentWidth / 100, 
!isNaN(ilc.percentHeight));
+            }
+            setPositionAndWidth(child, left, ml, padding.left, right, mr, 
padding.right, w);
+            maxWidth = Math.max(maxWidth, ml + child.width + mr);
+            child.y = yy + mt;
+            child.height = hh - mb - child.y;
+            
+            return true;
+               }
+
+        private function setPositionAndWidth(child:IUIBase, left:Number, 
ml:Number, pl:Number,
+                                             right:Number, mr:Number, 
pr:Number, w:Number):void
+        {
+            var widthSet:Boolean = false;
+            
+            var ww:Number = w;
+            var ilc:ILayoutChild = child as ILayoutChild;
+            if (!isNaN(left))
+            {
+                child.x = left + ml;
+                ww -= left + ml;
+            }
+            else 
+            {
+                if (isNaN(right))
+                    child.x = ml + pl;
+                ww -= ml;
+            }
+            if (!isNaN(right))
+            {
+                if (!isNaN(left))
+                {
+                    if (ilc)
+                        ilc.setWidth(ww - right - mr, true);
+                    else
+                    {
+                        child.width = ww - right - mr;
+                        widthSet = true;
+                    }
+                }
+                else
+                    child.x = w - right - mr - child.width - 1; // some 
browsers don't like going all the way to the edge
+            }
+            if (ilc)
+            {
+                if (!isNaN(ilc.percentWidth))
+                    ilc.setWidth(w * ilc.percentWidth / 100, true);
+            }
+            if (!widthSet)
+                child.dispatchEvent(new Event("sizeChanged"));
+        }
+        
+        public function setDocument(document:Object, id:String = null):void
+        {
+            this.document = document;  
+        }
+        
+    }
+        
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
new file mode 100644
index 0000000..39e70ef
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
@@ -0,0 +1,246 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.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.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       
+       /**
+        *  The TileLayout class bead sizes and positions the elements it 
manages into rows and columns.
+        *  The size of each element is determined either by setting 
TileLayout's columnWidth and rowHeight
+        *  properties, or having the tile size determined by factoring the 
numColumns into the area assigned
+        *  for the layout.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class TileLayout implements IBeadLayout
+       {
+               /**
+                *  constructor.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function TileLayout()
+               {
+               }
+               
+               private var _strand:IStrand;
+               
+               /**
+                *  @copy org.apache.flex.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function set strand(value:IStrand):void
+               {
+                       _strand = value;                        
+               }
+               
+               private var _numColumns:Number = 4;
+               private var _columnWidth:Number = Number.NaN;
+               private var _rowHeight:Number = Number.NaN;
+               
+               /**
+                *  The number of tiles to fit horizontally into the layout.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get numColumns():Number
+               {
+                       return _numColumns;
+               }
+               public function set numColumns(value:Number):void
+               {
+                       _numColumns = value;
+               }
+               
+               /**
+                *  The width of each column, in pixels. If left unspecified, 
the
+                *  columnWidth is determined by dividing the numColumns into 
the
+                *  strand's bounding box width.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get columnWidth():Number
+               {
+                       return _columnWidth;
+               }
+               public function set columnWidth(value:Number):void
+               {
+                       _columnWidth = value;
+               }
+               
+               /**
+                *  The height of each row, in pixels. If left unspecified, the
+                *  rowHeight is determine by dividing the possible number of 
rows
+                *  into the strand's bounding box height.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get rowHeight():Number
+               {
+                       return _rowHeight;
+               }
+               public function set rowHeight(value:Number):void
+               {
+                       _rowHeight = value;
+               }
+               
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         */
+               public function layout():Boolean
+               {
+                       COMPILE::AS3
+                       {
+                               // this is where the layout is calculated
+                               var host:UIBase = _strand as UIBase;
+                               var p:ILayoutHost = 
_strand.getBeadByType(ILayoutHost) as ILayoutHost;
+                               var area:UIBase = p.contentView as UIBase;
+                               
+                               var xpos:Number = 0;
+                               var ypos:Number = 0;
+                               var useWidth:Number = columnWidth;
+                               var useHeight:Number = rowHeight;
+                               var n:Number = area.numElements;
+                               if (n == 0) return false;
+                               
+                               var realN:Number = n;
+                               for(var j:int=0; j < n; j++)
+                               {
+                                       var testChild:IUIBase = 
area.getElementAt(i) as IUIBase;
+                                       if (testChild && !testChild.visible) 
realN--;
+                               }
+                               
+                               if (isNaN(useWidth)) useWidth = 
Math.floor(host.width / numColumns); // + gap
+                               if (isNaN(useHeight)) {
+                                       // given the width and total number of 
items, how many rows?
+                                       var numRows:Number = 
Math.floor(realN/numColumns);
+                                       useHeight = Math.floor(host.height / 
numRows);
+                               }
+                               
+                               var maxWidth:Number = useWidth;
+                               var maxHeight:Number = useHeight;
+                               
+                               for(var i:int=0; i < n; i++)
+                               {
+                                       var child:IUIBase = 
area.getElementAt(i) as IUIBase;
+                                       if (child && !child.visible) continue;
+                                       child.width = useWidth;
+                                       child.height = useHeight;
+                                       child.x = xpos;
+                                       child.y = ypos;
+                                       
+                                       xpos += useWidth;
+                                       maxWidth = Math.max(maxWidth,xpos);
+                                       
+                                       var test:Number = (i+1)%numColumns;
+                                       
+                                       if (test == 0) {
+                                               xpos = 0;
+                                               ypos += useHeight;
+                                               maxHeight = 
Math.max(maxHeight,ypos);
+                                       } 
+                               }
+                               
+                               maxWidth = Math.max(maxWidth, 
numColumns*useWidth);
+                               maxHeight = Math.max(maxHeight, 
numRows*useHeight);
+                               
+                               // Only return true if the contentView needs to 
be larger; that new
+                               // size is stored in the model.
+                               var sizeChanged:Boolean = true;
+                               
+                               IEventDispatcher(_strand).dispatchEvent( new 
Event("layoutComplete") );
+                               
+                               return sizeChanged;
+                       }
+                       COMPILE::JS
+                       {
+                               var children:Array;
+                               var i:int;
+                               var n:int;
+                               var child:UIBase;
+                               var xpos:Number;
+                               var ypos:Number;
+                               var useWidth:Number;
+                               var useHeight:Number;
+                               
+                               var host:UIBase = _strand as UIBase;
+                               var viewBead:ILayoutHost = 
_strand.getBeadByType(ILayoutHost) as ILayoutHost;
+                               var contentView:IParentIUIBase = 
viewBead.contentView;
+                               children = contentView.internalChildren();
+                               n = children.length;
+                               if (n === 0) return false;
+                               
+                               var realN:int = n;
+                               for (i = 0; i < n; i++)
+                               {
+                                       child = children[i].flexjs_wrapper;
+                                       if (!child.visible) realN--;
+                               }
+                               
+                               xpos = 0;
+                               ypos = 0;
+                               useWidth = columnWidth;
+                               useHeight = rowHeight;
+                               
+                               if (isNaN(useWidth)) useWidth = 
Math.floor(host.width / numColumns); // + gap
+                               if (isNaN(useHeight)) {
+                                       // given the width and total number of 
items, how many rows?
+                                       var numRows:Number = Math.floor(realN / 
numColumns);
+                                       useHeight = Math.floor(host.height / 
numRows);
+                               }
+                               
+                               for (i = 0; i < n; i++)
+                               {
+                                       child = children[i].flexjs_wrapper;
+                                       if (!child.visible) continue;
+                                       
child.setDisplayStyleForLayout('inline-block');
+                                       child.width = useWidth;
+                                       child.height = useHeight;
+                               }
+                               return true;
+                       }
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
new file mode 100644
index 0000000..612519a
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
@@ -0,0 +1,122 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.beads.ScrollBarView;
+       import org.apache.flex.utils.CSSContainerUtils;
+
+    /**
+     *  The VScrollBarLayout class is a layout
+     *  bead that displays lays out the pieces of a
+     *  vertical 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 VScrollBarLayout implements IBeadLayout
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function VScrollBarLayout()
+               {
+               }
+               
+               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 h:Number = DisplayObject(_strand).height + 
metrics.top + metrics.bottom;
+                       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;
+                       
+                       increment.x = 0;
+                       increment.y = h - increment.height - 1;
+
+            if (track.width < thumb.width)
+                track.x = (thumb.width - track.width) / 2;
+            else if (track.width > thumb.width)
+                thumb.x = (track.width - thumb.width) / 2;
+            else
+                track.x = 0;
+                       track.y = decrement.height;
+                       track.height = increment.y - decrement.height;
+            thumb.height = sbModel.pageSize / (sbModel.maximum - 
sbModel.minimum) * track.height;
+                       if (track.height > thumb.height)
+                       {
+                               thumb.visible = true;
+                               thumb.y = (sbModel.value / (sbModel.maximum - 
sbModel.minimum - sbModel.pageSize) * (track.height - thumb.height)) + track.y;
+                       }
+                       else
+                       {
+                               thumb.visible = false;
+                       }
+                       
+            return true;
+               }
+                                               
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
new file mode 100644
index 0000000..d32777d
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
@@ -0,0 +1,199 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IContainer;
+       import org.apache.flex.core.ILayoutHost;
+       import org.apache.flex.core.IMeasurementBead;
+       import org.apache.flex.core.IParent;
+       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;    
+       
+       /**
+        * ColumnLayout is a class that organizes the positioning of children
+        * of a container into a set of columns where each column's width is 
set to
+        * the maximum size of all of the children in that column.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class VerticalColumnLayout implements IBeadLayout
+       {
+               /**
+                *  constructor
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function VerticalColumnLayout()
+               {
+               }
+               
+               private var _strand:IStrand;
+               
+               /**
+                *  @copy org.apache.flex.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function set strand(value:IStrand):void
+               {
+                       _strand = value;
+               }
+               
+               
+               private var _numColumns:int;
+               
+               /**
+                * The number of columns.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get numColumns():int
+               {
+                       return _numColumns;
+               }
+               public function set numColumns(value:int):void
+               {
+                       _numColumns = value;
+               }
+               
+        /**
+         * @copy org.apache.flex.core.IBeadLayout#layout
+         */
+               public function layout():Boolean
+               {                       
+            var host:UIBase = UIBase(_strand);
+            var layoutParent:ILayoutHost = host.getBeadByType(ILayoutHost) as 
ILayoutHost;
+            var contentView:IParent = layoutParent.contentView;
+            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+                       var sw:Number = host.width;
+                       var sh:Number = host.height;
+                       
+            var hasWidth:Boolean = !host.isWidthSizedToContent();
+            var hasHeight:Boolean = !host.isHeightSizedToContent();
+                       var e:IUIBase;
+                       var i:int;
+                       var col:int = 0;
+                       var columns:Array = [];
+            var rows:Array = [];
+            var data:Array = [];
+                       for (i = 0; i < numColumns; i++)
+                               columns[i] = 0;
+
+            var marginLeft:Object;
+            var marginRight:Object;
+            var marginTop:Object;
+            var marginBottom:Object;
+            var margin:Object;
+            var ml:Number;
+            var mr:Number;
+            var mt:Number;
+            var mb:Number;
+                       var n:int = contentView.numElements;
+            var rowData:Object = { rowHeight: 0 };
+                       
+                       // determine max widths of columns
+                       for (i = 0; i < n; i++) {
+                               e = contentView.getElementAt(i) as IUIBase;
+                margin = ValuesManager.valuesImpl.getValue(e, "margin");
+                marginLeft = ValuesManager.valuesImpl.getValue(e, 
"margin-left");
+                marginTop = ValuesManager.valuesImpl.getValue(e, "margin-top");
+                marginRight = ValuesManager.valuesImpl.getValue(e, 
"margin-right");
+                marginBottom = ValuesManager.valuesImpl.getValue(e, 
"margin-bottom");
+                mt = CSSUtils.getTopValue(marginTop, margin, sh);
+                mb = CSSUtils.getBottomValue(marginBottom, margin, sh);
+                mr = CSSUtils.getRightValue(marginRight, margin, sw);
+                ml = CSSUtils.getLeftValue(marginLeft, margin, sw);
+                data.push({ mt: mt, mb: mb, mr: mr, ml: ml});
+                               var thisPrefWidth:int = 0;
+                               if (e is IStrand)
+                               {
+                                       var measure:IMeasurementBead = 
e.getBeadByType(IMeasurementBead) as IMeasurementBead;
+                                       if (measure)
+                                               thisPrefWidth = 
measure.measuredWidth + ml + mr;
+                                       else
+                                               thisPrefWidth = e.width + ml + 
mr;                                              
+                               }
+                               else
+                                       thisPrefWidth = e.width + ml + mr;
+                               
+                rowData.rowHeight = Math.max(rowData.rowHeight, e.height + mt 
+ mb);
+                               columns[col] = Math.max(columns[col], 
thisPrefWidth);
+                col = col + 1;
+                if (col == numColumns)
+                {
+                    rows.push(rowData);
+                    rowData = {rowHeight: 0};
+                    col = 0;
+                }
+                       }
+                       
+            var lastmb:Number = 0;
+                       var curx:int = padding.left;
+                       var cury:int = padding.top;
+                       var maxHeight:int = 0;
+            var maxWidth:int = 0;
+                       col = 0;
+                       for (i = 0; i < n; i++) 
+            {
+                               e = contentView.getElementAt(i) as IUIBase;
+                               e.x = curx + ml;
+                               e.y = cury + data[i].mt;
+                               curx += columns[col++];
+                maxHeight = Math.max(maxHeight, e.y + e.height + data[i].mb);
+                maxWidth = Math.max(maxWidth, e.x + e.width + data[i].mr);
+                               if (col == numColumns)
+                               {
+                                       cury += rows[0].rowHeight;
+                    rows.shift();
+                                       col = 0;
+                                       curx = padding.left;
+                               }
+                       }
+                       if (!hasWidth && n > 0 && !isNaN(maxWidth))
+            {
+                UIBase(contentView).setWidth(maxWidth, true);
+            }
+            if (!hasHeight && n > 0 && !isNaN(maxHeight))
+            {
+                UIBase(contentView).setHeight(maxHeight, true);
+            }
+                       return true;
+               }
+       }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
new file mode 100644
index 0000000..fe43af4
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
@@ -0,0 +1,362 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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;
+       COMPILE::JS
+       {
+               import org.apache.flex.core.WrappedHTMLElement;                 
+       }
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.geom.Rectangle;
+       import org.apache.flex.utils.CSSContainerUtils;
+       import org.apache.flex.utils.CSSUtils;
+       
+       /**
+        *  The VerticalLayout class is a simple layout
+        *  bead.  It takes the set of children and lays them out
+        *  vertically in one column, separating them according to
+        *  CSS layout rules for margin and horizontal-align styles.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class VerticalLayout implements IBeadLayout
+       {
+               /**
+                *  Constructor.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function VerticalLayout()
+               {
+               }
+               
+               // 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; 
+               }
+               
+               /**
+                *  Layout children vertically
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                *  @flexjsignorecoercion org.apache.flex.core.ILayoutHost
+                */
+               public function layout():Boolean
+               {
+                       COMPILE::AS3
+                       {
+                               var layoutParent:ILayoutHost = 
host.getBeadByType(ILayoutHost) as ILayoutHost;
+                               var contentView:IParentIUIBase = layoutParent ? 
layoutParent.contentView : IParentIUIBase(host);
+                               var padding:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
+                               
+                               var n:int = contentView.numElements;
+                               var hasHorizontalFlex:Boolean;
+                               var hostSizedToContent:Boolean = 
host.isWidthSizedToContent();
+                               var flexibleHorizontalMargins:Array = [];
+                               var ilc:ILayoutChild;
+                               var marginLeft:Object;
+                               var marginRight:Object;
+                               var marginTop:Object;
+                               var marginBottom:Object;
+                               var margin:Object;
+                               var maxWidth:Number = 0;
+                               var cssValue:*;
+                               // asking for contentView.width can result in 
infinite loop if host isn't sized already
+                               var w:Number = hostSizedToContent ? 0 : 
contentView.width;
+                               var h:Number = contentView.height;
+                               
+                               for (var i:int = 0; i < n; i++)
+                               {
+                                       var child:IUIBase = 
contentView.getElementAt(i) as IUIBase;
+                                       if (child == null || !child.visible) 
continue;
+                                       ilc = child as ILayoutChild;
+                                       var left:Number = NaN;
+                                       cssValue = 
ValuesManager.valuesImpl.getValue(child, "left");
+                                       if (cssValue !== undefined)
+                                               left = 
CSSUtils.toNumber(cssValue);
+                                       var right:Number = NaN;
+                                       cssValue = 
ValuesManager.valuesImpl.getValue(child, "right");
+                                       if (cssValue !== undefined)
+                                               right = 
CSSUtils.toNumber(cssValue);
+                                       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);
+                                       var lastmb:Number;
+                                       var yy:Number;
+                                       if (i == 0)
+                                       {
+                                               if (ilc)
+                                                       ilc.setY(mt + 
padding.top);
+                                               else
+                                                       child.y = mt + 
padding.top;
+                                       }
+                                       else
+                                       {
+                                               if (ilc)
+                                                       ilc.setY(yy + 
Math.max(mt, lastmb));
+                                               else
+                                                       child.y = yy + 
Math.max(mt, lastmb);
+                                       }
+                                       if (ilc)
+                                       {
+                                               if (!isNaN(ilc.percentHeight))
+                                                       
ilc.setHeight(contentView.height * ilc.percentHeight / 100, 
!isNaN(ilc.percentWidth));
+                                       }
+                                       lastmb = mb;
+                                       var marginObject:Object = {};
+                                       flexibleHorizontalMargins[i] = 
marginObject;
+                                       if (marginLeft == "auto")
+                                       {
+                                               ml = 0;
+                                               marginObject.marginLeft = 
marginLeft;
+                                               hasHorizontalFlex = true;
+                                       }
+                                       else
+                                       {
+                                               ml = Number(marginLeft);
+                                               if (isNaN(ml))
+                                               {
+                                                       ml = 0;
+                                                       marginObject.marginLeft 
= marginLeft;
+                                               }
+                                               else
+                                                       marginObject.marginLeft 
= ml;
+                                       }
+                                       if (marginRight == "auto")
+                                       {
+                                               mr = 0;
+                                               marginObject.marginRight = 
marginRight;
+                                               hasHorizontalFlex = true;
+                                       }
+                                       else
+                                       {
+                                               mr = Number(marginRight);
+                                               if (isNaN(mr))
+                                               {
+                                                       mr = 0;
+                                                       
marginObject.marginRight = marginRight;
+                                               }
+                                               else
+                                                       
marginObject.marginRight = mr;
+                                       }
+                                       if (!hostSizedToContent)
+                                       {
+                                               // if host is sized by parent,
+                                               // we can position and size 
children horizontally now
+                                               setPositionAndWidth(child, 
left, ml, padding.left, 
+                                                       right, mr, 
padding.right, w);
+                                       }
+                                       else
+                                       {
+                                               if (!isNaN(left))
+                                               {
+                                                       ml = left;
+                                                       marginObject.left = ml;
+                                               }
+                                               if (!isNaN(right))
+                                               {
+                                                       mr = right;
+                                                       marginObject.right = mr;
+                                               }
+                                               maxWidth = Math.max(maxWidth, 
ml + child.width + mr);                    
+                                       }
+                                       yy = child.y + child.height;
+                               }
+                               if (hostSizedToContent)
+                               {
+                                       for (i = 0; i < n; i++)
+                                       {
+                                               child = 
contentView.getElementAt(i) as IUIBase;
+                                               if (child == null || 
!child.visible) continue;
+                                               var obj:Object = 
flexibleHorizontalMargins[i];
+                                               setPositionAndWidth(child, 
obj.left, obj.marginLeft, padding.left,
+                                                       obj.right, 
obj.marginRight, padding.right, maxWidth);
+                                       }
+                               }
+                               if (hasHorizontalFlex)
+                               {
+                                       for (i = 0; i < n; i++)
+                                       {
+                                               child = 
contentView.getElementAt(i) as IUIBase;
+                                               if (child == null || 
!child.visible) continue;
+                                               ilc = child as ILayoutChild;
+                                               obj = 
flexibleHorizontalMargins[i];
+                                               if (hasHorizontalFlex)
+                                               {
+                                                       if (ilc)
+                                                       {
+                                                               if 
(obj.marginLeft == "auto" && obj.marginRight == "auto")
+                                                                       
ilc.setX(maxWidth - child.width / 2);
+                                                               else if 
(obj.marginLeft == "auto")
+                                                                       
ilc.setX(maxWidth - child.width - obj.marginRight - padding.right);             
               
+                                                       }
+                                                       else
+                                                       {
+                                                               if 
(obj.marginLeft == "auto" && obj.marginRight == "auto")
+                                                                       child.x 
= maxWidth - child.width / 2;
+                                                               else if 
(obj.marginLeft == "auto")
+                                                                       child.x 
= maxWidth - child.width - obj.marginRight - padding.right;
+                                                       }
+                                               }
+                                       }
+                               }
+                               
+                               // 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 scv:Object = 
getComputedStyle(host.positioner);
+                               var hasWidth:Boolean = 
!host.isWidthSizedToContent();
+                               var maxWidth:Number = 0;
+                               n = children.length;
+                               for (i = 0; i < n; i++)
+                               {
+                                       var child:WrappedHTMLElement = 
children[i];
+                                       
child.flexjs_wrapper.setDisplayStyleForLayout('block');
+                                       if (child.style.display === 'none') 
+                                       {
+                                               
child.flexjs_wrapper.setDisplayStyleForLayout('block');
+                                       } 
+                                       else 
+                                       {
+                                               // block elements don't measure 
width correctly so set to inline for a second
+                                               child.style.display = 
'inline-block';
+                                               maxWidth = Math.max(maxWidth, 
child.offsetLeft + child.offsetWidth);
+                                               child.style.display = 'block';
+                                       }
+                                       
child.flexjs_wrapper.dispatchEvent('sizeChanged');
+                               }
+                               if (!hasWidth && n > 0 && !isNaN(maxWidth)) {
+                                       var pl:String = scv['padding-left'];
+                                       var pr:String = scv['padding-right'];
+                                       var npl:int = parseInt(pl.substring(0, 
pl.length - 2), 10);
+                                       var npr:int = parseInt(pr.substring(0, 
pr.length - 2), 10);
+                                       maxWidth += npl + npr;
+                                       contentView.width = maxWidth;
+                               }
+                               return true;
+                       }
+               }
+               
+               COMPILE::AS3
+               private function setPositionAndWidth(child:IUIBase, 
left:Number, ml:Number, pl:Number,
+                                                                               
         right:Number, mr:Number, pr:Number, w:Number):void
+               {
+                       var widthSet:Boolean = false;
+                       
+                       var ww:Number = w;
+                       var ilc:ILayoutChild = child as ILayoutChild;
+                       if (!isNaN(left))
+                       {
+                if (ilc)
+                    ilc.setX(left + ml);
+                else
+                               child.x = left + ml;
+                               ww -= left + ml;
+                       }
+                       else 
+                       {
+                if (ilc)
+                    ilc.setX(ml + pl);
+                else
+                               child.x = ml + pl;
+                               ww -= ml + pl;
+                       }
+                       if (!isNaN(right))
+                       {
+                               if (!isNaN(left))
+                               {
+                                       if (ilc)
+                                               ilc.setWidth(ww - right - mr, 
true);
+                                       else
+                                       {
+                                               child.width = ww - right - mr;
+                                               widthSet = true;
+                                       }
+                               }
+                               else
+                {
+                    if (ilc)
+                        ilc.setX(w - right - mr - child.width);
+                    else
+                                       child.x = w - right - mr - child.width;
+                }
+                       }
+                       if (ilc)
+                       {
+                               if (!isNaN(ilc.percentWidth))
+                                       ilc.setWidth(w * ilc.percentWidth / 
100, true);
+                       }
+                       if (!widthSet)
+                               child.dispatchEvent(new Event("sizeChanged"));
+               }
+               
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/AlertModel.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/AlertModel.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/AlertModel.as
new file mode 100644
index 0000000..caa6215
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/AlertModel.as
@@ -0,0 +1,288 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.models
+{
+       import org.apache.flex.core.IAlertModel;
+       import org.apache.flex.core.IBead;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.EventDispatcher;
+       
+       /**
+        *  The AlertModel class bead implements the 
org.apache.flex.core.IAlertModel and holds the properties
+        *  for an org.apache.flex.html.Alert such the buttons to use and 
message to display.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class AlertModel extends EventDispatcher implements IAlertModel, 
IBead
+       {
+               /**
+                *  constructor.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function AlertModel()
+               {
+                       super();
+               }
+               
+               private var _strand:IStrand;
+               
+               /**
+                *  @copy org.apache.flex.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function set strand(value:IStrand):void
+               {
+                       _strand = value;
+               }
+               
+               private var _title:String;
+               
+               /**
+                *  The title for the Alert.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#title
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get title():String
+               {
+                       return _title;
+               }
+               public function set title(value:String):void
+               {
+                       if( value != _title ) {
+                               _title = value;
+                               dispatchEvent( new Event("titleChange") );
+                       }
+               }
+
+               private var _htmlTitle:String;
+               
+               /**
+                *  The HTML title for the Alert.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#htmlTitle
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get htmlTitle():String
+               {
+                       return _htmlTitle;
+               }
+               public function set htmlTitle(value:String):void
+               {
+                       if( value != _htmlTitle ) {
+                               _htmlTitle = value;
+                               dispatchEvent( new Event("htmlTitleChange") );
+                       }
+               }
+               
+               private var _message:String;
+               
+               /**
+                *  The message to display.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#message
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get message():String
+               {
+                       return _message;
+               }
+               public function set message(value:String):void
+               {
+                       if( value != _message ) {
+                               _message = value;
+                               dispatchEvent( new Event("messageChange") );
+                       }
+               }
+               
+               private var _htmlMessage:String;
+               
+               /**
+                *  The HTML message to display.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#htmlMessage
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get htmlMessage():String
+               {
+                       return _htmlMessage;
+               }
+               public function set htmlMessage(value:String):void
+               {
+                       if( value != _htmlMessage )
+                       {
+                               _htmlMessage = value;
+                               dispatchEvent( new Event("htmlMessageChange") );
+                       }
+               }
+               
+               private var _flags:uint;
+               
+               /**
+                *  Which buttons to display (see Alert for details).
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#flags
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get flags():uint
+               {
+                       return _flags;
+               }
+               public function set flags(value:uint):void
+               {
+                       if( value != _flags )
+                       {
+                               _flags = value;
+                               dispatchEvent( new Event("flagsChange") );
+                       }
+               }
+               
+               private var _okLabel:String = "OK";
+               
+               /**
+                *  The label to use for the OK button.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#okLabel
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get okLabel():String
+               {
+                       return _okLabel;
+               }
+               public function set okLabel(value:String):void
+               {
+                       if( value != _okLabel )
+                       {
+                               _okLabel = value;
+                               dispatchEvent( new Event("okLabelChange") );
+                       }
+               }
+               
+               private var _cancelLabel:String = "Cancel";
+               
+               /**
+                *  The label to use for the Cancel button.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#cancelLabel
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get cancelLabel():String
+               {
+                       return _cancelLabel;
+               }
+               public function set cancelLabel(value:String):void
+               {
+                       if( value != _cancelLabel )
+                       {
+                               _cancelLabel = value;
+                               dispatchEvent( new Event("cancelLabelChange") );
+                       }
+               }
+               
+               private var _yesLabel:String = "YES";
+               
+               /**
+                *  The label to use for the Yes button.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#yesLabel
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get yesLabel():String
+               {
+                       return _yesLabel;
+               }
+               public function set yesLabel(value:String):void
+               {
+                       if( value != _yesLabel )
+                       {
+                               _yesLabel = value;
+                               dispatchEvent( new Event("yesLabelChange") );
+                       }
+               }
+               
+               private var _noLabel:String = "NO";
+               
+               /**
+                *  The label to use for the NO button.
+                * 
+                *  @copy org.apache.flex.core.IAlertModel#noLabel
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get noLabel():String
+               {
+                       return _noLabel;
+               }
+               public function set noLabel(value:String):void
+               {
+                       if( value != _noLabel )
+                       {
+                               _noLabel = value;
+                               dispatchEvent( new Event("noLabelChange") );
+                       }
+               }
+       }
+}

Reply via email to