http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SolidBackgroundWithChangeListenerBead.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SolidBackgroundWithChangeListenerBead.as
index 0000000,0000000..80462c9
new file mode 100644
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SolidBackgroundWithChangeListenerBead.as
@@@ -1,0 -1,0 +1,71 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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
++{
++      import org.apache.flex.events.IEventDispatcher;
++      import org.apache.flex.events.Event;
++      import org.apache.flex.events.StyleChangeEvent;
++      import org.apache.flex.core.IStrand;
++      import org.apache.flex.core.UIBase;
++      import org.apache.flex.html.beads.SolidBackgroundBead;
++      
++      /**
++       * Same as SolidBackgroundBead except it listens for StyleChangeEvent 
events
++       * and reacts by refreshing the background of its strand.
++     *  
++     *  @langversion 3.0
++     *  @playerversion Flash 10.2
++     *  @playerversion AIR 2.6
++     *  @productversion FlexJS 0.0
++       */
++      public class SolidBackgroundWithChangeListenerBead extends 
SolidBackgroundBead
++      {
++              /**
++               * Constructor.
++         *  
++         *  @langversion 3.0
++         *  @playerversion Flash 10.2
++         *  @playerversion AIR 2.6
++         *  @productversion FlexJS 0.0
++               */
++              public function SolidBackgroundWithChangeListenerBead()
++              {
++                      super();
++              }
++              
++              /**
++               * @private
++               */
++              override public function set strand(value:IStrand):void
++              {
++                      super.strand = value;
++                      
IEventDispatcher(value).addEventListener(StyleChangeEvent.STYLE_CHANGE, 
handleStyleChange);
++
++              }
++              
++              /**
++               * @private
++               */
++              private function handleStyleChange(event:StyleChangeEvent):void
++              {
++                      setupStyle();
++                      changeHandler(null);
++              }
++      }
++}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
index a0910d3,9ffd9fe..7752e90
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
@@@ -19,6 -19,6 +19,7 @@@
  package org.apache.flex.html.beads
  {
      import org.apache.flex.core.IBead;
++      import org.apache.flex.core.IList;
        import org.apache.flex.core.IDataProviderItemRendererMapper;
      import org.apache.flex.core.IItemRendererClassFactory;
      import org.apache.flex.core.IItemRendererParent;
@@@ -75,24 -75,23 +76,26 @@@
                public function set strand(value:IStrand):void
                {
                        _strand = value;
--                      
IEventDispatcher(value).addEventListener("beadsAdded",finishSetup);
                        
IEventDispatcher(value).addEventListener("initComplete",finishSetup);
                }
                
                private function finishSetup(event:Event):void
                {
                        selectionModel = _strand.getBeadByType(ISelectionModel) 
as ISelectionModel;
--                      var listView:IListView = 
_strand.getBeadByType(IListView) as IListView;
--                      dataGroup = listView.dataGroup;
                        selectionModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
              
-             _itemRendererFactory = 
_strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
-             if (!_itemRendererFactory)
++                      // if the host component inherits from 
DataContainerBase, the itemRendererClassFactory will 
++                      // already have been loaded by 
DataContainerBase.addedToParent function.
+             if (!itemRendererFactory)
              {
--                _itemRendererFactory = new 
(ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as 
IItemRendererClassFactory;
--                _strand.addBead(_itemRendererFactory);
++                              _itemRendererFactory = 
_strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
++                              if (!_itemRendererFactory)
++                              {
++                      _itemRendererFactory = new 
(ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as 
IItemRendererClassFactory;
++                  _strand.addBead(_itemRendererFactory);
++                              }
              }
-                             
+             
                        dataProviderChangeHandler(null);
                }
                
@@@ -126,23 -125,23 +129,24 @@@
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
           *  @productversion FlexJS 0.0
--         */
--              protected var dataGroup:IItemRendererParent;
--              
++         */           
                private function dataProviderChangeHandler(event:Event):void
                {
                        var dp:Array = selectionModel.dataProvider as Array;
                        if (!dp)
                                return;
                        
--                      dataGroup.removeAllElements();
++                      var list:IList = _strand as IList;
++                      var dataGroup:IItemRendererParent = list.dataGroup;
++                      
++                      dataGroup.removeAllItemRenderers();
                        
                        var n:int = dp.length; 
                        for (var i:int = 0; i < n; i++)
                        {
                                var tf:ITextItemRenderer = 
itemRendererFactory.createItemRenderer(dataGroup) as ITextItemRenderer;
                  tf.index = i;
--                dataGroup.addElement(tf);
++                dataGroup.addItemRenderer(tf);
                  if (selectionModel.labelField)
                      tf.text = dp[i][selectionModel.labelField];
                  else

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
index b0c11b5,b0c11b5..d0d49a2
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
@@@ -22,8 -22,8 +22,10 @@@ package org.apache.flex.html.bead
      import org.apache.flex.core.IBead;
      import org.apache.flex.core.IItemRendererClassFactory;
      import org.apache.flex.core.IItemRendererParent;
++      import org.apache.flex.core.IList;
      import org.apache.flex.core.ISelectionModel;
      import org.apache.flex.core.IStrand;
++      import org.apache.flex.core.ValuesManager;
        import org.apache.flex.events.Event;
        import org.apache.flex.events.EventDispatcher;
        import org.apache.flex.events.IEventDispatcher;
@@@ -74,15 -74,15 +76,26 @@@
                public function set strand(value:IStrand):void
                {
                        _strand = value;
--                      
IEventDispatcher(value).addEventListener("beadsAdded",finishSetup);
++                      
IEventDispatcher(value).addEventListener("initComplete",finishSetup);
                }
                
                private function finishSetup(event:Event):void
                {
                        selectionModel = _strand.getBeadByType(ISelectionModel) 
as ISelectionModel;
--                      var listView:IListView = 
_strand.getBeadByType(IListView) as IListView;
--                      dataGroup = listView.dataGroup;
--                      selectionModel.addEventListener("dataProviderChange", 
dataProviderChangeHandler);
++                      selectionModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
++                      
++                      // if the host component inherits from 
DataContainerBase, the itemRendererClassFactory will 
++                      // already have been loaded by 
DataContainerBase.addedToParent function.
++                      if (!itemRendererFactory)
++                      {
++                              _itemRendererFactory = 
_strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
++                              if (!_itemRendererFactory)
++                              {
++                                      _itemRendererFactory = new 
(ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as 
IItemRendererClassFactory;
++                                      _strand.addBead(_itemRendererFactory);
++                              }
++                      }
++                      
                        dataProviderChangeHandler(null);
                }
                
@@@ -123,14 -123,14 +136,17 @@@
                {
                        var dp:Vector.<String> = selectionModel.dataProvider as 
Vector.<String>;
                        
--                      dataGroup.removeAllElements();
++                      var list:IList = _strand as IList;
++                      var dataGroup:IItemRendererParent = list.dataGroup;
++                      
++                      dataGroup.removeAllItemRenderers();
                        
                        var n:int = dp.length; 
                        for (var i:int = 0; i < n; i++)
                        {
                                var tf:ITextItemRenderer = 
itemRendererFactory.createItemRenderer(dataGroup) as ITextItemRenderer;
                  tf.index = i;
--                dataGroup.addElement(tf);
++                dataGroup.addItemRenderer(tf);
                                tf.text = dp[i];
                                
                                var newEvent:ItemRendererEvent = new 
ItemRendererEvent(ItemRendererEvent.CREATED);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
index 206f43e,206f43e..0f27523
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
@@@ -47,12 -47,12 +47,12 @@@ limitations under the License
          <js:LayoutChangeNotifier watchedProperty="{titleLabel.text}" />
      </js:beads>
  
--    <js:Label id="titleLabel" text="{ITitleBarModel(model).title}" >
++    <js:Label id="titleLabel" text="{ITitleBarModel(model).title}" 
className="TitleBarTitle" >
          <js:style>
--            <js:SimpleCSSStyles fontWeight="inherit" margin="5" />
++            <js:SimpleCSSStyles fontWeight="inherit" marginRight="5" 
marginLeft="5" />
          </js:style>
      </js:Label>
--    <js:CloseButton id="closeButton" click="clickHandler()"
--                       visible="{ITitleBarModel(model).showCloseButton}"/>
++    <js:CloseButton id="closeButton" click="clickHandler()" 
className="TitleBarCloseButton"
++                    visible="{ITitleBarModel(model).showCloseButton}"/>
      
  </js:MXMLBeadView>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
index b381b5b,12fb59c..a3d3dc2
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
@@@ -42,39 -66,39 +42,39 @@@ package org.apache.flex.html.beads.cont
                public function set strand(value:IStrand):void
                {
                        _strand = value;
 -            IEventDispatcher(value).addEventListener(MouseEvent.CLICK, 
clickHandler);
 +                      
 +                      viewBead = _strand.getBeadByType(IComboBoxView) as 
IComboBoxView;
 +                      if (viewBead) {
 +                              finishSetup(null);
 +                      } else {
 +                              
IEventDispatcher(_strand).addEventListener("viewChanged", finishSetup);
 +                      }
 +              }
 +              
 +              private function finishSetup(event:Event):void
 +              {
 +                      if (viewBead == null) {
 +                              viewBead = _strand.getBeadByType(IComboBoxView) 
as IComboBoxView;
 +                      }
 +                      
 +                      
IEventDispatcher(viewBead.popupButton).addEventListener("click", 
handleButtonClick);
-                       
IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
                }
                
 -              /**
 -               * @private
 -               */
 -        private function clickHandler(event:MouseEvent):void
 -        {
 -            var viewBead:IComboBoxView = _strand.getBeadByType(IComboBoxView) 
as IComboBoxView;
 -            viewBead.popUpVisible = true;
 -            var selectionModel:ISelectionModel = 
_strand.getBeadByType(ISelectionModel) as ISelectionModel;
 -            var popUpModel:ISelectionModel = 
viewBead.popUp.getBeadByType(ISelectionModel) as ISelectionModel;
 -            popUpModel.dataProvider = selectionModel.dataProvider;
 -            popUpModel.selectedIndex = selectionModel.selectedIndex;
 -                      DisplayObject(viewBead.popUp).width = 
DisplayObject(_strand).width;
 -                      DisplayObject(viewBead.popUp).height = 200;
 -                      DisplayObject(viewBead.popUp).x = 
DisplayObject(_strand).x;
 -                      DisplayObject(viewBead.popUp).y = 
DisplayObject(_strand).y;
 -            IEventDispatcher(viewBead.popUp).addEventListener("change", 
changeHandler);
 -        }
 -        
 -              /**
 -               * @private
 -               */
 -        private function changeHandler(event:Event):void
 -        {
 -            var viewBead:IComboBoxView = _strand.getBeadByType(IComboBoxView) 
as IComboBoxView;
 -            viewBead.popUpVisible = false;
 -            var selectionModel:ISelectionModel = 
_strand.getBeadByType(ISelectionModel) as ISelectionModel;
 -            var popUpModel:ISelectionModel = 
viewBead.popUp.getBeadByType(ISelectionModel) as ISelectionModel;
 -            selectionModel.selectedIndex = popUpModel.selectedIndex;
 +              private function handleButtonClick(event:MouseEvent):void
 +              {                       
 +                      viewBead.popUpVisible = !viewBead.popUpVisible;
++                      
IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
 +              }
 +              
 +              private function handleListChange(event:Event):void
 +              {
 +                      var list:List = viewBead.popUp as List;
 +                      var input:TextInput = viewBead.textInputField as 
TextInput;
 +                      input.text = list.selectedItem as String;
 +                      
 +                      viewBead.popUpVisible = false;
 +                      
                        IEventDispatcher(_strand).dispatchEvent(new 
Event("change"));
 -        }
 -      
 +              }
        }
  }

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

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
index 5bd1159,5bd1159..761e1c7
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
@@@ -17,40 -17,40 +17,46 @@@
  //
  
////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads.layouts
--{     
++{
        import org.apache.flex.core.IBeadLayout;
--      import org.apache.flex.core.IItemRendererClassFactory;
--      import org.apache.flex.core.IItemRendererParent;
        import org.apache.flex.core.ILayoutHost;
++      import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutView;
        import org.apache.flex.core.IParentIUIBase;
        import org.apache.flex.core.ISelectableItemRenderer;
        import org.apache.flex.core.ISelectionModel;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.IUIBase;
        import org.apache.flex.core.IViewportModel;
++      import org.apache.flex.core.LayoutBase;
++      import org.apache.flex.core.SimpleCSSStyles;
        import org.apache.flex.core.UIBase;
        import org.apache.flex.core.ValuesManager;
        import org.apache.flex.events.Event;
        import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.html.List;
        import org.apache.flex.html.beads.ButtonBarView;
--      
++      import org.apache.flex.html.beads.models.ButtonBarModel;
++      import org.apache.flex.geom.Rectangle;
++      import org.apache.flex.utils.CSSUtils;
++      import org.apache.flex.utils.CSSContainerUtils;
++
        /**
--       *  The ButtonBarLayout class bead sizes and positions the 
org.apache.flex.html.Button 
--       *  elements that make up a org.apache.flex.html.ButtonBar. This bead 
arranges the Buttons 
++       *  The ButtonBarLayout class bead sizes and positions the 
org.apache.flex.html.Button
++       *  elements that make up a org.apache.flex.html.ButtonBar. This bead 
arranges the Buttons
         *  horizontally and makes them all the same width unless the 
buttonWidths property has been set in which case
         *  the values stored in that array are used.
--       *  
++       *
         *  @langversion 3.0
         *  @playerversion Flash 10.2
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
--      public class ButtonBarLayout implements IBeadLayout
++      public class ButtonBarLayout extends HorizontalFlexLayout implements 
IBeadLayout
        {
                /**
                 *  constructor.
--               *  
++               *
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
@@@ -58,29 -58,29 +64,16 @@@
                 */
                public function ButtonBarLayout()
                {
++                      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 _widthType:Number = ButtonBarModel.PIXEL_WIDTHS;
                private var _buttonWidths:Array = null;
--              
++
                /**
                 *  An array of widths (Number), one per button. These values 
supersede the
                 *  default of equally-sized buttons.
--               *  
++               *
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
@@@ -94,50 -94,50 +87,85 @@@
                {
                        _buttonWidths = value;
                }
--              
++
                /**
                 * @copy org.apache.flex.core.IBeadLayout#layout
                 */
--              public function layout():Boolean
++              override public function layout():Boolean
                {
--                      var layoutParent:ILayoutHost = 
_strand.getBeadByType(ILayoutHost) as ILayoutHost;
--                      var contentView:IParentIUIBase = 
layoutParent.contentView as IParentIUIBase;
--                      var itemRendererParent:IItemRendererParent = 
contentView as IItemRendererParent;
--                      var viewportModel:IViewportModel = (layoutParent as 
ButtonBarView).viewportModel;
--                      
--                      var n:int = contentView.numElements;
--                      var realN:int = n;
--                      
--                      for (var j:int=0; j < n; j++)
--                      {
--                              var child:IUIBase = 
itemRendererParent.getElementAt(j) as IUIBase;
--                              if (child == null || !child.visible) realN--;
++                      var contentView:ILayoutView = layoutView;
++
++                      var model:ButtonBarModel = (host as 
IStrand).getBeadByType(ButtonBarModel) as ButtonBarModel;
++                      if (model) {
++                              buttonWidths = model.buttonWidths;
++                              _widthType = model.widthType;
                        }
--                      
--                      var xpos:Number = 0;
--                      var useWidth:Number = contentView.width / realN;
--                      var useHeight:Number = contentView.height;
--                      
++
++                      var n:int = contentView.numElements;
++
                        for (var i:int=0; i < n; i++)
                        {
--                              var ir:ISelectableItemRenderer = 
itemRendererParent.getElementAt(i) as ISelectableItemRenderer;
++                              var ir:ISelectableItemRenderer = 
contentView.getElementAt(i) as ISelectableItemRenderer;
                                if (ir == null || !UIBase(ir).visible) continue;
--                              UIBase(ir).y = 0;
--                              UIBase(ir).x = xpos;
--                              if (!isNaN(useHeight) && useHeight > 0) {
--                                      UIBase(ir).height = useHeight;
--                              }
                                
--                              if (buttonWidths) UIBase(ir).width = 
Number(buttonWidths[i]);
--                              else if (!isNaN(useWidth) && useWidth > 0) {
--                                      UIBase(ir).width = useWidth;
++                              COMPILE::SWF {
++                                      if (buttonWidths) {
++                                              var widthValue:* = 
buttonWidths[i];
++
++                                              if (_widthType == 
ButtonBarModel.PIXEL_WIDTHS) {
++                                                      if (widthValue != null) 
UIBase(ir).width = Number(widthValue);
++                                                      if (UIBase(ir).style == 
null) {
++                                                              
UIBase(ir).style = new SimpleCSSStyles();
++                                                      }
++                                                      
UIBase(ir).style.flexGrow = 0;
++                                              }
++                                              else if (_widthType == 
ButtonBarModel.PROPORTIONAL_WIDTHS) {
++                                                      if (widthValue != null) 
{
++                                                              if 
(UIBase(ir).style == null) {
++                                                                      
UIBase(ir).style = new SimpleCSSStyles();
++                                                              }
++                                                              
UIBase(ir).style.flexGrow = Number(widthValue);
++                                                      }
++                                              }
++                                              else if (_widthType == 
ButtonBarModel.PERCENT_WIDTHS) {
++                                                      if (widthValue != null) 
UIBase(ir).percentWidth = Number(widthValue);
++                                                      if (UIBase(ir).style == 
null) {
++                                                              
UIBase(ir).style = new SimpleCSSStyles();
++                                                      }
++                                                      
UIBase(ir).style.flexGrow = 0;
++                                              }
++                                      } else {
++                                              if (UIBase(ir).style == null) {
++                                                      UIBase(ir).style = new 
SimpleCSSStyles();
++                                              }
++                                              UIBase(ir).style.flexGrow = 1;
++                                      }
++                              }
++
++                              COMPILE::JS {
++                                      // otherwise let the flexbox layout 
handle matters on its own.
++                                      if (buttonWidths) {
++                                              var widthValue:* = 
buttonWidths[i];
++
++                                              if (_widthType == 
ButtonBarModel.PIXEL_WIDTHS) {
++                                                      if (widthValue != null) 
UIBase(ir).width = Number(widthValue);
++                                              }
++                                              else if (_widthType == 
ButtonBarModel.PROPORTIONAL_WIDTHS) {
++                                                      if (widthValue != null) 
UIBase(ir).element.style["flex-grow"] = String(widthValue);
++                                              }
++                                              else if (_widthType == 
ButtonBarModel.PERCENT_WIDTHS) {
++                                                      if (widthValue != null) 
UIBase(ir).percentWidth = Number(widthValue);
++                                              }
++                                      } else {
++                                              
UIBase(ir).element.style["flex-grow"] = "1";
++                                      }
++                                      
++                                      UIBase(ir).height = contentView.height;
                                }
--                              xpos += UIBase(ir).width;
                        }
--                      
--                      IEventDispatcher(_strand).dispatchEvent( new 
Event("layoutComplete") );
--                      
--            return true;
++
++                      // now let the horizontal layout take care of things.
++                      return super.layout();
                }
        }
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
index 0b3c3fa,4198fea..f276074
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
@@@ -18,10 -18,9 +18,12 @@@
  
////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads.layouts
  {
++      import org.apache.flex.core.LayoutBase;
        import org.apache.flex.core.IBeadLayout;
        import org.apache.flex.core.ILayoutChild;
++      import org.apache.flex.core.ILayoutView;
      import org.apache.flex.core.ILayoutHost;
-     import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutParent;
        import org.apache.flex.core.IParentIUIBase;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.IUIBase;
@@@ -34,6 -33,6 +36,7 @@@
      import org.apache.flex.geom.Rectangle;
      import org.apache.flex.html.supportClasses.Viewport;
      import org.apache.flex.utils.CSSContainerUtils;
++      import org.apache.flex.utils.CSSUtils;
  
      /**
       *  The FlexibleFirstChildHorizontalLayout class is a simple layout
@@@ -42,17 -41,17 +45,17 @@@
       *  CSS layout rules for margin and padding styles. But it
       *  will size the first child to take up as much or little
       *  room as possible.
--     *  
++     *
       *  @langversion 3.0
       *  @playerversion Flash 10.2
       *  @playerversion AIR 2.6
       *  @productversion FlexJS 0.0
       */
--      public class FlexibleFirstChildHorizontalLayout implements IBeadLayout
++      public class FlexibleFirstChildHorizontalLayout extends HorizontalLayout
        {
          /**
           *  Constructor.
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -60,31 -59,31 +63,14 @@@
           */
                public function FlexibleFirstChildHorizontalLayout()
                {
++                      super();
                }
--              
--        // the strand/host container is also an ILayoutChild because
--        // can have its size dictated by the host's parent which is
--        // important to know for layout optimization
--        private var host:ILayoutChild;
--              
--        /**
--         *  @copy org.apache.flex.core.IBead#strand
--         *  
--         *  @langversion 3.0
--         *  @playerversion Flash 10.2
--         *  @playerversion AIR 2.6
--         *  @productversion FlexJS 0.0
--         */
--              public function set strand(value:IStrand):void
--              {
--            host = value as ILayoutChild;
--              }
--              
++
          private var _maxWidth:Number;
--        
++
          /**
           *  @copy org.apache.flex.core.IBead#maxWidth
--         *  
++         *
           *  @langversion 3.0
           *  @playerversion Flash 10.2
           *  @playerversion AIR 2.6
@@@ -94,20 -93,20 +80,20 @@@
          {
              return _maxWidth;
          }
--        
++
          /**
--         *  @private 
++         *  @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
@@@ -117,131 -116,129 +103,128 @@@
          {
              return _maxHeight;
          }
--        
++
          /**
--         *  @private 
++         *  @private
           */
          public function set maxHeight(value:Number):void
          {
              _maxHeight = value;
          }
--        
++
          /**
           * @copy org.apache.flex.core.IBeadLayout#layout
           */
--              public function layout():Boolean
++              COMPILE::SWF
++              override public function layout():Boolean
                {
-             var layoutParent:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
 -                      var layoutParent:ILayoutHost = 
host.getBeadByType(ILayoutHost) as ILayoutHost;
--                      var contentView:IParentIUIBase = 
layoutParent.contentView as IParentIUIBase;
--            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
--            var hostSizedToContent:Boolean = host.isHeightSizedToContent();
++                      var contentView:ILayoutView = layoutView;
++
++                      var n:Number = contentView.numElements;
++                      if (n == 0) return false;
                        
--                      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 = [];
++                      // if the layoutView has no width yet, this layout 
cannot
++                      // be run successfully, so default to HorizontalLayout.
++                      if (host.isWidthSizedToContent()) {
++                              return super.layout();
++                      }
++
++                      var maxWidth:Number = 0;
++                      var maxHeight:Number = 0;
++                      var hostSizedToContent:Boolean = 
host.isHeightSizedToContent();
++                      var hostWidth:Number = contentView.width;
++                      var hostHeight:Number = hostSizedToContent ? 0 : 
contentView.height;
++
++                      var ilc:ILayoutChild;
++                      var data:Object;
++                      var canAdjust:Boolean = false;
++
++                      var paddingMetrics:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
++                      var borderMetrics:Rectangle = 
CSSContainerUtils.getBorderMetrics(host);
                        
--            var xx:Number = contentView.width;
--            if (isNaN(xx) || xx <= 0)
--                return true;
--            xx -= padding.right + 1; // some browsers won't layout to the edge
--            
--            for (var i:int = n - 1; i >= 0; i--)
++                      // adjust the host's usable size by the metrics. If 
hostSizedToContent, then the
++                      // resulting adjusted value may be less than zero.
++                      hostWidth -= paddingMetrics.left + paddingMetrics.right 
+ borderMetrics.left + borderMetrics.right;
++                      hostHeight -= paddingMetrics.top + 
paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
++
++                      var xpos:Number = hostWidth + borderMetrics.left + 
paddingMetrics.left;
++                      var ypos:Number = borderMetrics.top + 
paddingMetrics.left;
++                      var adjustedWidth:Number = 0;
++
++                      for(var i:int=(n-1); i >= 0; i--)
                        {
                                var child:IUIBase = contentView.getElementAt(i) 
as IUIBase;
-                 if (child == null || !child.visible) continue;
--                              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];          
                        
++                              if (child == null || !child.visible) continue;
++                              var positions:Object = childPositions(child);
++                              var margins:Object = childMargins(child, 
hostWidth, hostHeight);
++
++                              ilc = child as ILayoutChild;
++
++                              var childYpos:Number = ypos + margins.top; // 
default y position
++
++                              if (!hostSizedToContent) {
++                                      var childHeight:Number = child.height;
++                                      if (ilc != null && 
!isNaN(ilc.percentHeight)) {
++                                              childHeight = hostHeight * 
ilc.percentHeight/100.0;
++                                              ilc.setHeight(childHeight);
                                        }
++                                      // the following code middle-aligns the 
child
++                                      childYpos = hostHeight/2 - 
childHeight/2;
                                }
--                              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;
++
++                              if (ilc) {
++                                      if (!isNaN(ilc.percentWidth)) {
++                                              ilc.setWidth(hostWidth * 
ilc.percentWidth / 100);
++                                      }
                                }
--                              var ml:Number;
--                              var mr:Number;
--                              var mt:Number;
--                              var mb:Number;
--                              var lastmr:Number;
--                              mt = Number(marginTop);
--                              if (isNaN(mt))
--                                      mt = 0;
--                              mb = Number(marginBottom);
--                              if (isNaN(mb))
--                                      mb = 0;
--                              if (marginLeft == "auto")
--                                      ml = 0;
--                              else
--                              {
--                                      ml = Number(marginLeft);
--                                      if (isNaN(ml))
--                                              ml = 0;
++
++                              if (i > 0) {
++                                      xpos -= child.width + margins.right;
++                                      adjustedWidth = child.width;
++                              } else {
++                                      adjustedWidth = xpos - 
(borderMetrics.left + paddingMetrics.left + margins.left + margins.right);
++                                      xpos = borderMetrics.left + 
paddingMetrics.left + margins.left;
                                }
--                              if (marginRight == "auto")
--                                      mr = 0;
--                              else
--                              {
--                                      mr = Number(marginRight);
--                                      if (isNaN(mr))
--                                              mr = 0;
++
++                              if (ilc) {
++                                      ilc.setX(xpos);
++                                      ilc.setY(childYpos);
++                                      ilc.setWidth(adjustedWidth);
++
++                              } else {
++                                      child.x = xpos;
++                                      child.y = childYpos;
++                                      child.width = adjustedWidth;
                                }
--                              child.y = mt + padding.top;
--                              if (i == 0)
--                {
--                    child.x = ml + padding.left;
--                    child.width = xx - mr - child.x;
--                }
--                              else
--                    child.x = xx - child.width - mr;
--                maxHeight = Math.max(maxHeight, mt + child.height + mb);
--                              xx -= child.width + mr + ml;
--                              lastmr = mr;
--                              var valign:Object = 
ValuesManager.valuesImpl.getValue(child, "vertical-align");
--                              verticalMargins.push({ marginTop: mt, 
marginBottom: mb, valign: valign });
++
++                              xpos -= margins.left;
                        }
--                      for (i = 0; i < n; i++)
--                      {
--                              var obj:Object = verticalMargins[0]
--                              child = contentView.getElementAt(i) as IUIBase;
-                 if (child == null || !child.visible) continue;
-                 if (obj.valign == "middle")
 -                              if (obj.valign == "middle")
--                                      child.y = (maxHeight - child.height) / 
2;
--                              else if (valign == "bottom")
--                                      child.y = maxHeight - child.height - 
obj.marginBottom;
--                              else
--                                      child.y = obj.marginTop;
++
++                      return true;
++              }
++
++              COMPILE::JS
++              override public function layout():Boolean
++              {
++                      var contentView:ILayoutView = layoutView;
++
++                      // set the display on the contentView
++                      contentView.element.style["display"] = "flex";
++                      contentView.element.style["flex-flow"] = "row";
++                      contentView.element.style["align-items"] = "center";
++
++                      var n:int = contentView.numElements;
++                      if (n == 0) return false;
++
++                      for(var i:int=0; i < n; i++) {
++                              var child:UIBase = contentView.getElementAt(i) 
as UIBase;
++                              child.element.style["flex-grow"] = (i == 0) ? 
"1" : "0";
++                              child.element.style["flex-shrink"] = "0";
                        }
--            if (hostSizedToContent)
--                ILayoutChild(contentView).setHeight(maxHeight + padding.top + 
padding.bottom, true);
--                      
--            return true;
++
++                      return true;
                }
  
      }
--        
++
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
index 38b97ec,38b97ec..f8b5ddd
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
@@@ -18,15 -18,15 +18,16 @@@
  
////////////////////////////////////////////////////////////////////////////////
  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.core.UIBase;
        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.Button;
        import org.apache.flex.utils.CSSContainerUtils;
  
      /**
@@@ -82,27 -82,27 +83,28 @@@
                  sbModel = _strand.getBeadByType(IScrollBarModel) as 
IScrollBarModel
                                        
                        var metrics:Rectangle = 
CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
--                    
--                      var w:Number = DisplayObject(_strand).width + 
metrics.left + metrics.right;
--                      var increment:DisplayObject = sbView.increment;
--                      var decrement:DisplayObject = sbView.decrement;
--                      var track:DisplayObject = sbView.track;
--                      var thumb:DisplayObject = sbView.thumb;
++            
++            var host:UIBase = UIBase(_strand);
++                      var w:Number = host.width + metrics.left + 
metrics.right;
++                      var increment:Button = sbView.increment;
++                      var decrement:Button = sbView.decrement;
++                      var track:Button = sbView.track;
++                      var thumb:Button = sbView.thumb;
                        
--                      decrement.x = 0;
++                      decrement.x = 1;
                        decrement.y = 0;
--                      decrement.height = DisplayObject(_strand).height;
--                      decrement.width = DisplayObject(_strand).height;
++                      decrement.height = host.height - 2;
++                      decrement.width = host.height;
                        
--                      increment.height = DisplayObject(_strand).height;
--                      increment.width = DisplayObject(_strand).height;
--                      increment.x = w - increment.width - 1;
++                      increment.height = host.height - 2;
++                      increment.width = host.height;
++                      increment.x = w - increment.width - 2;
                        increment.y = 0;
  
--                      track.x = decrement.width;
++                      track.x = decrement.width + 4;
                        track.y = 0;
--                      track.height = DisplayObject(_strand).height;
--                      track.width = increment.x - decrement.width;
++                      track.height = host.height;
++                      track.width = increment.x - decrement.width - 5;
              thumb.width = sbModel.pageSize / (sbModel.maximum - 
sbModel.minimum) * track.width;
                        if (track.width > thumb.width)
                        {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
index 0000000,0000000..cad6827
new file mode 100644
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
@@@ -1,0 -1,0 +1,264 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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.html.beads.layouts.HorizontalLayout;
++
++      import org.apache.flex.core.LayoutBase;
++      import org.apache.flex.core.ILayoutChild;
++      import org.apache.flex.core.ILayoutHost;
++      import org.apache.flex.core.ILayoutView;
++      import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.IStrand;
++      import org.apache.flex.core.IParentIUIBase;
++      import org.apache.flex.core.UIBase;
++
++      COMPILE::SWF {
++              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.CSSUtils;
++              import org.apache.flex.utils.CSSContainerUtils;
++      }
++
++      public class HorizontalFlexLayout extends LayoutBase
++      {
++              /**
++               * Constructor.
++               *
++               *  @langversion 3.0
++               *  @playerversion Flash 10.2
++               *  @playerversion AIR 2.6
++               *  @productversion FlexJS 0.8
++               */
++              public function HorizontalFlexLayout()
++              {
++                      super();
++              }
++
++              private var _grow:Number = -1;
++
++              /**
++               * Sets the amount items grow in proportion to other items.
++               * The default is 0 which prevents the items from expanding to
++               * fit the space. Use a negative value to unset this property.
++               *
++               *  @langversion 3.0
++               *  @playerversion Flash 10.2
++               *  @playerversion AIR 2.6
++               *  @productversion FlexJS 0.8
++               */
++              public function get grow():Number {
++                      return _grow;
++              }
++              public function set grow(value:Number):void {
++                      _grow = value;
++              }
++
++              private var _shrink:Number = -1;
++
++              /**
++               * Sets the amount an item may shrink in proportion to other 
items.
++               * The default is 1 which allows items to shrink to fit into 
the space.
++               * Set this to 0 if you want to allow scrolling of the space. 
Use a
++               * negative value to unset this property.
++               *
++               *  @langversion 3.0
++               *  @playerversion Flash 10.2
++               *  @playerversion AIR 2.6
++               *  @productversion FlexJS 0.8
++               */
++              public function get shrink():Number {
++                      return _shrink;
++              }
++              public function set shrink(value:Number):void {
++                      _shrink = value;
++              }
++
++              /**
++               * @copy org.apache.flex.core.IBeadLayout#layout
++               * @flexjsignorecoercion org.apache.flex.core.ILayoutHost
++               *
++               *  @langversion 3.0
++               *  @playerversion Flash 10.2
++               *  @playerversion AIR 2.6
++               *  @productversion FlexJS 0.8
++               */
++              override public function layout():Boolean
++              {
++                      COMPILE::SWF {
++                              var contentView:ILayoutView = layoutView;
++
++                              var n:Number = contentView.numElements;
++                              if (n == 0) return false;
++
++                              var spacing:String = "none";
++
++                              var maxWidth:Number = 0;
++                              var maxHeight:Number = 0;
++                              var growCount:Number = 0;
++                              var childData:Array = [];
++                              var hostWidthSizedToContent:Boolean = 
host.isWidthSizedToContent();
++                              var hostHeightSizedToContent:Boolean = 
host.isHeightSizedToContent();
++                              var hostWidth:Number = hostWidthSizedToContent 
? host.width : contentView.width;
++                              var hostHeight:Number = 
hostHeightSizedToContent ? host.height : contentView.height;
++
++                              var ilc:ILayoutChild;
++                              var data:Object;
++                              var canAdjust:Boolean = false;
++                              
++                              var paddingMetrics:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
++                              var borderMetrics:Rectangle = 
CSSContainerUtils.getBorderMetrics(host);
++                              
++                              // adjust the host's usable size by the 
metrics. If hostSizedToContent, then the
++                              // resulting adjusted value may be less than 
zero.
++                              hostWidth -= paddingMetrics.left + 
paddingMetrics.right + borderMetrics.left + borderMetrics.right;
++                              hostHeight -= paddingMetrics.top + 
paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
++                              
++                              if ((hostWidth <= 0 && 
!hostWidthSizedToContent) || (hostHeight <= 0 && !hostHeightSizedToContent)) 
return false;
++                              
++                              var remainingWidth:Number = hostWidth;
++
++                              //trace("HorizontalFlexLayout for 
"+UIBase(host).id+" with remainingWidth: "+remainingWidth);
++
++                              // First pass determines the data about the 
child.
++                              for(var i:int=0; i < n; i++)
++                              {
++                                      var child:IUIBase = 
contentView.getElementAt(i) as IUIBase;
++                                      if (child == null || !child.visible) {
++                                              childData.push({width:0, 
height:0, mt:0, ml:0, mr:0, mb:0, canAdjust:false});
++                                              continue;
++                                      }
++
++                                      ilc = child as ILayoutChild;
++                                      
++                                      var margins:Object = 
childMargins(child, hostWidth, hostHeight);
++
++                                      var flexGrow:Object = 
ValuesManager.valuesImpl.getValue(child, "flex-grow");
++                                      var growValue:Number = 0;
++                                      if (flexGrow != null) {
++                                              growValue = Number(flexGrow);
++                                              if (!isNaN(growValue) && 
growValue > 0) growCount++;
++                                              else growValue = 0;
++                                      }
++
++                                      var useHeight:Number = -1;
++                                      if (!hostHeightSizedToContent) {
++                                              if (ilc) {
++                                                      if 
(!isNaN(ilc.percentHeight)) useHeight = hostHeight * (ilc.percentHeight/100.0);
++                                                      else if 
(!isNaN(ilc.explicitHeight)) useHeight = ilc.explicitHeight;
++                                                      else useHeight = 
hostHeight;
++                                              }
++                                      }
++
++                                      var useWidth:Number = -1;
++                                      if (ilc) {
++                                              if (!isNaN(ilc.explicitWidth)) 
useWidth = ilc.explicitWidth;
++                                              else if 
(!isNaN(ilc.percentWidth)) useWidth = hostWidth * (ilc.percentWidth/100.0);
++                                              else if (ilc.width > 0) 
useWidth = ilc.width;
++                                      }
++                                      if (growValue == 0 && useWidth > 0) 
remainingWidth -= useWidth + margins.left + margins.right;
++                                      else remainingWidth -= margins.left + 
margins.right;
++
++                                      if (maxWidth < useWidth) maxWidth = 
useWidth;
++                                      if (maxHeight < useHeight) maxHeight = 
useHeight;
++
++                                      childData.push({width:useWidth, 
height:useHeight, 
++                                                          mt:margins.top, 
ml:margins.left, mr:margins.right, mb:margins.bottom, 
++                                                                      
grow:growValue, canAdjust:canAdjust});
++                              }
++
++                              var xpos:Number = borderMetrics.left + 
paddingMetrics.left;
++                              var ypos:Number = borderMetrics.top + 
paddingMetrics.top;
++
++                              // Second pass sizes and positions the children 
based on the data gathered.
++                              for(i=0; i < n; i++)
++                              {
++                                      child = contentView.getElementAt(i) as 
IUIBase;
++                                      data = childData[i];
++                                      //if (data.width == 0 || data.height == 
0) continue;
++
++                                      useHeight = (data.height < 0 ? 
maxHeight : data.height);
++
++                                      var setWidth:Boolean = true;
++                                      if (data.width != 0) {
++                                              if (data.grow > 0 && growCount 
> 0) {
++                                                      useWidth = 
remainingWidth / growCount;
++                                                      setWidth = false;
++                                              } else {
++                                                      useWidth = data.width;
++                                              }
++                                      } else {
++                                              useWidth = child.width;
++                                      }
++
++                                      ilc = child as ILayoutChild;
++                                      if (ilc) {
++                                              ilc.setX(xpos + data.ml);
++                                              ilc.setY(ypos + data.mt);
++                                              if (data.height > 0) {
++                                                      //ilc.height = 
useHeight;
++                                                      
ilc.setHeight(useHeight);
++                                              }
++                                              if (useWidth > 0) {
++                                                      if (setWidth) 
ilc.setWidth(useWidth);
++                                                      else ilc.width = 
useWidth;
++                                              }
++                                      } else {
++                                              child.x = xpos + data.ml;
++                                              child.y = ypos + data.mt;
++                                              child.height = useHeight;
++                                              if (data.width > 0) {
++                                                      child.width = useWidth;
++                                              }
++                                      }
++
++                                      xpos += useWidth + data.mr + data.ml;
++
++                                      //trace("HorizontalFlexLayout: setting 
child "+i+" to "+child.width+" x "+child.height+" at "+child.x+", "+child.y);
++                              }
++
++                              //trace("HorizontalFlexLayout: complete");
++
++                              return true;
++                      }
++
++                      COMPILE::JS {
++                              var contentView:ILayoutView = layoutView;
++
++                              // set the display on the contentView
++                              contentView.element.style["display"] = "flex";
++                              contentView.element.style["flex-flow"] = "row";
++
++                              var n:int = contentView.numElements;
++                              if (n == 0) return false;
++
++                              for(var i:int=0; i < n; i++) {
++                                      var child:UIBase = 
contentView.getElementAt(i) as UIBase;
++                                      if (grow >= 0) 
child.element.style["flex-grow"] = String(grow);
++                                      if (shrink >= 0) 
child.element.style["flex-shrink"] = String(shrink);
++                              }
++
++                              return true;
++                      }
++              }
++      }
++}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
----------------------------------------------------------------------
diff --cc 
frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
index 8f3561a,0000000..84484cb
mode 100644,000000..100644
--- 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlowLayout.as
@@@ -1,288 -1,0 +1,268 @@@
 
+////////////////////////////////////////////////////////////////////////////////
 +//
 +//  Licensed to the Apache Software Foundation (ASF) under one or more
 +//  contributor license agreements.  See the NOTICE file distributed with
 +//  this work for additional information regarding copyright ownership.
 +//  The ASF licenses this file to You under the Apache License, Version 2.0
 +//  (the "License"); you may not use this file except in compliance with
 +//  the License.  You may obtain a copy of the License at
 +//
 +//      http://www.apache.org/licenses/LICENSE-2.0
 +//
 +//  Unless required by applicable law or agreed to in writing, software
 +//  distributed under the License is distributed on an "AS IS" BASIS,
 +//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 +//  See the License for the specific language governing permissions and
 +//  limitations under the License.
 +//
 
+////////////////////////////////////////////////////////////////////////////////
 +package org.apache.flex.html.beads.layouts
 +{
++      import org.apache.flex.core.LayoutBase;
 +      import org.apache.flex.core.IBeadLayout;
 +      import org.apache.flex.core.ILayoutHost;
 +      import org.apache.flex.core.ILayoutParent;
++      import org.apache.flex.core.ILayoutView;
 +      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 HorizontalFlowLayout class bead sizes and positions the 
elements it manages into rows
 +       *  and columns. It does this by seeing how many elements will fit 
horizontally and then flow
 +       *  the remainder onto the next lines. If an element does not already 
have an explicit or percentage
 +       *  size, a size is chosen for it based on the defaultColumnCount 
property which divides the
 +       *  layout space into equal number of cells as a default measurement.
-        * 
++       *
 +       *  The height of each row is determined by the tallest element in the 
row. The next row flows
 +       *  below that.
 +       *
 +       *  @langversion 3.0
 +       *  @playerversion Flash 10.2
 +       *  @playerversion AIR 2.6
 +       *  @productversion FlexJS 0.0
 +       */
-       public class HorizontalFlowLayout implements IBeadLayout
++      public class HorizontalFlowLayout extends LayoutBase implements 
IBeadLayout
 +      {
 +              /**
 +               *  constructor.
 +               *
 +               *  @langversion 3.0
 +               *  @playerversion Flash 10.2
 +               *  @playerversion AIR 2.6
 +               *  @productversion FlexJS 0.0
 +               */
 +              public function HorizontalFlowLayout()
 +              {
-               }
- 
-               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;
++                      super();
 +              }
 +
 +              private var _defaultColumnCount:Number = 4;
 +              private var _computedColumnWidth:Number = Number.NaN;
 +              private var _columnGap:int = 4;
 +              private var _rowGap:int = 4;
 +              private var _useChildWidth:Boolean = false;
-               
++
 +              /**
 +               *  The amount of spacing between the columns.
 +               *
 +               *  @langversion 3.0
 +               *  @playerversion Flash 10.2
 +               *  @playerversion AIR 2.6
 +               *  @productversion FlexJS 0.0
 +               */
 +              public function get columnGap():int
 +              {
 +                      return _columnGap;
 +              }
 +              public function set columnGap(value:int):void
 +              {
 +                      _columnGap = value;
 +              }
-               
++
 +              /**
 +               *  Amount of spacing between the rows.
 +               *
 +               *  @langversion 3.0
 +               *  @playerversion Flash 10.2
 +               *  @playerversion AIR 2.6
 +               *  @productversion FlexJS 0.0
 +               */
 +              public function get rowGap():int
 +              {
 +                      return _rowGap;
 +              }
 +              public function set rowGap(value:int):void
 +              {
 +                      _rowGap = value;
 +              }
 +
 +              /**
 +               *  The default number of columns the layout should assume 
should any or
 +               *  all of the elements not have explicit or percentage widths. 
This value is
-                *  used to divide the layout width into equal-width columns. 
An element's 
++               *  used to divide the layout width into equal-width columns. 
An element's
 +               *  own width overrides this computed width, allowing for a 
ragged grid
 +               *  arrangement.
 +               *
 +               *  @langversion 3.0
 +               *  @playerversion Flash 10.2
 +               *  @playerversion AIR 2.6
 +               *  @productversion FlexJS 0.0
 +               */
 +              public function get defaultColumnCount():Number
 +              {
 +                      return _defaultColumnCount;
 +              }
 +              public function set defaultColumnCount(value:Number):void
 +              {
 +                      _defaultColumnCount = value;
 +              }
 +
 +              /**
 +               *  The calculated width of each column, in pixels. If left 
unspecified, the
 +               *  columnWidth is determined by dividing the 
defaultColumnCount 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 computedColumnWidth():Number
 +              {
 +                      return _computedColumnWidth;
 +              }
 +              public function set computedColumnWidth(value:Number):void
 +              {
 +                      _computedColumnWidth = value;
 +              }
-               
++
 +              /**
 +               *  Determines whether or not each child's width is set from 
the column size (false) or
 +               *  uses its own width (true). Default is false.
 +               *
 +               *  @langversion 3.0
 +               *  @playerversion Flash 10.2
 +               *  @playerversion AIR 2.6
 +               *  @productversion FlexJS 0.0
 +               */
 +              public function get useChildWidth():Boolean
 +              {
 +                      return _useChildWidth;
 +              }
 +              public function set useChildWidth(value:Boolean):void
 +              {
 +                      _useChildWidth = value;
 +              }
 +
 +        /**
 +         * @copy org.apache.flex.core.IBeadLayout#layout
 +         */
-               public function layout():Boolean
++              override public function layout():Boolean
 +              {
 +                      COMPILE::SWF
 +                      {
-                               // this is where the layout is calculated
-                               var host:UIBase = _strand as UIBase;
-                               var p:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
-                               var area:UIBase = p.contentView as UIBase;
-                               
++                              var area:UIBase = layoutView as UIBase;
++
 +                              var n:Number = area.numElements;
 +                              if (n == 0) return false;
-                               
++
 +                              // if a computedColumnWidth hasn't been preset, 
calculate it
 +                              // based on the default column count, giving 
equal-width columns.
 +                              if (isNaN(computedColumnWidth)) {
 +                                      _computedColumnWidth = area.width / 
defaultColumnCount;
 +                              }
-                               
++
 +                              var maxWidth:Number = area.width;
 +                              var maxHeight:Number = 0;
 +                              var xpos:Number = columnGap/2;
 +                              var ypos:Number = rowGap/2;
 +                              var useWidth:Number = 0;
-                               
++
 +                              for(var i:int=0; i < n; i++)
 +                              {
 +                                      var child:UIBase = area.getElementAt(i) 
as UIBase;
 +                                      if (child == null || !child.visible) 
continue;
-                                       
++
 +                                      if (!isNaN(child.explicitWidth)) 
useWidth = child.explicitWidth;
 +                                      else if (!isNaN(child.percentWidth)) 
useWidth = maxWidth * (child.percentWidth/100.0);
 +                                      else useWidth = _computedColumnWidth;
-                                       
++
 +                                      if (xpos+useWidth > maxWidth) {
 +                                              ypos += maxHeight + rowGap;
 +                                              xpos = columnGap/2;
 +                                              maxHeight = 0;
 +                                      }
-                                       
++
 +                                      child.x = xpos;
 +                                      child.y = ypos;
 +                                      if (!useChildWidth) {
 +                                              child.setWidth(useWidth)
 +                                      }
-                                       
++
 +                                      var childWidth:Number = child.width;
 +                                      var childHeight:Number = child.height;
 +                                      maxHeight = Math.max(maxHeight, 
childHeight);
-                                       
++
 +                                      xpos += childWidth + columnGap;
 +                              }
-                               
-                               IEventDispatcher(_strand).dispatchEvent( new 
Event("layoutComplete") );
-                               
++
 +                              return true;
 +                      }
 +                      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 = (host as 
ILayoutParent).getLayoutHost();
-                               var area:IParentIUIBase = viewBead.contentView 
as IParentIUIBase;
++                              var area:IParentIUIBase = layoutView as 
IParentIUIBase;
++                              
 +                              children = area.internalChildren();
 +                              n = children.length;
 +                              if (n === 0) return false;
 +
 +                              area.width = host.width;
-                               
++
 +                              var element:HTMLElement = area.element as 
HTMLElement;
 +                              element.style["flexFlow"] = "row wrap";
 +                              element.style["display"] = "flex";
-                               
++
 +                              // if a computedColumnWidth hasn't been preset, 
calculate it
 +                              // based on the default column count, giving 
equal-width columns.
 +                              if (isNaN(computedColumnWidth)) {
 +                                      _computedColumnWidth = host.width / 
defaultColumnCount;
 +                              }
 +
 +                              for (i = 0; i < n; i++)
 +                              {
 +                                      child = children[i].flexjs_wrapper;
 +                                      if (!child.visible) continue;
-                                       
++
 +                                      if (!isNaN(child.explicitWidth)) 
useWidth = child.explicitWidth;
 +                                      else if (!isNaN(child.percentWidth)) 
useWidth = host.width * (child.percentWidth/100.0);
 +                                      else useWidth = _computedColumnWidth;
-                                       
++
 +                                      if (useChildWidth) {
 +                                              children[i].style["position"] = 
null;
 +                                      } else {
 +                                              child.width = useWidth;
 +                                      }
 +                                      children[i].style["margin-top"] = 
String(_rowGap/2)+"px";
 +                                      children[i].style["margin-bottom"] = 
String(_rowGap/2)+"px";
 +                                      children[i].style["margin-left"] = 
String(_columnGap/2)+"px";
 +                                      children[i].style["margin-right"] = 
String(_columnGap/2)+"px";
 +                              }
-                               
-                               IEventDispatcher(_strand).dispatchEvent( new 
Event("layoutComplete") );
-                               
++
 +                              return true;
 +                      }
 +              }
 +      }
 +}

Reply via email to