flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [2/4] git commit: [flex-asjs] [refs/heads/develop] - next incarnation of layout. Padding is now the responsibility of the layouts (layouts still need upgrading to handle padding correctly). ViewportModel is only used by ContainerViews and not layouts.
Date Thu, 03 Sep 2015 13:02:43 GMT
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelView.as
index 2d6eae7..fbd22ac 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelView.as
@@ -21,19 +21,21 @@ package org.apache.flex.html.beads
 	import flash.display.Sprite;
 	
 	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
 	import org.apache.flex.core.IViewportModel;
 	import org.apache.flex.core.UIBase;
-	import org.apache.flex.core.UIMetrics;
-    import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.geom.Rectangle;
+	import org.apache.flex.geom.Size;
 	import org.apache.flex.html.Container;
 	import org.apache.flex.html.Panel;
 	import org.apache.flex.html.TitleBar;
-	import org.apache.flex.utils.BeadMetrics;
-    import org.apache.flex.utils.CSSUtils;
+	import org.apache.flex.utils.CSSContainerUtils;
+	import org.apache.flex.utils.CSSUtils;
 	
 	/**
 	 *  The Panel class creates the visual elements of the org.apache.flex.html.Panel 
@@ -115,74 +117,53 @@ package org.apache.flex.html.beads
 			super.completeSetup();
 		}
 		
-        override protected function adjustSizeBeforeLayout():void
+        /**
+         * 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
         {
-            var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-            
-            viewportModel.contentWidth = Math.max(host.width - metrics.left - metrics.right, 0);
-            viewportModel.contentHeight = Math.max(host.height - titleBar.height - metrics.top - metrics.bottom, 0);
-            viewportModel.contentX = metrics.left;
-            viewportModel.contentY = metrics.top;
-            
-            contentView.x = viewportModel.contentX;
-            contentView.y = viewportModel.contentY;
-            contentView.width = viewportModel.contentWidth;
-            contentView.height = viewportModel.contentHeight;
+            return new Rectangle(0, titleBar.height, 0, 0);
+        }
+        
+        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 layoutContainer(widthSizedToContent:Boolean, heightSizedToContent:Boolean):void
+		override protected function layoutViewAfterContentLayout():void
 		{
-            var borderThickness:Object = ValuesManager.valuesImpl.getValue(host,"border-width");
-            var borderStyle:Object = ValuesManager.valuesImpl.getValue(host,"border-style");
-            var border:Object = ValuesManager.valuesImpl.getValue(host,"border");
-            var borderOffset:Number;
-            if (borderStyle == "none")
-                borderOffset = 0;
-            else if (borderThickness != null)
-            {
-                if (borderThickness is String)
-                    borderOffset = CSSUtils.toNumber(borderThickness as String, host.width);
-                else
-                    borderOffset = Number(borderThickness);
-                if( isNaN(borderOffset) ) borderOffset = 0;            
-            }
-            else // no style and/or no width
-            {
-                border = ValuesManager.valuesImpl.getValue(host,"border");
-                if (border != null)
-                {
-                    if (border is Array)
-                    {
-                        borderOffset = CSSUtils.toNumber(border[0], host.width);
-                        borderStyle = border[1];
-                    }
-                    else if (border == "none")
-                        borderOffset = 0;
-                    else if (border is String)
-                        borderOffset = CSSUtils.toNumber(border as String, host.width);
-                    else
-                        borderOffset = Number(border);
-                }
-                else // no border style set at all so default to none
-                    borderOffset = 0;
-            }
-
-            titleBar.x = borderOffset;
-			titleBar.y = borderOffset;
-			titleBar.width = host.width - 2 * borderOffset;
-			titleBar.dispatchEvent( new Event("layoutNeeded") ); // this shouldn't be needed
-			
-			if (heightSizedToContent) {
-				host.height = viewportModel.contentHeight + titleBar.height + 2 * borderOffset;
-			}
-            if (widthSizedToContent) {
-                host.width = viewportModel +  2 * borderOffset;
+            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;
             }
-			
-			viewportModel.viewportHeight = host.height - titleBar.height - 2 * borderOffset;
-			viewportModel.viewportWidth = host.width - 2 * borderOffset;
-			viewportModel.viewportX = borderOffset;
-			viewportModel.viewportY = titleBar.height + borderOffset;
+            super.layoutViewAfterContentLayout();
 		}       
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelWithControlBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelWithControlBarView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelWithControlBarView.as
index 0731cee..c0c7c02 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelWithControlBarView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/PanelWithControlBarView.as
@@ -21,19 +21,21 @@ package org.apache.flex.html.beads
 	import flash.display.Sprite;
 	
 	import org.apache.flex.core.IBeadView;
-    import org.apache.flex.core.IPanelModel;
-    import org.apache.flex.core.ITitleBarModel;
+	import org.apache.flex.core.ILayoutChild;
+	import org.apache.flex.core.IPanelModel;
 	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.ITitleBarModel;
 	import org.apache.flex.core.IUIBase;
 	import org.apache.flex.core.IViewportModel;
 	import org.apache.flex.core.UIBase;
-	import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.events.Event;
 	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.ControlBar;
 	import org.apache.flex.html.TitleBar;
-	import org.apache.flex.utils.BeadMetrics;
+	import org.apache.flex.utils.CSSContainerUtils;
 	
 	/**
 	 *  The Panel class creates the visual elements of the org.apache.flex.html.Panel 
@@ -138,30 +140,67 @@ package org.apache.flex.html.beads
 			}
 		}
 		
-		override protected function layoutContainer(widthSizedToContent:Boolean, heightSizedToContent:Boolean):void
-		{
-			var adjustHeight:Number = titleBar.height;
-			
-			titleBar.x = 0;
-			titleBar.y = 0;
-			titleBar.width = host.width;
-			titleBar.dispatchEvent( new Event("layoutNeeded") );
-			
-			if (controlBar) {
-				controlBar.width = host.width;
-				controlBar.dispatchEvent( new Event("layoutNeeded") );
-				controlBar.y = host.height - controlBar.height;
-				adjustHeight += controlBar.height;
-			}
-			
-			if (heightSizedToContent) {
-				host.height = host.height + adjustHeight;
-			}
-			
-			viewportModel.viewportHeight = host.height - adjustHeight;
-			viewportModel.viewportWidth = host.width;
-			viewportModel.viewportX = 0;
-			viewportModel.viewportY = titleBar.height;
-		}
+        /**
+         * 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, titleBar.height + controlBar.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;
+            }
+        }       
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SimpleAlertView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SimpleAlertView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SimpleAlertView.as
index 019023b..949f9c9 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SimpleAlertView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SimpleAlertView.as
@@ -26,13 +26,13 @@ package org.apache.flex.html.beads
 	import org.apache.flex.core.IStrand;
     import org.apache.flex.core.IParent;
 	import org.apache.flex.core.UIBase;
-	import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.geom.Rectangle;
 	import org.apache.flex.html.Label;
 	import org.apache.flex.html.TextButton;
-	import org.apache.flex.utils.BeadMetrics;
+    import org.apache.flex.utils.CSSContainerUtils;
 	
 	/**
 	 *  The SimpleAlertView class creates the visual elements of the 
@@ -124,7 +124,7 @@ package org.apache.flex.html.beads
 			}
 			var maxWidth:Number = Math.max(UIBase(_strand).width,ruler.measuredWidth);
 			
-			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+			var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
 			
 			messageLabel.x = metrics.left;
 			messageLabel.y = metrics.top;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputView.as
index 7c3ee2f..a6f1438 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputView.as
@@ -22,10 +22,10 @@ package org.apache.flex.html.beads
 	
 	import org.apache.flex.core.ILayoutChild;
     import org.apache.flex.core.IStrand;
-    import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
-    import org.apache.flex.utils.BeadMetrics;
+    import org.apache.flex.geom.Rectangle;
+    import org.apache.flex.utils.CSSContainerUtils;
 	
     /**
      *  The TextInputView class is the view for
@@ -72,11 +72,11 @@ package org.apache.flex.html.beads
 
             var w:Number;
             var h:Number;
-            var uiMetrics:UIMetrics;
+            var uiMetrics:Rectangle;
             var ilc:ILayoutChild = host as ILayoutChild;
             if (ilc.isWidthSizedToContent())
             {
-                uiMetrics = BeadMetrics.getMetrics(host);
+                uiMetrics = CSSContainerUtils.getBorderAndPaddingMetrics(host);
                 // use default width of 20
                 var s:String = textField.text;
                 textField.text = "0";
@@ -88,7 +88,7 @@ package org.apache.flex.html.beads
             if (ilc.isHeightSizedToContent())
             {
                 if (!uiMetrics)
-                    uiMetrics = BeadMetrics.getMetrics(host);
+                    uiMetrics = CSSContainerUtils.getBorderAndPaddingMetrics(host);
                 if (isNaN(h))
                 {
                     s = textField.text;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputWithBorderView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputWithBorderView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputWithBorderView.as
index 2c7bf21..fbab13e 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputWithBorderView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/TextInputWithBorderView.as
@@ -26,11 +26,11 @@ package org.apache.flex.html.beads
 	import org.apache.flex.core.IParent;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.ValuesManager;
-    import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.geom.Rectangle;
 	import org.apache.flex.html.supportClasses.Border;
-	import org.apache.flex.utils.BeadMetrics;
+	import org.apache.flex.utils.CSSContainerUtils;
 
     /**
      *  The TextInputWithBorderView class is the default view for
@@ -77,7 +77,7 @@ package org.apache.flex.html.beads
             {
                 textField.autoSize = "none";
                 autoWidth = false;
-                var uiMetrics:UIMetrics = BeadMetrics.getMetrics(host);
+                var uiMetrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(host);
                 textField.width = host.width - uiMetrics.left - uiMetrics.right;
                 textField.x = uiMetrics.left;
             }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
index 4cbd567..f7bf57d 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.as
@@ -22,7 +22,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IItemRendererClassFactory;
 	import org.apache.flex.core.IItemRendererParent;
 	import org.apache.flex.core.ILayoutParent;
-	import org.apache.flex.core.IParent;
+	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.ISelectableItemRenderer;
 	import org.apache.flex.core.ISelectionModel;
 	import org.apache.flex.core.IStrand;
@@ -101,7 +101,7 @@ package org.apache.flex.html.beads.layouts
 		public function layout():Boolean
 		{
 			var layoutParent:ILayoutParent = _strand.getBeadByType(ILayoutParent) as ILayoutParent;
-			var contentView:IParent = layoutParent.contentView;
+			var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
 			var itemRendererParent:IItemRendererParent = contentView as IItemRendererParent;
 			var viewportModel:IViewportModel = (layoutParent as ButtonBarView).viewportModel;
 			
@@ -115,8 +115,8 @@ package org.apache.flex.html.beads.layouts
 			}
 			
 			var xpos:Number = 0;
-			var useWidth:Number = viewportModel.contentWidth / realN;
-			var useHeight:Number = viewportModel.contentHeight;
+			var useWidth:Number = contentView.width / realN;
+			var useHeight:Number = contentView.height;
 			
 			for (var i:int=0; i < n; i++)
 			{

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/HScrollBarLayout.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
index 751c5a8..38b97ec 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/HScrollBarLayout.as
@@ -23,11 +23,11 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.IScrollBarModel;
 	import org.apache.flex.core.IStrand;
-	import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.geom.Rectangle;
 	import org.apache.flex.html.beads.IScrollBarView;
-	import org.apache.flex.utils.BeadMetrics;
+	import org.apache.flex.utils.CSSContainerUtils;
 
     /**
      *  The HScrollBarLayout class is a layout
@@ -81,7 +81,7 @@ package org.apache.flex.html.beads.layouts
             if (!sbModel)
                 sbModel = _strand.getBeadByType(IScrollBarModel) as IScrollBarModel
 					
-			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+			var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
                     
 			var w:Number = DisplayObject(_strand).width + metrics.left + metrics.right;
 			var increment:DisplayObject = sbView.increment;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
index 00c53b3..612519a 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
@@ -23,12 +23,12 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.IScrollBarModel;
 	import org.apache.flex.core.IStrand;
-	import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.geom.Rectangle;
 	import org.apache.flex.html.beads.IScrollBarView;
 	import org.apache.flex.html.beads.ScrollBarView;
-	import org.apache.flex.utils.BeadMetrics;
+	import org.apache.flex.utils.CSSContainerUtils;
 
     /**
      *  The VScrollBarLayout class is a layout
@@ -82,7 +82,7 @@ package org.apache.flex.html.beads.layouts
             if (!sbModel)
                 sbModel = _strand.getBeadByType(IScrollBarModel) as IScrollBarModel
 					
-			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+			var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
                     
 			var h:Number = DisplayObject(_strand).height + metrics.top + metrics.bottom;
 			var increment:DisplayObject = sbView.increment;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as
index 5fa88a4..c15c5d8 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/models/ViewportModel.as
@@ -23,7 +23,11 @@ package org.apache.flex.html.beads.models
 	import org.apache.flex.core.IViewportModel;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.EventDispatcher;
+	import org.apache.flex.geom.Rectangle;
 	
+    /**
+     * @copy org.apache.flex.core.IViewportModel
+     */
 	public class ViewportModel extends EventDispatcher implements IViewportModel
 	{
 		public function ViewportModel()
@@ -31,131 +35,35 @@ package org.apache.flex.html.beads.models
 			super();
 		}
 		
-		private var _contentIsHost:Boolean = false;
-		private var _contentArea:IUIBase;
-		private var _contentWidth:Number = 0;
-		private var _contentHeight:Number = 0;
-		private var _contentX:Number = 0;
-		private var _contentY:Number = 0;
-		private var _viewportWidth:Number = 0;
-		private var _viewportHeight:Number = 0;
-		private var _viewportX:Number = 0;
-		private var _viewportY:Number = 0;
-		private var _verticalScrollPosition:Number = 0;
-		private var _horizontalScrollPosition:Number = 0;
-		
-		public function get contentArea():IUIBase
-		{
-			return _contentArea;
-		}
-		public function set contentArea(value:IUIBase):void
-		{
-			_contentArea = value;
-			dispatchEvent( new Event("contentAreaChanged") );
-		}
-		
-		public function get contentIsHost():Boolean
-		{
-			return _contentIsHost;
-		}
-		public function set contentIsHost(value:Boolean):void
-		{
-			_contentIsHost = value;
-		}
-		
-		public function get viewportWidth():Number
-		{
-			return _viewportWidth;
-		}
-		public function set viewportWidth(value:Number):void
-		{
-			_viewportWidth = value;
-		}
-		
-		public function get viewportHeight():Number
-		{
-			return _viewportHeight;
-		}
-		public function set viewportHeight(value:Number):void
-		{
-			_viewportHeight = value;
-		}
-		
-		public function get viewportX():Number
-		{
-			return _viewportX;
-		}
-		public function set viewportX(value:Number):void
-		{
-			_viewportX = value;
-		}
-		
-		public function get viewportY():Number
-		{
-			return _viewportY;
-		}
-		public function set viewportY(value:Number):void
-		{
-			_viewportY = value;
-		}
-		
-		public function get contentWidth():Number
-		{
-			return _contentWidth;
-		}
-		public function set contentWidth(value:Number):void
-		{
-			_contentWidth = value;
-		}
-		
-		public function get contentHeight():Number
-		{
-			return _contentHeight;
-		}
-		public function set contentHeight(value:Number):void
-		{
-			_contentHeight = value;
-		}
-		
-		public function get contentX():Number
-		{
-			return _contentX;
-		}
-		public function set contentX(value:Number):void
-		{
-			_contentX = value;
-		}
-		
-		public function get contentY():Number
-		{
-			return _contentY;
-		}
-		public function set contentY(value:Number):void
-		{
-			_contentY = value;
-		}
-		
-		public function get verticalScrollPosition():Number
-		{
-			return _verticalScrollPosition;
-		}
-		public function set verticalScrollPosition(value:Number):void
-		{
-			_verticalScrollPosition = value;
-			dispatchEvent( new Event("verticalScrollPositionChanged") );
-		}
-		
-		public function get horizontalScrollPosition():Number
-		{
-			return _horizontalScrollPosition;
-		}
-		public function set horizontalScrollPosition(value:Number):void
-		{
-			_horizontalScrollPosition = value;
-		}
+        private var _borderMetrics:Rectangle;
+		private var _chromeMetrics:Rectangle;
 		
 		private var _strand:IStrand;
 		
+        /**
+         * @copy org.apache.flex.core.IViewportModel
+         */
+        public function get borderMetrics():Rectangle
+        {
+            return _borderMetrics;
+        }
+        public function set borderMetrics(value:Rectangle):void
+        {
+            _borderMetrics = value;
+        }
+        
+        /**
+         * @copy org.apache.flex.core.IViewportModel
+         */
+        public function get chromeMetrics():Rectangle
+        {
+            return _chromeMetrics;
+        }
+        public function set chromeMetrics(value:Rectangle):void
+        {
+            _chromeMetrics = value;
+        }
+        
 		public function set strand(value:IStrand):void
 		{
 			_strand = value;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
index b7a3832..8c8fb76 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
@@ -21,6 +21,7 @@ package org.apache.flex.html.supportClasses
 	import flash.geom.Rectangle;
 	
 	import org.apache.flex.core.IBead;
+    import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
@@ -28,44 +29,17 @@ package org.apache.flex.html.supportClasses
 	import org.apache.flex.core.IViewportModel;
 	import org.apache.flex.core.IViewportScroller;
 	import org.apache.flex.core.UIBase;
-	import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.events.Event;
+    import org.apache.flex.geom.Size;
 	import org.apache.flex.html.beads.ScrollBarView;
 	import org.apache.flex.html.beads.models.ScrollBarModel;
-	import org.apache.flex.utils.BeadMetrics;
 	
-	public class ScrollingViewport implements IBead, IViewport
+	public class ScrollingViewport extends Viewport implements IBead, IViewport
 	{		
 		public function ScrollingViewport()
 		{
 		}
-		
-		private var contentArea:UIBase;
-		
-		private var _strand:IStrand;
-		
-		public function set strand(value:IStrand):void
-		{
-			_strand = value;
-		}
-		
-		private var _model:IViewportModel;
-		
-		public function set model(value:IViewportModel):void
-		{
-			_model = value;
-			
-			if (model.contentArea) contentArea = model.contentArea as UIBase;
-			
-			model.addEventListener("contentAreaChanged", handleContentChange);
-			model.addEventListener("verticalScrollPositionChanged", handleVerticalScrollChange);
-			model.addEventListener("horizontalScrollPositionChanged", handleHorizontalScrollChange);
-		}
-		public function get model():IViewportModel
-		{
-			return _model;
-		}
-		
+				
 		private var _verticalScroller:ScrollBar;
 		public function get verticalScroller():IViewportScroller
 		{
@@ -78,204 +52,151 @@ package org.apache.flex.html.supportClasses
 			return _horizontalScroller;
 		}
         
+        private var _verticalScrollPosition:Number = 0;
         public function get verticalScrollPosition():Number
         {
-            return _model.verticalScrollPosition;
+            return _verticalScrollPosition;
         }
         public function set verticalScrollPosition(value:Number):void
         {
-            _model.verticalScrollPosition = value;
+            _verticalScrollPosition = value;
+            handleVerticalScrollChange();
         }
         
+        private var _horizontalScrollPosition:Number = 0;
         public function get horizontalScrollPosition():Number
         {
-            return _model.horizontalScrollPosition;
+            return _horizontalScrollPosition;
         }
         public function set horizontalScrollPosition(value:Number):void
         {
-            _model.horizontalScrollPosition = value;
+            _horizontalScrollPosition = value;
+            handleHorizontalScrollChange();
         }
 		
-		/**
-		 * Invoke this function to reshape and set the contentArea being managed by
-		 * this viewport. If scrollers are present this will update them as well to
-		 * reflect the current location of the visible portion of the contentArea
-		 * within the viewport.
-		 */
-		public function updateContentAreaSize():void
-		{
-			var host:UIBase = UIBase(_strand);
-			var rect:Rectangle;
-			var vbarAdjustHeightBy:Number = 0;
-			var hbarAdjustWidthBy:Number = 0;
-			
-			if (_verticalScroller) {
-				ScrollBarModel(_verticalScroller.model).maximum = model.contentHeight;
-				_verticalScroller.x = model.viewportWidth - _verticalScroller.width + 1;
-				_verticalScroller.y = model.viewportY;
-				
-				rect = contentArea.scrollRect;
-				rect.y = ScrollBarModel(_verticalScroller.model).value;
-				contentArea.scrollRect = rect;
-				
-				hbarAdjustWidthBy = _verticalScroller.width + 1;
-			}
-			
-			if (_horizontalScroller) {
-				ScrollBarModel(_horizontalScroller.model).maximum = model.contentWidth;
-				_horizontalScroller.x = model.viewportX;
-				_horizontalScroller.y = model.viewportHeight - _horizontalScroller.height + 1;
-				
-				rect = contentArea.scrollRect;
-				rect.x = ScrollBarModel(_horizontalScroller.model).value;
-				contentArea.scrollRect = rect;
-				
-				vbarAdjustHeightBy = _horizontalScroller.height + 1;
-			}
-			
-			if (_verticalScroller) {
-				_verticalScroller.setHeight(model.viewportHeight - vbarAdjustHeightBy, false);
-			}
-			if (_horizontalScroller) {
-				_horizontalScroller.setWidth(model.viewportWidth - hbarAdjustWidthBy, false);
-			} 
-			
-			if (!model.contentIsHost) {
-				contentArea.x = model.contentX;
-				contentArea.y = model.contentY;
-			}
-			contentArea.setWidthAndHeight(model.contentWidth, model.contentHeight, true);
-		}
-		
-		public function updateSize():void
-		{
-			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
-			var host:UIBase = UIBase(_strand);
-			var addVbar:Boolean = false;
-			var addHbar:Boolean = false;
-			
-			if (model.viewportHeight >= model.contentHeight) {
-				if (_verticalScroller) {
-					host.removeElement(_verticalScroller);
-					_verticalScroller = null;
-				}
-			}
-			else if (model.contentHeight > model.viewportHeight) {
-				if (_verticalScroller == null) {
-					addVbar = true;
-				}
-			}
-			
-			if (model.viewportWidth >= model.contentWidth) {
-				if (_horizontalScroller) {
-					host.removeElement(_horizontalScroller);
-					_horizontalScroller = null;
-				}
-			}
-			else if (model.contentWidth > model.viewportWidth) {
-				if (_horizontalScroller == null) {
-					addHbar = true;
-				}
-			}
-			
-			if (addVbar) needsVerticalScroller();
-			if (_verticalScroller) {
-				ScrollBarModel(_verticalScroller.model).maximum = model.contentHeight;
-				ScrollBarModel(_verticalScroller.model).pageSize = model.viewportHeight;
-				ScrollBarModel(_verticalScroller.model).pageStepSize = model.viewportHeight;
-			}
-			
-			if (addHbar) needsHorizontalScroller();
-			if (_horizontalScroller) {
-				ScrollBarModel(_horizontalScroller.model).maximum = model.contentWidth;
-				ScrollBarModel(_horizontalScroller.model).pageSize = model.viewportWidth;
-				ScrollBarModel(_horizontalScroller.model).pageStepSize = model.viewportWidth;
-			}
-			
-			var rect:Rectangle = contentArea.scrollRect;
-			if (rect) {
-				rect.x = model.viewportX;//0;
-				rect.y = model.viewportY;//0;
-				rect.width = model.viewportWidth - metrics.left;
-				rect.height = model.viewportHeight - 2*metrics.top;
-				contentArea.scrollRect = rect;
-			}
-		}
-		
-		/**
-		 * Call this function when at least one scroller is needed to view the entire
-		 * contentArea.
-		 */
-		public function needsScrollers():void
-		{
-			needsVerticalScroller();
-			needsHorizontalScroller();
-		}
-		
-		/**
-		 * Call this function when only a vertical scroller is needed
-		 */
-		public function needsVerticalScroller():void
-		{
-			var host:UIBase = UIBase(_strand);
-			
-			var needVertical:Boolean = model.contentHeight > model.viewportHeight;
-			
-			if (needVertical && _verticalScroller == null) {
-				_verticalScroller = createVerticalScrollBar();
-				var vMetrics:UIMetrics = BeadMetrics.getMetrics(_verticalScroller);
-				_verticalScroller.visible = true;
-				_verticalScroller.x = model.viewportWidth - (_verticalScroller.width+1) - vMetrics.left - vMetrics.right;
-				_verticalScroller.y = model.viewportY;
-				_verticalScroller.setHeight(model.viewportHeight, true);
-				
-				host.addElement(_verticalScroller, false);
-			}
-		}
-		
-		/**
-		 * Call this function when only a horizontal scroller is needed
-		 */
-		public function needsHorizontalScroller():void
-		{
-			var host:UIBase = UIBase(_strand);
-			
-			var needHorizontal:Boolean = model.contentWidth > model.viewportWidth;
-			
-			if (needHorizontal && _horizontalScroller == null) {
-				_horizontalScroller = createHorizontalScrollBar();
-				var hMetrics:UIMetrics = BeadMetrics.getMetrics(_horizontalScroller);
-				_horizontalScroller.visible = true;
-				_horizontalScroller.x = model.viewportX;
-				_horizontalScroller.y = model.viewportHeight - (_horizontalScroller.height+1) - hMetrics.top - hMetrics.bottom;
-				_horizontalScroller.setWidth(model.viewportWidth, true);
-				
-				host.addElement(_horizontalScroller, false);
-			}
-		}
-		
-		public function scrollerWidth():Number
+        private var viewportWidth:Number;
+        private var viewportHeight:Number;
+        /**
+         * @copy org.apache.flex.core.IViewport 
+         */
+        override public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
+        {
+           super.layoutViewportBeforeContentLayout(width, height);
+           viewportWidth = width;
+           viewportHeight = height;
+        }
+        
+        /**
+         * @copy org.apache.flex.core.IViewport 
+         */
+		override public function layoutViewportAfterContentLayout():Size
 		{
-			if (_verticalScroller) return _verticalScroller.width;
-			return 0;
+            var hadV:Boolean = _verticalScroller != null && _verticalScroller.visible;            
+            var hadH:Boolean = _horizontalScroller != null && _horizontalScroller.visible;
+            var contentSize:Size;
+            do
+            {
+                contentSize = super.layoutViewportAfterContentLayout();
+                if (isNaN(viewportHeight))
+                    viewportHeight = contentSize.height;
+                if (isNaN(viewportWidth))
+                    viewportWidth = contentSize.width;
+                    
+    			var host:UIBase = UIBase(_strand);
+    			var visibleWidth:Number;
+                var visibleHeight:Number;
+                var needV:Boolean = contentSize.height > viewportHeight;
+                var needH:Boolean = contentSize.width > viewportWidth;
+                
+                if (needV)
+                {
+                    if (_verticalScroller == null) {
+                        _verticalScroller = createVerticalScrollBar();
+                        host.addElement(_verticalScroller, false);
+                    }
+                }
+                if (needH)
+                {
+                    if (_horizontalScroller == null) {
+                        _horizontalScroller = createHorizontalScrollBar();
+                        host.addElement(_horizontalScroller, false);
+                    }
+                }
+                
+                if (needV)
+                {
+                    _verticalScroller.visible = true;
+                    _verticalScroller.x = contentArea.x + viewportWidth - _verticalScroller.width;
+                    _verticalScroller.y = contentArea.y;
+                    _verticalScroller.setHeight(viewportHeight - (needH ? _horizontalScroller.height : 0), true);
+                    visibleWidth = _verticalScroller.x;
+                }
+                else if (_verticalScroller)
+                    _verticalScroller.visible = false;
+    			
+    			if (needH) 
+                {
+                    _horizontalScroller.visible = true;
+    				_horizontalScroller.x = contentArea.x;
+    				_horizontalScroller.y = contentArea.y + viewportHeight - _horizontalScroller.height;
+                    _horizontalScroller.setWidth(viewportWidth - (needV ? _verticalScroller.width : 0), true);
+                    visibleHeight = _horizontalScroller.y;
+    			}
+    			
+                var needsLayout:Boolean = false;
+                // resize content area if needed to get out from under scrollbars
+                if (!isNaN(visibleWidth) || !isNaN(visibleHeight))
+                {
+                    if (!isNaN(visibleWidth))
+                        needsLayout = visibleWidth != contentView.width;
+                    if (!isNaN(visibleHeight))
+                        needsLayout = visibleHeight != contentView.height;
+                    if (!isNaN(visibleWidth) && !isNaN(visibleHeight))
+                        contentArea.setWidthAndHeight(visibleWidth, visibleHeight, false);
+                    else if (!isNaN(visibleWidth))
+                        contentArea.setWidth(visibleWidth, false);
+                    else if (!isNaN(visibleHeight))
+                        contentArea.setHeight(visibleHeight, false);
+                }
+                if (needsLayout)
+                {
+                    var layout:IBeadLayout = host.getBeadByType(IBeadLayout) as IBeadLayout;
+                    layout.layout();
+                }
+            } while (needsLayout && (needV != hadV || needH == hadH));
+            if (_verticalScroller)
+            {
+                ScrollBarModel(_verticalScroller.model).maximum = contentSize.height;
+                ScrollBarModel(_verticalScroller.model).pageSize = contentArea.height;
+                ScrollBarModel(_verticalScroller.model).pageStepSize = contentArea.height;
+                if (contentSize.height > contentArea.height && 
+                    (contentSize.height - contentArea.height) < _verticalScrollPosition)
+                    _verticalScrollPosition = contentSize.height - contentArea.height;
+            }
+            if (_horizontalScroller)
+            {
+                ScrollBarModel(_horizontalScroller.model).maximum = contentSize.width;
+                ScrollBarModel(_horizontalScroller.model).pageSize = contentArea.width;
+                ScrollBarModel(_horizontalScroller.model).pageStepSize = contentArea.width;                
+                if (contentSize.width > contentArea.width && 
+                    (contentSize.width - contentArea.width) < _horizontalScrollPosition)
+                    _horizontalScrollPosition = contentSize.width - contentArea.width;
+            }
+            
+            var rect:Rectangle = new Rectangle(_horizontalScrollPosition, _verticalScrollPosition,
+                        (_verticalScroller != null && _verticalScroller.visible) ?
+                            _verticalScroller.x : viewportWidth,
+                        (_horizontalScroller != null && _horizontalScroller.visible) ?
+                            _horizontalScroller.y : viewportHeight);
+            contentArea.scrollRect = rect;
+            return contentSize;
 		}
 		
-		public function scrollerHeight():Number
-		{
-			if (_horizontalScroller) return _horizontalScroller.height;
-			return 0;
-		}
 		
 		private function createVerticalScrollBar():ScrollBar
 		{
-			var host:UIBase = UIBase(_strand);
-			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-			
 			var vsbm:ScrollBarModel = new ScrollBarModel();
-			vsbm.maximum = model.contentHeight;
 			vsbm.minimum = 0;
-			vsbm.pageSize = model.viewportHeight - metrics.top - metrics.bottom;
-			vsbm.pageStepSize = model.viewportHeight - metrics.top - metrics.bottom;
 			vsbm.snapInterval = 1;
 			vsbm.stepSize = 1;
 			vsbm.value = 0;
@@ -285,29 +206,14 @@ package org.apache.flex.html.supportClasses
 			vsb.model = vsbm;
 			vsb.visible = false;
 			
-			vsb.addEventListener("scroll",handleVerticalScroll);
-			
-			var rect:Rectangle = contentArea.scrollRect;
-			if (rect == null) {
-				rect = new Rectangle(model.viewportX, model.viewportY,//0, 0, 
-					                 model.viewportWidth - metrics.left - metrics.right, 
-									 model.viewportHeight - metrics.top - metrics.bottom);
-				contentArea.scrollRect = rect;
-			}
-			
+			vsb.addEventListener("scroll",handleVerticalScroll);			
 			return vsb;
 		}
 		
 		private function createHorizontalScrollBar():ScrollBar
 		{
-			var host:UIBase = UIBase(_strand);
-			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-			
 			var hsbm:ScrollBarModel = new ScrollBarModel();
-			hsbm.maximum = model.contentWidth;
 			hsbm.minimum = 0;
-			hsbm.pageSize = model.viewportWidth - metrics.left - metrics.right;
-			hsbm.pageStepSize = model.viewportWidth - metrics.left - metrics.right;
 			hsbm.snapInterval = 1;
 			hsbm.stepSize = 1;
 			hsbm.value = 0;
@@ -317,16 +223,7 @@ package org.apache.flex.html.supportClasses
 			hsb.model = hsbm;
 			hsb.visible = false;
 			
-			hsb.addEventListener("scroll",handleHorizontalScroll);
-			
-			var rect:Rectangle = contentArea.scrollRect;
-			if (rect == null) {
-				rect = new Rectangle(model.viewportX, model.viewportY,//0, 0, 
-					model.viewportWidth - metrics.left - metrics.right, 
-					model.viewportHeight - metrics.top - metrics.bottom);
-				contentArea.scrollRect = rect;
-			}
-			
+			hsb.addEventListener("scroll",handleHorizontalScroll);			
 			return hsb;
 		}
 		
@@ -338,7 +235,7 @@ package org.apache.flex.html.supportClasses
 			rect.y = vpos;
 			contentArea.scrollRect = rect;
 			
-			model.verticalScrollPosition = vpos;
+			_verticalScrollPosition = vpos;
 		}
 		
 		private function handleHorizontalScroll(event:Event):void
@@ -349,25 +246,20 @@ package org.apache.flex.html.supportClasses
 			rect.x = hpos;
 			contentArea.scrollRect = rect;
 			
-			model.horizontalScrollPosition = hpos;
-		}
-		
-		private function handleContentChange(event:Event):void
-		{
-			contentArea = model.contentArea as UIBase;
+			_horizontalScrollPosition = hpos;
 		}
 		
-		private function handleVerticalScrollChange(event:Event):void
+		private function handleVerticalScrollChange():void
 		{
 			if (_verticalScroller) {
-				ScrollBarModel(_verticalScroller.model).value = model.verticalScrollPosition;
+				ScrollBarModel(_verticalScroller.model).value = verticalScrollPosition;
 			}
 		}
 		
-		private function handleHorizontalScrollChange(event:Event):void
+		private function handleHorizontalScrollChange():void
 		{
 			if (_horizontalScroller) {
-				ScrollBarModel(_horizontalScroller.model).value = model.horizontalScrollPosition;
+				ScrollBarModel(_horizontalScroller.model).value = horizontalScrollPosition;
 			}
 		}
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/TextFieldItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/TextFieldItemRenderer.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/TextFieldItemRenderer.as
index fc197c1..be8bb20 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/TextFieldItemRenderer.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/TextFieldItemRenderer.as
@@ -25,15 +25,15 @@ package org.apache.flex.html.supportClasses
     import org.apache.flex.core.IBeadController;
     import org.apache.flex.core.IStrand;
     import org.apache.flex.core.IUIBase;
-	import org.apache.flex.core.UIMetrics;
     import org.apache.flex.core.UIBase;
     import org.apache.flex.core.ValuesManager;
     import org.apache.flex.events.Event;
     import org.apache.flex.events.IEventDispatcher;
     import org.apache.flex.events.MouseEvent;
     import org.apache.flex.events.utils.MouseEventConverter;
+    import org.apache.flex.geom.Rectangle;
     import org.apache.flex.html.beads.ITextItemRenderer;
-	import org.apache.flex.utils.BeadMetrics;
+	import org.apache.flex.utils.CSSContainerUtils;
 	
 	/**
 	 *  The TextFieldItemRenderer class provides a org.apache.flex.html.TextField as an itemRenderer.
@@ -229,7 +229,7 @@ package org.apache.flex.html.supportClasses
 			{
 				var w:Number = _width;
 				if (isNaN(w)) w = $width;
-				var metrics:UIMetrics = BeadMetrics.getMetrics(this);
+				var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(this);
 				return w + metrics.left + metrics.right;
 			}
 			else
@@ -267,7 +267,7 @@ package org.apache.flex.html.supportClasses
 			{
 				var h:Number = _height;
 				if (isNaN(h)) h = $height;
-				var metrics:UIMetrics = BeadMetrics.getMetrics(this);
+				var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(this);
 				return h + metrics.top + metrics.bottom;
 			}
 			else

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
index b32767a..d731fa6 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/Viewport.as
@@ -18,9 +18,8 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.supportClasses
 {
-	import flash.geom.Rectangle;
-	
 	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IContentView;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
@@ -28,107 +27,85 @@ package org.apache.flex.html.supportClasses
 	import org.apache.flex.core.IViewportModel;
 	import org.apache.flex.core.IViewportScroller;
 	import org.apache.flex.core.UIBase;
-	import org.apache.flex.core.UIMetrics;
+    import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
+    import org.apache.flex.geom.Rectangle;
+    import org.apache.flex.geom.Size;
 	import org.apache.flex.html.beads.models.ScrollBarModel;
-	import org.apache.flex.utils.BeadMetrics;
+    import org.apache.flex.utils.CSSContainerUtils;
 	
+    /**
+     * @copy org.apache.flex.core.IViewport
+     */
 	public class Viewport implements IBead, IViewport
 	{	
 		public function Viewport()
 		{
 		}
 		
-		private var contentArea:UIBase;		
-		private var _strand:IStrand;
+		protected var contentArea:UIBase;
+        public function get contentView():IUIBase
+        {
+            return contentArea;
+        }
+        
+		protected var _strand:IStrand;
 		
 		public function set strand(value:IStrand):void
 		{
 			_strand = value;
+            contentArea = _strand.getBeadByType(IContentView) as UIBase;
+            if (!contentArea)
+            {
+                var c:Class = ValuesManager.valuesImpl.getValue(_strand, 'iContentView') as Class;
+                contentArea = new c() as UIBase;
+            }
 		}
 		
-		private var _model:IViewportModel;
-		
-		public function set model(value:IViewportModel):void
-		{
-			_model = value;
-			
-			if (model.contentArea) contentArea = model.contentArea as UIBase;
-			
-			model.addEventListener("contentAreaChanged", handleContentChange);
-		}
-		public function get model():IViewportModel
-		{
-			return _model;
-		}
-		
-		public function get verticalScroller():IViewportScroller
-		{
-			return null;
-		}
-		
-		public function get horizontalScroller():IViewportScroller
-		{
-			return null;
-		}
-		
-		/**
-		 * Invoke this function to reshape and set the contentArea being managed by
-		 * this viewport. If scrollers are present this will update them as well to
-		 * reflect the current location of the visible portion of the contentArea
-		 * within the viewport.
-		 */
-		public function updateContentAreaSize():void
-		{
-			if (!model.contentIsHost) {
-				contentArea.x = model.contentX;
-				contentArea.y = model.contentY;
-			}
-			//contentArea.setWidthAndHeight(model.contentWidth, model.contentHeight, true);
-		}
-		
-		public function updateSize():void
-		{
-			// not needed for this type of viewport
-		}
-		
-		/**
-		 * Call this function when at least one scroller is needed to view the entire
-		 * contentArea.
-		 */
-		public function needsScrollers():void
+        /**
+         * @copy org.apache.flex.core.IViewport 
+         */
+        public function setPosition(x:Number, y:Number):void
+        {
+            contentArea.x = x;
+            contentArea.y = y;
+        }
+        
+        /**
+         * @copy org.apache.flex.core.IViewport 
+         */
+		public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
 		{
+			if (!isNaN(width))
+                contentArea.width = width;
+            if (!isNaN(height))
+                contentArea.height = height;
 		}
 		
-		/**
-		 * Call this function when only a vertical scroller is needed
-		 */
-		public function needsVerticalScroller():void
+        /**
+         * @copy org.apache.flex.core.IViewport 
+         */
+		public function layoutViewportAfterContentLayout():Size
 		{
-			
+            // pass through all of the children and determine the maxWidth and maxHeight
+            // note: this is not done on the JavaScript side because the browser handles
+            // this automatically.
+            var maxWidth:Number = 0;
+            var maxHeight:Number = 0;
+            var num:Number = contentArea.numElements;
+            
+            for (var i:int=0; i < num; i++) {
+                var child:IUIBase = contentArea.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:Rectangle = CSSContainerUtils.getPaddingMetrics(this._strand);
+            return new Size(maxWidth + padding.right, maxHeight + padding.bottom);
 		}
 		
-		/**
-		 * Call this function when only a horizontal scroller is needed
-		 */
-		public function needsHorizontalScroller():void
-		{
-			
-		}
-		
-		public function scrollerWidth():Number
-		{
-			return 0;
-		}
-		
-		public function scrollerHeight():Number
-		{
-			return 0;
-		}
-		
-		private function handleContentChange(event:Event):void
-		{
-			contentArea = model.contentArea as UIBase;
-		}
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
index d9fea0b..a23b9b8 100644
--- a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
+++ b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/FlexibleFirstChildHorizontalLayout.as
@@ -26,13 +26,13 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IUIBase;
 	import org.apache.flex.core.IViewport;
 	import org.apache.flex.core.IViewportModel;
-    import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.geom.Rectangle;
     import org.apache.flex.html.supportClasses.Viewport;
-    import org.apache.flex.utils.BeadMetrics;
+    import org.apache.flex.utils.CSSContainerUtils;
 
     /**
      *  The FlexibleFirstChildHorizontalLayout class is a simple layout
@@ -79,25 +79,6 @@ package org.apache.flex.html.beads.layouts
             host = value as ILayoutChild;
 		}
 		
-		private var _viewportModel:IViewportModel;
-		
-		/**
-		 *  The data that describes the viewport used by this layout.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public function get viewportModel():IViewportModel
-		{
-			return _viewportModel;
-		}
-		public function set viewportModel(value:IViewportModel):void
-		{
-			_viewportModel = value;
-		}
-	
         private var _maxWidth:Number;
         
         /**
@@ -153,10 +134,6 @@ package org.apache.flex.html.beads.layouts
 			var contentView:IParent = layoutParent.contentView;
             var hostSizedToContent:Boolean = host.isHeightSizedToContent();
 			
-			// this layout will use and modify the IViewportMode
-			var viewport:IViewport = host.getBeadByType(IViewport) as IViewport;
-			if (viewport) viewportModel = viewport.model;
-
 			var n:int = contentView.numElements;
 			var marginLeft:Object;
 			var marginRight:Object;
@@ -169,7 +146,7 @@ package org.apache.flex.html.beads.layouts
             var xx:Number = layoutParent.resizableView.width;
             if (isNaN(xx) || xx <= 0)
                 return true;
-            var uiMetrics:UIMetrics = BeadMetrics.getMetrics(layoutParent.resizableView);
+            var uiMetrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(layoutParent.resizableView);
             xx -= uiMetrics.left + uiMetrics.right + 1; // some browsers won't layout to the edge
             
             for (var i:int = n - 1; i >= 0; i--)
@@ -259,23 +236,7 @@ package org.apache.flex.html.beads.layouts
             if (hostSizedToContent)
                 ILayoutChild(contentView).setHeight(maxHeight, true);
 			
-			// Only return true if the contentView needs to be larger; that new
-			// size is stored in the model.
-			var sizeChanged:Boolean = false;
-			if (viewportModel != null) {
-				if (viewportModel.contentHeight < maxHeight) {
-					viewportModel.contentHeight = maxHeight;
-					sizeChanged = true;
-				}
-				if (viewportModel.contentWidth < xx) {
-					viewportModel.contentWidth = xx;
-					sizeChanged = true;
-				}
-			} else {
-				sizeChanged = true;
-			}
-
-            return sizeChanged;
+            return true;
 		}
 
     }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
index 21cff15..be14146 100644
--- a/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
+++ b/frameworks/projects/HTML/asjs/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
@@ -101,8 +101,8 @@ package org.apache.flex.html.beads.layouts
 			var sw:Number = host.width;
 			var sh:Number = host.height;
 			
-            var hasWidth:Boolean = host.isWidthSizedToContent();
-            var hasHeight:Boolean = host.isHeightSizedToContent();
+            var hasWidth:Boolean = !host.isWidthSizedToContent();
+            var hasHeight:Boolean = !host.isHeightSizedToContent();
 			var e:IUIBase;
 			var i:int;
 			var col:int = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js
index 26bae27..836b008 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js
@@ -17,10 +17,10 @@ goog.provide('org.apache.flex.html.beads.ContainerView');
 goog.require('org.apache.flex.core.BeadViewBase');
 goog.require('org.apache.flex.core.IBeadLayout');
 goog.require('org.apache.flex.core.ILayoutParent');
-goog.require('org.apache.flex.html.beads.models.ViewportModel');
-goog.require('org.apache.flex.html.supportClasses.ContainerContentArea');
-goog.require('org.apache.flex.html.supportClasses.Viewport');
-goog.require('org.apache.flex.utils.BeadMetrics');
+goog.require('org.apache.flex.core.IViewport');
+goog.require('org.apache.flex.core.IViewportModel');
+goog.require('org.apache.flex.geom.Rectangle');
+goog.require('org.apache.flex.utils.CSSContainerUtils');
 
 
 
@@ -74,15 +74,6 @@ org.apache.flex.html.beads.ContainerView.prototype.contentArea_ = null;
 
 
 /**
- * @return {Object} The container's child content area.
- */
-org.apache.flex.html.beads.ContainerView.
-    prototype.createContentView = function() {
-  return new org.apache.flex.html.supportClasses.ContainerContentArea();
-};
-
-
-/**
  * @param {org.apache.flex.events.Event} event The event.
  */
 org.apache.flex.html.beads.ContainerView.
@@ -210,19 +201,31 @@ org.apache.flex.html.beads.ContainerView.
 
 
 /**
+ * Calculate the space taken up by non-content children like a TItleBar in a Panel.
+ * @return {org.apache.flex.geom.Rectangle} The space.
+ */
+org.apache.flex.html.beads.ContainerView.
+    prototype.getChromeMetrics = function() {
+  return new org.apache.flex.geom.Rectangle(0, 0, 0, 0);
+};
+
+
+/**
  * Creates the viewport and viewportModel.
  */
 org.apache.flex.html.beads.ContainerView.
     prototype.createViewport = function() {
-  if (this.viewportModel_ == null) {
-    this.viewportModel_ = new org.apache.flex.html.beads.models.ViewportModel();
-    this.viewportModel_.contentArea = this.contentView;
-    this.viewportModel_.contentIsHost = false;
+  this.viewportModel = this._strand.getBeadByType(org.apache.flex.core.IViewportModel);
+  if (this.viewportModel == null) {
+    var m3 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this._strand, 'iViewportModel');
+    this.viewportModel = new m3();
+    this._strand.addBead(this.viewportModel);
   }
-  if (this.viewport_ == null) {
-    this.viewport_ = new org.apache.flex.html.supportClasses.Viewport();
-    this.viewport_.model = this.viewportModel_;
-    this._strand.addBead(this.viewport_);
+  this.viewport = this._strand.getBeadByType(org.apache.flex.core.IViewport);
+  if (this.viewport == null) {
+    var m2 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this._strand, 'iViewport');
+    this.viewport = new m2();
+    this._strand.addBead(this.viewport);
   }
 };
 
@@ -231,16 +234,20 @@ org.apache.flex.html.beads.ContainerView.
  *
  */
 org.apache.flex.html.beads.ContainerView.
-    prototype.adjustSizeBeforeLayout = function() {
-    var host = this._strand;
-    this.viewportModel_.contentWidth = host.width;
-    this.viewportModel_.contentHeight = host.height;
-    this.viewportModel_.contentX = 0;
-    this.viewportModel_.contentY = 0;
-    if (!host.isWidthSizedToContent())
-      this.contentView.width = this.viewportModel_.contentWidth;
-    if (!host.isHeightSizedToContent())
-      this.contentView.height = this.viewportModel_.contentHeight;
+    prototype.layoutViewBeforeContentLayout = function() {
+  var host = this._strand;
+  var vm = this.viewportModel;
+  vm.borderMetrics = org.apache.flex.utils.CSSContainerUtils.getBorderMetrics(host);
+  vm.chromeMetrics = this.getChromeMetrics();
+  this.viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
+                            vm.borderMetrics.top + vm.chromeMetrics.top);
+  this.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);
 };
 
 
@@ -250,7 +257,7 @@ org.apache.flex.html.beads.ContainerView.
 org.apache.flex.html.beads.ContainerView.
     prototype.performLayout = function(event) {
   this.runningLayout = true;
-  this.adjustSizeBeforeLayout();
+  this.layoutViewBeforeContentLayout();
   if (this.layout == null) {
     this.layout = this._strand.getBeadByType(org.apache.flex.core.IBeadLayout);
     if (this.layout == null) {
@@ -261,7 +268,7 @@ org.apache.flex.html.beads.ContainerView.
   }
   this.layout.layout();
 
-  this.adjustSizeAfterLayout();
+  this.layoutViewAfterContentLayout();
   this.runningLayout = false;
 };
 
@@ -270,83 +277,26 @@ org.apache.flex.html.beads.ContainerView.
  *
  */
 org.apache.flex.html.beads.ContainerView.
-    prototype.adjustSizeAfterLayout = function() {
+    prototype.layoutViewAfterContentLayout = function() {
   var host = this._strand;
-  var metrics = org.apache.flex.utils.BeadMetrics.getMetrics(host);
 
-  if (host.isWidthSizedToContent())
-    this.viewportModel_.contentWidth = this.contentView.width;
-  if (host.isHeightSizedToContent())
-    this.viewportModel_.contentHeight = this.contentView.height;
+  var viewportSize = this.viewport.layoutViewportAfterContentLayout();
+  var vm = this.viewportModel;
 
   if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {
-    host.setWidthAndHeight(this.viewportModel_.contentWidth + metrics.left + metrics.right,
-                           this.viewportModel_.contentHeight + metrics.top + metrics.bottom, false);
+    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(this.viewportModel_.contentHeight + metrics.top + metrics.bottom, false);
+    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(this.viewportModel_.contentWidth + metrics.left + metrics.right, false);
+    host.setWidth(viewportSize.width + vm.borderMetrics.left + vm.borderMetrics.right +
+                               vm.chromeMetrics.left + vm.chromeMetrics.right, false);
   }
-
-  this.layoutContainer(host.isWidthSizedToContent(), host.isHeightSizedToContent());
-
-  // The JS version of Panel matches the content space to the viewport since HTML
-  // takes care of scrollbars
-  this.viewportModel_.contentX = this.viewportModel_.viewportX;
-  this.viewportModel_.contentY = this.viewportModel_.viewportY;
-  this.viewportModel_.contentWidth = this.viewportModel_.viewportWidth;
-  this.viewportModel_.contentHeight = this.viewportModel_.viewportHeight;
-
-  this.contentView.x = this.viewportModel_.contentX;
-  this.contentView.y = this.viewportModel_.contentY;
-  //this.contentView.width = this.viewportModel_.contentWidth;
-  //this.contentView.height = this.viewportModel_.contentHeight;
-
-  this.viewport_.updateSize();
-  this.viewport_.updateContentAreaSize();
-};
-
-
-/**
- * @expose
- * This function determines the size and placement of the viewport by adjusting the viewport
- * values in the viewportModel. Subclasses can use this to position additional items. If either
- * of the two parameters are true, the subclass should adjust the size of the host accordingly
- * to account for any additional elements.
- *
- * @param {boolean} widthSizedToContent True if the width of the container is being sized by its content.
- * @param {boolean} heightSizedToContent True if the height of the container is being sized by its content.
- */
-org.apache.flex.html.beads.ContainerView.
-    prototype.layoutContainer = function(widthSizedToContent, heightSizedToContent) {
-  this.viewportModel_.viewportHeight = this._strand.height;
-  this.viewportModel_.viewportWidth = this._strand.width;
-  this.viewportModel_.viewportX = 0;
-  this.viewportModel_.viewportY = 0;
-};
-
-
-/**
- *
- */
-org.apache.flex.html.beads.ContainerView.
-    prototype.determineContentSizeFromChildren = function() {
-  // this function has no meaning in the HTML world
-};
-
-
-/**
- * Adjusts the size of the viewportModel's viewport parameters to match those
- * of the strand.
- */
-org.apache.flex.html.beads.ContainerView.
-    prototype.resizeViewport = function() {
-/*  this.viewportModel_.viewportHeight = this._strand.height;
-  this.viewportModel_.viewportWidth = this._strand.width;
-  this.viewportModel_.viewportX = 0;
-  this.viewportModel_.viewportY = 0;*/
 };
 
 
@@ -355,11 +305,7 @@ Object.defineProperties(org.apache.flex.html.beads.ContainerView.prototype, {
     contentView: {
         /** @this {org.apache.flex.html.beads.ContainerView} */
         get: function() {
-            return this.contentArea_;
-        },
-        /** @this {org.apache.flex.html.beads.ContainerView} */
-        set: function(value) {
-            this.contentArea_ = value;
+            return this.viewport.contentView;
         }
     },
     /** @export */
@@ -377,9 +323,9 @@ Object.defineProperties(org.apache.flex.html.beads.ContainerView.prototype, {
         /** @this {org.apache.flex.html.beads.ContainerView} */
         set: function(value) {
             org.apache.flex.utils.Language.superSetter(org.apache.flex.html.beads.ContainerView, this, 'strand', value);
-            this.contentView = this.createContentView();
-            this.host.addElement(this.contentView);
-            this.host.setActualParent(this.contentView);
+            this.createViewport();
+            this.host.addElement(this.viewport.contentView);
+            this.host.setActualParent(this.viewport.contentView);
             this._strand.addEventListener('initComplete',
                   org.apache.flex.utils.Language.closure(this.initCompleteHandler, this, 'initCompleteHandler'));
          }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ListView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ListView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ListView.js
index e1b951d..8f3ab66 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ListView.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ListView.js
@@ -58,19 +58,6 @@ org.apache.flex.html.beads.ListView.prototype.
 
 /**
  * @override
- * @return {Object} The container's child content area.
- */
-org.apache.flex.html.beads.ListView.
-    prototype.createContentView = function() {
-  var m2 = org.apache.flex.core.ValuesManager.valuesImpl.
-                  getValue(this._strand, 'iDataGroup');
-  var contentView = new m2();
-  return contentView;
-};
-
-
-/**
- * @override
  */
 org.apache.flex.html.beads.ListView.
     prototype.completeSetup = function() {
@@ -94,7 +81,7 @@ Object.defineProperties(org.apache.flex.html.beads.ListView.prototype, {
             this.model.addEventListener('dataProviderChanged',
                 goog.bind(this.dataProviderChangeHandler, this));
 
-            this.dataGroup_.strand = this;
+            this.dataGroup.strand = this;
 
             /*if (this._strand.getBeadByType(org.apache.flex.core.IBeadLayout) == null) {
               var m3 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this._strand, 'iBeadLayout');
@@ -108,25 +95,10 @@ Object.defineProperties(org.apache.flex.html.beads.ListView.prototype, {
         }
     },
     /** @export */
-    contentView: {
-        /** @this {org.apache.flex.html.beads.ListView} */
-        get: function() {
-            return this.dataGroup_;
-        },
-        /** @this {org.apache.flex.html.beads.ListView} */
-        set: function(value) {
-            this.dataGroup_ = value;
-        }
-    },
-    /** @export */
     dataGroup: {
         /** @this {org.apache.flex.html.beads.ListView} */
         get: function() {
-            return this.dataGroup_;
-        },
-        /** @this {org.apache.flex.html.beads.ListView} */
-        set: function(value) {
-            this.dataGroup_ = value;
+            return this.contentView;
         }
     },
     /** @export */
@@ -164,11 +136,11 @@ org.apache.flex.html.beads.ListView.prototype.
     selectionChangeHandler = function(value) {
   var ir;
   if (this.lastSelectedIndex != -1) {
-    ir = this.dataGroup_.getItemRendererForIndex(this.lastSelectedIndex);
+    ir = this.dataGroup.getItemRendererForIndex(this.lastSelectedIndex);
     if (ir) ir.selected = false;
   }
   if (this.model.selectedIndex != -1) {
-    ir = this.dataGroup_.getItemRendererForIndex(
+    ir = this.dataGroup.getItemRendererForIndex(
         this.model.selectedIndex);
     if (ir) ir.selected = true;
   }
@@ -192,6 +164,6 @@ org.apache.flex.html.beads.ListView.prototype.
  * @param {org.apache.flex.events.Event} event The event that triggered the resize.
  */
 org.apache.flex.html.beads.ListView.prototype.handleSizeChange = function(event) {
-  this.dataGroup_.width = this._strand.width;
-  this.dataGroup_.height = this._strand.height;
+  this.dataGroup.width = this._strand.width;
+  this.dataGroup.height = this._strand.height;
 };

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/PanelView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/PanelView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/PanelView.js
index 2a4ef04..10a76f3 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/PanelView.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/PanelView.js
@@ -14,10 +14,9 @@
 
 goog.provide('org.apache.flex.html.beads.PanelView');
 
-goog.require('org.apache.flex.html.ControlBar');
 goog.require('org.apache.flex.html.TitleBar');
 goog.require('org.apache.flex.html.beads.ContainerView');
-goog.require('org.apache.flex.html.supportClasses.ContainerContentArea');
+goog.require('org.apache.flex.utils.CSSContainerUtils');
 
 
 
@@ -61,16 +60,6 @@ org.apache.flex.html.beads.PanelView
  * @override
  */
 org.apache.flex.html.beads.PanelView.
-    prototype.createContentView = function() {
-  var ca = new org.apache.flex.html.supportClasses.ContainerContentArea();
-  return ca;
-};
-
-
-/**
- * @override
- */
-org.apache.flex.html.beads.PanelView.
     prototype.completeSetup = function() {
   org.apache.flex.html.beads.PanelView.base(this, 'completeSetup');
   // listen for changes to the strand's model so items can be changed
@@ -118,43 +107,58 @@ Object.defineProperties(org.apache.flex.html.beads.PanelView.prototype, {
  * @override
  */
 org.apache.flex.html.beads.PanelView.
-    prototype.adjustSizeBeforeLayout = function() {
-    var host = this._strand;
-    this.viewportModel.contentWidth = host.width;
-    this.viewportModel.contentHeight = host.height - this.titleBar_.height;
-    this.viewportModel.contentX = 0;
-    this.viewportModel.contentY = 0;
-    if (!host.isWidthSizedToContent())
-      this.contentView.width = this.viewportModel.contentWidth;
-    if (!host.isHeightSizedToContent())
-      this.contentView.height = this.viewportModel.contentHeight;
+    prototype.layoutViewBeforeContentLayout = function() {
+  var vm = this.viewportModel;
+  var host = this._strand;
+
+  vm.borderMetrics = org.apache.flex.utils.CSSContainerUtils.getBorderMetrics(host);
+  this.titleBar.x = vm.borderMetrics.left;
+  this.titleBar.y = vm.borderMetrics.top;
+  if (!host.isWidthSizedToContent())
+    this.titleBar.width = host.width - vm.borderMetrics.left - vm.borderMetrics.right;
+  vm.chromeMetrics = this.getChromeMetrics();
+  this.viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
+                            vm.borderMetrics.top + vm.chromeMetrics.top);
+  this.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
- * @param {boolean} widthSizedToContent True if the width is determined by content.
- * @param {boolean} heightSizedToContent True if the height is determined by content.
  */
-org.apache.flex.html.beads.PanelView.prototype.layoutContainer =
-    function(widthSizedToContent, heightSizedToContent) {
-
-  this.titleBar_.x = 0;
-  this.titleBar_.y = 0;
-  this.titleBar_.width = this._strand.width;
-  this.titleBar_.dispatchEvent('sizeChanged');
-
-  if (heightSizedToContent) {
-    this._strand.height = this._strand.height + this.titleBar_.height;
+org.apache.flex.html.beads.PanelView.
+    prototype.layoutViewAfterContentLayout = function() {
+  var vm = this.viewportModel;
+  var host = this._strand;
+  var viewportSize = this.viewport.layoutViewportAfterContentLayout();
+  var hasWidth = !host.isWidthSizedToContent();
+  var hasHeight = !host.isHeightSizedToContent();
+  if (!hasWidth) {
+    this.titleBar.width = viewportSize.width; // should get titlebar to layout and get new height
+    vm.chromeMetrics = this.getChromeMetrics();
   }
+  org.apache.flex.html.beads.PanelView.base(this, 'layoutViewAfterContentLayout');
+};
+
 
-  this.viewportModel.viewportHeight = this._strand.height - this.titleBar_.height;
-  this.viewportModel.viewportWidth = this._strand.width;
-  this.viewportModel.viewportX = 0;
-  this.viewportModel.viewportY = this.titleBar_.height;
+/**
+ * @override
+ * Returns the chrome metrics
+ */
+org.apache.flex.html.beads.PanelView.
+    prototype.getChromeMetrics = function() {
+  return new org.apache.flex.geom.Rectangle(0, this.titleBar.height, 0, 0);
 };
 
 
+
+
 /**
  * @override
  * @param {org.apache.flex.events.Event} event The event that triggered this handler.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.js
index 3690bc1..e6e1ee3 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/ButtonBarLayout.js
@@ -81,8 +81,8 @@ org.apache.flex.html.beads.layouts.ButtonBarLayout.
 
   var n = itemRendererParent.numElements;
   var xpos = 0;
-  var useWidth = viewportModel.contentWidth / n;
-  var useHeight = viewportModel.contentHeight;
+  var useWidth = contentView.width / n;
+  var useHeight = contentView.height;
 
   for (var i = 0; i < n; i++)
   {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ViewportModel.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ViewportModel.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ViewportModel.js
index 1eb5153..8d01d77 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ViewportModel.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/models/ViewportModel.js
@@ -54,64 +54,15 @@ org.apache.flex.html.beads.models.ViewportModel.prototype.strand_ = null;
 
 
 /**
- * @type {boolean}
+ * @type {org.apache.flex.geom.Rectangle}
  */
-org.apache.flex.html.beads.models.ViewportModel.prototype.contentIsHost = false;
+org.apache.flex.html.beads.models.ViewportModel.prototype.borderMetrics = null;
 
 
 /**
- * @private
- * @type {Object}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.contentArea_ = null;
-
-
-/**
- * @type {number}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.contentWidth = NaN;
-
-
-/**
- * @type {number}
+ * @type {org.apache.flex.geom.Rectangle}
  */
-org.apache.flex.html.beads.models.ViewportModel.prototype.contentHeight = NaN;
-
-
-/**
- * @type {number}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.contentX = NaN;
-
-
-/**
- * @type {number}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.contentY = NaN;
-
-
-/**
- * @type {number}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.viewportWidth = NaN;
-
-
-/**
- * @type {number}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.viewportHeight = NaN;
-
-
-/**
- * @type {number}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.viewportX = NaN;
-
-
-/**
- * @type {number}
- */
-org.apache.flex.html.beads.models.ViewportModel.prototype.viewportY = NaN;
+org.apache.flex.html.beads.models.ViewportModel.prototype.chromeMetrics = null;
 
 
 /**
@@ -128,17 +79,6 @@ org.apache.flex.html.beads.models.ViewportModel.prototype.horizontalScrollPositi
 
 Object.defineProperties(org.apache.flex.html.beads.models.ViewportModel.prototype, {
     /** @export */
-    contentArea: {
-        /** @this {org.apache.flex.html.beads.models.ViewportModel} */
-        get: function() {
-            return this.contentArea_;
-        },
-        /** @this {org.apache.flex.html.beads.models.ViewportModel} */
-        set: function(value) {
-            this.contentArea_ = value;
-        }
-    },
-    /** @export */
     strand: {
         /** @this {org.apache.flex.html.beads.models.ViewportModel} */
         set: function(value) {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ScrollingViewport.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ScrollingViewport.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ScrollingViewport.js
index 131d2da..0146912 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ScrollingViewport.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ScrollingViewport.js
@@ -15,11 +15,14 @@
 goog.provide('org.apache.flex.html.supportClasses.ScrollingViewport');
 
 goog.require('org.apache.flex.events.Event');
+goog.require('org.apache.flex.geom.Size');
 
 
 
 /**
  * @constructor
+ * @implements {org.apache.flex.core.IBead}
+ * @implements {org.apache.flex.core.IViewport}
  */
 org.apache.flex.html.supportClasses.ScrollingViewport =
 function() {
@@ -33,95 +36,95 @@ function() {
  */
 org.apache.flex.html.supportClasses.ScrollingViewport.prototype.FLEXJS_CLASS_INFO =
     { names: [{ name: 'ScrollingViewport',
-                qName: 'org.apache.flex.html.supportClasses.ScrollingViewport' }]};
+                qName: 'org.apache.flex.html.supportClasses.ScrollingViewport' }],
+      interfaces: [org.apache.flex.core.IBead,
+                   org.apache.flex.core.IViewport]};
 
 
 /**
- * @private
+ * @protected
  * @type {Object}
  */
-org.apache.flex.html.supportClasses.ScrollingViewport.prototype.strand_ = null;
+org.apache.flex.html.supportClasses.ScrollingViewport.prototype._strand = null;
 
 
 /**
- *
+ * @type {org.apache.flex.html.supportClasses.ContainerContentArea}
  */
-org.apache.flex.html.supportClasses.ScrollingViewport.prototype.updateSize = function() {
-};
+org.apache.flex.html.supportClasses.ScrollingViewport.prototype.contentView = null;
 
 
 /**
- *
+ * @param {number} x The x position of the viewport.
+ * @param {number} y The y position of the viewport.
  */
-org.apache.flex.html.supportClasses.ScrollingViewport.prototype.updateContentAreaSize = function() {
+org.apache.flex.html.supportClasses.ScrollingViewport.prototype.setPosition =
+   function(x, y) {
+  this.contentView.x = x;
+  this.contentView.y = y;
 };
 
 
 /**
- * @param {org.apache.flex.events.Event} event The event.
+ * @param {number} width The width or NaN if sized to content.
+ * @param {number} height The height or NaN if sized to content.
  */
-org.apache.flex.html.supportClasses.ScrollingViewport.prototype.handleInitComplete =
-  function(event) {
-    var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
-    var contentView = viewBead.contentView;
-    contentView.element.style['overflow'] = 'auto';
+org.apache.flex.html.supportClasses.ScrollingViewport.prototype.layoutViewportBeforeContentLayout =
+   function(width, height) {
+  if (!isNaN(width))
+    this.contentView.width = width;
+  if (!isNaN(height))
+    this.contentView.height = height;
 };
 
 
+/**
+ * @return {org.apache.flex.geom.Size} The size of the viewport.
+ */
+org.apache.flex.html.supportClasses.ScrollingViewport.prototype.layoutViewportAfterContentLayout =
+   function() {
+  // nothing to do here?  In theory, the layout and browser will have stretched or shrunk
+  // the contentView to the right size
+  return new org.apache.flex.geom.Size(this.contentView.width, this.contentView.height);
+};
+
 
 Object.defineProperties(org.apache.flex.html.supportClasses.ScrollingViewport.prototype, {
     /** @export */
-    model: {
-        /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
-        get: function() {
-            return this.model_;
-        },
-        /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
-        set: function(value) {
-            this.model_ = value;
-        }
-    },
-    /** @export */
     verticalScrollPosition: {
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         get: function() {
-             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
-             var contentView = viewBead.contentView;
-            return contentView.positioner.scrollTop;
+            return this.contentView.positioner.scrollTop;
         },
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         set: function(value) {
-             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
-             var contentView = viewBead.contentView;
-             contentView.positioner.scrollTop = value;
+            this.contentView.positioner.scrollTop = value;
         }
     },
     /** @export */
     horizontalScrollPosition: {
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         get: function() {
-             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
-             var contentView = viewBead.contentView;
-            return contentView.positioner.scrollLeft;
+             return this.contentView.positioner.scrollLeft;
         },
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         set: function(value) {
-             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
-             var contentView = viewBead.contentView;
-             contentView.positioner.scrollLeft = value;
+             this.contentView.positioner.scrollLeft = value;
         }
     },
     /** @export */
     strand: {
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
-        get: function() {
-            return this.strand_;
-        },
-        /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         set: function(value) {
-            this.strand_ = value;
-            this.strand_.addEventListener('initComplete',
-              goog.bind(this.handleInitComplete, this));
-        }
+            this._strand = value;
+            this.contentView = this._strand.getBeadByType(org.apache.flex.core.IContentView);
+            if (this.contentView == null) {
+              var c = org.apache.flex.core.ValuesManager.valuesImpl.getValue(
+                       this._strand, 'iContentView');
+              if (c)
+                this.contentView = new c();
+            }
+            this.contentView.element.style.overflow = 'auto';
+         }
     }
 });


Mime
View raw message