Updates to ComboBox, DataGrid, and layouts.

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

Branch: refs/heads/dual
Commit: b67636a30fc0948a53b46a3862daf9923a429fe3
Parents: be051df
Author: Peter Ent <p...@apache.org>
Authored: Wed Apr 5 14:54:45 2017 -0400
Committer: Peter Ent <p...@apache.org>
Committed: Wed Apr 5 14:54:45 2017 -0400

----------------------------------------------------------------------
 .../projects/HTML/src/main/flex/HTMLClasses.as  |   2 +-
 .../main/flex/org/apache/flex/html/DataGrid.as  |   2 +-
 .../org/apache/flex/html/beads/ComboBoxView.as  |  36 ++-
 .../flex/html/beads/DataGridPercentageView.as   | 290 ++++++++++++++++++
 .../org/apache/flex/html/beads/DataGridView.as  | 100 +++---
 .../TextItemRendererFactoryForArrayData.as      |   2 +-
 .../beads/controllers/ComboBoxController.as     |   2 +-
 .../flex/html/beads/layouts/ButtonBarLayout.as  |  17 +-
 .../flex/html/beads/layouts/DataGridLayout.as   | 271 -----------------
 .../beads/layouts/DataGridPercentageLayout.as   | 303 -------------------
 .../html/beads/layouts/HorizontalFlexLayout.as  |  23 +-
 .../flex/html/beads/layouts/IDataGridLayout.as  |  52 ----
 .../html/beads/layouts/VerticalFlexLayout.as    |  21 +-
 .../html/supportClasses/DataGridColumnList.as   |   1 +
 .../html/supportClasses/ScrollingViewport.as    |  13 +-
 .../HTML/src/main/resources/basic-manifest.xml  |   3 +-
 .../HTML/src/main/resources/defaults.css        |  15 +-
 17 files changed, 442 insertions(+), 711 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as 
b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
index 0d40ef5..0e7e052 100644
--- a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
+++ b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
@@ -167,7 +167,7 @@ internal class HTMLClasses
        import org.apache.flex.html.DataGridButtonBar; DataGridButtonBar;
        import org.apache.flex.html.beads.DataGridColumnView; 
DataGridColumnView;
        import org.apache.flex.html.beads.DataGridView; DataGridView;
-       import org.apache.flex.html.beads.layouts.DataGridLayout; 
DataGridLayout;
+       import org.apache.flex.html.beads.DataGridPercentageView; 
DataGridPercentageView;
        import org.apache.flex.html.beads.DateChooserView; DateChooserView;
        import org.apache.flex.html.beads.DateFieldView; DateFieldView;
        import org.apache.flex.html.beads.DecrementButtonView; 
DecrementButtonView;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
index 999b496..fda1b46 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGrid.as
@@ -41,7 +41,7 @@ package org.apache.flex.html
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
-       public class DataGrid extends UIBase
+       public class DataGrid extends Group
        {
                /**
                 *  constructor.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
index 990c3ab..3adb9de 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
@@ -112,14 +112,19 @@ package org.apache.flex.html.beads
                {
                        super.strand = value;
                        
+                       var host:UIBase = value as UIBase;
+                       
                        input = new TextInput();
-                       input.className = "ComboBoxTextInput";
-                       UIBase(host).addElement(input);
+                       input.className = "ComboBoxTextInput";                  
                        
                        button = new TextButton();
                        button.className = "ComboBoxButton";
                        button.text = '\u25BC';
-                       UIBase(host).addElement(button);
+                       
+                       if (isNaN(host.width)) input.width = 100;
+                       
+                       host.addElement(input);
+                       host.addElement(button);
                        
                        var popUpClass:Class = 
ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
                        list = new popUpClass() as UIBase;
@@ -157,12 +162,16 @@ package org.apache.flex.html.beads
                                var model:IComboBoxModel = 
_strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
                                list.model = model;
                                list.width = input.width;
+                               list.height = 200;
                                list.visible = true;
                                
                                var origin:Point = new Point(0, 
button.y+button.height);
                                var relocated:Point = 
PointUtils.localToGlobal(origin,_strand);
                                list.x = relocated.x
                                list.y = relocated.y;
+                               COMPILE::JS {
+                                       list.element.style.position = 
"absolute";
+                               }
                                
                                var popupHost:IPopUpHost = 
UIUtils.findPopUpHost(_strand as IUIBase);
                                popupHost.addElement(list);
@@ -178,9 +187,15 @@ package org.apache.flex.html.beads
                 */
                private function handleSizeChange(event:Event):void
                {
+                       var host:UIBase = UIBase(_strand);
+                       
                        input.x = 0;
                        input.y = 0;
-                       input.width = host.width - 20;
+                       if (host.isWidthSizedToContent()) {
+                               input.width = 100;
+                       } else {
+                               input.width = host.width - 20;
+                       }
                        
                        button.x = input.width;
                        button.y = 0;
@@ -188,10 +203,15 @@ package org.apache.flex.html.beads
                        button.height = input.height;
                        
                        COMPILE::JS {
-                               // because the strand is a <div> it does not 
have a size so one is
-                               // assigned here based on the max height of the 
two components.
-                               var element:Object = UIBase(_strand).element;
-                               element["style"]["height"] = 
String(Math.max(input.height,button.height)) + "px";
+                               input.element.style.position = "absolute";
+                               button.element.style.position = "absolute";
+                       }
+                               
+                       if (host.isHeightSizedToContent()) {
+                               host.height = input.height;
+                       }
+                       if (host.isWidthSizedToContent()) {
+                               host.width = input.width + button.width;
                        }
                }
                

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
new file mode 100644
index 0000000..fcf9154
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridPercentageView.as
@@ -0,0 +1,290 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.core.IBeadModel;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IDataGridModel;
+       import org.apache.flex.core.IDataGridPresentationModel;
+       import org.apache.flex.core.ISelectionModel;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.IUIBase;
+       import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.html.DataGrid;
+       import org.apache.flex.html.DataGridButtonBar;
+       import org.apache.flex.html.Container;
+       import org.apache.flex.html.beads.layouts.ButtonBarLayout;
+       import org.apache.flex.html.beads.models.ButtonBarModel;
+       import org.apache.flex.html.supportClasses.DataGridColumn;
+       import org.apache.flex.html.supportClasses.DataGridColumnList;
+       import org.apache.flex.html.supportClasses.Viewport;
+       
+       COMPILE::SWF {
+               import org.apache.flex.core.SimpleCSSStyles;
+       }
+
+       /**
+        *  The DataGridPercentageView class is the visual bead for the 
org.apache.flex.html.DataGrid.
+        *  This class constructs the items that make the DataGrid: Lists for 
each column and a
+        *  org.apache.flex.html.ButtonBar for the column headers. This class 
interprets the
+        *  columnWidth value of each column to be a percentage rather than a 
pixel value.
+        *
+        *  @viewbead
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class DataGridPercentageView extends GroupView implements 
IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function DataGridPercentageView()
+               {
+                       super();
+               }
+
+               private var _strand:IStrand;
+               private var _header:DataGridButtonBar;
+               private var _listArea:Container;
+               
+               private var _lists:Array;
+               
+               /**
+                * An array of List objects the comprise the columns of the 
DataGrid.
+                */
+               public function get columnLists():Array
+               {
+                       return _lists;
+               }
+               
+               /**
+                * The area used to hold the columns
+                *
+                */
+               public function get listArea():Container
+               {
+                       return _listArea;
+               }
+               
+               /**
+                * Returns the component used as the header for the DataGrid.
+                */
+               public function get header():IUIBase
+               {
+                       return _header;
+               }
+
+               /**
+                *  @copy org.apache.flex.core.IBead#strand
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               override public function set strand(value:IStrand):void
+               {
+                       super.strand = value;
+                       _strand = value;
+
+                       var host:DataGrid = value as DataGrid;
+
+                       _header = new DataGridButtonBar();
+                       _header.height = 30;
+
+                       _listArea = new Container();
+                       _listArea.className = "DataGridListArea";
+                       
+                       COMPILE::SWF {
+                               _header.style = new SimpleCSSStyles();
+                               _header.style.flexGrow = 0;
+                               
+                               _listArea.style = new SimpleCSSStyles();
+                               _listArea.style.flexGrow = 1;
+                       }
+                       COMPILE::JS {
+                               _header.element.style["flex-grow"] = "0";
+                               _listArea.element.style["flex-grow"] = "1";
+                       }
+
+                       finishSetup(null);
+               }
+
+               /**
+                * @private
+                */
+               private function finishSetup(event:Event):void
+               {
+                       var host:DataGrid = _strand as DataGrid;
+                       
+                       if (_lists == null || _lists.length == 0) {
+                               createLists();
+                       }
+
+                       // see if there is a presentation model already in 
place. if not, add one.
+                       var presentationModel:IDataGridPresentationModel = 
host.presentationModel;
+                       var sharedModel:IDataGridModel = host.model as 
IDataGridModel;
+                       
IEventDispatcher(sharedModel).addEventListener("dataProviderChanged",handleDataProviderChanged);
+                       
IEventDispatcher(sharedModel).addEventListener("selectedIndexChanged", 
handleSelectedIndexChanged);
+
+                       var columnLabels:Array = new Array();
+                       var buttonWidths:Array = new Array();
+
+                       for(var i:int=0; i < sharedModel.columns.length; i++) {
+                               var dgc:DataGridColumn = sharedModel.columns[i] 
as DataGridColumn;
+                               columnLabels.push(dgc.label);
+                               var colWidth:Number = dgc.columnWidth;
+                               buttonWidths.push(colWidth);
+                               
+                               var list:DataGridColumnList = _lists[i] as 
DataGridColumnList;
+                               if (!isNaN(colWidth)) {
+                                       list.percentWidth = Number(colWidth);
+                               } else {
+                                       COMPILE::SWF {
+                                               list.style = new 
SimpleCSSStyles();
+                                               list.style.flexGrow = 1;
+                                       }
+                                               COMPILE::JS {
+                                                       
list.element.style["flex-grow"] = "1";
+                                               }
+                               }
+                       }
+
+                       var bblayout:ButtonBarLayout = new ButtonBarLayout();
+                       _header.buttonWidths = buttonWidths
+                       _header.widthType = ButtonBarModel.PERCENT_WIDTHS;
+                       _header.dataProvider = columnLabels;
+                       _header.addBead(bblayout);
+                       _header.addBead(new Viewport());
+                       host.addElement(_header);
+
+                       host.addElement(_listArea);
+
+                       handleDataProviderChanged(event);
+               }
+
+               /**
+                * @private
+                */
+               private function handleSizeChanges(event:Event):void
+               {       
+                       _header.dispatchEvent(new Event("layoutChanged"));
+                       _listArea.dispatchEvent(new Event("layoutChanged"));
+               }
+
+               /**
+                * @private
+                */
+               private function handleDataProviderChanged(event:Event):void
+               {
+                       var sharedModel:IDataGridModel = 
_strand.getBeadByType(IBeadModel) as IDataGridModel;
+
+                       for (var i:int=0; i < _lists.length; i++)
+                       {
+                               var list:DataGridColumnList = _lists[i] as 
DataGridColumnList;
+                               var listModel:ISelectionModel = 
list.getBeadByType(IBeadModel) as ISelectionModel;
+                               listModel.dataProvider = 
sharedModel.dataProvider;
+                       }
+
+                       host.dispatchEvent(new Event("layoutNeeded"));
+               }
+               
+               /**
+                * @private
+                */
+               private function handleSelectedIndexChanged(event:Event):void
+               {
+                       var sharedModel:IDataGridModel = 
_strand.getBeadByType(IBeadModel) as IDataGridModel;
+                       var newIndex:int = sharedModel.selectedIndex;
+                       
+                       for (var i:int=0; i < _lists.length; i++)
+                       {
+                               var list:DataGridColumnList = _lists[i] as 
DataGridColumnList;
+                               list.selectedIndex = newIndex;
+                       }
+               }
+
+               /**
+                * @private
+                */
+               private function handleColumnListChange(event:Event):void
+               {
+                       var sharedModel:IDataGridModel = 
_strand.getBeadByType(IBeadModel) as IDataGridModel;
+                       var list:DataGridColumnList = event.target as 
DataGridColumnList;
+                       sharedModel.selectedIndex = list.selectedIndex;
+
+                       for(var i:int=0; i < _lists.length; i++) {
+                               if (list != _lists[i]) {
+                                       var otherList:DataGridColumnList = 
_lists[i] as DataGridColumnList;
+                                       otherList.selectedIndex = 
list.selectedIndex;
+                               }
+                       }
+
+                       host.dispatchEvent(new Event('change'));
+               }
+
+               /**
+                * @private
+                */
+               private function createLists():void
+               {
+                       var host:DataGrid = _strand as DataGrid;
+                       
+                       var sharedModel:IDataGridModel = host.model as 
IDataGridModel;
+                       var presentationModel:IDataGridPresentationModel = 
host.presentationModel;
+
+                       _lists = new Array();
+
+                       for (var i:int=0; i < sharedModel.columns.length; i++) {
+                               var dataGridColumn:DataGridColumn = 
sharedModel.columns[i] as DataGridColumn;
+
+                               var list:DataGridColumnList = new 
DataGridColumnList();
+                               list.id = "dataGridColumn"+String(i);
+                               list.addBead(sharedModel);
+                               list.itemRenderer = dataGridColumn.itemRenderer;
+                               list.labelField = dataGridColumn.dataField;
+                               
list.addEventListener('change',handleColumnListChange);
+                               list.addBead(presentationModel);
+                               
+                               if (i == 0) {
+                                       list.className = "first";
+                               } else if (i == sharedModel.columns.length-1) {
+                                       list.className = "last";
+                               } else {
+                                       list.className = "middle";
+                               }
+
+                               _listArea.addElement(list);
+                               _lists.push(list);
+                       }
+
+                       host.dispatchEvent(new Event("layoutNeeded"));
+               }
+       }
+}
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
index 6e2a8c5..bda0f01 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataGridView.as
@@ -18,17 +18,13 @@
 
////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.beads
 {
-       import org.apache.flex.core.IBead;
        import org.apache.flex.core.IBeadModel;
-       import org.apache.flex.core.IBeadLayout;
        import org.apache.flex.core.IBeadView;
        import org.apache.flex.core.IDataGridModel;
        import org.apache.flex.core.IDataGridPresentationModel;
-       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.UIBase;
        import org.apache.flex.core.ValuesManager;
        import org.apache.flex.events.Event;
        import org.apache.flex.events.IEventDispatcher;
@@ -36,14 +32,14 @@ package org.apache.flex.html.beads
        import org.apache.flex.html.DataGridButtonBar;
        import org.apache.flex.html.Container;
        import org.apache.flex.html.beads.layouts.ButtonBarLayout;
-       import org.apache.flex.html.beads.layouts.VerticalLayout;
-       import org.apache.flex.html.beads.layouts.HorizontalLayout;
-       import org.apache.flex.html.beads.layouts.IDataGridLayout;
        import org.apache.flex.html.beads.models.ButtonBarModel;
        import org.apache.flex.html.supportClasses.DataGridColumn;
        import org.apache.flex.html.supportClasses.DataGridColumnList;
-       import org.apache.flex.html.supportClasses.ScrollingViewport;
        import org.apache.flex.html.supportClasses.Viewport;
+       
+       COMPILE::SWF {
+               import org.apache.flex.core.SimpleCSSStyles;
+       }
 
        /**
         *  The DataGridView class is the visual bead for the 
org.apache.flex.html.DataGrid.
@@ -56,7 +52,7 @@ package org.apache.flex.html.beads
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
-       public class DataGridView implements IBeadView
+       public class DataGridView extends GroupView implements IBeadView
        {
                /**
                 *  constructor.
@@ -68,6 +64,7 @@ package org.apache.flex.html.beads
                 */
                public function DataGridView()
                {
+                       super();
                }
 
                private var _strand:IStrand;
@@ -92,14 +89,6 @@ package org.apache.flex.html.beads
                {
                        return _listArea;
                }
-
-               /**
-                * @private
-                */
-               public function get host():IUIBase
-               {
-                       return _strand as IUIBase;
-               }
                
                /**
                 * Returns the component used as the header for the DataGrid.
@@ -117,27 +106,29 @@ package org.apache.flex.html.beads
                 *  @playerversion AIR 2.6
                 *  @productversion FlexJS 0.0
                 */
-               public function set strand(value:IStrand):void
+               override public function set strand(value:IStrand):void
                {
+                       super.strand = value;
                        _strand = value;
 
-                       var host:UIBase = value as UIBase;
+                       var host:DataGrid = value as DataGrid;
 
                        _header = new DataGridButtonBar();
-
-                       var scrollPort:ScrollingViewport = new 
ScrollingViewport();
+                       _header.height = 30;
 
                        _listArea = new Container();
                        _listArea.className = "DataGridListArea";
-                       _listArea.addBead(scrollPort);
                        
-                       if (_strand.getBeadByType(IBeadLayout) == null) {
-                               var c:Class = 
ValuesManager.valuesImpl.getValue(host, "iBeadLayout");
-                               if (c)
-                               {
-                                       var layout:IBeadLayout = new c() as 
IBeadLayout;
-                                       _strand.addBead(layout);
-                               }
+                       COMPILE::SWF {
+                               _header.style = new SimpleCSSStyles();
+                               _header.style.flexGrow = 0;
+                               
+                               _listArea.style = new SimpleCSSStyles();
+                               _listArea.style.flexGrow = 1;
+                       }
+                       COMPILE::JS {
+                               _header.element.style["flex-grow"] = "0";
+                               _listArea.element.style["flex-grow"] = "1";
                        }
 
                        finishSetup(null);
@@ -149,6 +140,10 @@ package org.apache.flex.html.beads
                private function finishSetup(event:Event):void
                {
                        var host:DataGrid = _strand as DataGrid;
+                       
+                       if (_lists == null || _lists.length == 0) {
+                               createLists();
+                       }
 
                        // see if there is a presentation model already in 
place. if not, add one.
                        var presentationModel:IDataGridPresentationModel = 
host.presentationModel;
@@ -157,18 +152,37 @@ package org.apache.flex.html.beads
                        
IEventDispatcher(sharedModel).addEventListener("selectedIndexChanged", 
handleSelectedIndexChanged);
 
                        var columnLabels:Array = new Array();
+                       var buttonWidths:Array = new Array();
+                       
+                       var marginBorderOffset:int = 0;
+                       COMPILE::SWF {
+                               marginBorderOffset = 1;
+                       }
 
                        for(var i:int=0; i < sharedModel.columns.length; i++) {
                                var dgc:DataGridColumn = sharedModel.columns[i] 
as DataGridColumn;
                                columnLabels.push(dgc.label);
+                               var colWidth:Number = dgc.columnWidth - 
marginBorderOffset;
+                               buttonWidths.push(colWidth);
+                               
+                               var list:DataGridColumnList = _lists[i] as 
DataGridColumnList;
+                               if (!isNaN(colWidth)) {
+                                       list.width = Number(colWidth - 
marginBorderOffset);
+                               } else {
+                                       COMPILE::SWF {
+                                               list.style = new 
SimpleCSSStyles();
+                                               list.style.flexGrow = 1;
+                                       }
+                                               COMPILE::JS {
+                                                       
list.element.style["flex-grow"] = "1";
+                                               }
+                               }
                        }
 
                        var bblayout:ButtonBarLayout = new ButtonBarLayout();
-                       //var buttonBarModel:ButtonBarModel = new 
ButtonBarModel();
-                       //buttonBarModel.dataProvider = columnLabels;
-
+                       _header.buttonWidths = buttonWidths
+                       _header.widthType = ButtonBarModel.PIXEL_WIDTHS;
                        _header.dataProvider = columnLabels;
-                       //_header.addBead(buttonBarModel);
                        _header.addBead(bblayout);
                        _header.addBead(new Viewport());
                        host.addElement(_header);
@@ -183,11 +197,8 @@ package org.apache.flex.html.beads
                 */
                private function handleSizeChanges(event:Event):void
                {       
-                       var layoutBead:IDataGridLayout = 
_strand.getBeadByType(IBeadLayout) as IDataGridLayout;
-                       layoutBead.header = _header;
-                       layoutBead.columns = _lists;
-                       layoutBead.listArea = _listArea;
-                       layoutBead.layout();
+                       _header.dispatchEvent(new Event("layoutChanged"));
+                       _listArea.dispatchEvent(new Event("layoutChanged"));
                }
 
                /**
@@ -197,10 +208,6 @@ package org.apache.flex.html.beads
                {
                        var sharedModel:IDataGridModel = 
_strand.getBeadByType(IBeadModel) as IDataGridModel;
 
-                       if (_lists == null || _lists.length == 0) {
-                               createLists();
-                       }
-
                        for (var i:int=0; i < _lists.length; i++)
                        {
                                var list:DataGridColumnList = _lists[i] as 
DataGridColumnList;
@@ -254,7 +261,6 @@ package org.apache.flex.html.beads
                        
                        var sharedModel:IDataGridModel = host.model as 
IDataGridModel;
                        var presentationModel:IDataGridPresentationModel = 
host.presentationModel;
-                       //var listWidth:Number = host.width / 
sharedModel.columns.length;
 
                        _lists = new Array();
 
@@ -268,6 +274,14 @@ package org.apache.flex.html.beads
                                list.labelField = dataGridColumn.dataField;
                                
list.addEventListener('change',handleColumnListChange);
                                list.addBead(presentationModel);
+                               
+                               if (i == 0) {
+                                       list.className = "first";
+                               } else if (i == sharedModel.columns.length-1) {
+                                       list.className = "last";
+                               } else {
+                                       list.className = "middle";
+                               }
 
                                _listArea.addElement(list);
                                _lists.push(list);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
index ab9fd89..cb8402f 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.as
@@ -145,7 +145,7 @@ package org.apache.flex.html.beads
                        {
                                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/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
index b381b5b..a3d3dc2 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/ComboBoxController.as
@@ -58,12 +58,12 @@ package org.apache.flex.html.beads.controllers
                        }
                        
                        
IEventDispatcher(viewBead.popupButton).addEventListener("click", 
handleButtonClick);
-                       
IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
                }
                
                private function handleButtonClick(event:MouseEvent):void
                {                       
                        viewBead.popUpVisible = !viewBead.popUpVisible;
+                       
IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
                }
                
                private function handleListChange(event:Event):void

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
index 0d3668d..761e1c7 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
@@ -18,25 +18,28 @@
 
////////////////////////////////////////////////////////////////////////////////
 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.ILayoutView;
        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.core.SimpleCSSStyles;
        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
@@ -111,6 +114,10 @@ package org.apache.flex.html.beads.layouts
 
                                                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) 
{
@@ -122,6 +129,10 @@ package org.apache.flex.html.beads.layouts
                                                }
                                                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) {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
deleted file mode 100644
index cc37382..0000000
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridLayout.as
+++ /dev/null
@@ -1,271 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.flex.html.beads.layouts
-{      
-       import org.apache.flex.core.IBead;
-       import org.apache.flex.core.IBeadLayout;
-       import org.apache.flex.core.IBeadModel;
-       import org.apache.flex.core.IBeadView;
-       import org.apache.flex.core.IDataGridModel;
-       import org.apache.flex.core.ILayoutHost;
-       import org.apache.flex.core.IStrand;
-       import org.apache.flex.core.IUIBase;
-       import org.apache.flex.core.UIBase;
-       import org.apache.flex.events.Event;
-       import org.apache.flex.events.IEventDispatcher;
-       import org.apache.flex.html.ButtonBar;
-       import org.apache.flex.html.beads.DataGridView;
-       import org.apache.flex.html.beads.layouts.BasicLayout;
-       import org.apache.flex.html.beads.models.ButtonBarModel;
-       import org.apache.flex.html.supportClasses.DataGridColumnList;
-       import org.apache.flex.html.supportClasses.DataGridColumn;
-       
-       /**
-        * DataGridLayout is a class that handles the size and positioning of 
the
-        * elements of a DataGrid. This includes the ButtonBar used for the 
column
-        * headers and the Lists that are the columns.
-        *  
-        *  @langversion 3.0
-        *  @playerversion Flash 10.2
-        *  @playerversion AIR 2.6
-        *  @productversion FlexJS 0.0
-        */
-       public class DataGridLayout implements IDataGridLayout
-       {
-               /**
-                *  constructor
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function DataGridLayout()
-               {
-               }
-               
-               private var _strand:IStrand;
-               
-               /**
-                *  @copy org.apache.flex.core.IBead#strand
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function set strand(value:IStrand):void
-               {
-                       _strand = value;
-                       
-                       var host:UIBase = value as UIBase;
-                       
-                       var view:DataGridView = host.view as DataGridView;
-                       
-                       header = view.header;
-                       listArea = view.listArea;
-                       
-                       var anylayout:IBead = 
listArea.getBeadByType(IBeadLayout);
-                       if (anylayout != null) {
-                               listArea.removeBead(anylayout);
-                       }
-                       listArea.addBead(new BasicLayout());
-                       
-                       host.addEventListener("widthChanged", 
handleSizeChanges);
-                       host.addEventListener("heightChanged", 
handleSizeChanges);
-                       host.addEventListener("sizeChanged", handleSizeChanges);
-                       host.addEventListener("layoutNeeded", 
handleSizeChanges);
-               }
-               
-               private var _header:UIBase;
-               
-               /**
-                * The element that is the header for the DataGrid
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function get header():IUIBase
-               {
-                       return _header;
-               }
-               public function set header(value:IUIBase):void
-               {
-                       _header = UIBase(value);
-               }
-               
-               private var _columns:Array;
-               
-               /**
-                * The array of column elements.
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function get columns():Array
-               {
-                       return _columns;
-               }
-               public function set columns(value:Array):void
-               {
-                       _columns = value;
-               }
-               
-               private var _listArea:IUIBase;
-               
-               public function get listArea():IUIBase
-               {
-                       return _listArea;
-               }
-               public function set listArea(value:IUIBase):void
-               {
-                       _listArea = value;
-               }
-               
-        /**
-         * @copy org.apache.flex.core.IBeadLayout#layout
-         */
-               COMPILE::SWF
-               public function layout():Boolean
-               {                                               
-                       if (columns == null || columns.length == 0) {
-                               return false;
-                       }
-                       var host:UIBase = _strand as UIBase;
-                       
-                       var useWidth:Number = host.width;
-                       var useHeight:Number = host.height;
-
-                       if (host.height > 0) {
-                               useHeight = host.height - _header.height;
-                       }
-                       
-                       _listArea.x = 0;
-                       _listArea.y = 26;
-                       _listArea.width = useWidth;
-                       _listArea.height = useHeight;
-
-                       var sharedModel:IDataGridModel = host.model as 
IDataGridModel;
-                       var buttonWidths:Array = [];
-
-                       if (_columns != null && _columns.length > 0) {
-                               var xpos:Number = 0;
-                               var listWidth:Number = host.width / 
_columns.length;
-                               for (var i:int=0; i < _columns.length; i++) {
-                                       var list:DataGridColumnList = 
_columns[i] as DataGridColumnList;
-                                       list.x = xpos;
-                                       list.y = 0;
-
-                                       var dataGridColumn:DataGridColumn = 
sharedModel.columns[i] as DataGridColumn;
-                                       var colWidth:Number = 
dataGridColumn.columnWidth;
-                                       if (!isNaN(colWidth)) list.width = 
colWidth;
-                                       else list.width = listWidth;
-
-                                       xpos += list.width;
-                                       
-                                       buttonWidths.push(list.width);
-                               }
-                       }
-                       
-                       var bar:ButtonBar = header as ButtonBar;
-                       bar.buttonWidths = buttonWidths;
-                       bar.widthType = ButtonBarModel.PIXEL_WIDTHS;
-                       bar.dispatchEvent(new Event("layoutNeeded"));
-                       
-                       _header.x = 0;
-                       _header.y = 0;
-                       _header.width = useWidth;
-                       _header.height = 25;
-                       _header.dispatchEvent(new Event("layoutNeeded"));
-                       
-                       return true;
-               }
-               
-               /**
-                * @copy org.apache.flex.core.IBeadLayout#layout
-                */
-               COMPILE::JS
-               public function layout():Boolean
-               {                                               
-                       if (columns == null || columns.length == 0) {
-                               return false;
-                       }
-                       var host:UIBase = _strand as UIBase;
-                       
-                       var sharedModel:IDataGridModel = host.model as 
IDataGridModel;
-                       var buttonWidths:Array = [];
-                       
-                       if (_columns != null && _columns.length > 0) {
-                               var listWidth:Number = host.width / 
_columns.length;
-                               for (var i:int=0; i < _columns.length; i++) {
-                                       var list:DataGridColumnList = 
_columns[i] as DataGridColumnList;
-                                       list.element.style["position"] = null;
-                                       list.element.style["height"] = null;
-                                       
-                                       
-                                       var dataGridColumn:DataGridColumn = 
sharedModel.columns[i] as DataGridColumn;
-                                       var colWidth:Number = 
dataGridColumn.columnWidth;
-                                       if (!isNaN(colWidth)) list.width = 
colWidth;
-                                       else list.width = listWidth;
-                                                                               
-                                       buttonWidths.push(list.width);
-                               }
-                       }
-                       
-                       var bar:ButtonBar = header as ButtonBar;
-                       bar.buttonWidths = buttonWidths;
-                       bar.widthType = ButtonBarModel.PIXEL_WIDTHS;
-                       bar.dispatchEvent(new Event("layoutNeeded"));
-                       
-                       host.element.style.display = "flex";
-                       host.element.style["flex-flow"] = "column";
-                       host.element.style["justify-content"] = "stretch";
-                       
-                       _header.height = 25;
-                       _header.percentWidth = 100;
-                       
-                       _listArea.element.style["flex-grow"] = "2";
-                       _listArea.element.style["position"] = null;
-                       _listArea.element.style["height"] = null;
-                       
-                       var listView:ILayoutHost = UIBase(_listArea).view as 
ILayoutHost;
-                       listView.contentView.element.style["display"] = "flex";
-                       listView.contentView.element.style["flex-flow"] = "row";
-                       
-                       return true;
-               }
-               
-               /**
-                * @private
-                */
-               private function handleSizeChanges(event:Event):void
-               {
-                       var view:DataGridView = UIBase(_strand).view as 
DataGridView;
-                       if (view == null) return;
-                       
-                       columns = view.columnLists;
-                       
-                       layout();
-               }
-       }
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
deleted file mode 100644
index 907cf9d..0000000
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/DataGridPercentageLayout.as
+++ /dev/null
@@ -1,303 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.flex.html.beads.layouts
-{      
-       import org.apache.flex.core.IBead;
-       import org.apache.flex.core.IBeadLayout;
-       import org.apache.flex.core.IBeadView;
-       import org.apache.flex.core.IDataGridModel;
-       import org.apache.flex.core.ILayoutHost;
-       import org.apache.flex.core.IStrand;
-       import org.apache.flex.core.IUIBase;
-       import org.apache.flex.core.UIBase;
-       import org.apache.flex.events.Event;
-       import org.apache.flex.events.IEventDispatcher;
-       import org.apache.flex.html.ButtonBar;
-       import org.apache.flex.html.beads.DataGridView;
-       import org.apache.flex.html.beads.layouts.HorizontalLayout;
-       import org.apache.flex.html.beads.models.ButtonBarModel;
-       import org.apache.flex.html.supportClasses.DataGridColumnList;
-       import org.apache.flex.html.supportClasses.DataGridColumn;
-       
-       /**
-        * DataGridPercentageLayout is a class that handles the size and 
positioning of the
-        * elements of a DataGrid. This includes the ButtonBar used for the 
column
-        * headers and the Lists that are the columns. The columns are sized on 
their
-        * percentage of the width of the DataGrid space.
-        *  
-        *  @langversion 3.0
-        *  @playerversion Flash 10.2
-        *  @playerversion AIR 2.6
-        *  @productversion FlexJS 0.0
-        */
-       public class DataGridPercentageLayout implements IDataGridLayout
-       {
-               /**
-                *  constructor
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function DataGridPercentageLayout()
-               {
-               }
-               
-               private var _strand:IStrand;
-               
-               /**
-                *  @copy org.apache.flex.core.IBead#strand
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function set strand(value:IStrand):void
-               {
-                       _strand = value;
-                       
-                       var host:UIBase = value as UIBase;
-                       
-                       var view:DataGridView = host.view as DataGridView;
-                       
-                       header = view.header;
-                       listArea = view.listArea;
-                       
-                       var anylayout:IBead = 
listArea.getBeadByType(IBeadLayout);
-                       if (anylayout != null) {
-                               listArea.removeBead(anylayout);
-                       }
-                       listArea.addBead(new BasicLayout());
-                       
-                       host.addEventListener("widthChanged", 
handleSizeChanges);
-                       host.addEventListener("heightChanged", 
handleSizeChanges);
-                       host.addEventListener("sizeChanged", handleSizeChanges);
-                       host.addEventListener("layoutNeeded", 
handleSizeChanges);
-                       
-                       // listen for beadsAdded to signal that the strand is 
set with its size
-                       // and beads.
-                       host.addEventListener("beadsAdded", beadsAddedHandler);
-               }
-               
-               private var runNeeded:Boolean = false;
-               private var hostReady:Boolean = false;
-               
-               private var _header:UIBase;
-               
-               /**
-                * The element that is the header for the DataGrid
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function get header():IUIBase
-               {
-                       return _header;
-               }
-               public function set header(value:IUIBase):void
-               {
-                       _header = UIBase(value);
-               }
-               
-               private var _columns:Array;
-               
-               /**
-                * The array of column elements.
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function get columns():Array
-               {
-                       return _columns;
-               }
-               public function set columns(value:Array):void
-               {
-                       _columns = value;
-               }
-               
-               private var _listArea:IUIBase;
-               
-               public function get listArea():IUIBase
-               {
-                       return _listArea;
-               }
-               public function set listArea(value:IUIBase):void
-               {
-                       _listArea = value;
-               }
-               
-               private function beadsAddedHandler(event:Event):void
-               {
-                       var host:UIBase = _strand as UIBase;
-                       
-                       var useWidth:Number = host.width;
-                       var useHeight:Number = host.height;
-                       
-                       hostReady = true;
-                       if (runNeeded) {
-                               runNeeded = false;
-                               layout();
-                       }
-               }
-               
-               /**
-                * @copy org.apache.flex.core.IBeadLayout#layout
-                */
-               COMPILE::SWF
-               public function layout():Boolean
-               {                       
-                       if (!hostReady) {
-                               runNeeded = true;
-                               return false;
-                       }
-                       
-                       if (columns == null || columns.length == 0) {
-                               return false;
-                       }
-                       var host:UIBase = _strand as UIBase;
-                       
-                       var useWidth:Number = host.width;
-                       var useHeight:Number = host.height;
-                       
-                       if (host.height > 0) {
-                               useHeight = host.height - _header.height;
-                       }
-                       
-                       _listArea.x = 0;
-                       _listArea.y = 26;
-                       _listArea.width = useWidth;
-                       _listArea.height = useHeight;
-                       
-                       var sharedModel:IDataGridModel = host.model as 
IDataGridModel;
-                       var buttonWidths:Array = [];
-                       
-                       if (_columns != null && _columns.length > 0) {
-                               var xpos:Number = 0;
-                               var listWidth:Number = host.width / 
_columns.length;
-                               for (var i:int=0; i < _columns.length; i++) {
-                                       var list:DataGridColumnList = 
_columns[i] as DataGridColumnList;
-                                       list.x = xpos;
-                                       list.y = 0;
-                                       
-                                       var dataGridColumn:DataGridColumn = 
sharedModel.columns[i] as DataGridColumn;
-                                       var colWidth:Number = 
dataGridColumn.columnWidth;
-                                       if (!isNaN(colWidth)) {
-                                               list.percentWidth = colWidth;
-                                               colWidth = host.width * 
(colWidth/100.0);
-                                       }
-                                       else {
-                                               list.width = listWidth;
-                                               colWidth = listWidth;
-                                       }
-                                       
-                                       xpos += colWidth;
-                                       
-                                       buttonWidths.push(colWidth);
-                               }
-                       }
-                       
-                       var bar:ButtonBar = header as ButtonBar;
-                       bar.buttonWidths = buttonWidths;
-                       bar.widthType = ButtonBarModel.PERCENT_WIDTHS;
-                       bar.dispatchEvent(new Event("layoutNeeded"));
-                       
-                       _header.x = 0;
-                       _header.y = 0;
-                       _header.width = useWidth;
-                       _header.height = 25;
-                       _header.dispatchEvent(new Event("layoutNeeded"));
-                       
-                       return true;
-               }
-               
-               /**
-                * @copy org.apache.flex.core.IBeadLayout#layout
-                */
-               COMPILE::JS
-               public function layout():Boolean
-               {                                               
-                       if (columns == null || columns.length == 0) {
-                               return false;
-                       }
-                       var host:UIBase = _strand as UIBase;
-                       
-                       var sharedModel:IDataGridModel = host.model as 
IDataGridModel;
-                       var buttonWidths:Array = [];
-                       
-                       if (_columns != null && _columns.length > 0) {
-                               var listWidth:Number = host.width / 
_columns.length;
-                               for (var i:int=0; i < _columns.length; i++) {
-                                       var list:DataGridColumnList = 
_columns[i] as DataGridColumnList;
-                                       list.element.style["position"] = null;
-                                       list.element.style["height"] = null;
-                                       
-                                       
-                                       var dataGridColumn:DataGridColumn = 
sharedModel.columns[i] as DataGridColumn;
-                                       var colWidth:Number = 
dataGridColumn.columnWidth;
-                                       if (!isNaN(colWidth)) list.percentWidth 
= colWidth;
-                                       else list.width = listWidth;
-                                       
-                                       buttonWidths.push(list.width);
-                               }
-                       }
-                       
-                       var bar:ButtonBar = header as ButtonBar;
-                       bar.buttonWidths = buttonWidths;
-                       bar.widthType = ButtonBarModel.PERCENT_WIDTHS;
-                       bar.dispatchEvent(new Event("layoutNeeded"));
-                       
-                       host.element.style.display = "flex";
-                       host.element.style["flex-flow"] = "column";
-                       host.element.style["justify-content"] = "stretch";
-                       
-                       _header.height = 25;
-                       _header.percentWidth = 100;
-                       
-                       _listArea.element.style["flex-grow"] = "2";
-                       _listArea.element.style["position"] = null;
-                       _listArea.element.style["height"] = null;
-                       
-                       var listView:ILayoutHost = UIBase(_listArea).view as 
ILayoutHost;
-                       listView.contentView.element.style["display"] = "flex";
-                       listView.contentView.element.style["flex-flow"] = "row";
-                       
-                       return true;
-               }
-               
-               /**
-                * @private
-                */
-               private function handleSizeChanges(event:Event):void
-               {
-                       var view:DataGridView = UIBase(_strand).view as 
DataGridView;
-                       if (view == null) return;
-                       
-                       columns = view.columnLists;
-                       
-                       layout();
-               }
-       }
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
index cb820a6..aec7308 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalFlexLayout.as
@@ -133,6 +133,8 @@ package org.apache.flex.html.beads.layouts
                                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);
@@ -159,18 +161,19 @@ package org.apache.flex.html.beads.layouts
                                        }
 
                                        var useHeight:Number = -1;
-                                       if (ilc) {
-                                               if (!isNaN(ilc.explicitHeight)) 
useHeight = ilc.explicitHeight;
-                                               else if 
(!isNaN(ilc.percentHeight)) useHeight = hostHeight * (ilc.percentHeight/100.0);
-                                               else useHeight = hostHeight;
+                                       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;
+                                               }
                                        }
-                                       if (useHeight > hostHeight) 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 useWidth = ilc.width;
+                                               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;
@@ -191,12 +194,12 @@ package org.apache.flex.html.beads.layouts
                                {
                                        child = contentView.getElementAt(i) as 
IUIBase;
                                        data = childData[i];
-                                       if (data.width == 0 || data.height == 
0) continue;
+                                       //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.width != 0) {
                                                if (data.grow > 0 && growCount 
> 0) {
                                                        useWidth = 
remainingWidth / growCount;
                                                        setWidth = false;
@@ -211,7 +214,9 @@ package org.apache.flex.html.beads.layouts
                                        if (ilc) {
                                                ilc.setX(xpos + data.ml);
                                                ilc.setY(ypos + data.mt);
-                                               ilc.height = useHeight; 
//setHeight(useHeight);
+                                               if (data.height > 0) {
+                                                       ilc.height = useHeight; 
//setHeight(useHeight);
+                                               }
                                                if (useWidth > 0) {
                                                        if (setWidth) 
ilc.setWidth(useWidth);
                                                        else ilc.width = 
useWidth;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
deleted file mode 100644
index 2f22ec4..0000000
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/IDataGridLayout.as
+++ /dev/null
@@ -1,52 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.flex.html.beads.layouts
-{      
-       import org.apache.flex.core.IBeadLayout;
-       import org.apache.flex.core.IDataGridModel;
-       import org.apache.flex.core.IStrand;
-       import org.apache.flex.core.IUIBase;
-       import org.apache.flex.core.UIBase;
-       import org.apache.flex.events.Event;
-       import org.apache.flex.events.IEventDispatcher;
-       import org.apache.flex.html.ButtonBar;
-       import org.apache.flex.html.supportClasses.DataGridColumn;
-       
-       /**
-        * DataGridLayout is a class that handles the size and positioning of 
the
-        * elements of a DataGrid. This includes the ButtonBar used for the 
column
-        * headers and the Lists that are the columns.
-        *  
-        *  @langversion 3.0
-        *  @playerversion Flash 10.2
-        *  @playerversion AIR 2.6
-        *  @productversion FlexJS 0.0
-        */
-       public interface IDataGridLayout extends IBeadLayout
-       {
-               function get header():IUIBase;
-               function set header(value:IUIBase):void;
-               
-               function get columns():Array;
-               function set columns(value:Array):void;
-               
-               function get listArea():IUIBase;
-               function set listArea(value:IUIBase):void;
-       }
-}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
index 0bc9dcc..e41d9c4 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
@@ -159,18 +159,19 @@ package org.apache.flex.html.beads.layouts
                                        }
 
                                        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 useWidth = hostWidth;
+                                       if (!hostWidthSizedToContent) {
+                                               if (ilc) {
+                                                       if 
(!isNaN(ilc.percentWidth)) useWidth = hostWidth * (ilc.percentWidth/100.0);
+                                                       else if 
(!isNaN(ilc.explicitWidth)) useWidth = ilc.explicitWidth;
+                                                       else useWidth = 
hostWidth;
+                                               }
                                        }
-                                       if (useWidth > hostWidth) useWidth = 
hostWidth;
 
                                        var useHeight:Number = -1;
                                        if (ilc) {
                                                if (!isNaN(ilc.explicitHeight)) 
useHeight = ilc.explicitHeight;
                                                else if 
(!isNaN(ilc.percentHeight)) useHeight = hostHeight * (ilc.percentHeight/100.0);
-                                               else useHeight = ilc.height;
+                                               else if (ilc.height > 0) 
useHeight = ilc.height;
                                        }
                                        if (growValue == 0 && useHeight > 0) 
remainingHeight -= useHeight + margins.top + margins.bottom;
                                        else remainingHeight -= margins.top + 
margins.bottom;
@@ -191,12 +192,12 @@ package org.apache.flex.html.beads.layouts
                                {
                                        child = contentView.getElementAt(i) as 
IUIBase;
                                        data = childData[i];
-                                       if (data.width == 0 || data.height == 
0) continue;
+                                       //if (data.width == 0 || data.height == 
0) continue;
 
                                        useWidth = (data.width < 0 ? maxWidth : 
data.width);
 
                                        var setHeight:Boolean = true;
-                                       if (data.height > 0) {
+                                       if (data.height != 0) {
                                                if (data.grow > 0 && growCount 
> 0) {
                                                        useHeight = 
remainingHeight / growCount;
                                                        setHeight = false;
@@ -211,7 +212,9 @@ package org.apache.flex.html.beads.layouts
                                        if (ilc) {
                                                ilc.setX(xpos + data.ml);
                                                ilc.setY(ypos + data.mt);
-                                               ilc.width = useWidth; 
//setWidth(useWidth);
+                                               if (data.width > 0) {
+                                                       ilc.width = useWidth; 
//setWidth(useWidth);
+                                               }
                                                if (useHeight > 0) {
                                                        if (setHeight) 
ilc.setHeight(useHeight);
                                                        else ilc.height = 
useHeight;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
index bb0fa65..e612517 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridColumnList.as
@@ -56,6 +56,7 @@ package org.apache.flex.html.supportClasses
                public function DataGridColumnList()
                {
                        super();
+                       typeNames = "DataGridColumnList";
                }
        }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
index a58b036..fe254fe 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
@@ -32,6 +32,7 @@ package org.apache.flex.html.supportClasses
         import org.apache.flex.core.IViewportScroller;
                import org.apache.flex.utils.CSSContainerUtils;
                import flash.geom.Rectangle;
+               import org.apache.flex.geom.Rectangle;
     }
        import org.apache.flex.core.UIBase;
        import org.apache.flex.events.Event;
@@ -127,6 +128,7 @@ package org.apache.flex.html.supportClasses
                 */
                public function ScrollingViewport()
                {
+                       super();
                }
 
                private var _verticalScroller:ScrollBar;
@@ -191,6 +193,11 @@ package org.apache.flex.html.supportClasses
                        var hostWidth:Number = UIBase(_strand).width;
                        var hostHeight:Number = UIBase(_strand).height;
                        
+                       var borderMetrics:org.apache.flex.geom.Rectangle = 
CSSContainerUtils.getBorderMetrics(_strand);
+                       
+                       hostWidth -= borderMetrics.left + borderMetrics.right;
+                       hostHeight -= borderMetrics.top + borderMetrics.bottom;
+                       
                        var needV:Boolean = contentSize.height > viewportHeight;
                        var needH:Boolean = contentSize.width > viewportWidth;
                        
@@ -212,8 +219,8 @@ package org.apache.flex.html.supportClasses
                        if (needV)
                        {
                                _verticalScroller.visible = true;
-                               _verticalScroller.x = hostWidth - 
_verticalScroller.width;
-                               _verticalScroller.y = 0;
+                               _verticalScroller.x = UIBase(_strand).width - 
borderMetrics.right - _verticalScroller.width;
+                               _verticalScroller.y = borderMetrics.top;
                                _verticalScroller.setHeight(hostHeight - (needH 
? _horizontalScroller.height : 0), true);
                                
                                ScrollBarModel(_verticalScroller.model).maximum 
= contentSize.height;
@@ -232,7 +239,7 @@ package org.apache.flex.html.supportClasses
                        {
                                _horizontalScroller.visible = true;
                                _horizontalScroller.x = 0;
-                               _horizontalScroller.y = hostHeight - 
_horizontalScroller.height - 1;
+                               _horizontalScroller.y = UIBase(_strand).height 
- borderMetrics.bottom - _horizontalScroller.height;
                                _horizontalScroller.setWidth(hostWidth - (needV 
? _verticalScroller.width : 0), true);
                                
                                
ScrollBarModel(_horizontalScroller.model).maximum = contentSize.width;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml 
b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
index 53e4a63..d2e8efb 100644
--- a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
@@ -124,8 +124,7 @@
     <component id="DataGridColumn" 
class="org.apache.flex.html.supportClasses.DataGridColumn"/>
     <component id="DataGridLinesBead" 
class="org.apache.flex.html.beads.DataGridLinesBead"/>
     <component id="DataGridColumnList" 
class="org.apache.flex.html.supportClasses.DataGridColumnList"/>
-    <component id="DataGridLayout" 
class="org.apache.flex.html.beads.layouts.DataGridLayout" />
-    <component id="DataGridPercentageLayout" 
class="org.apache.flex.html.beads.layouts.DataGridPercentageLayout" />
+    <component id="DataGridPercentageView" 
class="org.apache.flex.html.beads.DataGridPercentageView" />
     
     <component id="DataItemRendererFactoryForArrayData" 
class="org.apache.flex.html.beads.DataItemRendererFactoryForArrayData" />
     <component id="DataItemRendererFactoryForArrayList" 
class="org.apache.flex.html.beads.DataItemRendererFactoryForArrayList" />

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b67636a3/frameworks/projects/HTML/src/main/resources/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/resources/defaults.css 
b/frameworks/projects/HTML/src/main/resources/defaults.css
index 999fb82..2a23422 100644
--- a/frameworks/projects/HTML/src/main/resources/defaults.css
+++ b/frameworks/projects/HTML/src/main/resources/defaults.css
@@ -114,9 +114,15 @@ ComboBox
 
 ComboBoxList
 {
+       IBeadModel: 
ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+       IBeadView:  ClassReference("org.apache.flex.html.beads.ListView");      
                
+       IBeadController: 
ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
+       IBeadLayout: 
ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout");
        IDataProviderItemRendererMapper: 
ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
        IItemRendererClassFactory: 
ClassReference("org.apache.flex.core.ItemRendererClassFactory");
        IItemRenderer: 
ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
+       IViewport: 
ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+       IViewportModel: 
ClassReference("org.apache.flex.html.beads.models.ViewportModel");
        border-style: solid;
        border-radius: 4px;
        border-color: #000000;
@@ -169,7 +175,7 @@ DataGrid
        IDataGridPresentationModel: 
ClassReference("org.apache.flex.html.beads.models.DataGridPresentationModel");
        IBeadView: ClassReference("org.apache.flex.html.beads.DataGridView");
        IBeadModel: 
ClassReference("org.apache.flex.html.beads.models.DataGridModel");
-       IBeadLayout: 
ClassReference("org.apache.flex.html.beads.layouts.DataGridLayout");
+       IBeadLayout: 
ClassReference("org.apache.flex.html.beads.layouts.VerticalFlexLayout");
        
        background-color: #FFFFFF;
        border-style: solid;
@@ -206,8 +212,9 @@ DataGridColumnList {
 
 .DataGridListArea {
        background-color: #FFFFFF;
-       border-style: solid;
-       border-color: #333333;
+       IBeadLayout: 
ClassReference("org.apache.flex.html.beads.layouts.HorizontalLayout");
+       IViewport: 
ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+       IViewportModel: 
ClassReference("org.apache.flex.html.beads.models.ViewportModel");
 }
 
 /* DateChooser */
@@ -441,7 +448,7 @@ Spinner
 StringItemRenderer
 {
        IBeadController: 
ClassReference("org.apache.flex.html.beads.controllers.ItemRendererMouseController");
-       height: 16;
+       height: 24;
        flex-shrink: 0;
        flex-grow: 1;
 }

Reply via email to