http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Slider.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Slider.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Slider.as
index e7b639c..fc2889b 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Slider.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Slider.as
@@ -24,21 +24,21 @@ package org.apache.flex.html
     COMPILE::JS
     {
         import org.apache.flex.html.beads.controllers.SliderMouseController;
-        import org.apache.flex.core.WrappedHTMLElement;            
+        import org.apache.flex.core.WrappedHTMLElement;
     }
 
        [Event(name="valueChange", type="org.apache.flex.events.Event")]
-       
+
        /**
         *  The Slider class is a component that displays a range of values 
using a
         *  track and a thumb control. The Slider uses the following bead types:
-        * 
+        *
         *  org.apache.flex.core.IBeadModel: the data model, typically an 
IRangeModel, that holds the Slider values.
         *  org.apache.flex.core.IBeadView:  the bead that constructs the 
visual parts of the Slider.
         *  org.apache.flex.core.IBeadController: the bead that handles input.
         *  org.apache.flex.core.IThumbValue: the bead responsible for the 
display of the thumb control.
         *  org.apache.flex.core.ITrackView: the bead responsible for the 
display of the track.
-        *  
+        *
      *  @toplevel
         *  @langversion 3.0
         *  @playerversion Flash 10.2
@@ -58,16 +58,16 @@ package org.apache.flex.html
                public function Slider()
                {
                        super();
-                       
+
                        className = "Slider";
-                       
+
                        IRangeModel(model).value = 0;
                        IRangeModel(model).minimum = 0;
                        IRangeModel(model).maximum = 100;
                        IRangeModel(model).stepSize = 1;
                        IRangeModel(model).snapInterval = 1;
                }
-               
+
                /**
                 *  The current value of the Slider.
                 *
@@ -84,7 +84,7 @@ package org.apache.flex.html
                {
                        IRangeModel(model).value = newValue;
                }
-               
+
                /**
                 *  The minimum value of the Slider.
                 *
@@ -101,7 +101,7 @@ package org.apache.flex.html
                {
                        IRangeModel(model).minimum = value;
                }
-               
+
                /**
                 *  The maximum value of the Slider.
                 *
@@ -118,7 +118,7 @@ package org.apache.flex.html
                {
                        IRangeModel(model).maximum = value;
                }
-               
+
                /**
                 *  The modulus of the Slider value. The thumb will be 
positioned
                 *  at the nearest multiple of this value.
@@ -136,7 +136,7 @@ package org.apache.flex.html
                {
                        IRangeModel(model).snapInterval = value;
                }
-        
+
                /**
                 *  The amount to move the thumb when the track is selected. 
This value is
                 *  adjusted to fit the nearest snapInterval.
@@ -154,7 +154,7 @@ package org.apache.flex.html
         {
             IRangeModel(model).stepSize = value;
         }
-               
+
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          */
@@ -162,20 +162,20 @@ package org.apache.flex.html
         override protected function createElement():WrappedHTMLElement
         {
             element = document.createElement('div') as WrappedHTMLElement;
-                       
+
                        // just to give it some default values
             element.style.width = '100px';
             element.style.height = '30px';
-            
+
             positioner = element;
-            positioner.style.position = 'relative';
+            //positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
-            
+
             className = 'Slider';
-            
+
             return element;
-        } 
-        
+        }
+
         /**
                 * @private
          */
@@ -194,6 +194,6 @@ package org.apache.flex.html
             if (value - n > n + si - value)
                 return n + si;
             return n;
-        }   
+        }
     }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Spinner.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Spinner.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Spinner.as
index 0b15260..2cc160e 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Spinner.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Spinner.as
@@ -156,7 +156,7 @@ package org.apache.flex.html
         {
             element = document.createElement('div') as WrappedHTMLElement;
             positioner = element;
-            positioner.style.position = 'relative';
+            //positioner.style.position = 'relative';
 
             element.style.verticalAlign = 'middle';
             element.flexjs_wrapper = this;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextArea.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextArea.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextArea.as
index c912dd4..2eb9c72 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextArea.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextArea.as
@@ -25,7 +25,7 @@ package org.apache.flex.html
     COMPILE::JS
     {
         import goog.events;
-        import org.apache.flex.core.WrappedHTMLElement;            
+        import org.apache.flex.core.WrappedHTMLElement;
     }
 
     /**
@@ -41,18 +41,18 @@ package org.apache.flex.html
     /**
      *  The TextArea class implements the basic control for
      *  multi-line text input.
-     *  
+     *
      *  @toplevel
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
-     */    
+     */
        public class TextArea extends UIBase
        {
         /**
          *  Constructor.
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -67,10 +67,10 @@ package org.apache.flex.html
                 model.addEventListener("textChange", textChangeHandler);
             }
                }
-               
+
         /**
          *  @copy org.apache.flex.html.Label#text
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -82,7 +82,7 @@ package org.apache.flex.html
                {
             COMPILE::SWF
             {
-                return ITextModel(model).text;                    
+                return ITextModel(model).text;
             }
             COMPILE::JS
             {
@@ -108,10 +108,10 @@ package org.apache.flex.html
                 dispatchEvent(new Event('textChange'));
             }
                }
-               
+
         /**
          *  @copy org.apache.flex.html.Label#html
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -145,7 +145,7 @@ package org.apache.flex.html
                 dispatchEvent(new Event('textChange'));
             }
                }
-               
+
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          */
@@ -154,14 +154,14 @@ package org.apache.flex.html
         {
             element = document.createElement('textarea') as WrappedHTMLElement;
             positioner = element;
-            positioner.style.position = 'relative';
+            //positioner.style.position = 'relative';
 
             goog.events.listen(element, 'input', textChangeHandler);
-            
+
             element.flexjs_wrapper = this;
             element.className = 'TextArea';
             typeNames = 'TextArea';
-            
+
             return element;
         }
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextInput.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextInput.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextInput.as
index 5157550..fab027e 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextInput.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextInput.as
@@ -23,7 +23,7 @@ package org.apache.flex.html
     COMPILE::JS
     {
         import goog.events;
-        import org.apache.flex.core.WrappedHTMLElement;            
+        import org.apache.flex.core.WrappedHTMLElement;
     }
 
        /**
@@ -39,18 +39,18 @@ package org.apache.flex.html
     /**
      *  The TextInput class implements the basic control for
      *  single-line text input.
-     *  
+     *
      *  @toplevel
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
-     */    
+     */
        public class TextInput extends UIBase
        {
         /**
          *  Constructor.
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -62,13 +62,13 @@ package org.apache.flex.html
 
             COMPILE::SWF
             {
-                model.addEventListener("textChange", textChangeHandler);       
             
+                model.addEventListener("textChange", textChangeHandler);
             }
                }
-               
+
         /**
          *  @copy org.apache.flex.html.Label#text
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -80,7 +80,7 @@ package org.apache.flex.html
                {
             COMPILE::SWF
             {
-                return ITextModel(model).text;                    
+                return ITextModel(model).text;
             }
             COMPILE::JS
             {
@@ -98,7 +98,7 @@ package org.apache.flex.html
             {
                 inSetter = true;
                 ITextModel(model).text = value;
-                inSetter = false;                    
+                inSetter = false;
             }
             COMPILE::JS
             {
@@ -106,22 +106,22 @@ package org.apache.flex.html
                 dispatchEvent(new Event('textChange'));
             }
                }
-               
+
         /**
          *  @copy org.apache.flex.html.Label#html
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
          *  @productversion FlexJS 0.0
          *  @flexjsignorecoercion HTMLInputElement
          */
-               [Bindable(event="change")] 
+               [Bindable(event="change")]
                public function get html():String
                {
             COMPILE::SWF
             {
-                return ITextModel(model).html;                    
+                return ITextModel(model).html;
             }
             COMPILE::JS
             {
@@ -137,7 +137,7 @@ package org.apache.flex.html
                {
             COMPILE::SWF
             {
-                ITextModel(model).html = value;                    
+                ITextModel(model).html = value;
             }
             COMPILE::JS
             {
@@ -147,7 +147,7 @@ package org.apache.flex.html
                }
 
         private var inSetter:Boolean;
-        
+
                /**
                 *  dispatch change event in response to a textChange event
                 *
@@ -161,7 +161,7 @@ package org.apache.flex.html
             if (!inSetter)
                 dispatchEvent(new Event(Event.CHANGE));
                }
-        
+
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          */
@@ -172,17 +172,17 @@ package org.apache.flex.html
             element.setAttribute('type', 'input');
             element.className = 'TextInput';
             typeNames = 'TextInput';
-            
+
             //attach input handler to dispatch flexjs change event when user 
write in textinput
             //goog.events.listen(element, 'change', killChangeHandler);
             goog.events.listen(element, 'input', textChangeHandler);
-            
+
             positioner = element;
-            positioner.style.position = 'relative';
+            //positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
-            
+
             return element;
-        }        
-        
+        }
+
        }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TitleBar.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TitleBar.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TitleBar.as
index cc91f3f..2764731 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TitleBar.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TitleBar.as
@@ -47,7 +47,7 @@ package org.apache.flex.html
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
-       public class TitleBar extends Container implements IChrome
+       public class TitleBar extends Group implements IChrome
        {
                /**
                 *  constructor.
@@ -136,11 +136,8 @@ package org.apache.flex.html
             element = document.createElement('div') as WrappedHTMLElement;
             
             positioner = element;
-            positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
             
-            className = 'TitleBar';
-            
             return element;
         }        
        }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VContainer.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VContainer.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VContainer.as
index eabab34..13df0e8 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VContainer.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VContainer.as
@@ -44,7 +44,7 @@ package org.apache.flex.html
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
      */    
-       public class VContainer extends Container implements IContainer
+       public class VContainer extends Container
        {
         /**
          *  Constructor.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VRule.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VRule.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VRule.as
index 30c7a75..bdf05eb 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VRule.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/VRule.as
@@ -21,9 +21,9 @@ package org.apache.flex.html
        import org.apache.flex.core.UIBase;
     COMPILE::JS
     {
-        import org.apache.flex.core.WrappedHTMLElement;            
+        import org.apache.flex.core.WrappedHTMLElement;
     }
-       
+
     /**
      *  The VRule class displays a vertical line
      *
@@ -32,12 +32,12 @@ package org.apache.flex.html
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
-     */    
+     */
        public class VRule extends UIBase
        {
         /**
          *  Constructor.
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -47,7 +47,7 @@ package org.apache.flex.html
                {
                        super();
         }
-        
+
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          */
@@ -61,9 +61,9 @@ package org.apache.flex.html
             element.style.borderBottom = 'none';
             element.style.borderRight = 'none';
             positioner = element;
-            positioner.style.position = 'relative';
+            //positioner.style.position = 'relative';
             element.flexjs_wrapper = this;
             return element;
-        }        
+        }
        }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionItemRendererView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionItemRendererView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionItemRendererView.as
index 2656b3a..bc9f89d 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionItemRendererView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionItemRendererView.as
@@ -56,8 +56,10 @@ package org.apache.flex.html.beads
                                super.performLayout(event);
                        } else // skip layout for viewport children
                        {
-                               layoutViewBeforeContentLayout();
+                               COMPILE::SWF {
+                               // no longer needed 
layoutViewBeforeContentLayout();
                                layoutViewAfterContentLayout();
+                               }
                        }
                }
        }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionView.as
index 282eb67..947da98 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/AccordionView.as
@@ -76,6 +76,7 @@ package org.apache.flex.html.beads
                        }
                }
                
+               COMPILE::SWF
                override protected function 
itemsCreatedHandler(event:Event):void
                {
                        var n:int = dataGroup.numElements;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ContainerView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ContainerView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ContainerView.as
index a6835ee..82b2a7a 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ContainerView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ContainerView.as
@@ -28,7 +28,9 @@ package org.apache.flex.html.beads
        import org.apache.flex.core.IContainerView;
        import org.apache.flex.core.IContentViewHost;
        import org.apache.flex.core.ILayoutChild;
+       import org.apache.flex.core.ILayoutObject;
        import org.apache.flex.core.ILayoutHost;
+       import org.apache.flex.core.IParent;
        import org.apache.flex.core.IParentIUIBase;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.IUIBase;
@@ -40,6 +42,7 @@ package org.apache.flex.html.beads
        import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.geom.Rectangle;
     import org.apache.flex.geom.Size;
+       import org.apache.flex.html.Container;
        import org.apache.flex.html.beads.models.ViewportModel;
        import org.apache.flex.html.supportClasses.Border;
        import org.apache.flex.html.supportClasses.ContainerContentArea;
@@ -63,7 +66,8 @@ package org.apache.flex.html.beads
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
         */
-       public class ContainerView extends BeadViewBase implements IBeadView, 
IContainerView, ILayoutHost
+       COMPILE::SWF
+       public class ContainerView extends GroupView
        {
                /**
         *  The ContainerView class is the default view for
@@ -79,8 +83,6 @@ package org.apache.flex.html.beads
                public function ContainerView()
                {
                        super();
-                       
-                       layoutRunning = false;
                }
                
                /**
@@ -92,22 +94,9 @@ package org.apache.flex.html.beads
                 *  @playerversion AIR 2.6
                 *  @productversion FlexJS 0.0
                 */
-               public function get contentView():IParentIUIBase
-               {
-                       return viewport.contentView as IParentIUIBase;
-               }
-               
-               /**
-                * The view that can be resized.
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function get resizableView():IUIBase
+               override public function get contentView():ILayoutObject
                {
-                       return host;
+                       return viewport.contentView as ILayoutObject;
                }
                
                /**
@@ -143,54 +132,6 @@ package org.apache.flex.html.beads
                private var layoutRunning:Boolean;
                
                /**
-                * @private
-                */
-               public function addElement(c:IChild, dispatchEvent:Boolean = 
true):void
-               {
-                       contentView.addElement(c, dispatchEvent);
-               }
-               
-               /**
-                * @private
-                */
-               public function addElementAt(c:IChild, index:int, 
dispatchEvent:Boolean = true):void
-               {
-                       contentView.addElementAt(c, index, dispatchEvent);
-               }
-               
-               /**
-                * @private
-                */
-               public function getElementIndex(c:IChild):int
-               {
-                       return contentView.getElementIndex(c);
-               }
-               
-               /**
-                * @private
-                */
-               public function removeElement(c:IChild, dispatchEvent:Boolean = 
true):void
-               {
-                       contentView.removeElement(c, dispatchEvent);
-               }
-               
-               /**
-                * @private
-                */
-               public function get numElements():int
-               {
-                       return contentView.numElements;
-               }
-               
-               /**
-                * @private
-                */
-               public function getElementAt(index:int):IChild
-               {
-                       return contentView.getElementAt(index);
-               }
-               
-               /**
                 * Strand setter.
                 *  
                 *  @langversion 3.0
@@ -201,69 +142,13 @@ package org.apache.flex.html.beads
                override public function set strand(value:IStrand):void
                {
                        _strand = value;
-                       super.strand = value;
                        
             createViewport();
                        
-                       (host as 
IContentViewHost).strandChildren.addElement(viewport.contentView, false);
+                       var chost:IContainer = host as IContainer;
+                       chost.$addElement(viewport.contentView);
                        
-                       displayBackgroundAndBorder(host as UIBase);
-                       
-                       // listen for initComplete to signal that the strand is 
set with its size
-                       // and beads.
-                       host.addEventListener("beadsAdded", beadsAddedHandler);
-               }
-               
-               /**
-                * Handles the initComplete event by completing the setup and 
kicking off the
-                * presentation of the Container.
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               protected function beadsAddedHandler(event:Event):void
-               {
-            var ilc:ILayoutChild = host as ILayoutChild;
-                       // Complete the setup if the height is sized to content 
or has been explicitly set
-            // and the width is sized to content or has been explicitly set
-                       if ((ilc.isHeightSizedToContent() || 
!isNaN(ilc.explicitHeight)) &&
-                (ilc.isWidthSizedToContent() || !isNaN(ilc.explicitWidth))) {
-                               completeSetup();
-                               
-                               var num:Number = contentView.numElements;
-                               if (num > 0) performLayout(event);
-                       }
-                       else {
-                               // otherwise, wait until the unknown sizes have 
been set and then finish
-                               host.addEventListener("sizeChanged", 
deferredSizeHandler);
-                host.addEventListener("widthChanged", deferredSizeHandler);
-                host.addEventListener("heightChanged", deferredSizeHandler);
-                       }
-               }
-               
-               /**
-                * Handles the case where the size of the host is not 
immediately known, usually do
-                * to one of its dimensions being indicated as a percent size.
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               private function deferredSizeHandler(event:Event):void
-               {
-            host.removeEventListener("sizeChanged", deferredSizeHandler);
-            host.removeEventListener("widthChanged", deferredSizeHandler);
-            host.removeEventListener("heightChanged", deferredSizeHandler);
-                       completeSetup();
-                       
-                       var num:Number = contentView.numElements;
-                       if (num > 0) 
-            {
-                performLayout(event);
-            }
+                       super.strand = value;
                }
                
                /**
@@ -275,48 +160,18 @@ package org.apache.flex.html.beads
                 *  @playerversion AIR 2.6
                 *  @productversion FlexJS 0.0
                 */
-               protected function completeSetup():void
+               override protected function completeSetup():void
                {
+                       super.completeSetup();
+                       
                        // when the first layout is complete, set up listeners 
for changes
                        // to the childrens' sizes.
                        host.addEventListener("layoutComplete", 
childrenChangedHandler);
                        
-                       host.addEventListener("childrenAdded", performLayout);
-                       host.addEventListener("layoutNeeded", performLayout);
                        host.addEventListener("widthChanged", resizeHandler);
                        host.addEventListener("heightChanged", resizeHandler);
                        host.addEventListener("sizeChanged", resizeHandler);
-                       host.addEventListener("viewCreated", 
viewCreatedHandler);
                }
-               
-               /**
-                * Handles the viewCreated event by performing the first layout 
if
-                * there are children already present (ie, from MXML).
-                *  
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               protected function viewCreatedHandler(event:Event):void
-               {                       
-                       if ((host as UIBase).numElements > 0) {
-                               performLayout(null);
-                       }
-               }
-               
-        /**
-         * Calculate the space taken up by non-content children like a 
TItleBar in a Panel.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-        protected function getChromeMetrics():Rectangle
-        {
-            return new Rectangle(0, 0, 0, 0);
-        }
         
                /**
                 * Creates the Viewport (or ScrollableViewport) through which 
the content
@@ -356,6 +211,20 @@ package org.apache.flex.html.beads
                }
                
                /**
+                * Calculate the space taken up by non-content children like a 
TitleBar in a Panel.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               protected function getChromeMetrics():Rectangle
+               {
+                       var paddingMetrics:Rectangle = 
CSSContainerUtils.getPaddingMetrics(host);
+                       return paddingMetrics;
+               }
+               
+               /**
                 *  Positions the viewport, then sets any known sizes of the 
Viewport prior
          *  to laying out its content.
                 *  
@@ -368,18 +237,16 @@ package org.apache.flex.html.beads
                {
             var host:ILayoutChild = this.host as ILayoutChild;
             var vm:IViewportModel = viewportModel;
+                       var hostWidth:Number = host.width;
+                       var hostHeight:Number = host.height;
+                       
             vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
-            vm.chromeMetrics = getChromeMetrics();
-            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
-                                 vm.borderMetrics.top + vm.chromeMetrics.top)
-            viewport.layoutViewportBeforeContentLayout(
-                !host.isWidthSizedToContent() ? 
-                               host.width - vm.borderMetrics.left - 
vm.borderMetrics.right -
-                        vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
-                !host.isHeightSizedToContent() ? 
-                    host.height - vm.borderMetrics.top - 
vm.borderMetrics.bottom -
-                        vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
                        
+            viewport.setPosition(vm.borderMetrics.left, vm.borderMetrics.top);
+                       
+                       viewport.layoutViewportBeforeContentLayout(
+                               host.isWidthSizedToContent() ? NaN : hostWidth 
- vm.borderMetrics.left - vm.borderMetrics.right,
+                               host.isHeightSizedToContent() ? NaN : 
hostHeight - vm.borderMetrics.top - vm.borderMetrics.bottom);
                }
                
                /**
@@ -392,8 +259,10 @@ package org.apache.flex.html.beads
                 *  @playerversion AIR 2.6
                 *  @productversion FlexJS 0.0
                 */
-               protected function performLayout(event:Event):void
+               override protected function performLayout(event:Event):void
                {
+                       if (layoutRunning) return;
+                       
                        layoutRunning = true;
                        
                        layoutViewBeforeContentLayout();
@@ -432,32 +301,17 @@ package org.apache.flex.html.beads
                 *  @playerversion AIR 2.6
                 *  @productversion FlexJS 0.0
                 */
-               protected function layoutViewAfterContentLayout():void
+               override protected function layoutViewAfterContentLayout():void
                {
-                       var host:UIBase = _strand as UIBase;
-            var vm:IViewportModel = viewportModel;
-            
+                       if (adjusting) return;
+
                        adjusting = true;
                        
-            var viewportSize:Size = 
viewport.layoutViewportAfterContentLayout();
-            
-                       if (host.isWidthSizedToContent() && 
host.isHeightSizedToContent()) {                                    
-                               host.setWidthAndHeight(viewportSize.width + 
vm.borderMetrics.left + vm.borderMetrics.right +
-                                           vm.chromeMetrics.left + 
vm.chromeMetrics.right, 
-                                                          viewportSize.height 
+ vm.borderMetrics.top + vm.borderMetrics.bottom +
-                                           vm.chromeMetrics.top + 
vm.chromeMetrics.bottom,
-                                       false);
-                       }
-                       else if (!host.isWidthSizedToContent() && 
host.isHeightSizedToContent())
-                       {
-                               host.setHeight(viewportSize.height + 
vm.borderMetrics.top + vm.borderMetrics.bottom +
-                    vm.chromeMetrics.top + vm.chromeMetrics.bottom, false);
-                       }
-                       else if (host.isWidthSizedToContent() && 
!host.isHeightSizedToContent())
-                       {
-                               host.setWidth(viewportSize.width + 
vm.borderMetrics.left + vm.borderMetrics.right +
-                    vm.chromeMetrics.left + vm.chromeMetrics.right, false);
-                       }                       
+                       super.layoutViewAfterContentLayout();
+                       
+                       var contentSize:Size = calculateContentSize();
+                       viewport.layoutViewportAfterContentLayout(contentSize);
+                               
                        adjusting = false;
                }
                
@@ -517,36 +371,50 @@ package org.apache.flex.html.beads
                        if (layoutRunning) return;                      
                        performLayout(event);
                }
+       }
+       
+       COMPILE::JS
+       public class ContainerView extends GroupView //??implements IParent
+       {                       
+               private var _viewport:IViewport;
                
-               protected function displayBackgroundAndBorder(host:UIBase) : 
void
+               /**
+                * The viewport used to present the content and may display
+                * scroll bars (depending on the actual type of viewport).
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               protected function get viewport():IViewport
                {
-                       var backgroundColor:Object = 
ValuesManager.valuesImpl.getValue(host, "background-color");
-                       var backgroundImage:Object = 
ValuesManager.valuesImpl.getValue(host, "background-image");
-                       if (backgroundColor != null || backgroundImage != null)
-                       {
-                               if (host.getBeadByType(IBackgroundBead) == null)
-                                       var c:Class = 
ValuesManager.valuesImpl.getValue(host, "iBackgroundBead");
-                               if (c) {
-                                       host.addBead( new c() as IBead );
-                               }
-                       }
+                       return _viewport;
+               }
+               
+               /**
+                * Strand setter.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               override public function set strand(value:IStrand):void
+               {
+                       _strand = value;
+                       super.strand = value;
                        
-                       var borderStyle:String;
-                       var borderStyles:Object = 
ValuesManager.valuesImpl.getValue(host, "border");
-                       if (borderStyles is Array)
-                       {
-                               borderStyle = borderStyles[1];
-                       }
-                       if (borderStyle == null)
-                       {
-                               borderStyle = 
ValuesManager.valuesImpl.getValue(host, "border-style") as String;
-                       }
-                       if (borderStyle != null && borderStyle != "none")
-                       {
-                               if (host.getBeadByType(IBorderBead) == null) {
-                                       c = 
ValuesManager.valuesImpl.getValue(host, "iBorderBead");
-                                       if (c) {
-                                               host.addBead( new c() as IBead 
);
+                       var c:Class;
+                       
+                       if (viewport == null) {
+                               _viewport = _strand.getBeadByType(IViewport) as 
IViewport;
+                               if (viewport == null) {
+                                       c = 
ValuesManager.valuesImpl.getValue(host, "iViewport");
+                                       if (c)
+                                       {
+                                               _viewport = new c() as 
IViewport;
+                                               _strand.addBead(viewport);
                                        }
                                }
                        }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
index b32df59..73986c0 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataContainerView.as
@@ -127,10 +127,11 @@ package org.apache.flex.html.beads
                        
                        // list is not interested in UI children, it wants to 
know when new items
                        // have been added or the dataProvider has changed.
-                       
+                       COMPILE::SWF {
                        host.removeEventListener("childrenAdded", 
childrenChangedHandler);
                        host.removeEventListener("childrenAdded", 
performLayout);
                        host.addEventListener("itemsCreated", 
itemsCreatedHandler);
+                       }
                        
                        listModel = _strand.getBeadByType(IDataProviderModel) 
as IDataProviderModel;
                        listModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
@@ -141,6 +142,7 @@ package org.apache.flex.html.beads
                /**
                 * @private
                 */
+               COMPILE::SWF
                protected function itemsCreatedHandler(event:Event):void
                {
                        performLayout(event);
@@ -162,6 +164,7 @@ package org.apache.flex.html.beads
          *  @playerversion AIR 2.6
          *  @productversion FlexJS 0.0
          */
+               COMPILE::SWF
                override protected function resizeHandler(event:Event):void
                {
                        super.resizeHandler(event);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/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 9c79a3b..6e2a8c5 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
@@ -39,7 +39,7 @@ package org.apache.flex.html.beads
        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.ArraySelectionModel;
+       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;
@@ -124,12 +124,10 @@ package org.apache.flex.html.beads
                        var host:UIBase = value as UIBase;
 
                        _header = new DataGridButtonBar();
-                       _header.id = "dataGridHeader";
 
                        var scrollPort:ScrollingViewport = new 
ScrollingViewport();
 
                        _listArea = new Container();
-                       _listArea.id = "dataGridListArea";
                        _listArea.className = "DataGridListArea";
                        _listArea.addBead(scrollPort);
                        
@@ -166,10 +164,11 @@ package org.apache.flex.html.beads
                        }
 
                        var bblayout:ButtonBarLayout = new ButtonBarLayout();
-                       var buttonBarModel:ArraySelectionModel = new 
ArraySelectionModel();
-                       buttonBarModel.dataProvider = columnLabels;
+                       //var buttonBarModel:ButtonBarModel = new 
ButtonBarModel();
+                       //buttonBarModel.dataProvider = columnLabels;
 
-                       _header.addBead(buttonBarModel);
+                       _header.dataProvider = columnLabels;
+                       //_header.addBead(buttonBarModel);
                        _header.addBead(bblayout);
                        _header.addBead(new Viewport());
                        host.addElement(_header);
@@ -255,7 +254,7 @@ 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;
+                       //var listWidth:Number = host.width / 
sharedModel.columns.length;
 
                        _lists = new Array();
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
index 6a442ae..523e8d0 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
@@ -36,6 +36,11 @@ package org.apache.flex.html.beads
        import org.apache.flex.events.ItemRendererEvent;
        import org.apache.flex.html.List;
        
+       import org.apache.flex.core.IList;
+       import org.apache.flex.core.IChild;
+       import org.apache.flex.core.ILayoutHost;
+       import org.apache.flex.core.IParentIUIBase;
+       
        
[Event(name="itemRendererCreated",type="org.apache.flex.events.ItemRendererEvent")]
        
     /**
@@ -86,17 +91,17 @@ package org.apache.flex.html.beads
                        
IEventDispatcher(value).addEventListener("initComplete",finishSetup);
                }
                
+               /**
+                * @private
+                */
                private function finishSetup(event:Event):void
-               {
+               {                       
                        dataProviderModel = 
_strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
-                       var listView:IListView = 
_strand.getBeadByType(IListView) as IListView;
-                       dataGroup = listView.dataGroup;
                        
dataProviderModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
-                       
                        labelField = dataProviderModel.labelField;
                        
-                       if (!itemRendererFactory)
-                       {
+                       _itemRendererFactory = 
_strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
+                       if (itemRendererFactory == null) {
                                _itemRendererFactory = new 
(ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as 
IItemRendererClassFactory;
                                _strand.addBead(_itemRendererFactory);
                        }
@@ -136,25 +141,25 @@ package org.apache.flex.html.beads
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
          *  @productversion FlexJS 0.0
-         */
-               protected var dataGroup:IItemRendererParent;
-               
+         */            
                protected function dataProviderChangeHandler(event:Event):void
                {
                        var dp:Array = dataProviderModel.dataProvider as Array;
                        if (!dp)
                                return;
                        
-                       dataGroup.removeAllElements();
+                       var list:IList = _strand as IList;
+                       var dataGroup:IItemRendererParent = list.dataGroup;
+                       
+                       dataGroup.removeAllItemRenderers();
                        
-                       var listView:IListView = 
_strand.getBeadByType(IListView) as IListView;
                        var presentationModel:IListPresentationModel = 
_strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
-
+                       
                        var n:int = dp.length; 
                        for (var i:int = 0; i < n; i++)
                        {                               
                                var ir:ISelectableItemRenderer = 
itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
-                               dataGroup.addElement(ir);
+                               dataGroup.addItemRenderer(ir);
                                ir.index = i;
                                ir.labelField = labelField;
                                if (presentationModel) {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
index 7fc7a90..8d669dd 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayList.as
@@ -35,7 +35,8 @@ package org.apache.flex.html.beads
        import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.events.EventDispatcher;
        import org.apache.flex.events.ItemRendererEvent;
-       import org.apache.flex.html.List;
+       //import org.apache.flex.html.List;
+       import org.apache.flex.core.IList;
        
        
[Event(name="itemRendererCreated",type="org.apache.flex.events.ItemRendererEvent")]
        
@@ -88,21 +89,15 @@ package org.apache.flex.html.beads
                }
                
                private function finishSetup(event:Event):void
-               {
+               {                       
                        dataProviderModel = 
_strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
-                       var listView:IListView = 
_strand.getBeadByType(IListView) as IListView;
-                       dataGroup = listView.dataGroup;
                        
dataProviderModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
-                       
                        labelField = dataProviderModel.labelField;
                        
-                       if (!itemRendererFactory)
-                       {
-                               _itemRendererFactory = 
_strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
-                               if (_itemRendererFactory == null) {
-                                       _itemRendererFactory = new 
(ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as 
IItemRendererClassFactory;
-                                       _strand.addBead(_itemRendererFactory);
-                               }
+                       _itemRendererFactory = 
_strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
+                       if (itemRendererFactory == null) {
+                               _itemRendererFactory = new 
(ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as 
IItemRendererClassFactory;
+                               _strand.addBead(_itemRendererFactory);
                        }
                        
                        dataProviderChangeHandler(null);
@@ -132,17 +127,6 @@ package org.apache.flex.html.beads
                        _itemRendererFactory = value;
                }
                
-        /**
-         *  The org.apache.flex.core.IItemRendererParent that will
-         *  parent the item renderers.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-               protected var dataGroup:IItemRendererParent;
-               
                /**
                 * @private
                 */
@@ -162,24 +146,24 @@ package org.apache.flex.html.beads
                        if (!dp)
                                return;
                        
-                       dataGroup.removeAllElements();
+                       var list:IList = _strand as IList;
+                       var dataGroup:IItemRendererParent = list.dataGroup;
+                       
+                       dataGroup.removeAllItemRenderers();
                        
-                       var listView:IListView = 
_strand.getBeadByType(IListView) as IListView;
                        var presentationModel:IListPresentationModel = 
_strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
                        
                        var n:int = dp.length; 
                        for (var i:int = 0; i < n; i++)
                        {                               
                                var ir:ISelectableItemRenderer = 
itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
-                               dataGroup.addElement(ir);
+                               dataGroup.addItemRenderer(ir);
                                if (presentationModel) {
-                                       UIBase(ir).height = 
presentationModel.rowHeight;
-                                       
-                                       // ensure that the IR spans the width 
of its column
                                        var style:SimpleCSSStyles = new 
SimpleCSSStyles();
-                                       style.right = 0;
-                                       style.left = 0;
+                                       style.marginBottom = 
presentationModel.separatorThickness;
                                        UIBase(ir).style = style;
+                                       UIBase(ir).height = 
presentationModel.rowHeight;
+                                       UIBase(ir).percentWidth = 100;
                                }
                                setData(ir, dp.getItemAt(i), i);
                                

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
index 43c5c33..3b50e05 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForColumnData.as
@@ -24,6 +24,7 @@ package org.apache.flex.html.beads
        import org.apache.flex.core.IDataProviderItemRendererMapper;
        import org.apache.flex.core.IItemRendererClassFactory;
        import org.apache.flex.core.IItemRendererParent;
+       import org.apache.flex.core.IList;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.ValuesManager;
        import org.apache.flex.events.Event;
@@ -69,13 +70,21 @@ package org.apache.flex.html.beads
                public function set strand(value:IStrand):void
                {
                        _strand = value;
+                       
IEventDispatcher(value).addEventListener("beadsAdded",finishSetup);
+                       
IEventDispatcher(value).addEventListener("initComplete",finishSetup);
+               }
+               
+               /**
+                * @private
+                */
+               private function finishSetup(event:Event):void
+               {                       
                        selectionModel = value.getBeadByType(IDataGridModel) as 
IDataGridModel;
-                       var listView:IListView = value.getBeadByType(IListView) 
as IListView;
-                       dataGroup = listView.dataGroup;
                        selectionModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
                        
-                       if (!itemRendererFactory)
-                       {
+                       
+                       _itemRendererFactory = 
_strand.getBeadByType(IItemRendererClassFactory) as IItemRendererClassFactory;
+                       if (itemRendererFactory == null) {
                                _itemRendererFactory = new 
(ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as 
IItemRendererClassFactory;
                                _strand.addBead(_itemRendererFactory);
                        }
@@ -110,7 +119,7 @@ package org.apache.flex.html.beads
                 *  @playerversion AIR 2.6
                 *  @productversion FlexJS 0.0
                 */
-               protected var dataGroup:IItemRendererParent;
+//             protected var dataGroup:IItemRendererParent;
                
                /**
                 * @private
@@ -121,8 +130,11 @@ package org.apache.flex.html.beads
                        if (!dp)
                                return;
                        
-                       dataGroup.removeAllElements();
+                       var list:IList = _strand as IList;
+                       var dataGroup:IItemRendererParent = list.dataGroup;
                        
+                       dataGroup.removeAllItemRenderers();
+                                               
                        var view:DataGridColumnView = 
_strand.getBeadByType(IBeadView) as DataGridColumnView;
                        if (view == null) return;
                                                
@@ -130,7 +142,7 @@ package org.apache.flex.html.beads
                        for (var i:int = 0; i < n; i++)
                        {
                                var tf:DataItemRenderer = 
itemRendererFactory.createItemRenderer(dataGroup) as DataItemRenderer;
-                               dataGroup.addElement(tf);
+                               dataGroup.addItemRenderer(tf);
                                tf.index = i;
                                tf.labelField = view.column.dataField;
                                tf.data = dp[i];

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/GroupView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/GroupView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/GroupView.as
index c63e013..98a6966 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/GroupView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/GroupView.as
@@ -23,13 +23,20 @@ package org.apache.flex.html.beads
        import org.apache.flex.core.IBeadView;
        import org.apache.flex.core.ILayoutChild;
        import org.apache.flex.core.ILayoutHost;
-       import org.apache.flex.core.IParentIUIBase;
+       import org.apache.flex.core.ILayoutObject;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.IUIBase;
        import org.apache.flex.core.BeadViewBase;
        import org.apache.flex.core.UIBase;
        import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.events.Event;
+       
+       COMPILE::SWF {
+               import org.apache.flex.geom.Size;
+               import org.apache.flex.geom.Rectangle;
+               import org.apache.flex.utils.CSSContainerUtils;
+       }
     
        /**
         *  The GroupView is a bead that manages the layout bead (if any) 
attached to a Group. This class
@@ -39,7 +46,7 @@ package org.apache.flex.html.beads
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
-     *  @productversion FlexJS 0.0
+     *  @productversion FlexJS 0.8
         */
        public class GroupView extends BeadViewBase implements IBeadView, 
ILayoutHost
        {
@@ -52,7 +59,7 @@ package org.apache.flex.html.beads
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
+         *  @productversion FlexJS 0.8
          */
                public function GroupView()
                {
@@ -68,11 +75,11 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
-               public function get contentView():IParentIUIBase
+               public function get contentView():ILayoutObject
                {
-                       return host as IParentIUIBase;
+                       return host as ILayoutObject;
                }
                
                /**
@@ -81,7 +88,7 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
                public function get resizableView():IUIBase
                {
@@ -97,7 +104,7 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
                override public function set strand(value:IStrand):void
                {
@@ -120,15 +127,15 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
                protected function beadsAddedHandler(event:Event):void
                {
             var ilc:ILayoutChild = host as ILayoutChild;
                        // Complete the setup if the height is sized to content 
or has been explicitly set
             // and the width is sized to content or has been explicitly set
-                       if ((ilc.isHeightSizedToContent() || 
!isNaN(ilc.explicitHeight)) &&
-                (ilc.isWidthSizedToContent() || !isNaN(ilc.explicitWidth))) {
+                       if ((ilc.isHeightSizedToContent() || 
!isNaN(ilc.explicitHeight) || !isNaN(ilc.percentHeight)) &&
+                (ilc.isWidthSizedToContent() || !isNaN(ilc.explicitWidth) || 
!isNaN(ilc.percentWidth))) {
                                completeSetup();
                                
                                var num:Number = contentView.numElements;
@@ -149,9 +156,9 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
-               private function deferredSizeHandler(event:Event):void
+               protected function deferredSizeHandler(event:Event):void
                {
             host.removeEventListener("sizeChanged", deferredSizeHandler);
             host.removeEventListener("widthChanged", deferredSizeHandler);
@@ -172,15 +179,20 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
                protected function completeSetup():void
                {                       
                        // set up listeners for when children are added or 
there is a specific request
                        // to perform the layout again.
-                       host.addEventListener("childrenAdded", performLayout);
+                       host.addEventListener("childrenAdded", 
handleChildrenAdded);
                        host.addEventListener("layoutNeeded", performLayout);
                        host.addEventListener("viewCreated", 
viewCreatedHandler);
+                       
+                       // listen for changes to strand's size and rerun the 
layout
+                       host.addEventListener("sizeChanged", performLayout);
+                       host.addEventListener("widthChanged", performLayout);
+                       host.addEventListener("heightChanged", performLayout);
                }
                
                /**
@@ -190,13 +202,33 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
                protected function viewCreatedHandler(event:Event):void
                {                       
-                       if ((host as UIBase).numElements > 0) {
-                               performLayout(null);
+                       var num:Number = contentView.numElements;
+                       if (num > 0) 
+                       {
+                               performLayout(event);
+                       }
+               }
+               
+               /**
+                * @private
+                */
+               protected function handleChildrenAdded(event:Event):void
+               {
+                       COMPILE::SWF {
+                               var n:Number = contentView.numElements;
+                               for(var i:int=0; i < n; i++) {
+                                       var child:IEventDispatcher = 
contentView.getElementAt(i) as IEventDispatcher;
+                                       child.addEventListener("widthChanged", 
performLayout);
+                                       child.addEventListener("heightChanged", 
performLayout);
+                                       child.addEventListener("sizeChanged", 
performLayout);
+                               }
                        }
+                               
+                               performLayout(event);
                }
                
                /**
@@ -207,10 +239,12 @@ package org.apache.flex.html.beads
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
                protected function performLayout(event:Event):void
                {
+                       if (layoutRunning) return;
+                       
                        layoutRunning = true;
                        
                        var host:UIBase = _strand as UIBase;
@@ -228,9 +262,89 @@ package org.apache.flex.html.beads
                                layout.layout();
                        }
                        
+                       COMPILE::SWF {
+                               // the HTML/JS side automatically handles 
changes in child sizes and
+                               // will adjust the div if needed.
+                               layoutViewAfterContentLayout();
+                       }
+                       
                        layoutRunning = false;
                }
                
+               /**
+                * Returns the size of the content area including the padding.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               COMPILE::SWF
+               protected function calculateContentSize():Size
+               {
+                       var maxWidth:Number = 0;
+                       var maxHeight:Number = 0;
+                       var num:Number = contentView.numElements;
+                       
+                       for (var i:int=0; i < num; i++) {
+                               var child:IUIBase = contentView.getElementAt(i) 
as IUIBase;
+                               if (child == null || !child.visible) continue;
+                               var childXMax:Number = child.x + child.width;
+                               var childYMax:Number = child.y + child.height;
+                               maxWidth = Math.max(maxWidth, childXMax);
+                               maxHeight = Math.max(maxHeight, childYMax);
+                       }
+                       
+                       var padding:org.apache.flex.geom.Rectangle = 
CSSContainerUtils.getPaddingMetrics(this._strand);
+                       var border:org.apache.flex.geom.Rectangle = 
CSSContainerUtils.getBorderMetrics(this._strand);
+                       
+                       // return the content size as the max plus right/bottom 
padding. the x,y position of
+                       // each child is already offset by the left/top padding 
by the layout algorithm.
+                       return new Size(maxWidth + padding.right - 
(border.left+border.right), maxHeight + padding.bottom - 
(border.top+border.bottom));
+               }
+               
+               /**
+                * @private
+                */
+               private var adjusting:Boolean = false;
+               
+               /**
+                * Adjusts the size of the host after the layout has been run.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               COMPILE::SWF
+               protected function layoutViewAfterContentLayout():void
+               {
+                       if (adjusting) return;
+                       
+                       var host:UIBase = _strand as UIBase;
+                       
+                       adjusting = true;
+                       
+                       var contentSize:Size = calculateContentSize();
+                       
+                       if (host.isWidthSizedToContent() && 
host.isHeightSizedToContent()) {
+                               host.setWidthAndHeight(contentSize.width, 
contentSize.height, true);
+                       }
+                       else if (!host.isWidthSizedToContent() && 
host.isHeightSizedToContent())
+                       {
+                               host.setHeight(contentSize.height, true);
+                       }
+                       else if (host.isWidthSizedToContent() && 
!host.isHeightSizedToContent())
+                       {
+                               host.setWidth(contentSize.width, true);
+                       }       
+                       
+                       adjusting = false;
+               }
+               
+               /**
+                * @private
+                */
                COMPILE::SWF
                protected function displayBackgroundAndBorder(host:UIBase) : 
void
                {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ListView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ListView.as 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ListView.as
index 897787a..6f7a1bc 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ListView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ListView.as
@@ -24,6 +24,7 @@ package org.apache.flex.html.beads
        import org.apache.flex.core.IBeadLayout;
        import org.apache.flex.core.IBeadModel;
        import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IList;
        import org.apache.flex.core.ISelectableItemRenderer;
        import org.apache.flex.core.IItemRenderer;
        import org.apache.flex.core.IItemRendererParent;
@@ -56,10 +57,72 @@ package org.apache.flex.html.beads
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
+       COMPILE::JS
        public class ListView extends ContainerView implements IListView
        {
                public function ListView()
                {
+                       super();
+               }
+               
+               protected var listModel:ISelectionModel;
+               protected var lastSelectedIndex:int = -1;
+               
+               public function get dataGroup():IItemRendererParent
+               {
+                       return (_strand as IList).dataGroup;
+               }
+               
+               override protected function beadsAddedHandler(event:Event):void
+               {
+                       
+                       listModel = _strand.getBeadByType(ISelectionModel) as 
ISelectionModel;
+                       host.addEventListener("itemsCreated", 
itemsCreatedHandler);
+                       listModel.addEventListener("selectedIndexChanged", 
selectionChangeHandler);
+                       //listModel.addEventListener("rollOverIndexChanged", 
rollOverIndexChangeHandler);
+                       listModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
+                       
+                       super.beadsAddedHandler(event);
+               }
+               
+               protected function selectionChangeHandler(event:Event):void
+               {
+                       if (lastSelectedIndex != -1)
+                       {
+                               var ir:ISelectableItemRenderer = 
dataGroup.getItemRendererForIndex(lastSelectedIndex) as ISelectableItemRenderer;
+                               if (ir != null) ir.selected = false;
+                       }
+                       if (listModel.selectedIndex != -1)
+                       {
+                               ir = 
dataGroup.getItemRendererForIndex(listModel.selectedIndex) as 
ISelectableItemRenderer;
+                               if (ir != null) ir.selected = true;
+                       }
+                       lastSelectedIndex = listModel.selectedIndex;
+               }
+               
+               /**
+                * @private
+                */
+               protected function itemsCreatedHandler(event:Event):void
+               {
+                       performLayout(event);
+               }
+               
+               /**
+                * @private
+                */
+               protected function dataProviderChangeHandler(event:Event):void
+               {
+                       performLayout(event);
+               }
+       }
+       
+       COMPILE::SWF
+       public class ListView extends ContainerView implements IListView
+       {
+               public function ListView()
+               {
+                       super();
                }
                                                
                protected var listModel:ISelectionModel;
@@ -78,28 +141,6 @@ package org.apache.flex.html.beads
         {
             return _border;
         }
-               
-               /**
-                *  The area holding the itemRenderers.
-                *
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function get dataGroup():IItemRendererParent
-               {
-                       (contentView as UIBase).className = "ListDataGroup";
-                       return contentView as IItemRendererParent;
-               }
-                               
-               /**
-                * @private
-                */
-               override public function get resizableView():IUIBase
-               {
-                       return _strand as IUIBase;
-               }
         
         /**
          * @private
@@ -129,10 +170,14 @@ package org.apache.flex.html.beads
                        
                        // list is not interested in UI children, it wants to 
know when new items
                        // have been added or the dataProvider has changed.
-                       
                        host.removeEventListener("childrenAdded", 
childrenChangedHandler);
                        host.removeEventListener("childrenAdded", 
performLayout);
                        host.addEventListener("itemsCreated", 
itemsCreatedHandler);
+               }
+               
+               override protected function beadsAddedHandler(event:Event):void
+               {
+                       super.beadsAddedHandler(event);
                        
                        listModel = _strand.getBeadByType(ISelectionModel) as 
ISelectionModel;
                        listModel.addEventListener("selectedIndexChanged", 
selectionChangeHandler);
@@ -140,6 +185,11 @@ package org.apache.flex.html.beads
                        listModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
                }
                
+               public function get dataGroup():IItemRendererParent
+               {
+                       return (_strand as IList).dataGroup;
+               }
+               
                protected var lastSelectedIndex:int = -1;
                
                /**

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelView.as
index f0fa200..193ea3c 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelView.as
@@ -19,10 +19,15 @@
 package org.apache.flex.html.beads
 {
        import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IBeadLayout;
        import org.apache.flex.core.ILayoutChild;
-       import org.apache.flex.core.IContentViewHost;
+       import org.apache.flex.core.ILayoutObject;
+       import org.apache.flex.core.IChild;
+       import org.apache.flex.core.IContainer;
+       import org.apache.flex.core.IParent;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.IUIBase;
+       import org.apache.flex.core.IViewport;
        import org.apache.flex.core.IViewportModel;
        import org.apache.flex.core.UIBase;
        import org.apache.flex.core.ValuesManager;
@@ -30,11 +35,18 @@ package org.apache.flex.html.beads
        import org.apache.flex.events.IEventDispatcher;
        import org.apache.flex.geom.Rectangle;
        import org.apache.flex.geom.Size;
+       import org.apache.flex.html.Group;
        import org.apache.flex.html.Container;
        import org.apache.flex.html.Panel;
        import org.apache.flex.html.TitleBar;
        import org.apache.flex.utils.CSSContainerUtils;
        import org.apache.flex.utils.CSSUtils;
+       import org.apache.flex.html.beads.layouts.VerticalFlexLayout;
+       import org.apache.flex.html.supportClasses.PanelLayoutProxy;
+       
+       COMPILE::SWF {
+               import org.apache.flex.core.SimpleCSSStyles;
+       }
        
        /**
         *  The Panel class creates the visual elements of the 
org.apache.flex.html.Panel 
@@ -47,7 +59,7 @@ package org.apache.flex.html.beads
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
-       public class PanelView extends ContainerView implements IBeadView
+       public class PanelView extends GroupView implements IBeadView
        {
                /**
                 *  constructor.
@@ -85,6 +97,27 @@ package org.apache.flex.html.beads
         {
             _titleBar = value;
         }
+               
+               private var _contentArea:Container;
+               
+               /**
+                * The content area of the panel.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.8
+                */
+               public function get contentArea():Container
+               {
+                       return _contentArea;
+               }
+               public function set contentArea(value:Container):void
+               {
+                       _contentArea = value;
+               }
+               
+               private var _strand:IStrand;
                                
                /**
                 *  @copy org.apache.flex.core.IBead#strand
@@ -96,74 +129,136 @@ package org.apache.flex.html.beads
                 */
                override public function set strand(value:IStrand):void
                {
+                       _strand = value;
+                       
             var host:UIBase = UIBase(value);
             
             if (!_titleBar) {
                 _titleBar = new TitleBar();
                                _titleBar.id = "panelTitleBar";
-                               _titleBar.height = 30;
+                               
+                               COMPILE::SWF {
+                                       _titleBar.percentWidth = 100;
+                                       
+                                       if (_titleBar.style == null) {
+                                               _titleBar.style = new 
SimpleCSSStyles();
+                                       }
+                                       _titleBar.style.flexGrow = 0;
+                                       _titleBar.style.order = 1;
+                               }
+                               
+                               COMPILE::JS {
+                                       _titleBar.element.style["flex-grow"] = 
"0";
+                                       _titleBar.element.style["order"] = "1";
+                               }
                        }
                        // replace the TitleBar's model with the Panel's model 
(it implements ITitleBarModel) so that
                        // any changes to values in the Panel's model that 
correspond values in the TitleBar will 
                        // be picked up automatically by the TitleBar.
                        titleBar.model = host.model;
+                       
+                       if (!_contentArea) {
+                               _contentArea = new Container();
+                               _contentArea.id = "panelContent";
+                               _contentArea.className = "PanelContent";
+                               
+                               COMPILE::SWF {
+                                       _contentArea.percentWidth = 100;
+                                       
+                                       if (_contentArea.style == null) {
+                                               _contentArea.style = new 
SimpleCSSStyles();
+                                       }
+                                       _contentArea.style.flexGrow = 1;
+                                       _contentArea.style.order = 2;
+                               }
+                               
+                               COMPILE::JS {
+                                       _contentArea.element.style["flex-grow"] 
= "1";
+                                       _contentArea.element.style["order"] = 
"2";
+                                       _contentArea.element.style["overflow"] 
= "auto"; // temporary
+                               }
+                       }
+                       
+                       COMPILE::SWF {
+                               
IEventDispatcher(value).addEventListener("widthChanged", handleSizeChange);
+                               
IEventDispatcher(value).addEventListener("heightChanged", handleSizeChange);
+                               
IEventDispatcher(value).addEventListener("sizeChanged", handleSizeChange);
+                               
IEventDispatcher(value).addEventListener("childrenAdded", handleChildrenAdded);
+                       }
                                    
             super.strand = value;
+                       
+                       // If the Panel was given a layout, transfer it to the 
content area.
+                       var layoutBead:IBeadLayout = 
value.getBeadByType(IBeadLayout) as IBeadLayout;
+                       if (layoutBead) {
+                               value.removeBead(layoutBead);
+                               
+                               var contentLayout:IBeadLayout = 
_contentArea.getBeadByType(IBeadLayout) as IBeadLayout;
+                               if (contentLayout) {
+                                       _contentArea.removeBead(contentLayout);
+                               }
+                               _contentArea.addBead(layoutBead);
+                       }
+                       
+                       // If the Panel was given a viewport, transfer it to 
the content area.
+                       var viewportBead:IViewport = 
value.getBeadByType(IViewport) as IViewport;
+                       if (viewportBead) {
+                               value.removeBead(viewportBead);
+                               _contentArea.addBead(viewportBead);
+                       }
+                       
+                       // Now give the Panel its own layout
+                       layoutBead = new VerticalFlexLayout();
+                       value.addBead(layoutBead);
+               }
+               
+               private var _panelLayoutProxy:PanelLayoutProxy;
+               
+               /**
+                * The sub-element used as the parent of the container's 
elements. This does not
+                * include the chrome elements.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.8
+                */
+               override public function get contentView():ILayoutObject
+               {
+                       // we want to return a proxy for the host which will 
have numElements, getElementAt, etc.
+                       // functions that will use the host.$numElements, 
host.$getElementAt, etc. functions
+                       if (_panelLayoutProxy == null) {
+                               _panelLayoutProxy = new 
PanelLayoutProxy(_strand);
+                       }
+                       return _panelLayoutProxy;
                }
                
                override protected function completeSetup():void
                {
-                       (host as 
IContentViewHost).strandChildren.addElement(titleBar);
+                       if (titleBar.parent == null) {
+                               (_strand as Panel).$addElement(titleBar);
+                       }
+                       if (contentArea.parent == null) {
+                               (_strand as Panel).$addElement(contentArea as 
IChild);
+                       }
+                       
                        super.completeSetup();
                }
                
-        /**
-         * Calculate the space taken up by non-content children like a 
TItleBar in a Panel.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-        override protected function getChromeMetrics():Rectangle
-        {
-            return new Rectangle(0, titleBar.height, 0, 0 - titleBar.height);
-        }
-        
-        override protected function layoutViewBeforeContentLayout():void
-        {
-            var vm:IViewportModel = viewportModel;
-            var host:ILayoutChild = this.host as ILayoutChild;
-            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
-            titleBar.x = vm.borderMetrics.left;
-            titleBar.y = vm.borderMetrics.top;
-            if (!host.isWidthSizedToContent())
-                titleBar.width = host.width - vm.borderMetrics.left - 
vm.borderMetrics.right;
-            vm.chromeMetrics = getChromeMetrics();
-            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
-                vm.borderMetrics.top + vm.chromeMetrics.top);
-            viewport.layoutViewportBeforeContentLayout(
-                !host.isWidthSizedToContent() ? 
-                host.width - vm.borderMetrics.left - vm.borderMetrics.right -
-                vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
-                !host.isHeightSizedToContent() ?
-                host.height - vm.borderMetrics.top - vm.borderMetrics.bottom -
-                vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
-        }
-        
-               override protected function layoutViewAfterContentLayout():void
+               protected function handleSizeChange(event:Event):void
+               {
+                       COMPILE::JS {
+                               _titleBar.percentWidth = 100;
+                               _contentArea.percentWidth = 100;
+                       }
+                               
+                       performLayout(event);
+               }
+               
+               private function handleChildrenAdded(event:Event):void
                {
-            var vm:IViewportModel = viewportModel;
-            var viewportSize:Size = 
this.viewport.layoutViewportAfterContentLayout();
-            var host:ILayoutChild = this.host as ILayoutChild;
-            var hasWidth:Boolean = !host.isWidthSizedToContent();
-            var hasHeight:Boolean = !host.isHeightSizedToContent();
-            if (!hasWidth) {
-                titleBar.width = viewportSize.width; // should get titlebar to 
layout and get new height
-                vm.chromeMetrics = this.getChromeMetrics();
-                vm.chromeMetrics.top = titleBar.height;
-            }
-            super.layoutViewAfterContentLayout();
+                       _contentArea.dispatchEvent(new Event("layoutNeeded"));
+                       performLayout(event);
                }       
        }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
index 6e2b01a..4a0cd39 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
@@ -19,6 +19,7 @@
 package org.apache.flex.html.beads
 {
        import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IChild;
        import org.apache.flex.core.IContentViewHost;
        import org.apache.flex.core.ILayoutChild;
        import org.apache.flex.core.IPanelModel;
@@ -32,10 +33,15 @@ package org.apache.flex.html.beads
        import org.apache.flex.geom.Rectangle;
        import org.apache.flex.geom.Size;
        import org.apache.flex.html.Container;
+       import org.apache.flex.html.Panel;
        import org.apache.flex.html.ControlBar;
        import org.apache.flex.html.TitleBar;
        import org.apache.flex.utils.CSSContainerUtils;
        
+       COMPILE::SWF {
+               import org.apache.flex.core.SimpleCSSStyles;
+       }
+       
        /**
         *  The Panel class creates the visual elements of the 
org.apache.flex.html.Panel 
         *  component. A Panel has a org.apache.flex.html.TitleBar, content, 
and an 
@@ -47,7 +53,7 @@ package org.apache.flex.html.beads
         *  @playerversion AIR 2.6
         *  @productversion FlexJS 0.0
         */
-       public class PanelWithControlBarView extends ContainerView implements 
IBeadView
+       public class PanelWithControlBarView extends PanelView
        {
                /**
                 *  constructor.
@@ -59,22 +65,7 @@ package org.apache.flex.html.beads
                 */
                public function PanelWithControlBarView()
                {
-               }
-               
-               private var _titleBar:TitleBar;
-               
-               /**
-                *  The org.apache.flex.html.TitleBar component of the 
-                *  org.apache.flex.html.Panel.
-                *
-                *  @langversion 3.0
-                *  @playerversion Flash 10.2
-                *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
-                */
-               public function get titleBar():TitleBar
-               {
-                       return _titleBar;
+                       super();
                }
                
                private var _controlBar:ControlBar;
@@ -102,105 +93,62 @@ package org.apache.flex.html.beads
                 */
                override public function set strand(value:IStrand):void
                {
-                       var host:UIBase = UIBase(value);
+                       super.strand = value;
                        
-                       // TODO: (aharui) get class to instantiate from CSS
-                       if (!_titleBar) {
-                               _titleBar = new TitleBar();
-                               _titleBar.id = "panelTitleBar";
-                               _titleBar.height = 30;
-                       }
-                       // replace the TitleBar's model with the Panel's model 
(it implements ITitleBarModel) so that
-                       // any changes to values in the Panel's model that 
correspond values in the TitleBar will 
-                       // be picked up automatically by the TitleBar.
-                       _titleBar.model = host.model;
+                       var host:UIBase = UIBase(_strand);
                        
-                       var controlBarItems:Array = (host.model as 
IPanelModel).controlBar;
-                       if( controlBarItems && controlBarItems.length > 0 ) {
-                               _controlBar = new ControlBar();
-                               _controlBar.id = "panelControlBar";
-                               _controlBar.height = 30;
+                       _controlBar = new ControlBar();
+                       _controlBar.id = "panelControlBar";
+                       
+                       COMPILE::SWF {
+                               _controlBar.percentWidth = 100;
                                
-                               for each(var comp:IUIBase in controlBarItems) {
-                                       _controlBar.addElement(comp, false);
+                               if (_controlBar.style == null) {
+                                       _controlBar.style = new 
SimpleCSSStyles();
                                }
+                               _controlBar.style.flexGrow = 0;
+                               _controlBar.style.order = 3;
+                       }
+                               
+                       COMPILE::JS {
+                               _controlBar.element.style["flex-grow"] = "0";
+                               _controlBar.element.style["order"] = "3";
                        }
-                       
-                       super.strand = value;
                }
                
                override protected function completeSetup():void
                {
-                       super.completeSetup();
+                       if (titleBar.parent == null) {
+                               (_strand as Panel).$addElement(titleBar);
+                       }
+                       if (contentArea.parent == null) {
+                               (_strand as Panel).$addElement(contentArea as 
IChild);
+                       }
+                       if (controlBar.parent == null) {
+                               (_strand as Panel).$addElement(controlBar);
+                       }
                        
-                       (_strand as 
IContentViewHost).strandChildren.addElement(titleBar, false);
+                       var host:UIBase = UIBase(_strand);
                        
-                       if (controlBar) {
-                               (_strand as 
IContentViewHost).strandChildren.addElement(_controlBar, false);
+                       var controlBarItems:Array = (host.model as 
IPanelModel).controlBar;
+                       if( controlBarItems && controlBarItems.length > 0 ) {
+                               for each(var comp:IUIBase in controlBarItems) {
+                                       controlBar.addElement(comp, false);
+                               }
                        }
+                       
+                       super.completeSetup();
                }
                
-        /**
-         * Calculate the space taken up by non-content children like a 
TItleBar in a Panel.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-        override protected function getChromeMetrics():Rectangle
-        {
-            return new Rectangle(0, titleBar.height, 0, controlBar.height - 
titleBar.height);
-        }
-        
-        override protected function layoutViewBeforeContentLayout():void
-        {
-            var vm:IViewportModel = viewportModel;
-            var host:ILayoutChild = this.host as ILayoutChild;
-            var hasHeight:Boolean = !host.isHeightSizedToContent();
-            var hasWidth:Boolean = !host.isWidthSizedToContent();
-            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
-            titleBar.x = vm.borderMetrics.left;
-            titleBar.y = vm.borderMetrics.top;
-            if (hasWidth) 
-            {
-                titleBar.width = host.width - vm.borderMetrics.left - 
vm.borderMetrics.right;
-                controlBar.width = host.width - vm.borderMetrics.left - 
vm.borderMetrics.right;
-            }
-            vm.chromeMetrics = getChromeMetrics();
-            controlBar.x = vm.borderMetrics.left;
-            if (hasHeight && hasWidth) 
-                controlBar.y = host.height - vm.borderMetrics.bottom - 
controlBar.height;
-            
-            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
-                vm.borderMetrics.top + vm.chromeMetrics.top);
-            viewport.layoutViewportBeforeContentLayout(
-                hasWidth ? 
-                    host.width - vm.borderMetrics.left - 
vm.borderMetrics.right -
-                        vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
-                hasHeight ?
-                    host.height - vm.borderMetrics.top - 
vm.borderMetrics.bottom -
-                        vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
-        }
-        
-        override protected function layoutViewAfterContentLayout():void
-        {
-            var vm:IViewportModel = viewportModel;
-            var viewportSize:Size = 
this.viewport.layoutViewportAfterContentLayout();
-            var host:ILayoutChild = this.host as ILayoutChild;
-            var hasWidth:Boolean = !host.isWidthSizedToContent();
-            var hasHeight:Boolean = !host.isHeightSizedToContent();
-            if (!hasWidth) {
-                titleBar.width = viewportSize.width; // should get titlebar to 
layout and get new height
-                vm.chromeMetrics = this.getChromeMetrics();
-                vm.chromeMetrics.top = titleBar.height;
-                controlBar.width = viewportSize.width; // should get 
controlbar to layout and get new height
-                vm.chromeMetrics.bottom = controlBar.height;
-            }
-            super.layoutViewAfterContentLayout();
-            if (!hasHeight) {
-                controlBar.y = host.height - vm.borderMetrics.bottom - 
controlBar.height;
-            }
-        }       
+               override protected function handleSizeChange(event:Event):void
+               {
+                       COMPILE::JS {
+                               titleBar.percentWidth = 100;
+                               contentArea.percentWidth = 100;
+                               controlBar.percentWidth = 100;
+                       }
+                               
+                       performLayout(event);
+               }       
        }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/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 8ceb479..ab9fd89 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
@@ -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;
@@ -82,8 +83,6 @@ package org.apache.flex.html.beads
                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);
             
             if (!itemRendererFactory)
@@ -129,16 +128,17 @@ package org.apache.flex.html.beads
          *  @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++)

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
index b0c11b5..cf2a29c 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextItemRendererFactoryForStringVectorData.as
@@ -22,8 +22,10 @@ package org.apache.flex.html.beads
     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;
@@ -80,9 +82,18 @@ package org.apache.flex.html.beads
                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 (!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 +134,17 @@ package org.apache.flex.html.beads
                {
                        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/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
index 206f43e..0f27523 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TitleBarView.mxml
@@ -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/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
index f937e34..d9ce367 100644
--- 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/BasicLayout.as
@@ -23,7 +23,8 @@ package org.apache.flex.html.beads.layouts
        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.ILayoutObject;
+       import org.apache.flex.core.IParent;
        import org.apache.flex.core.IStrand;
        import org.apache.flex.core.IUIBase;
     import org.apache.flex.core.UIBase;
@@ -85,7 +86,7 @@ package org.apache.flex.html.beads.layouts
             COMPILE::SWF
             {
                                var viewBead:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
-                               var contentView:IParentIUIBase = 
viewBead.contentView;
+                               var contentView:ILayoutObject = 
viewBead.contentView;
                                
                                var hostWidthSizedToContent:Boolean = 
host.isWidthSizedToContent();
                                var hostHeightSizedToContent:Boolean = 
host.isHeightSizedToContent();
@@ -215,13 +216,13 @@ package org.apache.flex.html.beads.layouts
                 var n:int;
                 
                 var viewBead:ILayoutHost = (host as 
ILayoutParent).getLayoutHost();
-                var contentView:IParentIUIBase = viewBead.contentView;
+                var contentView:ILayoutObject = viewBead.contentView;
 
                 n = contentView.numElements;
                                
                                // host must have either have position:absolute 
or position:relative
-                               if (host.element.style.position != "absolute" 
&& host.element.style.position != "relative") {
-                                       host.element.style.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

Reply via email to