flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [3/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:44 GMT
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.  Viewports are abstractions that include the scrollbars.  BeadMetrics and UIMetrics replaced by CSSContainerUtils


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

Branch: refs/heads/develop
Commit: cf3994fef99b82a5e3c73a9fdaae103a36eb5094
Parents: 3531931
Author: Alex Harui <aharui@apache.org>
Authored: Thu Sep 3 06:01:22 2015 -0700
Committer: Alex Harui <aharui@apache.org>
Committed: Thu Sep 3 06:01:22 2015 -0700

----------------------------------------------------------------------
 .../org/apache/flex/charts/beads/ChartView.as   |  44 +--
 .../layouts/LineChartCategoryVsLinearLayout.as  |  15 +-
 .../layouts/LineChartLinearVsLinearLayout.as    |  13 +-
 .../flex/charts/beads/layouts/PieChartLayout.as |  13 +-
 .../beads/layouts/StackedBarChartLayout.as      |  13 +-
 .../beads/layouts/StackedColumnChartLayout.as   |  13 +-
 frameworks/projects/Core/as/src/CoreClasses.as  |   2 +-
 .../as/src/org/apache/flex/core/IViewport.as    |  78 ++--
 .../src/org/apache/flex/core/IViewportModel.as  | 116 ++----
 .../Core/as/src/org/apache/flex/core/UIBase.as  |   1 -
 .../as/src/org/apache/flex/core/UIButtonBase.as |   1 -
 .../as/src/org/apache/flex/core/UIMetrics.as    | 127 -------
 .../Core/as/src/org/apache/flex/geom/Size.as    |  41 ++
 .../as/src/org/apache/flex/utils/BeadMetrics.as | 151 --------
 .../org/apache/flex/utils/CSSContainerUtils.as  | 194 ++++++++++
 .../js/src/org/apache/flex/core/IViewport.js    |   9 -
 .../src/org/apache/flex/core/IViewportModel.js  |  68 +---
 .../js/src/org/apache/flex/core/UIMetrics.js    |  79 ----
 .../js/src/org/apache/flex/geom/Rectangle.js    |  26 ++
 .../Core/js/src/org/apache/flex/geom/Size.js    |  56 +++
 .../js/src/org/apache/flex/utils/BeadMetrics.js |  84 -----
 .../org/apache/flex/utils/CSSContainerUtils.js  |  81 ++++
 frameworks/projects/HTML/as/defaults.css        |  14 +-
 .../src/org/apache/flex/html/beads/AlertView.as |   6 +-
 .../org/apache/flex/html/beads/ButtonBarView.as |  14 +-
 .../org/apache/flex/html/beads/ContainerView.as | 199 ++++------
 .../src/org/apache/flex/html/beads/ListView.as  |  33 +-
 .../src/org/apache/flex/html/beads/PanelView.as | 115 +++---
 .../flex/html/beads/PanelWithControlBarView.as  |  97 +++--
 .../apache/flex/html/beads/SimpleAlertView.as   |   6 +-
 .../org/apache/flex/html/beads/TextInputView.as |  10 +-
 .../flex/html/beads/TextInputWithBorderView.as  |   6 +-
 .../flex/html/beads/layouts/ButtonBarLayout.as  |   8 +-
 .../flex/html/beads/layouts/HScrollBarLayout.as |   6 +-
 .../flex/html/beads/layouts/VScrollBarLayout.as |   6 +-
 .../flex/html/beads/models/ViewportModel.as     | 152 ++------
 .../html/supportClasses/ScrollingViewport.as    | 378 +++++++------------
 .../supportClasses/TextFieldItemRenderer.as     |   8 +-
 .../apache/flex/html/supportClasses/Viewport.as | 143 +++----
 .../FlexibleFirstChildHorizontalLayout.as       |  47 +--
 .../html/beads/layouts/VerticalColumnLayout.as  |   4 +-
 .../org/apache/flex/html/beads/ContainerView.js | 164 +++-----
 .../src/org/apache/flex/html/beads/ListView.js  |  40 +-
 .../src/org/apache/flex/html/beads/PanelView.js |  80 ++--
 .../flex/html/beads/layouts/ButtonBarLayout.js  |   4 +-
 .../flex/html/beads/models/ViewportModel.js     |  68 +---
 .../html/supportClasses/ScrollingViewport.js    |  93 ++---
 .../apache/flex/html/supportClasses/Viewport.js |  65 +++-
 .../flex/mobile/beads/StackedViewManagerView.as |   2 -
 .../flex/mobile/beads/TabbedViewManagerView.as  |   2 -
 .../apache/flex/mobile/beads/ViewManagerView.as |   2 -
 51 files changed, 1165 insertions(+), 1832 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/ChartView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/ChartView.as b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/ChartView.as
index cd5651f..6f5c446 100644
--- a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/ChartView.as
+++ b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/ChartView.as
@@ -29,14 +29,15 @@ package org.apache.flex.charts.beads
 	import org.apache.flex.core.IViewport;
 	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.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.beads.ListView;
 	import org.apache.flex.html.beads.models.ViewportModel;
 	import org.apache.flex.html.supportClasses.Viewport;
-	import org.apache.flex.utils.BeadMetrics;
+	import org.apache.flex.utils.CSSContainerUtils;
 	
 	public class ChartView extends ListView implements IBeadView
 	{
@@ -123,9 +124,9 @@ package org.apache.flex.charts.beads
 		 * be calculated so the chart's layout algorithm knows precisely the dimensions of 
 		 * chart for its item renderers.
 		 */
-		override protected function adjustSizeBeforeLayout():void
+		override protected function layoutViewBeforeContentLayout():void
 		{			
-			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+			var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
 			
 			var widthAdjustment:Number = 0;
 			var heightAdjustment:Number = 0;
@@ -143,17 +144,11 @@ package org.apache.flex.charts.beads
 			
 			var strandWidth:Number = UIBase(_strand).width;
 			var strandHeight:Number = UIBase(_strand).height;
-						
-			viewportModel.viewportHeight = strandHeight - heightAdjustment - metrics.bottom - metrics.top;
-			viewportModel.viewportWidth = strandWidth - widthAdjustment - metrics.right - metrics.left;
-			viewportModel.viewportX = widthAdjustment + metrics.left;
-			viewportModel.viewportY = metrics.top;
-			
-			viewportModel.contentX = viewportModel.viewportX;
-			viewportModel.contentY = viewportModel.viewportY;
-			viewportModel.contentWidth = viewportModel.viewportWidth;
-			viewportModel.contentHeight = viewportModel.viewportHeight;
 			
+            viewport.setPosition(widthAdjustment + metrics.left, metrics.top);
+			viewport.layoutViewportBeforeContentLayout(strandWidth - widthAdjustment - metrics.right - metrics.left,
+                                                        strandHeight - heightAdjustment - metrics.bottom - metrics.top);
+            
 			if (verticalAxisGroup) {
 				UIBase(verticalAxisGroup).x = metrics.left;
 				UIBase(verticalAxisGroup).y = metrics.top;
@@ -168,28 +163,13 @@ package org.apache.flex.charts.beads
 				UIBase(horizontalAxisGroup).height = heightAdjustment;
 			}
 			
+            /* viewport should be doing this now
 			if (dataGroup) {
 				UIBase(dataGroup).x = viewportModel.contentX;
 				UIBase(dataGroup).y = viewportModel.contentY;
 				UIBase(dataGroup).width = viewportModel.contentWidth;
 				UIBase(dataGroup).height = viewportModel.contentHeight;
-			}
-		}
-		
-		/**
-		 * Charts do not need adjustment after layout.
-		 */
-		override protected function adjustSizeAfterLayout():void
-		{
-			// not used for charts
-		}
-		
-		/**
-		 * Charts do not need their contents changed once determined prior to layout.
-		 */
-		override protected function layoutContainer(widthSizedToContent:Boolean, heightSizedToContent:Boolean):void
-		{
-			// not used for charts
-		}
+			} */
+		}		
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartCategoryVsLinearLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartCategoryVsLinearLayout.as b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartCategoryVsLinearLayout.as
index bbfc97c..77b9fd6 100644
--- a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartCategoryVsLinearLayout.as
+++ b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartCategoryVsLinearLayout.as
@@ -25,8 +25,8 @@ package org.apache.flex.charts.beads.layouts
 	import org.apache.flex.charts.supportClasses.LineSeries;
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ISelectionModel;
-	import org.apache.flex.core.IViewport;
-	import org.apache.flex.core.IViewportModel;
+    import org.apache.flex.core.ILayoutParent;
+    import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
@@ -56,18 +56,17 @@ package org.apache.flex.charts.beads.layouts
 			if (!dp)
 				return;
 			
-			// this layout will use and modify the IViewportMode
-			var viewport:IViewport = chart.getBeadByType(IViewport) as IViewport;
-			var viewportModel:IViewportModel = viewport.model;
+            var layoutParent:ILayoutParent = strand.getBeadByType(ILayoutParent) as ILayoutParent;
+            var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
 			
 			var n:int = dp.length;
 			var xAxisOffset:Number = 0;
 			var yAxisOffset:Number = 0;
 			
 			var xpos:Number = yAxisOffset;
-			var useWidth:Number = viewportModel.contentWidth-yAxisOffset;;
-			var useHeight:Number = viewportModel.contentHeight - xAxisOffset;
-			var itemWidth:Number =  useWidth/dp.length;
+			var useWidth:Number = contentView.width - yAxisOffset;;
+			var useHeight:Number = contentView.height - xAxisOffset;
+			var itemWidth:Number =  useWidth / dp.length;
 			
 			var maxYValue:Number = 0;
 			var minYValue:Number = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartLinearVsLinearLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartLinearVsLinearLayout.as b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartLinearVsLinearLayout.as
index 617ab2c..8088a6a 100644
--- a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartLinearVsLinearLayout.as
+++ b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/LineChartLinearVsLinearLayout.as
@@ -25,8 +25,8 @@ package org.apache.flex.charts.beads.layouts
 	import org.apache.flex.charts.supportClasses.LineSeries;
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ISelectionModel;
-	import org.apache.flex.core.IViewport;
-	import org.apache.flex.core.IViewportModel;
+    import org.apache.flex.core.ILayoutParent;
+    import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
@@ -56,16 +56,15 @@ package org.apache.flex.charts.beads.layouts
 			if (!dp)
 				return;
 			
-			// this layout will use and modify the IViewportMode
-			var viewport:IViewport = chart.getBeadByType(IViewport) as IViewport;
-			var viewportModel:IViewportModel = viewport.model;
+            var layoutParent:ILayoutParent = strand.getBeadByType(ILayoutParent) as ILayoutParent;
+            var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
 			
 			var n:int = dp.length;
 			
 			var xpos:Number = 0;
 			var ypos:Number = 0;
-			var useWidth:Number = viewportModel.contentWidth;
-			var useHeight:Number = viewportModel.contentHeight;
+			var useWidth:Number = contentView.width;
+			var useHeight:Number = contentView.height;
 			var itemWidth:Number =  useWidth/dp.length;
 			
 			var maxXValue:Number = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/PieChartLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/PieChartLayout.as b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/PieChartLayout.as
index dd27e09..22e4145 100644
--- a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/PieChartLayout.as
+++ b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/PieChartLayout.as
@@ -24,8 +24,8 @@ package org.apache.flex.charts.beads.layouts
 	import org.apache.flex.charts.supportClasses.PieSeries;
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ISelectionModel;
-	import org.apache.flex.core.IViewport;
-	import org.apache.flex.core.IViewportModel;
+	import org.apache.flex.core.ILayoutParent;
+	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.graphics.IFill;
 	import org.apache.flex.core.graphics.SolidColor;
 	import org.apache.flex.events.Event;
@@ -64,15 +64,14 @@ package org.apache.flex.charts.beads.layouts
 			if (!dp)
 				return;
 			
-			// this layout will use and modify the IViewportMode
-			var viewport:IViewport = chart.getBeadByType(IViewport) as IViewport;
-			var viewportModel:IViewportModel = viewport.model;
+            var layoutParent:ILayoutParent = strand.getBeadByType(ILayoutParent) as ILayoutParent;
+            var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
 			
 			var n:int = dp.length;
 			
 			var xpos:Number = 0;
-			var useWidth:Number = viewportModel.contentWidth;
-			var useHeight:Number = viewportModel.contentHeight;
+			var useWidth:Number = contentView.width;
+			var useHeight:Number = contentView.height;
 			
 			var maxYValue:Number = 0;
 			var seriesMaxes:Array = [];

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedBarChartLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedBarChartLayout.as b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedBarChartLayout.as
index d875702..705d5d8 100644
--- a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedBarChartLayout.as
+++ b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedBarChartLayout.as
@@ -24,8 +24,8 @@ package org.apache.flex.charts.beads.layouts
 	import org.apache.flex.charts.supportClasses.BarSeries;
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ISelectionModel;
-	import org.apache.flex.core.IViewport;
-	import org.apache.flex.core.IViewportModel;
+    import org.apache.flex.core.ILayoutParent;
+    import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
@@ -84,9 +84,8 @@ package org.apache.flex.charts.beads.layouts
 			if (!dp)
 				return;
 			
-			// this layout will use and modify the IViewportMode
-			var viewport:IViewport = chart.getBeadByType(IViewport) as IViewport;
-			var viewportModel:IViewportModel = viewport.model;
+            var layoutParent:ILayoutParent = strand.getBeadByType(ILayoutParent) as ILayoutParent;
+            var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
 			
 			var n:int = dp.length;			
 			var maxXValue:Number = 0;
@@ -94,8 +93,8 @@ package org.apache.flex.charts.beads.layouts
 			var determineScale:Boolean = true;
 			var seriesMaxes:Array = [];
 			
-			var useWidth:Number = viewportModel.contentWidth;
-			var useHeight:Number = viewportModel.contentHeight;
+            var useWidth:Number = contentView.width;
+            var useHeight:Number = contentView.height;
 			var itemHeight:Number = (useHeight - gap*(dp.length-1))/n;
 			var seriesHeight:Number = itemHeight;
 			var xpos:Number = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedColumnChartLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedColumnChartLayout.as b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedColumnChartLayout.as
index 0c95013..7474b6f 100644
--- a/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedColumnChartLayout.as
+++ b/frameworks/projects/Charts/asjs/src/org/apache/flex/charts/beads/layouts/StackedColumnChartLayout.as
@@ -23,8 +23,8 @@ package org.apache.flex.charts.beads.layouts
 	import org.apache.flex.charts.supportClasses.ColumnSeries;
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ISelectionModel;
-	import org.apache.flex.core.IViewport;
-	import org.apache.flex.core.IViewportModel;
+    import org.apache.flex.core.ILayoutParent;
+    import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
@@ -83,13 +83,12 @@ package org.apache.flex.charts.beads.layouts
 			if (!dp)
 				return;
 			
-			// this layout will use and modify the IViewportMode
-			var viewport:IViewport = chart.getBeadByType(IViewport) as IViewport;
-			var viewportModel:IViewportModel = viewport.model;
+            var layoutParent:ILayoutParent = strand.getBeadByType(ILayoutParent) as ILayoutParent;
+            var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
 			
 			var n:int = dp.length;
-			var useWidth:Number = viewportModel.contentWidth;
-			var useHeight:Number = viewportModel.contentHeight;
+            var useWidth:Number = contentView.width;
+            var useHeight:Number = contentView.height;
 			var itemWidth:Number = (useWidth - gap*(dp.length-1))/dp.length;
 			var seriesWidth:Number = itemWidth;
 			var xpos:Number = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/CoreClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/CoreClasses.as b/frameworks/projects/Core/as/src/CoreClasses.as
index 9e07c85..ba56798 100644
--- a/frameworks/projects/Core/as/src/CoreClasses.as
+++ b/frameworks/projects/Core/as/src/CoreClasses.as
@@ -86,8 +86,8 @@ internal class CoreClasses
     import org.apache.flex.geom.Point; Point;
     import org.apache.flex.geom.Rectangle; Rectangle;
     import org.apache.flex.utils.BinaryData; BinaryData;
-    import org.apache.flex.utils.BeadMetrics; BeadMetrics;
     import org.apache.flex.utils.CSSBorderUtils; CSSBorderUtils;
+    import org.apache.flex.utils.CSSContainerUtils; CSSContainerUtils;
     import org.apache.flex.utils.dbg.DOMPathUtil; DOMPathUtil;
 	import org.apache.flex.utils.EffectTimer; EffectTimer;
     import org.apache.flex.utils.MixinManager; MixinManager;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/core/IViewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/IViewport.as b/frameworks/projects/Core/as/src/org/apache/flex/core/IViewport.as
index 2d30a5c..b66b74d 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/IViewport.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/IViewport.as
@@ -18,63 +18,41 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.core
 {
-	/**
-	 * A Viewport is a window onto an area of content. A viewport is given space
-	 * in which to operate by a View bead. Viewports can control their area which
-	 * is specified by the IViewportModel, adding scrollbars or whatever scrolling
-	 * mechanism they want.
-	 */
+    import org.apache.flex.geom.Size;
+    
+    /**
+     * A Viewport is the area of a Container set aside for displaying
+     * content and any scrolling controls.
+     */
 	public interface IViewport extends IBead
 	{
+        /**
+         * Get the actual parent of the container's content.
+         */
+        function get contentView():IUIBase;
+        
 		/**
-		 * The IViewportModel the instance of the Viewport should use to determine
-		 * its location and the location/size of the content it is managing. The
-		 * model also contains the layout to use and the contentArea to manage.
+		 * Sets the upper left position of the viewport
+         * @param x The left position.
+         * @param y The top position.
 		 */
-		function get model():IViewportModel;
-		function set model(value:IViewportModel):void;
+		function setPosition(x:Number, y:Number):void;
 		
 		/**
-		 * Invoke this function to actually change the contentArea (specified in
-		 * the IViewportModel.
+		 * Size the content area based on any visible scrolling controls and
+         * the given width and height.  If width and/or height is NaN
+         * then that dimension is being sized to content.
 		 */
-		function updateContentAreaSize():void;
+		function layoutViewportBeforeContentLayout(width:Number, height:Number):void;
 		
-		/**
-		 * Invoke this function when the host of the viewport has changed size.
-		 */
-		function updateSize():void;
-		
-		/**
-		 * If a View determines that scrollers are needed, it can inform the
-		 * Viewport using one of these three methods.
-		 */
-		function needsScrollers():void;
-		function needsVerticalScroller():void;
-		function needsHorizontalScroller():void;
-		
-		/**
-		 * Returns the vertical scroller being used, if any.
-		 */
-		function get verticalScroller():IViewportScroller;
-		
-		/**
-		 * Returns the horizontal scroller being used, if any.
-		 */
-		function get horizontalScroller():IViewportScroller;
-		
-		/**
-		 * Returns the effective width of the vertical scroller. This may
-		 * be the actual width of the scroller or it might be zero if the
-		 * scroller has no impact on the view.
-		 */
-		function scrollerWidth():Number;
-		
-		/**
-		 * Returns the effective height of the horizontal scroller. This may
-		 * be the actual height of the scroller or it might be zero if the
-		 * scroller has no impact on the view.
-		 */
-		function scrollerHeight():Number;
+        /**
+         * This method is invoked after layout is complete.  If width and/or height is
+         * sized to content, the viewport should determine that size and set the
+         * content area size appropriately, and display any scrolling controls
+         * before returning the resulting size of the viewport (which means the
+         * area used up by both content area and scrolling controls).
+         */
+        function layoutViewportAfterContentLayout():Size;
+        
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/core/IViewportModel.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/IViewportModel.as b/frameworks/projects/Core/as/src/org/apache/flex/core/IViewportModel.as
index 662577a..a1a0b7b 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/IViewportModel.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/IViewportModel.as
@@ -18,101 +18,33 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.core
 {
+    import org.apache.flex.geom.Rectangle;
+    
 	/**
-	 * A Viewport is a window onto an area of content. A viewport is given space
-	 * in which to operate by a View bead and given this model with the properties
-	 * necessary for its function.
-     * The viewport is the non-chrome, non-border area in a container.
-     * The contentView is then offset from the viewport area for padding and
-     * potentially scrollbars.
+	 * A Viewport is the area of a Container set aside for displaying
+     * content and any scrolling controls.
+     * The ViewportModel caches the offsets required to compute the size
+     * of the Viewport.
 	 */
-	public interface IViewportModel extends IBeadModel
+	public interface IViewportModel extends IBead
 	{	
-		// Layout and Content
-		
-		/**
-		 * Returns true (or set to true) when the contentArea is
-		 * actually the same as the host strand.
-		 */
-		function get contentIsHost():Boolean;
-		function set contentIsHost(value:Boolean):void;
-		
-		/**
-		 * The content area being managed by the viewport
-		 */
-		function get contentArea():IUIBase;
-		function set contentArea(value:IUIBase):void;
-		
-		// Viewport Position and Dimensions
-		
-		/**
-		 * The x position of the viewport space as allocated by the View.
-		 */
-		function get viewportX():Number;
-		function set viewportX(value:Number):void;
-		
-		/**
-		 * The y position of the viewport space as allocated by the View.
-		 */
-		function get viewportY():Number;
-		function set viewportY(value:Number):void;
-		
-		/**
-		 * The width of the viewport space as allocated by the View.
-		 */
-		function get viewportWidth():Number;
-		function set viewportWidth(value:Number):void;
-		
-		/**
-		 * The height of the viewport space as allocated by the View.
-		 */
-		function get viewportHeight():Number;
-		function set viewportHeight(value:Number):void;
-		
-		// Content Area Size and Position
-		
-		/**
-		 * The position of the content area within the viewport. This may
-		 * be an offset from the viewportX due to padding.
-		 */
-		function get contentX():Number;
-		function set contentX(value:Number):void;
-		
 		/**
-		 * The position of the content area within the viewport. This may
-		 * be an offset from the viewportY due to padding.
-		 */
-		function get contentY():Number;
-		function set contentY(value:Number):void;
-		
-		/**
-		 * The width of the content area within the viewport. The width is
-		 * determined by the content itself, mostly due to the use of 
-		 * a layout.
-		 */
-		function get contentWidth():Number;
-		function set contentWidth(value:Number):void;
-		
-		/**
-		 * The height of the content area within the viewport. The height
-		 * is determined by the content itself, mostly due to the use of
-		 * a layout.
-		 */
-		function get contentHeight():Number;
-		function set contentHeight(value:Number):void;
-		
-		// Scrolling Parameters
-		
-		/**
-		 * The top position of the content area that is visible in the viewport.
-		 */
-		function get verticalScrollPosition():Number;
-		function set verticalScrollPosition(value:Number):void;
-		
-		/**
-		 * The left position of the content area that is visible in the viewport.
-		 */
-		function get horizontalScrollPosition():Number;
-		function set horizontalScrollPosition(value:Number):void;
+		 * Size of the borders.
+		 */
+		function get borderMetrics():Rectangle;
+		function set borderMetrics(value:Rectangle):void;
+		
+        /**
+         * Size of the chrome.  A plain container doesn't have any chrome
+         * but a Panel's TitleBar and any ControlBar or StatusBar is
+         * considered chrome.  Scrollbars used to scroll content are
+         * not factored into the viewport calculation.  The Viewport
+         * is responsible for displaying any scrolling controls and
+         * deciding whether to further shrink the content area or
+         * have the scrollbars overlay the content.
+         */
+        function get chromeMetrics():Rectangle;
+        function set chromeMetrics(value:Rectangle):void;
+        
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/core/UIBase.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/UIBase.as b/frameworks/projects/Core/as/src/org/apache/flex/core/UIBase.as
index 5e3d7d6..f7ebd20 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/UIBase.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/UIBase.as
@@ -26,7 +26,6 @@ package org.apache.flex.core
 	import org.apache.flex.events.IEventDispatcher;
 	import org.apache.flex.events.MouseEvent;
 	import org.apache.flex.events.utils.MouseEventConverter;
-	import org.apache.flex.utils.BeadMetrics;
 	
 	/**
 	 *  Set a different class for click events so that

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as b/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as
index a8c2ba9..5aa6de5 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as
@@ -30,7 +30,6 @@ package org.apache.flex.core
 	import org.apache.flex.events.Event;
     import org.apache.flex.events.utils.MouseEventConverter;
 	import org.apache.flex.events.IEventDispatcher;
-	import org.apache.flex.utils.BeadMetrics;
 	
     //--------------------------------------
     //  Events

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/core/UIMetrics.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/UIMetrics.as b/frameworks/projects/Core/as/src/org/apache/flex/core/UIMetrics.as
deleted file mode 100644
index 349e46d..0000000
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/UIMetrics.as
+++ /dev/null
@@ -1,127 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.flex.core
-{
-    /**
-     *  The UIMetrics class is the base class for most composite user interface
-     *  components.  For the Flash Player, Buttons and Text controls may
-     *  have a different base class and therefore may not extend UIBase.
-     *  However all user interface components should implement IUIBase.
-     *  
-     *  @langversion 3.0
-     *  @playerversion Flash 10.2
-     *  @playerversion AIR 2.6
-     *  @productversion FlexJS 0.0
-     */
-	public class UIMetrics
-	{
-        /**
-         *  Constructor.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-		public function UIMetrics()
-		{
-		}
-		
-        /**
-         *  The offset or position of the top of something.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-		public var top:Number;
-		
-        /**
-         *  The offset or position of the left of something.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-		public var left:Number;
-		
-        /**
-         *  The offset or position of the bottom of something.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-		public var bottom:Number;
-		
-        /**
-         *  The offset or position of the right of something.
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion FlexJS 0.0
-         */
-		public var right:Number;
-		
-		/**
-		 *  The extra spacing on top of the object.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public var marginTop:Number;
-		
-		/**
-		 *  The extra spacing to the left of the object.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public var marginLeft:Number;
-		
-		/**
-		 *  The extra spacing on bottom of the object.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public var marginBottom:Number;
-		
-		/**
-		 *  The extra spacing to the right of the object.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		public var marginRight:Number;
-		
-	}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/geom/Size.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/geom/Size.as b/frameworks/projects/Core/as/src/org/apache/flex/geom/Size.as
new file mode 100644
index 0000000..4c02934
--- /dev/null
+++ b/frameworks/projects/Core/as/src/org/apache/flex/geom/Size.as
@@ -0,0 +1,41 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.geom
+{
+
+/**
+ *  The Size class is a utility class for holding width and height values.  
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10.2
+ *  @playerversion AIR 2.6
+ *  @productversion FlexJS 0.0
+ */
+public class Size 
+{
+    public function Size(width:Number = 0, height:Number = 0)
+    {
+        this.width = width;
+        this.height = height;
+    }
+    
+    public var width:Number;
+    public var height:Number;
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/utils/BeadMetrics.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/BeadMetrics.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/BeadMetrics.as
deleted file mode 100644
index 9abe499..0000000
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/BeadMetrics.as
+++ /dev/null
@@ -1,151 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.flex.utils
-{
-import org.apache.flex.core.UIMetrics;
-import org.apache.flex.core.ValuesManager;
-
-/**
- *  The BeadMetrics class is a utility class that computes the offset of the content
- *  in a container based on border-thickness and padding styles.  
- *  
- *  @langversion 3.0
- *  @playerversion Flash 10.2
- *  @playerversion AIR 2.6
- *  @productversion FlexJS 0.0
- */
-public class BeadMetrics
-{
-	
-    /**
-     *  Compute the offset of the content
-     *  in a container based on border-thickness and padding styles.  
-     *  
-     *  @param object The object with style values.
-     *  @return The offsets of the content.
-     * 
-     *  @langversion 3.0
-     *  @playerversion Flash 10.2
-     *  @playerversion AIR 2.6
-     *  @productversion FlexJS 0.0
-     */
-	public static function getMetrics(object:Object) : UIMetrics
-	{
-		var borderThickness:Object = ValuesManager.valuesImpl.getValue(object,"border-width");
-        var borderStyle:Object = ValuesManager.valuesImpl.getValue(object,"border-style");
-        var border:Object = ValuesManager.valuesImpl.getValue(object,"border");
-		var borderOffset:Number;
-        if (borderStyle == "none")
-            borderOffset = 0;
-        else if (borderThickness != null)
-        {
-            if (borderThickness is String)
-                borderOffset = CSSUtils.toNumber(borderThickness as String, object.width);
-            else
-                borderOffset = Number(borderThickness);
-            if( isNaN(borderOffset) ) borderOffset = 0;            
-        }
-        else // no style and/or no width
-        {
-            border = ValuesManager.valuesImpl.getValue(object,"border");
-            if (border != null)
-            {
-                if (border is Array)
-                {
-                    borderOffset = CSSUtils.toNumber(border[0], object.width);
-                    borderStyle = border[1];
-                }
-                else if (border == "none")
-                    borderOffset = 0;
-                else if (border is String)
-                    borderOffset = CSSUtils.toNumber(border as String, object.width);
-                else
-                    borderOffset = Number(border);
-            }
-            else // no border style set at all so default to none
-                borderOffset = 0;
-        }
-        
-		var paddingLeft:Object;
-		var paddingTop:Object;
-		var paddingRight:Object;
-		var paddingBottom:Object;
-		
-		var padding:Object = ValuesManager.valuesImpl.getValue(object, "padding");
-		paddingLeft = ValuesManager.valuesImpl.getValue(object, "padding-left");
-		paddingTop = ValuesManager.valuesImpl.getValue(object, "padding-top");
-		paddingRight = ValuesManager.valuesImpl.getValue(object, "padding-right");
-		paddingBottom = ValuesManager.valuesImpl.getValue(object, "padding-bottom");
-		var pl:Number = CSSUtils.getLeftValue(paddingLeft, padding, object.width);
-		var pt:Number = CSSUtils.getTopValue(paddingTop, padding, object.height);
-		var pr:Number = CSSUtils.getRightValue(paddingRight, padding, object.width);
-		var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, object.height);
-		
-		var marginLeft:Object;
-		var marginRight:Object;
-		var marginTop:Object;
-		var marginBottom:Object;
-		var margin:Object;
-		margin = ValuesManager.valuesImpl.getValue(object, "margin");
-		marginLeft = ValuesManager.valuesImpl.getValue(object, "margin-left");
-		marginTop = ValuesManager.valuesImpl.getValue(object, "margin-top");
-		marginRight = ValuesManager.valuesImpl.getValue(object, "margin-right");
-		marginBottom = ValuesManager.valuesImpl.getValue(object, "margin-bottom");
-		var ml:Number;
-		var mr:Number;
-		var mt:Number;
-		var mb:Number;
-		var lastmr:Number;
-		if (marginLeft == "auto")
-			ml = 0;
-		else
-        {
-            ml = CSSUtils.getLeftValue(marginLeft, margin, object.width);
-            if (isNaN(ml))
-                ml = 0;
-        }
-		if (marginRight == "auto")
-			mr = 0;
-		else
-        {
-            mr = CSSUtils.getRightValue(marginRight, margin, object.width);
-            if (isNaN(mr))
-                mr = 0;
-        }
-		mt = CSSUtils.getTopValue(marginTop, margin, object.height);
-		if (isNaN(mt))
-			mt = 0;
-        mb = CSSUtils.getBottomValue(marginBottom, margin, object.height);
-		if (isNaN(mb))
-			mb = 0;
-		
-		var result:UIMetrics = new UIMetrics();
-		result.top = borderOffset + pt;
-		result.left = borderOffset + pl;
-		result.bottom = borderOffset + pb;
-		result.right = borderOffset + pr;
-		result.marginTop = mt;
-		result.marginLeft = ml;
-		result.marginBottom = mb;
-		result.marginRight = mr;
-		
-		return result;
-	}
-}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSContainerUtils.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSContainerUtils.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSContainerUtils.as
new file mode 100644
index 0000000..868faec
--- /dev/null
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSContainerUtils.as
@@ -0,0 +1,194 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.utils
+{
+import org.apache.flex.core.ValuesManager;
+import org.apache.flex.geom.Rectangle;
+
+/**
+ *  The CSSContainerUtils class is a utility class that computes the values
+ *  containers often need to know like border widths and padding styles.  
+ *  
+ *  @langversion 3.0
+ *  @playerversion Flash 10.2
+ *  @playerversion AIR 2.6
+ *  @productversion FlexJS 0.0
+ */
+public class CSSContainerUtils
+{
+    /**
+     *  Compute the width/thickness of the four border edges.
+     *  
+     *  @param object The object with style values.
+     *  @param quick True to assume all four edges have the same widths.
+     *  @return A Rectangle representing the four sides.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public static function getBorderMetrics(object:Object, quick:Boolean = false):Rectangle
+	{
+		var borderThickness:Object = ValuesManager.valuesImpl.getValue(object, "border-width");
+        var borderStyle:Object = ValuesManager.valuesImpl.getValue(object, "border-style");
+        var border:Object = ValuesManager.valuesImpl.getValue(object, "border");
+		var borderOffset:Number;
+        if (borderStyle == "none")
+            borderOffset = 0;
+        else if (borderThickness != null)
+        {
+            if (borderThickness is String)
+                borderOffset = CSSUtils.toNumber(borderThickness as String, object.width);
+            else
+                borderOffset = Number(borderThickness);
+            if( isNaN(borderOffset) ) borderOffset = 0;            
+        }
+        else // no style and/or no width
+        {
+            border = ValuesManager.valuesImpl.getValue(object,"border");
+            if (border != null)
+            {
+                if (border is Array)
+                {
+                    borderOffset = CSSUtils.toNumber(border[0], object.width);
+                    borderStyle = border[1];
+                }
+                else if (border == "none")
+                    borderOffset = 0;
+                else if (border is String)
+                    borderOffset = CSSUtils.toNumber(border as String, object.width);
+                else
+                    borderOffset = Number(border);
+            }
+            else // no border style set at all so default to none
+                borderOffset = 0;
+        }
+        
+        if (quick)
+            return new Rectangle(borderOffset, borderOffset, 0, 0);
+    
+        var widthTop:int = borderOffset;
+        var widthLeft:int = borderOffset;
+        var widthBottom:int = borderOffset;
+        var widthRight:int = borderOffset;
+        var value:*;
+        var values:Array;
+        var n:int;
+        value = ValuesManager.valuesImpl.getValue(object, "border-top");
+        if (value != null)
+        {
+            if (value is Array)
+                values = value as Array;
+            else
+                values = value.split(" ");
+            n = values.length;
+            widthTop = CSSUtils.toNumber(values[0]);
+        }
+        value = ValuesManager.valuesImpl.getValue(object, "border-left");
+        if (value != null)
+        {
+            if (value is Array)
+                values = value as Array;
+            else
+                values = value.split(" ");
+            n = values.length;
+            widthLeft = CSSUtils.toNumber(values[0]);
+        }
+        value = ValuesManager.valuesImpl.getValue(object, "border-bottom");
+        if (value != null)
+        {
+            if (value is Array)
+                values = value as Array;
+            else
+                values = value.split(" ");
+            n = values.length;
+            widthBottom = CSSUtils.toNumber(values[0]);
+        }
+        value = ValuesManager.valuesImpl.getValue(object, "border-right");
+        if (value != null)
+        {
+            if (value is Array)
+                values = value as Array;
+            else
+                values = value.split(" ");
+            n = values.length;
+            widthRight = CSSUtils.toNumber(values[0]);
+        }
+        // do the math so consumer can use
+        // left, right, top, bottom properties and not width/height
+        return new Rectangle(widthLeft, widthTop, widthRight - widthLeft, widthTop - widthBottom);
+    }
+    
+    /**
+     *  Compute the width/thickness of the four padding sides.
+     *  
+     *  @param object The object with style values.
+     *  @return A Rectangle representing the padding on each of the four sides.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+    public static function getPaddingMetrics(object:Object):Rectangle
+    {
+		var paddingLeft:Object;
+		var paddingTop:Object;
+		var paddingRight:Object;
+		var paddingBottom:Object;
+		
+		var padding:Object = ValuesManager.valuesImpl.getValue(object, "padding");
+		paddingLeft = ValuesManager.valuesImpl.getValue(object, "padding-left");
+		paddingTop = ValuesManager.valuesImpl.getValue(object, "padding-top");
+		paddingRight = ValuesManager.valuesImpl.getValue(object, "padding-right");
+		paddingBottom = ValuesManager.valuesImpl.getValue(object, "padding-bottom");
+		var pl:Number = CSSUtils.getLeftValue(paddingLeft, padding, object.width);
+		var pt:Number = CSSUtils.getTopValue(paddingTop, padding, object.height);
+		var pr:Number = CSSUtils.getRightValue(paddingRight, padding, object.width);
+		var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, object.height);
+		
+        // do the math so consumer can use
+        // left, right, top, bottom properties and not width/height
+		return new Rectangle(pl, pt, pr - pl, pb - pt);
+	}
+
+
+    /**
+     *  Combine padding and border.  Often used in non-containers.
+     *  
+     *  @param object The object with style values.
+     *  @return A Rectangle representing the padding and border on each of the four sides.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+    public static function getBorderAndPaddingMetrics(object:Object):Rectangle
+    {
+        var borderMetrics:Rectangle = getBorderMetrics(object);
+        var paddingMetrics:Rectangle = getPaddingMetrics(object);
+       return new Rectangle(borderMetrics.left + paddingMetrics.left, 
+                            borderMetrics.top + paddingMetrics.top,
+                            borderMetrics.width + paddingMetrics.width,
+                            borderMetrics.height + paddingMetrics.height);
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/js/src/org/apache/flex/core/IViewport.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/core/IViewport.js b/frameworks/projects/Core/js/src/org/apache/flex/core/IViewport.js
index 2fddc43..185ba62 100644
--- a/frameworks/projects/Core/js/src/org/apache/flex/core/IViewport.js
+++ b/frameworks/projects/Core/js/src/org/apache/flex/core/IViewport.js
@@ -34,15 +34,6 @@ org.apache.flex.core.IViewport = function() {
 };
 
 
-Object.defineProperties(org.apache.flex.core.IViewport.prototype, {
-    /** @export */
-    model: {
-        set: function(value) {},
-        get: function() {}
-    }
-});
-
-
 /**
  * Metadata
  *

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/js/src/org/apache/flex/core/IViewportModel.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/core/IViewportModel.js b/frameworks/projects/Core/js/src/org/apache/flex/core/IViewportModel.js
index e948d48..c438abc 100644
--- a/frameworks/projects/Core/js/src/org/apache/flex/core/IViewportModel.js
+++ b/frameworks/projects/Core/js/src/org/apache/flex/core/IViewportModel.js
@@ -22,7 +22,7 @@
 
 goog.provide('org.apache.flex.core.IViewportModel');
 
-goog.require('org.apache.flex.core.IBeadModel');
+goog.require('org.apache.flex.core.IBead');
 
 
 
@@ -34,70 +34,6 @@ org.apache.flex.core.IViewportModel = function() {
 };
 
 
-Object.defineProperties(org.apache.flex.core.IViewportModel.prototype, {
-    /** @export */
-    contentIsHost: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    contentArea: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    viewportX: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    viewportY: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    viewportWidth: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    viewportHeight: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    contentX: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    contentY: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    contentWidth: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    contentHeight: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    verticalScrollPosition: {
-        set: function(value) {},
-        get: function() {}
-    },
-    /** @export */
-    horizontalScrollPosition: {
-        set: function(value) {},
-        get: function() {}
-    }
-});
-
-
 /**
  * Metadata
  *
@@ -105,4 +41,4 @@ Object.defineProperties(org.apache.flex.core.IViewportModel.prototype, {
  */
 org.apache.flex.core.IViewportModel.prototype.FLEXJS_CLASS_INFO =
 { names: [{ name: 'IViewportModel', qName: 'org.apache.flex.core.IViewportModel'}],
-  interfaces: [org.apache.flex.core.IBeadModel] };
+  interfaces: [org.apache.flex.core.IBead] };

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/js/src/org/apache/flex/core/UIMetrics.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/core/UIMetrics.js b/frameworks/projects/Core/js/src/org/apache/flex/core/UIMetrics.js
deleted file mode 100644
index c9ad752..0000000
--- a/frameworks/projects/Core/js/src/org/apache/flex/core/UIMetrics.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-goog.provide('org.apache.flex.core.UIMetrics');
-
-
-
-/**
- * @constructor
- */
-org.apache.flex.core.UIMetrics = function() {
-};
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.top = 0;
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.left = 0;
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.bottom = 0;
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.right = 0;
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.marginTop = 0;
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.marginLeft = 0;
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.marginBottom = 0;
-
-
-/**
- * @export
- * @type {number}
- */
-org.apache.flex.core.UIMetrics.prototype.marginRight = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/js/src/org/apache/flex/geom/Rectangle.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/geom/Rectangle.js b/frameworks/projects/Core/js/src/org/apache/flex/geom/Rectangle.js
index 511bf17..887391b 100644
--- a/frameworks/projects/Core/js/src/org/apache/flex/geom/Rectangle.js
+++ b/frameworks/projects/Core/js/src/org/apache/flex/geom/Rectangle.js
@@ -76,3 +76,29 @@ org.apache.flex.geom.Rectangle.prototype.width = 0;
  * @type {number} value The height coordinate.
  */
 org.apache.flex.geom.Rectangle.prototype.height = 9;
+
+
+Object.defineProperties(org.apache.flex.geom.Rectangle.prototype, {
+    /** @export */
+    right: {
+        /** @this {org.apache.flex.geom.Rectangle} */
+        get: function() {
+            return this.left + this.width;
+        },
+        /** @this {org.apache.flex.geom.Rectangle} */
+        set: function(value) {
+            this.width = value - this.left;
+        }
+    },
+    /** @export */
+    bottom: {
+        /** @this {org.apache.flex.geom.Rectangle} */
+        get: function() {
+            return this.top + this.height;
+        },
+        /** @this {org.apache.flex.geom.Rectangle} */
+        set: function(value) {
+            this.height = value - this.top;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/js/src/org/apache/flex/geom/Size.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/geom/Size.js b/frameworks/projects/Core/js/src/org/apache/flex/geom/Size.js
new file mode 100644
index 0000000..1f209d6
--- /dev/null
+++ b/frameworks/projects/Core/js/src/org/apache/flex/geom/Size.js
@@ -0,0 +1,56 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+goog.provide('org.apache.flex.geom.Size');
+
+
+
+/**
+ * @constructor
+ * @param {number} width
+ * @param {number} height
+ */
+org.apache.flex.geom.Size = function(width, height) {
+
+  this.width = width;
+
+  this.height = height;
+
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org.apache.flex.geom.Size.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'Size',
+                qName: 'org.apache.flex.geom.Size'}] };
+
+
+/**
+ * @export
+ * The width value.
+ * @type {number} value The width value.
+ */
+org.apache.flex.geom.Size.prototype.width = 0;
+
+
+/**
+ * @export
+ * The height value.
+ * @type {number} value The height value.
+ */
+org.apache.flex.geom.Size.prototype.height = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/js/src/org/apache/flex/utils/BeadMetrics.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/utils/BeadMetrics.js b/frameworks/projects/Core/js/src/org/apache/flex/utils/BeadMetrics.js
deleted file mode 100644
index 2ac73d7..0000000
--- a/frameworks/projects/Core/js/src/org/apache/flex/utils/BeadMetrics.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-goog.provide('org.apache.flex.utils.BeadMetrics');
-
-goog.require('org.apache.flex.core.UIMetrics');
-goog.require('org.apache.flex.utils.CSSUtils');
-
-
-
-/**
- * @constructor
- */
-org.apache.flex.utils.BeadMetrics = function() {
-};
-
-
-/**
- * @export
- * @param {Object} object The strand whose bounds are required.
- * @return {org.apache.flex.core.UIMetrics} The bounding box.
- */
-org.apache.flex.utils.BeadMetrics.getMetrics = function(object) {
-  var box = new org.apache.flex.core.UIMetrics();
-  var style = getComputedStyle(object.element);
-  var borderThickness = style['border-width'];
-  var borderStyle = style['border-style'];
-  var border = style['border'];
-  var borderOffset;
-  if (borderStyle == 'none')
-    borderOffset = 0;
-  else if (borderThickness != null) {
-    if (typeof(borderThickness) === 'string')
-      borderOffset = org.apache.flex.utils.CSSUtils.toNumber(borderThickness, object.width);
-    else
-      borderOffset = borderThickness;
-    if (isNaN(borderOffset)) borderOffset = 0;
-  }
-  else {// no style and/or no width
-    border = style['border'];
-    if (border != null) {
-      if (typeof(border) !== 'string') {
-         borderOffset = org.apache.flex.utils.CSSUtils.toNumber(border[0], object.width);
-         borderStyle = border[1];
-       }
-       else if (border == 'none')
-         borderOffset = 0;
-       else if (typeof(border) === 'string')
-         borderOffset = org.apache.flex.utils.CSSUtils.toNumber(border, object.width);
-       else
-         borderOffset = Number(border);
-     }
-     else // no border style set at all so default to none
-       borderOffset = 0;
-   }
-
-  if (style['padding'] != null) {
-    var p = style['padding'];
-    box.top = org.apache.flex.utils.CSSUtils.getTopValue(style['padding_top'], p, object.height) + borderOffset;
-    box.left = org.apache.flex.utils.CSSUtils.getLeftValue(style['padding_left'], p, object.width) + borderOffset;
-    box.right = org.apache.flex.utils.CSSUtils.getRightValue(style['padding_right'], p, object.width) + borderOffset;
-    box.bottom = org.apache.flex.utils.CSSUtils.getBottomValue(style['padding_bottom'], p, object.height) +
-        borderOffset;
-  }
-  if (style['margin'] != null) {
-    var m = style['margin'];
-    box.marginTop = org.apache.flex.utils.CSSUtils.getTopValue(style['margin_top'], m, object.height);
-    box.marginLeft = org.apache.flex.utils.CSSUtils.getLeftValue(style['margin_left'], m, object.width);
-    box.marginBottom = org.apache.flex.utils.CSSUtils.getBottomValue(style['margin_bottom'], m, object.height);
-    box.marginRight = org.apache.flex.utils.CSSUtils.getRightValue(style['margin_right'], m, object.width);
-  }
-  return box;
-};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/Core/js/src/org/apache/flex/utils/CSSContainerUtils.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/utils/CSSContainerUtils.js b/frameworks/projects/Core/js/src/org/apache/flex/utils/CSSContainerUtils.js
new file mode 100644
index 0000000..4ee13f8
--- /dev/null
+++ b/frameworks/projects/Core/js/src/org/apache/flex/utils/CSSContainerUtils.js
@@ -0,0 +1,81 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+goog.provide('org.apache.flex.utils.CSSContainerUtils');
+
+goog.require('org.apache.flex.geom.Rectangle');
+goog.require('org.apache.flex.utils.CSSUtils');
+
+
+
+/**
+ * @constructor
+ */
+org.apache.flex.utils.CSSContainerUtils = function() {
+};
+
+
+/**
+ * @export
+ * @param {Object} object The strand whose border offsets are required.
+ * @return {org.apache.flex.geom.Rectangle} The four border widths.
+ */
+org.apache.flex.utils.CSSContainerUtils.getBorderMetrics = function(object) {
+  var style = getComputedStyle(object.element);
+  var borderLeft = org.apache.flex.utils.CSSUtils.toNumber(style['border-left-width'], object.width);
+  var borderRight = org.apache.flex.utils.CSSUtils.toNumber(style['border-right-width'], object.width);
+  var borderTop = org.apache.flex.utils.CSSUtils.toNumber(style['border-top-width'], object.width);
+  var borderBottom = org.apache.flex.utils.CSSUtils.toNumber(style['border-bottom-width'], object.width);
+  return new org.apache.flex.geom.Rectangle(borderLeft, borderTop, borderRight - borderLeft, borderBottom - borderTop);
+};
+
+
+/**
+ * @export
+ * @param {Object} object The strand whose padding offsets are required.
+ * @return {org.apache.flex.geom.Rectangle} The four padding widths.
+ */
+org.apache.flex.utils.CSSContainerUtils.getPaddingMetrics = function(object) {
+  var style = getComputedStyle(object.element);
+  var paddingLeft = org.apache.flex.utils.CSSUtils.toNumber(style['padding-left'], object.width);
+  var paddingRight = org.apache.flex.utils.CSSUtils.toNumber(style['padding-right'], object.width);
+  var paddingTop = org.apache.flex.utils.CSSUtils.toNumber(style['padding-top'], object.width);
+  var paddingBottom = org.apache.flex.utils.CSSUtils.toNumber(style['padding-bottom'], object.width);
+  return new org.apache.flex.geom.Rectangle(paddingLeft, paddingTop,
+                                            paddingRight - paddingLeft, paddingBottom - paddingTop);
+};
+
+
+/**
+ * @export
+ * @param {Object} object The strand whose border and padding offsets are required.
+ * @return {org.apache.flex.geom.Rectangle} The four border padding widths.
+ */
+org.apache.flex.utils.CSSContainerUtils.getBorderAndPaddingMetrics = function(object) {
+  var style = getComputedStyle(object.element);
+  var borderLeft = org.apache.flex.utils.CSSUtils.toNumber(style['border-left-width'], object.width);
+  var borderRight = org.apache.flex.utils.CSSUtils.toNumber(style['border-right-width'], object.width);
+  var borderTop = org.apache.flex.utils.CSSUtils.toNumber(style['border-top-width'], object.width);
+  var borderBottom = org.apache.flex.utils.CSSUtils.toNumber(style['border-bottom-width'], object.width);
+  var paddingLeft = org.apache.flex.utils.CSSUtils.toNumber(style['padding-left'], object.width);
+  var paddingRight = org.apache.flex.utils.CSSUtils.toNumber(style['padding-right'], object.width);
+  var paddingTop = org.apache.flex.utils.CSSUtils.toNumber(style['padding-top'], object.width);
+  var paddingBottom = org.apache.flex.utils.CSSUtils.toNumber(style['padding-bottom'], object.width);
+  paddingLeft += borderLeft;
+  paddingRight += borderRight;
+  paddingTop += borderTop;
+  paddingBottom += borderBottom;
+  return new org.apache.flex.geom.Rectangle(paddingLeft, paddingTop,
+                                            paddingRight - paddingLeft, paddingBottom - paddingTop);
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css
index 1f321cd..6c6dcc0 100644
--- a/frameworks/projects/HTML/as/defaults.css
+++ b/frameworks/projects/HTML/as/defaults.css
@@ -63,7 +63,7 @@ ButtonBar
     IBeadView:  ClassReference("org.apache.flex.html.beads.ButtonBarView");			
     IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
     IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.ButtonBarLayout");
-    IDataGroup: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
+    IContentView: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
     IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
     IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.ButtonBarButtonItemRenderer");
@@ -81,6 +81,9 @@ Container
 {
     IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");
     IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.BasicLayout");
+    IContentView: ClassReference("org.apache.flex.html.supportClasses.ContainerContentArea");
+	IViewport: ClassReference("org.apache.flex.html.supportClasses.Viewport");
+	IViewportModel: ClassReference("org.apache.flex.html.beads.models.ViewportModel");
 }
 
 ControlBar
@@ -154,11 +157,12 @@ List
     IBeadView:  ClassReference("org.apache.flex.html.beads.ListView");			
     IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
     IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout");
-    IDataGroup: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
+    IContentView: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
     IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
     IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
 	IViewport: ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+	IViewportModel: ClassReference("org.apache.flex.html.beads.models.ViewportModel");
 	border-style: solid;
 	border-color: #222222;
 }
@@ -193,11 +197,12 @@ SimpleList
     IBeadView:  ClassReference("org.apache.flex.html.beads.ListView");
     IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
     IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout");
-    IDataGroup: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
+    IContentView: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
     IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
     IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
 	IViewport: ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+	IViewportModel: ClassReference("org.apache.flex.html.beads.models.ViewportModel");
 }
 
 StringItemRenderer
@@ -271,6 +276,9 @@ ViewBase
 {
     IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");
     IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.BasicLayout");
+    IContentView: ClassReference("org.apache.flex.html.supportClasses.ContainerContentArea");
+	IViewport: ClassReference("org.apache.flex.html.supportClasses.Viewport");
+	IViewportModel: ClassReference("org.apache.flex.html.beads.models.ViewportModel");
 }
 
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/AlertView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/AlertView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/AlertView.as
index 3244ac0..5788d47 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/AlertView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/AlertView.as
@@ -26,16 +26,16 @@ package org.apache.flex.html.beads
     import org.apache.flex.core.IParent;
 	import org.apache.flex.core.IStrand;
 	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.Alert;
 	import org.apache.flex.html.ControlBar;
     import org.apache.flex.html.Label;
 	import org.apache.flex.html.TextButton;
 	import org.apache.flex.html.TitleBar;
-	import org.apache.flex.utils.BeadMetrics;
+	import org.apache.flex.utils.CSSContainerUtils;
 	
 	/**
 	 *  The AlertView class creates the visual elements of the org.apache.flex.html.Alert
@@ -156,7 +156,7 @@ package org.apache.flex.html.beads
 			var ctrlMeasure:IMeasurementBead  = _controlBar.measurementBead;
 			var maxWidth:Number = Math.max(titleMeasure.measuredWidth, ctrlMeasure.measuredWidth, labelMeasure.measuredWidth);
 			
-			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+			var metrics:Rectangle = CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
 
 			_titleBar.x = 0;
 			_titleBar.y = 0;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ButtonBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ButtonBarView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ButtonBarView.as
index 86e9b55..cf7ad85 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ButtonBarView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ButtonBarView.as
@@ -70,18 +70,6 @@ package org.apache.flex.html.beads
 		{
 			_strand = value;
 			super.strand = value;
-		}
-		
-		override protected function resizeHandler(event:Event):void
-		{
-			// the ButtonBar is always matched to its size so it is
-			// important that the contentWidth/Height match the host's
-			// width/height
-						
-			viewportModel.contentWidth = UIBase(host).width;
-			viewportModel.contentHeight = UIBase(host).height;
-			
-			super.resizeHandler(event);
-		}
+		}		
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ContainerView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ContainerView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ContainerView.as
index 09aac8f..609b2a9 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ContainerView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ContainerView.as
@@ -34,16 +34,17 @@ package org.apache.flex.html.beads
 	import org.apache.flex.core.IViewport;
 	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.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.beads.models.ViewportModel;
 	import org.apache.flex.html.supportClasses.Border;
 	import org.apache.flex.html.supportClasses.ContainerContentArea;
 	import org.apache.flex.html.supportClasses.Viewport;
-	import org.apache.flex.utils.BeadMetrics;
-	
+	import org.apache.flex.utils.CSSContainerUtils;
+    
 	/**
 	 * This class creates and manages the contents of a Container. On the ActionScript
 	 * side, a Container has a contentView into which the offical children can be
@@ -91,7 +92,7 @@ package org.apache.flex.html.beads
 		 */
 		public function get contentView():IParentIUIBase
 		{
-			return _contentArea;
+			return viewport.contentView as IParentIUIBase;
 		}
 		
 		/**
@@ -135,7 +136,6 @@ package org.apache.flex.html.beads
 			return _viewportModel;
 		}
 		
-		private var _contentArea:IParentIUIBase;
 		private var _viewportModel:IViewportModel;
 		private var _viewport:IViewport;
 		private var _strand:IStrand;
@@ -154,11 +154,9 @@ package org.apache.flex.html.beads
 			_strand = value;
 			super.strand = value;
 			
-			// create the content area where the elements being organized
-			// and laid out reside.
-			_contentArea = createContentView();
-			(host as UIBase).addElement(_contentArea,false);
-			ContainerBase(host).setActualParent(_contentArea as DisplayObjectContainer);
+            createViewport();
+			(host as UIBase).addElement(viewport.contentView, false);
+			ContainerBase(host).setActualParent(viewport.contentView as DisplayObjectContainer);
 			
 			displayBackgroundAndBorder(host as UIBase);
 			
@@ -230,11 +228,6 @@ package org.apache.flex.html.beads
 		 */
 		protected function completeSetup():void
 		{
-			// create the viewport which displays the content
-			createViewport();
-			
-			(contentView as UIBase).setWidthAndHeight(viewportModel.contentWidth, viewportModel.contentHeight, true);
-			
 			// when the first layout is complete, set up listeners for changes
 			// to the childrens' sizes.
 			host.addEventListener("layoutComplete", childrenChangedHandler);
@@ -248,22 +241,6 @@ package org.apache.flex.html.beads
 		}
 		
 		/**
-		 * Creates the contentView or actual parent, of the items being contained. This
-		 * is done for ActionScript to provide offsets for padding within the host.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		protected function createContentView():IParentIUIBase
-		{
-			var area:ContainerContentArea = new ContainerContentArea();
-			area.className = "ActualParent";
-			return area;
-		}
-		
-		/**
 		 * Handles the viewCreated event by performing the first layout if
 		 * there are children already present (ie, from MXML).
 		 *  
@@ -279,6 +256,19 @@ 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
+        {
+            return new Rectangle(0, 0, 0, 0);
+        }
+        
 		/**
 		 * Creates the Viewport (or ScrollableViewport) through which the content
 		 * area is presented.
@@ -288,56 +278,59 @@ package org.apache.flex.html.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		private function createViewport():void
+		protected function createViewport():void
 		{
+            var c:Class;
 			if (viewportModel == null) {
-				_viewportModel = new ViewportModel();
+                _viewportModel = _strand.getBeadByType(IViewportModel) as IViewportModel;
+                if (viewportModel == null) {
+                    c = ValuesManager.valuesImpl.getValue(host, "iViewportModel");
+                    if (c)
+                    {
+                        _viewportModel = new c() as IViewportModel;
+                        _strand.addBead(_viewportModel);
+                    }
+                }
 			}
 			
 			if (viewport == null) {
 				_viewport = _strand.getBeadByType(IViewport) as IViewport;
 				if (viewport == null) {
-					var c:Class = ValuesManager.valuesImpl.getValue(host, "iViewport");
+					c = ValuesManager.valuesImpl.getValue(host, "iViewport");
 					if (c)
 					{
 						_viewport = new c() as IViewport;
 						_strand.addBead(viewport);
 					}
-					else {
-						_viewport = new Viewport();
-						_strand.addBead(viewport);
-					}
 				}
-				viewport.model = viewportModel;
-			}
-			
-			viewportModel.contentArea = contentView;
-			viewportModel.contentIsHost = false;
+			}			
 		}
 		
 		/**
-		 * Adjusts the size of the contentArea via the viewportModel. Subclasses may wish to fix the
-		 * size of the content area here or let the layout determine the size and adjust the size
-		 * of the content to fit the layout.
+		 *  Positions the viewport, then sets any known sizes of the Viewport prior
+         *  to laying out its content.
 		 *  
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		protected function adjustSizeBeforeLayout():void
+		protected function layoutViewBeforeContentLayout():void
 		{
-			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-			
-			viewportModel.contentWidth = Math.max(host.width - metrics.left - metrics.right, 0);
-			viewportModel.contentHeight = Math.max(host.height - metrics.top - metrics.bottom, 0);
-			viewportModel.contentX = metrics.left;
-			viewportModel.contentY = metrics.top;
+            var host:ILayoutChild = this.host as ILayoutChild;
+            var vm:IViewportModel = viewportModel;
+            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);
 			
-			contentView.x = viewportModel.contentX;
-			contentView.y = viewportModel.contentY;
-			contentView.width = viewportModel.contentWidth;
-			contentView.height = viewportModel.contentHeight;
 		}
 		
 		/**
@@ -354,7 +347,7 @@ package org.apache.flex.html.beads
 		{
 			layoutRunning = true;
 			
-			adjustSizeBeforeLayout();
+			layoutViewBeforeContentLayout();
 			
 			var host:UIBase = _strand as UIBase;
 			
@@ -369,10 +362,9 @@ package org.apache.flex.html.beads
 			
 			if (layout) {
 				layout.layout();
-				determineContentSizeFromChildren();
 			}
 			
-			adjustSizeAfterLayout();
+			layoutViewAfterContentLayout();
 			
 			layoutRunning = false;
 		}
@@ -391,91 +383,36 @@ package org.apache.flex.html.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		protected function adjustSizeAfterLayout():void
+		protected function layoutViewAfterContentLayout():void
 		{
 			var host:UIBase = _strand as UIBase;
-			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-			
+            var vm:IViewportModel = viewportModel;
+            
 			adjusting = true;
-						
+			
+            var viewportSize:Size = viewport.layoutViewportAfterContentLayout();
+            
 			if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {					
-				host.setWidthAndHeight(viewportModel.contentWidth+metrics.left+metrics.right, 
-					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())
 			{
-				viewport.needsHorizontalScroller();
-				host.setHeight(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())
 			{
-				viewport.needsVerticalScroller();
-				host.setWidth(viewportModel.contentWidth+metrics.left+metrics.right, false);
-			}
-			else {
-				viewport.needsScrollers();
-			}
-			
-			layoutContainer(host.isWidthSizedToContent(), host.isHeightSizedToContent());
-			
-			viewportModel.contentX = viewportModel.viewportX+metrics.left;
-			viewportModel.contentY = viewportModel.viewportY+metrics.top;
-			
-			viewport.updateSize();
-			viewport.updateContentAreaSize();
-			
+				host.setWidth(viewportSize.width + vm.borderMetrics.left + vm.borderMetrics.right +
+                    vm.chromeMetrics.left + vm.chromeMetrics.right, false);
+			}			
 			adjusting = false;
 		}
 		
 		/**
-		 * The job of layoutContainer() is to size and position of the viewport using the
-		 * ViewportModel's viewport properties. This base class function simply sets the
-		 * viewport to cover the entire Container host.
-		 * 
-		 * If either of the parameters is true, layoutContainer should adjust the size of
-		 * the host component Container accordingly, to accomodate whatever additions the
-		 * subclass is making.
-		 */
-		protected function layoutContainer(widthSizedToContent:Boolean, heightSizedToContent:Boolean):void
-		{
-			viewportModel.viewportHeight = host.height;
-			viewportModel.viewportWidth = host.width;
-			viewportModel.viewportX = 0;
-			viewportModel.viewportY = 0;
-		}
-		
-		/**
-		 * Determines the size of the contentArea after the layout has been run. The
-		 * size of the content area might be used to adjust the size of the host.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		protected function determineContentSizeFromChildren():void
-		{
-			// 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 = 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);
-			}
-			
-			viewportModel.contentWidth = Math.max(maxWidth,contentView.width);
-			viewportModel.contentHeight = Math.max(maxHeight,contentView.height);
-		}
-		
-		/**
 		 * Handles dynamic changes to the host's size by running the layout once
 		 * the viewport has been adjusted.
 		 *  

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cf3994fe/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ListView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ListView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ListView.as
index ecfbafd..258de18 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ListView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ListView.as
@@ -79,8 +79,6 @@ package org.apache.flex.html.beads
             return _border;
         }
 		
-		private var _dataGroup:IItemRendererParent;
-		
 		/**
 		 *  The area holding the itemRenderers.
 		 *
@@ -91,26 +89,9 @@ package org.apache.flex.html.beads
 		 */
 		public function get dataGroup():IItemRendererParent
 		{
-			return _dataGroup;
-		}
-		public function set dataGroup(value:IItemRendererParent):void
-		{
-			_dataGroup = value;
-		}
-		
-		/**
-		 *  The contentArea includes the dataGroup and scrollBars.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		override public function get contentView():IParentIUIBase
-		{
-			return _dataGroup as IParentIUIBase;
+			return contentView as IItemRendererParent;
 		}
-		
+				
 		/**
 		 * @private
 		 */
@@ -160,14 +141,6 @@ package org.apache.flex.html.beads
 			listModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
 		}
 		
-		override protected function createContentView():IParentIUIBase
-		{
-			if (_dataGroup == null) {
-				_dataGroup = new (ValuesManager.valuesImpl.getValue(_strand, "iDataGroup")) as IItemRendererParent;
-			}
-			return _dataGroup as IParentIUIBase;
-		}
-		
 		private var lastSelectedIndex:int = -1;
 		
 		/**
@@ -235,7 +208,7 @@ package org.apache.flex.html.beads
 		override protected function resizeHandler(event:Event):void
 		{
 			super.resizeHandler(event);
-			_dataGroup.updateAllItemRenderers();
+			dataGroup.updateAllItemRenderers();
 		}
 	}
 }


Mime
View raw message