flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ha...@apache.org
Subject [19/40] git commit: [flex-asjs] [refs/heads/tlf] - Major overhaul of containers and layouts.
Date Sun, 26 Mar 2017 13:02:11 GMT
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


Mime
View raw message