flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From p...@apache.org
Subject [2/2] git commit: [flex-asjs] [refs/heads/develop] - Updates the Container classes, including layouts, with a new life-cycle.
Date Tue, 25 Aug 2015 15:45:54 GMT
Updates the Container classes, including layouts, with a new life-cycle.


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

Branch: refs/heads/develop
Commit: f03e77f5438eafb0c9b2e4d4e4be374d7f8fb445
Parents: 052af9d
Author: Peter Ent <pent@apache.org>
Authored: Tue Aug 25 17:45:49 2015 +0200
Committer: Peter Ent <pent@apache.org>
Committed: Tue Aug 25 17:45:49 2015 +0200

----------------------------------------------------------------------
 .../org/apache/flex/charts/beads/ChartView.as   |  68 +++--
 .../src/org/apache/flex/core/ContainerBase.js   |  93 ++++++-
 .../js/src/org/apache/flex/core/ListBase.js     |   6 +-
 .../js/src/org/apache/flex/core/ViewBase.js     |   7 +-
 frameworks/projects/HTML/as/defaults.css        |   5 +-
 .../org/apache/flex/html/beads/ContainerView.as | 118 +++++---
 .../src/org/apache/flex/html/beads/PanelView.as |  84 +-----
 .../flex/html/beads/PanelWithControlBarView.as  |  85 +-----
 .../flex/html/beads/layouts/BasicLayout.as      |   2 +
 .../flex/html/beads/layouts/ButtonBarLayout.as  |  10 +-
 .../html/supportClasses/ScrollingViewport.as    |   8 +-
 .../js/src/org/apache/flex/html/ButtonBar.js    |   3 -
 .../js/src/org/apache/flex/html/Container.js    |  17 +-
 .../HTML/js/src/org/apache/flex/html/List.js    |   2 +-
 .../HTML/js/src/org/apache/flex/html/Panel.js   |  31 +--
 .../org/apache/flex/html/beads/ContainerView.js | 268 ++++++++++++++-----
 .../src/org/apache/flex/html/beads/ListView.js  | 118 ++++----
 .../src/org/apache/flex/html/beads/PanelView.js |  60 ++++-
 .../TextItemRendererFactoryForArrayData.js      |  32 ++-
 .../flex/html/beads/layouts/ButtonBarLayout.js  |   9 +-
 .../flex/html/beads/layouts/HorizontalLayout.js |   4 +-
 .../flex/html/beads/layouts/TileLayout.js       |   5 +-
 .../flex/html/beads/layouts/VerticalLayout.js   |   4 +-
 .../html/supportClasses/ContainerContentArea.js |   1 +
 .../html/supportClasses/ScrollingViewport.js    |  30 ++-
 .../src/org/apache/flex/mobile/ManagerBase.as   |  24 +-
 .../Mobile/asjs/src/MobileASJSClasses.as        |   2 +
 .../apache/flex/mobile/StackedViewManager.as    | 150 +----------
 .../org/apache/flex/mobile/TabbedViewManager.as | 182 +------------
 .../org/apache/flex/mobile/ViewManagerBase.as   | 211 +++++++++++++++
 .../flex/mobile/beads/StackedViewManagerView.as | 145 ++++------
 .../flex/mobile/beads/TabbedViewManagerView.as  | 147 ++++------
 .../apache/flex/mobile/beads/ViewManagerView.as | 167 ++++++++++++
 .../flex/mobile/models/ViewManagerModel.as      |   6 +
 .../src/org/apache/flex/mobile/ManagerBase.js   |   3 +
 35 files changed, 1196 insertions(+), 911 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 1a88d6f..cd5651f 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
@@ -60,7 +60,7 @@ package org.apache.flex.charts.beads
 		override public function set strand(value:IStrand):void
 		{
 			_strand = value;
-			
+						
 			var listModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
 			listModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
 			
@@ -85,17 +85,11 @@ package org.apache.flex.charts.beads
 		
 		override protected function completeSetup():void
 		{
-			super.completeSetup();
-			
 			if (border) {
 				IParent(_strand).removeElement(border);
 			}
-		}
-		
-		override protected function viewCreatedHandler(event:Event):void
-		{
-			// prevented because itemsCreated needs to happen first
-			createViewport();
+					
+			super.completeSetup();
 		}
 		
 		public function get horizontalAxisGroup():IAxisGroup
@@ -123,9 +117,14 @@ package org.apache.flex.charts.beads
 			
 			dataGroup.removeAllElements();
 		}
-		
-		override protected function resizeViewport():void
-		{
+				
+		/**
+		 * ChartView overrides performLayout so that the exact area of the ChartDataGroup can
+		 * be calculated so the chart's layout algorithm knows precisely the dimensions of 
+		 * chart for its item renderers.
+		 */
+		override protected function adjustSizeBeforeLayout():void
+		{			
 			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
 			
 			var widthAdjustment:Number = 0;
@@ -144,16 +143,16 @@ 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;
 			
-			var model:IViewportModel = viewport.model;
-			model.viewportX = widthAdjustment + metrics.left;
-			model.viewportY = metrics.top;
-			model.viewportWidth = strandWidth - widthAdjustment - metrics.right - metrics.left;
-			model.viewportHeight = strandHeight - heightAdjustment - metrics.bottom - metrics.top;
-			model.contentX = model.viewportX;
-			model.contentY = model.viewportY;
-			model.contentWidth = model.viewportWidth;
-			model.contentHeight = model.viewportHeight;
+			viewportModel.contentX = viewportModel.viewportX;
+			viewportModel.contentY = viewportModel.viewportY;
+			viewportModel.contentWidth = viewportModel.viewportWidth;
+			viewportModel.contentHeight = viewportModel.viewportHeight;
 			
 			if (verticalAxisGroup) {
 				UIBase(verticalAxisGroup).x = metrics.left;
@@ -170,14 +169,27 @@ package org.apache.flex.charts.beads
 			}
 			
 			if (dataGroup) {
-				UIBase(dataGroup).x = model.contentX;
-				UIBase(dataGroup).y = model.contentY;
-				UIBase(dataGroup).width = model.contentWidth;
-				UIBase(dataGroup).height = model.contentHeight;
+				UIBase(dataGroup).x = viewportModel.contentX;
+				UIBase(dataGroup).y = viewportModel.contentY;
+				UIBase(dataGroup).width = viewportModel.contentWidth;
+				UIBase(dataGroup).height = viewportModel.contentHeight;
 			}
-			
-			viewport.updateSize();
-			viewport.updateContentAreaSize();
+		}
+		
+		/**
+		 * 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/f03e77f5/frameworks/projects/Core/js/src/org/apache/flex/core/ContainerBase.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/core/ContainerBase.js b/frameworks/projects/Core/js/src/org/apache/flex/core/ContainerBase.js
index 12688b9..6a66619 100644
--- a/frameworks/projects/Core/js/src/org/apache/flex/core/ContainerBase.js
+++ b/frameworks/projects/Core/js/src/org/apache/flex/core/ContainerBase.js
@@ -14,6 +14,7 @@
 
 goog.provide('org.apache.flex.core.ContainerBase');
 
+goog.require('org.apache.flex.core.IChrome');
 goog.require('org.apache.flex.core.IMXMLDocument');
 goog.require('org.apache.flex.core.UIBase');
 goog.require('org.apache.flex.core.ValuesManager');
@@ -53,6 +54,7 @@ org.apache.flex.core.ContainerBase = function() {
   this.currentState_ = null;
 
   this.document = this;
+  this.actualParent_ = this;
 
 };
 goog.inherits(org.apache.flex.core.ContainerBase,
@@ -80,6 +82,20 @@ org.apache.flex.core.ContainerBase.prototype.mxmlsd = null;
 
 
 /**
+ * @private
+ * @type {Object}
+ */
+org.apache.flex.core.ContainerBase.prototype.actualParent_ = null;
+
+
+/**
+ * @export
+ * @type {boolean}
+ */
+org.apache.flex.core.ContainerBase.prototype.supportsChrome = true;
+
+
+/**
  * Metadata
  *
  * @type {Object.<string, Array.<Object>>}
@@ -104,7 +120,7 @@ org.apache.flex.core.ContainerBase.prototype.addedToParent = function() {
     this.dispatchEvent('initComplete');
     this.initialized_ = true;
   }
-  this.dispatchEvent('childrenAdded');
+//??  this.dispatchEvent('childrenAdded');
 };
 
 
@@ -129,6 +145,70 @@ org.apache.flex.core.ContainerBase.prototype.setMXMLDescriptor =
 };
 
 
+/**
+ * @expose
+ * @param {Object} parent The component to use as the parent of the children for the container.
+ */
+org.apache.flex.core.ContainerBase.prototype.setActualParent = function(parent) {
+  this.actualParent_ = parent;
+};
+
+
+/**
+ * @override
+ */
+org.apache.flex.core.ContainerBase.prototype.addElement = function(c) {
+  if (this.supportsChromeChildren && org.apache.flex.utils.Language.is(c, org.apache.flex.core.IChrome)) {
+     //org.apache.flex.core.ContainerBase.base(this, 'addElement', c);
+     this.element.appendChild(c.positioner);
+     c.addedToParent();
+  }
+  else {
+     //this.actualParent.addElement(c);
+     this.actualParent.element.appendChild(c.positioner);
+     c.addedToParent();
+  }
+};
+
+
+/**
+ * @override
+ */
+org.apache.flex.core.ContainerBase.prototype.addElementAt = function(c, index) {
+  if (this.supportsChromeChildren && org.apache.flex.utils.Language.is(c, org.apache.flex.core.IChrome)) {
+     //org.apache.flex.core.ContainerBase.base(this, 'addElementAt', c, index);
+     var children1 = this.internalChildren();
+     if (index >= children1.length) {
+       this.addElement(c);
+     } else {
+       this.element.insertBefore(c.positioner,
+           children1[index]);
+       c.addedToParent();
+     }
+   } else {
+     //this.actualParent.addElementAt(c, index);
+     var children2 = this.actualParent.internalChildren();
+     if (index >= children2.length) {
+       this.actualParent.element.appendChild(c);
+       c.addedToParent();
+     } else {
+       this.actualParent.element.insertBefore(c.positioner,
+           children2[index]);
+       c.addedToParent();
+     }
+   }
+};
+
+
+/**
+ * @override
+ */
+org.apache.flex.core.ContainerBase.prototype.getElementAt = function(index) {
+  var children = this.actualParent.internalChildren();
+  return children[index].flexjs_wrapper;
+};
+
+
 Object.defineProperties(org.apache.flex.core.ContainerBase.prototype, {
     /** @export */
     MXMLDescriptor: {
@@ -183,5 +263,16 @@ Object.defineProperties(org.apache.flex.core.ContainerBase.prototype, {
         set: function(s) {
            this.transitions_ = s;
         }
+    },
+    /** @export */
+    actualParent: {
+        /** @this {org.apache.flex.core.ContainerBase} */
+        get: function() {
+             return this.actualParent_;
+        },
+        /** @this {org.apache.flex.core.ContainerBase} */
+        set: function(s) {
+             this.actualParent_ = s;
+        }
     }
 });

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/Core/js/src/org/apache/flex/core/ListBase.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/core/ListBase.js b/frameworks/projects/Core/js/src/org/apache/flex/core/ListBase.js
index fa36311..d28fa7e 100644
--- a/frameworks/projects/Core/js/src/org/apache/flex/core/ListBase.js
+++ b/frameworks/projects/Core/js/src/org/apache/flex/core/ListBase.js
@@ -14,14 +14,14 @@
 
 goog.provide('org.apache.flex.core.ListBase');
 
-goog.require('org.apache.flex.core.UIBase');
+goog.require('org.apache.flex.core.ContainerBase');
 goog.require('org.apache.flex.html.supportClasses.StringItemRenderer');
 
 
 
 /**
  * @constructor
- * @extends {org.apache.flex.core.UIBase}
+ * @extends {org.apache.flex.core.ContainerBase}
  */
 org.apache.flex.core.ListBase = function() {
   org.apache.flex.core.ListBase.base(this, 'constructor');
@@ -33,7 +33,7 @@ org.apache.flex.core.ListBase = function() {
   this.selectedIndex_ = -1;
 };
 goog.inherits(org.apache.flex.core.ListBase,
-    org.apache.flex.core.UIBase);
+    org.apache.flex.core.ContainerBase);
 
 
 /**

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/Core/js/src/org/apache/flex/core/ViewBase.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/js/src/org/apache/flex/core/ViewBase.js b/frameworks/projects/Core/js/src/org/apache/flex/core/ViewBase.js
index 46542ad..e423a09 100644
--- a/frameworks/projects/Core/js/src/org/apache/flex/core/ViewBase.js
+++ b/frameworks/projects/Core/js/src/org/apache/flex/core/ViewBase.js
@@ -14,6 +14,7 @@
 
 goog.provide('org.apache.flex.core.ViewBase');
 
+goog.require('org.apache.flex.core.ContainerBase');
 goog.require('org.apache.flex.core.IPopUpHost');
 goog.require('org.apache.flex.core.UIBase');
 goog.require('org.apache.flex.core.ValuesManager');
@@ -26,7 +27,7 @@ goog.require('org.apache.flex.utils.MXMLDataInterpreter');
 /**
  * @constructor
  * @implements {org.apache.flex.core.IPopUpHost}
- * @extends {org.apache.flex.core.UIBase}
+ * @extends {org.apache.flex.core.ContainerBase}
  */
 org.apache.flex.core.ViewBase = function() {
   org.apache.flex.core.ViewBase.base(this, 'constructor');
@@ -58,7 +59,7 @@ org.apache.flex.core.ViewBase = function() {
   this.document = this;
 
 };
-goog.inherits(org.apache.flex.core.ViewBase, org.apache.flex.core.UIBase);
+goog.inherits(org.apache.flex.core.ViewBase, org.apache.flex.core.ContainerBase);
 
 
 /**
@@ -68,7 +69,7 @@ goog.inherits(org.apache.flex.core.ViewBase, org.apache.flex.core.UIBase);
  */
 org.apache.flex.core.ViewBase.prototype.FLEXJS_CLASS_INFO =
     { names: [{ name: 'ViewBase',
-                qName: 'org.apache.flex.core.ViewBase' }],
+                qName: 'org.apache.flex.core.ContainerBase' }],
       interfaces: [org.apache.flex.core.IPopUpHost] };
 
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css
index 79ff638..1f321cd 100644
--- a/frameworks/projects/HTML/as/defaults.css
+++ b/frameworks/projects/HTML/as/defaults.css
@@ -89,9 +89,10 @@ ControlBar
 	IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.FlexibleFirstChildHorizontalLayout");
 	
     background-color: #CECECE;
-    border-style: solid;
+	border-style: none;
+    /*border-style: solid;
     border-color: #000000;
-    border-width: 1px;
+    border-width: 1px;*/
 }
 
 /* ASJS */

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 39765a8..36d6a03 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
@@ -44,6 +44,22 @@ package org.apache.flex.html.beads
 	import org.apache.flex.html.supportClasses.Viewport;
 	import org.apache.flex.utils.BeadMetrics;
 	
+	/**
+	 * 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
+	 * placed. When adding an element that implements IChrome, that element is not
+	 * placed into the contentView, but is made a child of the Container directly.
+	 * 
+	 * Containers also have a layout associated with them which controls the size and
+	 * placement of the elements in the contentView. When a Container does not have an
+	 * explicit size (including a percent size), the content dictates the size of the
+	 * Container.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+	 */
 	public class ContainerView extends BeadViewBase implements IBeadView, ILayoutParent
 	{
 		/**
@@ -97,7 +113,7 @@ package org.apache.flex.html.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		public function get viewport():IViewport
+		protected function get viewport():IViewport
 		{
 			return _viewport;
 		}
@@ -181,7 +197,7 @@ package org.apache.flex.html.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		protected function deferredSizeHandler(event:Event):void
+		private function deferredSizeHandler(event:Event):void
 		{
 			host.removeEventListener(event.type, deferredSizeHandler);
 			completeSetup();
@@ -208,12 +224,15 @@ package org.apache.flex.html.beads
 			
 			(contentView as UIBase).setWidthAndHeight(viewportModel.contentWidth, viewportModel.contentHeight, true);
 			
-			host.addEventListener("childrenAdded", childrenChangedHandler);
-            childrenChangedHandler(null);
+			// when the first layout is complete, set up listeners for changes
+			// to the childrens' sizes.
+			host.addEventListener("layoutComplete", childrenChangedHandler);
+			
 			host.addEventListener("childrenAdded", performLayout);
 			host.addEventListener("layoutNeeded", performLayout);
 			host.addEventListener("widthChanged", resizeHandler);
 			host.addEventListener("heightChanged", resizeHandler);
+			host.addEventListener("sizeChanged", resizeHandler);
 			host.addEventListener("viewCreated", viewCreatedHandler);
 		}
 		
@@ -243,9 +262,7 @@ package org.apache.flex.html.beads
 		 *  @productversion FlexJS 0.0
 		 */
 		protected function viewCreatedHandler(event:Event):void
-		{
-			resizeViewport();
-			
+		{			
 			if ((host as UIBase).numElements > 0) {
 				performLayout(null);
 			}
@@ -260,7 +277,7 @@ package org.apache.flex.html.beads
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		protected function createViewport():void
+		private function createViewport():void
 		{
 			if (viewportModel == null) {
 				_viewportModel = new ViewportModel();
@@ -283,16 +300,33 @@ package org.apache.flex.html.beads
 				viewport.model = viewportModel;
 			}
 			
-			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-			
 			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.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function adjustSizeBeforeLayout():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;
 			
-			resizeViewport();
+			contentView.x = viewportModel.contentX;
+			contentView.y = viewportModel.contentY;
+			contentView.width = viewportModel.contentWidth;
+			contentView.height = viewportModel.contentHeight;
 		}
 		
 		/**
@@ -307,6 +341,8 @@ package org.apache.flex.html.beads
 		 */
 		protected function performLayout(event:Event):void
 		{
+			adjustSizeBeforeLayout();
+			
 			var host:UIBase = _strand as UIBase;
 			
 			var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
@@ -330,7 +366,7 @@ package org.apache.flex.html.beads
 		 * @private
 		 */
 		private var adjusting:Boolean = false;
-		
+
 		/**
 		 * Adjusts the size of the host, or adds scrollbars to the viewport, after
 		 * the layout has been run.
@@ -350,30 +386,50 @@ package org.apache.flex.html.beads
 			if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {					
 				host.setWidthAndHeight(viewportModel.contentWidth+metrics.left+metrics.right, 
 					viewportModel.contentHeight+metrics.top+metrics.bottom, false);
-				resizeViewport();
 			}
 			else if (!host.isWidthSizedToContent() && host.isHeightSizedToContent())
 			{
 				viewport.needsHorizontalScroller();
 				host.setHeight(viewportModel.contentHeight+metrics.top+metrics.bottom, false);
-				resizeViewport();
 			}
 			else if (host.isWidthSizedToContent() && !host.isHeightSizedToContent())
 			{
 				viewport.needsVerticalScroller();
 				host.setWidth(viewportModel.contentWidth+metrics.left+metrics.right, false);
-				resizeViewport();
 			}
 			else {
 				viewport.needsScrollers();
-				viewport.updateSize();
-				viewport.updateContentAreaSize();
 			}
 			
+			layoutContainer(host.isWidthSizedToContent(), host.isHeightSizedToContent());
+			
+			viewportModel.contentX = viewportModel.viewportX+metrics.left;
+			viewportModel.contentY = viewportModel.viewportY+metrics.top;
+			
+			viewport.updateSize();
+			viewport.updateContentAreaSize();
+			
 			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.
 		 *  
@@ -405,28 +461,6 @@ package org.apache.flex.html.beads
 		}
 		
 		/**
-		 * Resizes the viewport opening in case the host has been resized.
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion FlexJS 0.0
-		 */
-		protected function resizeViewport():void
-		{
-			// the viewport takes the entire space as there is no default chrome.
-			// if chrome children get added the viewport will need to be adjusted
-			// accordingly.
-			viewportModel.viewportHeight = host.height;
-			viewportModel.viewportWidth = host.width;
-			viewportModel.viewportX = 0;
-			viewportModel.viewportY = 0;
-			
-			viewport.updateSize();
-			viewport.updateContentAreaSize();
-		}
-		
-		/**
 		 * Handles dynamic changes to the host's size by running the layout once
 		 * the viewport has been adjusted.
 		 *  
@@ -437,7 +471,6 @@ package org.apache.flex.html.beads
 		 */
 		protected function resizeHandler(event:Event):void
 		{
-			resizeViewport();
 			if (!adjusting) {
 				performLayout(event);
 			}
@@ -455,11 +488,14 @@ package org.apache.flex.html.beads
 		protected function childrenChangedHandler(event:Event):void
 		{
 			var host:UIBase = _strand as UIBase;
+			host.removeEventListener(event.type, childrenChangedHandler);
+			
 			var n:Number = contentView.numElements;
 			for (var i:int=0; i < n; i++) {
 				var child:IUIBase = contentView.getElementAt(i) as IUIBase;
 				child.addEventListener("widthChanged", childResizeHandler);
 				child.addEventListener("heightChanged", childResizeHandler);
+				child.addEventListener("sizeChanged", childResizeHandler);
 			}
 		}
 		
@@ -483,7 +519,7 @@ package org.apache.flex.html.beads
 			resizingChildren = true;
 			
 			var child:UIBase = event.target as UIBase;
-			performLayout(event);
+//			performLayout(event);
 			resizingChildren = false;
 		}
 		

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 e4778ed..4b4b0c4 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
@@ -55,6 +55,7 @@ package org.apache.flex.html.beads
 		 */
 		public function PanelView()
 		{
+			super();
 		}
 		
 		private var _titleBar:TitleBar;
@@ -72,6 +73,7 @@ package org.apache.flex.html.beads
 		{
 			return _titleBar;
 		}
+		
         /**
          *  @private
          */
@@ -107,85 +109,25 @@ package org.apache.flex.html.beads
 		
 		override protected function completeSetup():void
 		{
+			UIBase(_strand).addElement(titleBar);
 			super.completeSetup();
-			
-			UIBase(_strand).addElement(titleBar, false);
-		}
-		
-		/**
-		 * Sets up the viewport and model to reflect the addition of the titlebar.
-		 */
-		override protected function resizeViewport():void
-		{
-			var host:UIBase = UIBase(_strand);
-			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-			
-			titleBar.width = host.width;
-			titleBar.dispatchEvent( new Event("layoutNeeded") );
-			
-			var model:IViewportModel = viewport.model;
-			model.viewportX = 0;
-			model.viewportY = titleBar.height;
-			model.viewportWidth = host.width;
-			model.viewportHeight = host.height - titleBar.height;
-			model.contentX = model.viewportX + metrics.left;
-			model.contentY = model.viewportY + metrics.top;
-			model.contentWidth = model.viewportWidth - metrics.left - metrics.right;
-			model.contentHeight = model.viewportHeight - metrics.bottom;
-			model.contentArea = contentView;
-			model.contentIsHost = false;
-			
-			viewport.updateSize();
-			viewport.updateContentAreaSize();
 		}
 		
-		/**
-		 * This function is called when the layout has changed the size of the contentArea
-		 * (aka, actualParent). Depending on how the Panel is being sized, the contentArea
-		 * affects how the panel is presented.
-		 */
-		override protected function adjustSizeAfterLayout():void
+		override protected function layoutContainer(widthSizedToContent:Boolean, heightSizedToContent:Boolean):void
 		{
-			var host:UIBase = UIBase(_strand);
-			var viewportModel:IViewportModel = viewport.model;
-						
 			titleBar.x = 0;
 			titleBar.y = 0;
 			titleBar.width = host.width;
+			titleBar.dispatchEvent( new Event("layoutNeeded") );
 			
-			// If the host is being sized by its content, the change in the contentArea
-			// causes the host's size to change
-			if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {
-				host.setWidthAndHeight(viewportModel.contentWidth, viewportModel.contentHeight + titleBar.height, false);
-				titleBar.setWidth(host.width, true);
-				resizeViewport();
-			}
-				
-			// if the width is fixed and the height is changing, then set up horizontal
-			// scrolling (if the viewport supports it).
-			else if (!host.isWidthSizedToContent() && host.isHeightSizedToContent())
-			{
-				viewport.needsHorizontalScroller();
-				resizeViewport();
-				
+			if (heightSizedToContent) {
+				host.height = host.height + titleBar.height;
 			}
-				
-				// if the height is fixed and the width can change, then set up
-				// vertical scrolling (if the viewport supports it).
-			else if (host.isWidthSizedToContent() && !host.isHeightSizedToContent())
-			{
-				viewport.needsVerticalScroller();
-				resizeViewport();
-			}
-				
-				// Otherwise the viewport needs to display some scrollers (or other elements
-				// allowing the rest of the contentArea to be visible)
-			else {
-				viewport.needsScrollers();
-				viewport.updateSize();
-				viewport.updateContentAreaSize();
-			}
-		}
-                
+			
+			viewportModel.viewportHeight = host.height - titleBar.height;
+			viewportModel.viewportWidth = host.width;
+			viewportModel.viewportX = 0;
+			viewportModel.viewportY = titleBar.height;
+		}       
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 bb42ed8..0731cee 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
@@ -138,11 +138,12 @@ package org.apache.flex.html.beads
 			}
 		}
 		
-		override protected function resizeViewport():void
+		override protected function layoutContainer(widthSizedToContent:Boolean, heightSizedToContent:Boolean):void
 		{
-			var host:UIBase = UIBase(_strand);
-			var metrics:UIMetrics = BeadMetrics.getMetrics(host);
+			var adjustHeight:Number = titleBar.height;
 			
+			titleBar.x = 0;
+			titleBar.y = 0;
 			titleBar.width = host.width;
 			titleBar.dispatchEvent( new Event("layoutNeeded") );
 			
@@ -150,81 +151,17 @@ package org.apache.flex.html.beads
 				controlBar.width = host.width;
 				controlBar.dispatchEvent( new Event("layoutNeeded") );
 				controlBar.y = host.height - controlBar.height;
+				adjustHeight += controlBar.height;
 			}
 			
-			var model:IViewportModel = viewport.model;
-			model.viewportX = 0;
-			model.viewportY = titleBar.height;
-			model.viewportWidth = host.width;
-			model.viewportHeight = host.height - titleBar.height;
-			if (controlBar) {
-				model.viewportHeight -= controlBar.height;
-			}
-			model.contentX = model.viewportX + metrics.left;
-			model.contentY = model.viewportY + metrics.top;
-			model.contentWidth = model.viewportWidth - metrics.left - metrics.right;
-			model.contentHeight = model.viewportHeight - metrics.top - metrics.bottom;
-			
-			viewport.updateSize();
-			viewport.updateContentAreaSize();
-		}
-		
-		override protected function adjustSizeAfterLayout():void
-		{
-			var host:UIBase = UIBase(_strand);
-			var viewportModel:IViewportModel = viewport.model;
-			
-			titleBar.x = 0;
-			titleBar.y = 0;
-			titleBar.width = host.width;
-			
-			if (controlBar) {
-				controlBar.width = host.width;
-				controlBar.y = host.height - controlBar.height;
+			if (heightSizedToContent) {
+				host.height = host.height + adjustHeight;
 			}
 			
-			// If the host is being sized by its content, the change in the contentArea
-			// causes the host's size to change
-			if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {
-				host.setWidthAndHeight(viewportModel.contentWidth, viewportModel.contentHeight + titleBar.height, false);
-				resizeViewport();
-			}
-				
-				// if the width is fixed and the height is changing, then set up horizontal
-				// scrolling (if the viewport supports it).
-			else if (!host.isWidthSizedToContent() && host.isHeightSizedToContent())
-			{
-				viewport.needsHorizontalScroller();
-				
-				var metrics:UIMetrics = BeadMetrics.getMetrics(host);
-				
-				var cbHeight:Number = 0;
-				if (controlBar) {
-					controlBar.y = viewportModel.contentHeight + titleBar.height + metrics.top + metrics.bottom;
-					cbHeight = controlBar.height;
-				}
-				
-				host.setHeight(viewportModel.contentHeight + titleBar.height + cbHeight, false);
-				resizeViewport();
-			}
-				
-				// if the height is fixed and the width can change, then set up
-				// vertical scrolling (if the viewport supports it).
-			else if (host.isWidthSizedToContent() && !host.isHeightSizedToContent())
-			{
-				viewport.needsVerticalScroller();				
-				host.setWidth(viewportModel.contentWidth+viewport.scrollerWidth(), false);
-				resizeViewport();
-			}
-				
-				// Otherwise the viewport needs to display some scrollers (or other elements
-				// allowing the rest of the contentArea to be visible)
-			else {
-				
-				viewport.needsScrollers();
-				viewport.updateSize();
-				viewport.updateContentAreaSize();
-			}
+			viewportModel.viewportHeight = host.height - adjustHeight;
+			viewportModel.viewportWidth = host.width;
+			viewportModel.viewportX = 0;
+			viewportModel.viewportY = titleBar.height;
 		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/BasicLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/BasicLayout.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/BasicLayout.as
index 42c3c08..6ae249f 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/BasicLayout.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/BasicLayout.as
@@ -362,6 +362,8 @@ package org.apache.flex.html.beads.layouts
                 }
             }
 			
+			host.dispatchEvent( new Event("layoutComplete") );
+			
             return true;
 		}
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 d56f11c..4cbd567 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
@@ -27,11 +27,13 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.ISelectionModel;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewportModel;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
 	import org.apache.flex.html.List;
+	import org.apache.flex.html.beads.ButtonBarView;
 	
 	/**
 	 *  The ButtonBarLayout class bead sizes and positions the org.apache.flex.html.Button 
@@ -101,6 +103,7 @@ package org.apache.flex.html.beads.layouts
 			var layoutParent:ILayoutParent = _strand.getBeadByType(ILayoutParent) as ILayoutParent;
 			var contentView:IParent = layoutParent.contentView;
 			var itemRendererParent:IItemRendererParent = contentView as IItemRendererParent;
+			var viewportModel:IViewportModel = (layoutParent as ButtonBarView).viewportModel;
 			
 			var n:int = contentView.numElements;
 			var realN:int = n;
@@ -112,8 +115,8 @@ package org.apache.flex.html.beads.layouts
 			}
 			
 			var xpos:Number = 0;
-			var useWidth:Number = UIBase(contentView).width / realN;
-			var useHeight:Number = UIBase(contentView).height;
+			var useWidth:Number = viewportModel.contentWidth / realN;
+			var useHeight:Number = viewportModel.contentHeight;
 			
 			for (var i:int=0; i < n; i++)
 			{
@@ -131,6 +134,9 @@ package org.apache.flex.html.beads.layouts
 				}
 				xpos += UIBase(ir).width;
 			}
+			
+			IEventDispatcher(_strand).dispatchEvent( new Event("layoutComplete") );
+			
             return true;
 		}
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 37b7d3f..b7a3832 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
@@ -194,8 +194,8 @@ package org.apache.flex.html.supportClasses
 			
 			var rect:Rectangle = contentArea.scrollRect;
 			if (rect) {
-				rect.x = 0;
-				rect.y = 0;
+				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;
@@ -289,7 +289,7 @@ package org.apache.flex.html.supportClasses
 			
 			var rect:Rectangle = contentArea.scrollRect;
 			if (rect == null) {
-				rect = new Rectangle(0, 0, 
+				rect = new Rectangle(model.viewportX, model.viewportY,//0, 0, 
 					                 model.viewportWidth - metrics.left - metrics.right, 
 									 model.viewportHeight - metrics.top - metrics.bottom);
 				contentArea.scrollRect = rect;
@@ -321,7 +321,7 @@ package org.apache.flex.html.supportClasses
 			
 			var rect:Rectangle = contentArea.scrollRect;
 			if (rect == null) {
-				rect = new Rectangle(0, 0, 
+				rect = new Rectangle(model.viewportX, model.viewportY,//0, 0, 
 					model.viewportWidth - metrics.left - metrics.right, 
 					model.viewportHeight - metrics.top - metrics.bottom);
 				contentArea.scrollRect = rect;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/ButtonBar.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/ButtonBar.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/ButtonBar.js
index 2c7c3fa..6705485 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/ButtonBar.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/ButtonBar.js
@@ -74,9 +74,6 @@ org.apache.flex.html.ButtonBar.prototype.createElement =
 
   this.element = document.createElement('div');
   this.element.style.overflow = 'auto';
-  this.element.style.border = 'solid';
-  this.element.style.borderWidth = '1px';
-  this.element.style.borderColor = '#333333';
   this.positioner = this.element;
 
   this.className = 'ButtonBar';

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/Container.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/Container.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/Container.js
index bcd581f..c363807 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/Container.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/Container.js
@@ -53,6 +53,7 @@ org.apache.flex.html.Container.prototype.createElement =
   this.element = document.createElement('div');
 
   this.positioner = this.element;
+
   // absolute positioned children need a non-null
   // position value in the parent.  It might
   // get set to 'absolute' if the container is
@@ -60,10 +61,10 @@ org.apache.flex.html.Container.prototype.createElement =
   this.positioner.style.position = 'relative';
   this.element.flexjs_wrapper = this;
 
-  this.addEventListener('childrenAdded',
+  /*this.addEventListener('childrenAdded',
               goog.bind(this.runLayoutHandler, this));
   this.addEventListener('elementRemoved',
-              goog.bind(this.runLayoutHandler, this));
+              goog.bind(this.runLayoutHandler, this));*/
 
   return this.element;
 };
@@ -71,22 +72,22 @@ org.apache.flex.html.Container.prototype.createElement =
 
 /**
  * @override
- */
+ *
 org.apache.flex.html.Container.prototype.addElement =
     function(child) {
   org.apache.flex.html.Container.base(this, 'addElement', child);
   this.dispatchEvent('elementAdded');
-};
+};*/
 
 
 /**
  * @override
- */
+ *
 org.apache.flex.html.Container.prototype.removeElement =
     function(child) {
   org.apache.flex.html.Container.base(this, 'removeElement', child);
   this.dispatchEvent('elementRemoved');
-};
+};*/
 
 
 /**
@@ -101,14 +102,14 @@ org.apache.flex.html.Container.prototype.childrenAdded =
 /**
  * @export
  * @param {Object} event The event invoking the layout.
- */
+ *
 org.apache.flex.html.Container.prototype.runLayoutHandler =
   function(event) {
   var layout = this.getBeadByType(org.apache.flex.core.IBeadLayout);
   if (layout) {
     layout.layout();
   }
-};
+};*/
 
 
 /**

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js
index c2836a3..e214ebf 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js
@@ -130,7 +130,7 @@ org.apache.flex.html.List.prototype.addedToParent =
     function() {
   org.apache.flex.html.List.base(this, 'addedToParent');
 
-  var dataFactory = this.getBeadByType(org.apache.flex.html.beads.DataItemRendererFactoryForArrayData);
+  var dataFactory = this.getBeadByType(org.apache.flex.core.IDataProviderItemRendererMapper);
   if (dataFactory == null) {
     var m1 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this, 'iDataProviderItemRendererMapper');
     dataFactory = new m1();

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js
index ba75810..f22701e 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js
@@ -44,7 +44,7 @@ org.apache.flex.html.Panel.prototype.FLEXJS_CLASS_INFO =
 /**
  * @override
  * @param {Object} c Element being added.
- */
+ *
 org.apache.flex.html.Panel.prototype.addElement = function(c) {
   if (c == this.titleBar) {
     this.element.insertBefore(this.titleBar.element, this.contentArea);
@@ -57,14 +57,14 @@ org.apache.flex.html.Panel.prototype.addElement = function(c) {
     this.dispatchEvent('childrenAdded');
   }
   c.addedToParent();
-};
+};*/
 
 
 /**
  * @override
  * @param {Object} c The child element.
  * @param {number} index The index.
- */
+ *
 org.apache.flex.html.Panel.prototype.addElementAt =
     function(c, index) {
   var children = this.internalChildren();
@@ -77,14 +77,14 @@ org.apache.flex.html.Panel.prototype.addElementAt =
     c.addedToParent();
     this.dispatchEvent('childrenAdded');
   }
-};
+};*/
 
 
 /**
  * @override
  * @param {Object} c The child element.
  * @return {number} The index in parent.
- */
+ *
 org.apache.flex.html.Panel.prototype.getElementIndex =
     function(c) {
   var children = this.internalChildren();
@@ -95,17 +95,17 @@ org.apache.flex.html.Panel.prototype.getElementIndex =
       return i;
   }
   return -1;
-};
+};*/
 
 
 /**
  * @override
  * @param {Object} c The child element.
- */
+ *
 org.apache.flex.html.Panel.prototype.removeElement =
     function(c) {
   this.contentArea.removeChild(c.element);
-};
+};*/
 
 
 /**
@@ -113,8 +113,9 @@ org.apache.flex.html.Panel.prototype.removeElement =
  */
 org.apache.flex.html.Panel.prototype.createElement =
     function() {
-
-  this.element = document.createElement('div');
+  var e = org.apache.flex.html.Panel.base(this, 'createElement');
+  e.className = 'Panel';
+/*  this.element = document.createElement('div');
   this.element.className = 'Panel';
   this.typeNames = 'Panel';
 
@@ -123,7 +124,7 @@ org.apache.flex.html.Panel.prototype.createElement =
   this.element.appendChild(this.contentArea);
 
   this.positioner = this.element;
-  this.element.flexjs_wrapper = this;
+  this.element.flexjs_wrapper = this;*/
 
   return this.element;
 };
@@ -131,21 +132,21 @@ org.apache.flex.html.Panel.prototype.createElement =
 
 /**
  * @override
- */
+ *
 org.apache.flex.html.Panel.prototype.addedToParent =
     function() {
   org.apache.flex.html.Panel.base(this, 'addedToParent');
-};
+};*/
 
 
 /**
  * @override
  * @return {Array} the HTML DOM element children.
- */
+ *
 org.apache.flex.html.Panel.prototype.internalChildren =
     function() {
   return this.contentArea.children;
-};
+};*/
 
 
 Object.defineProperties(org.apache.flex.html.Panel.prototype, {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 8f910d8..be08b4c 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
@@ -18,6 +18,7 @@ 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');
 
 
@@ -31,6 +32,7 @@ org.apache.flex.html.beads.ContainerView = function() {
   org.apache.flex.html.beads.ContainerView.base(this, 'constructor');
 
   this.className = 'ContainerView';
+  this.resizingChildren = false;
 };
 goog.inherits(
     org.apache.flex.html.beads.ContainerView,
@@ -53,6 +55,13 @@ org.apache.flex.html.beads.ContainerView.prototype.FLEXJS_CLASS_INFO =
  * @private
  * @type {Object}
  */
+org.apache.flex.html.beads.ContainerView.prototype.strand_ = null;
+
+
+/**
+ * @private
+ * @type {Object}
+ */
 org.apache.flex.html.beads.ContainerView.prototype.viewport_ = null;
 
 
@@ -71,27 +80,48 @@ org.apache.flex.html.beads.ContainerView.prototype.contentArea_ = null;
 
 
 /**
- *
+ * @return {Object} The container's child content area.
  */
 org.apache.flex.html.beads.ContainerView.
-    prototype.addOtherListeners = function() {
-  this._strand.addEventListener('childrenAdded',
-      goog.bind(this.changeHandler, this));
-  this._strand.addEventListener('elementAdded',
-      goog.bind(this.changeHandler, this));
-  this._strand.addEventListener('layoutNeeded',
-     goog.bind(this.changeHandler, this));
-  this._strand.addEventListener('itemsCreated',
-     goog.bind(this.changeHandler, this));
+    prototype.createContentView = function() {
+  return new org.apache.flex.html.supportClasses.ContainerContentArea();
 };
 
 
 /**
- * @return {Object} The container's child content area.
+ * @param {org.apache.flex.events.Event} event The event.
  */
 org.apache.flex.html.beads.ContainerView.
-    prototype.createContentView = function() {
-  return this._strand;
+    prototype.initCompleteHandler = function(event) {
+  if ((this.host.isHeightSizedToContent() || !isNaN(this.host.explicitHeight)) &&
+      (this.host.isWidthSizedToContent() || !isNaN(this.host.explicitWidth))) {
+         this.completeSetup();
+
+         var num = this.contentView.numElements;
+         if (num > 0) {
+           this.performLayout(event);
+         }
+   }
+   else {
+     this.strand_.addEventListener('sizeChanged',
+       goog.bind(this.deferredSizeHandler, this));
+   }
+};
+
+
+/**
+ * @param {org.apache.flex.events.Event} event The event.
+ */
+org.apache.flex.html.beads.ContainerView.
+    prototype.deferredSizeHandler = function(event) {
+    this.strand_.removeEventListener('sizeChanged',
+      goog.bind(this.deferredSizeHandler, this));
+    this.completeSetup();
+
+    var num = this.contentView.numElements;
+    if (num > 0) {
+      this.performLayout(event);
+    }
 };
 
 
@@ -100,9 +130,23 @@ org.apache.flex.html.beads.ContainerView.
  */
 org.apache.flex.html.beads.ContainerView.
     prototype.changeHandler = function(event) {
-  this.createViewport();
+  this.performLayout(event);
+};
+
 
-  this.performLayout(null);
+/**
+ * @param {org.apache.flex.events.Event} event The event.
+ */
+org.apache.flex.html.beads.ContainerView.
+    prototype.childrenChangedHandler = function(event) {
+    var num = this.contentView.numElements;
+    for (var i = 0; i < num; i++) {
+      var child = this.contentView.getElementAt(i);
+      child.addEventListener('widthChanged',
+          goog.bind(this.childResizeHandler, this));
+      child.addEventListener('heightChanged',
+          goog.bind(this.childResizeHandler, this));
+    }
 };
 
 
@@ -111,8 +155,83 @@ org.apache.flex.html.beads.ContainerView.
  */
 org.apache.flex.html.beads.ContainerView.
     prototype.sizeChangeHandler = function(event) {
-  this.addOtherListeners();
-  this.changeHandler(event);
+  this.performLayout(event);
+};
+
+
+/**
+ * @param {org.apache.flex.events.Event} event The event.
+ */
+org.apache.flex.html.beads.ContainerView.
+    prototype.resizeHandler = function(event) {
+  this.performLayout(event);
+};
+
+
+/**
+ * @param {org.apache.flex.events.Event} event The event.
+ */
+ org.apache.flex.html.beads.ContainerView.
+    prototype.childResizeHandler = function(event) {
+    if (this.resizingChildren) return;
+    this.resizingChildren = true;
+    this.performLayout(event);
+    this.resizingChildren = false;
+};
+
+
+/**
+ *
+ */
+org.apache.flex.html.beads.ContainerView.
+    prototype.completeSetup = function() {
+  this.createViewport();
+
+   this.strand_.addEventListener('childrenAdded',
+      goog.bind(this.childrenChangedHandler, this));
+   this.childrenChangedHandler(null);
+   this.strand_.addEventListener('childrenAdded',
+      goog.bind(this.changeHandler, this));
+  this.strand_.addEventListener('childrenRemoved',
+      goog.bind(this.changeHandler, this));
+  this.strand_.addEventListener('layoutNeeded',
+     goog.bind(this.performLayout, this));
+  this.strand_.addEventListener('widthChanged',
+     goog.bind(this.resizeHandler, this));
+  this.strand_.addEventListener('heightChanged',
+     goog.bind(this.resizeHandler, this));
+  this.strand_.addEventListener('sizeChanged',
+     goog.bind(this.resizeHandler, this));
+};
+
+
+/**
+ * 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;
+  }
+  if (this.viewport_ == null) {
+    this.viewport_ = new org.apache.flex.html.supportClasses.Viewport();
+    this.viewport_.model = this.viewportModel_;
+    this.strand_.addBead(this.viewport_);
+  }
+};
+
+
+/**
+ *
+ */
+org.apache.flex.html.beads.ContainerView.
+    prototype.adjustSizeBeforeLayout = function() {
+    this.viewportModel_.contentWidth = this.strand_.width;
+    this.viewportModel_.contentHeight = this.strand_.height;
+    this.viewportModel_.contentX = 0;
+    this.viewportModel_.contentY = 0;
 };
 
 
@@ -121,15 +240,16 @@ org.apache.flex.html.beads.ContainerView.
  */
 org.apache.flex.html.beads.ContainerView.
     prototype.performLayout = function(event) {
-  if (this.layout_ == null) {
-    this.layout_ = this._strand.getBeadByType(org.apache.flex.core.IBeadLayout);
-    if (this.layout_ == null) {
-      var m3 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this._strand, 'iBeadLayout');
-      this.layout_ = new m3();
-      this._strand.addBead(this.layout_);
+  this.adjustSizeBeforeLayout();
+  if (this.layout == null) {
+    this.layout = this.strand_.getBeadByType(org.apache.flex.core.IBeadLayout);
+    if (this.layout == null) {
+      var m3 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this.strand_, 'iBeadLayout');
+      this.layout = new m3();
+      this.strand_.addBead(this.layout);
     }
   }
-  this.layout_.layout();
+  this.layout.layout();
 
   this.adjustSizeAfterLayout();
 };
@@ -140,44 +260,57 @@ org.apache.flex.html.beads.ContainerView.
  */
 org.apache.flex.html.beads.ContainerView.
     prototype.adjustSizeAfterLayout = function() {
-  var max = this.layout_.maxWidth;
+  var max = this.contentView.width;//this.layout.maxWidth;
   if (isNaN(this.resizableView.explicitWidth) && !isNaN(max))
     this.resizableView.setWidth(max, true);
-  max = this.layout_.maxHeight;
+  max = this.contentView.height;//this.layout.maxHeight;
   if (isNaN(this.resizableView.explicitHeight) && !isNaN(max))
     this.resizableView.setHeight(max, true);
+
+  this.layoutContainer(false, false);
+
+  // 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.determineContentSizeFromChildren = function() {
-  // this function has no meaning in the HTML world
+    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;
 };
 
 
 /**
- * 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 = true;
-    this.viewportModel_.contentWidth = this._strand.width;
-    this.viewportModel_.contentHeight = this._strand.height;
-    this.viewportModel_.contentX = 0;
-    this.viewportModel_.contentY = 0;
-  }
-  if (this.viewport_ == null) {
-    this.viewport_ = new org.apache.flex.html.supportClasses.Viewport();
-    this.viewport_.model = this.viewportModel_;
-    this._strand.addBead(this.viewport_);
-  }
-  this.resizeViewport();
+    prototype.determineContentSizeFromChildren = function() {
+  // this function has no meaning in the HTML world
 };
 
 
@@ -187,10 +320,10 @@ org.apache.flex.html.beads.ContainerView.
  */
 org.apache.flex.html.beads.ContainerView.
     prototype.resizeViewport = function() {
-  this.viewportModel_.viewportHeight = this._strand.height;
-  this.viewportModel_.viewportWidth = this._strand.width;
+/*  this.viewportModel_.viewportHeight = this.strand_.height;
+  this.viewportModel_.viewportWidth = this.strand_.width;
   this.viewportModel_.viewportX = 0;
-  this.viewportModel_.viewportY = 0;
+  this.viewportModel_.viewportY = 0;*/
 };
 
 
@@ -200,13 +333,16 @@ Object.defineProperties(org.apache.flex.html.beads.ContainerView.prototype, {
         /** @this {org.apache.flex.html.beads.ContainerView} */
         get: function() {
             return this.contentArea_;
+        },
+        set: function(value) {
+            this.contentArea_ = value;
         }
     },
     /** @export */
     resizableView: {
         /** @this {org.apache.flex.html.beads.ContainerView} */
         get: function() {
-            return this._strand;
+            return this.strand_;
         },
         set: function(value) {
         }
@@ -215,22 +351,15 @@ Object.defineProperties(org.apache.flex.html.beads.ContainerView.prototype, {
     strand: {
         /** @this {org.apache.flex.html.beads.ContainerView} */
         set: function(value) {
+            this.strand_ = value;
             org.apache.flex.utils.Language.superSetter(org.apache.flex.html.beads.ContainerView, this, 'strand', value);
-            this.contentArea_ = this.createContentView();
-            if (this._strand.isWidthSizedToContent() &&
-                this._strand.isHeightSizedToContent())
-              this.addOtherListeners();
-            else {
-              this._strand.addEventListener('heightChanged',
-                  goog.bind(this.changeHandler, this));
-              this._strand.addEventListener('widthChanged',
-                  goog.bind(this.changeHandler, this));
-              this._strand.addEventListener('sizeChanged',
-                  goog.bind(this.sizeChangeHandler, this));
-              if (!isNaN(this._strand.explicitWidth) &&
-                  !isNaN(this._strand.explicitHeight))
-                this.addOtherListeners();
-            }
+            this.contentView = this.createContentView();
+            this.contentView.percentWidth = 100;
+            this.contentView.percentHeight = 100;
+            this.host.addElement(this.contentView);
+            this.host.setActualParent(this.contentView);
+            this.strand_.addEventListener('initComplete',
+                  goog.bind(this.initCompleteHandler, this));
          }
     },
     /** @export */
@@ -254,6 +383,17 @@ Object.defineProperties(org.apache.flex.html.beads.ContainerView.prototype, {
         get: function() {
             return this.viewportModel_;
         }
+    },
+    /** @export */
+    layout: {
+        /** @this {org.apache.flex.html.beads.ContainerView} */
+        set: function(value) {
+            this.layout_ = value;
+        },
+        /** @this {org.apache.flex.html.beads.ContainerView} */
+        get: function() {
+            return this.layout_;
+        }
     }
 
 });

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 dbdff4c..7079201 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
@@ -56,33 +56,66 @@ org.apache.flex.html.beads.ListView.prototype.
       interfaces: [org.apache.flex.html.beads.IListView, org.apache.flex.core.ILayoutParent] };
 
 
+/**
+ * @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() {
+  org.apache.flex.html.beads.ListView.base(this, 'completeSetup');
+  this.strand_.addEventListener('itemsCreated',
+  goog.bind(this.changeHandler, this));
+};
+
+
 Object.defineProperties(org.apache.flex.html.beads.ListView.prototype, {
     /** @export */
     strand: {
         /** @this {org.apache.flex.html.beads.ListView} */
         set: function(value) {
+            this.strand_ = value;
             org.apache.flex.utils.Language.superSetter(
                 org.apache.flex.html.beads.ListView, this, 'strand', value);
 
-            this.model = this._strand.model;
+            this.model = this.strand_.model;
             this.model.addEventListener('selectedIndexChanged',
                 goog.bind(this.selectionChangeHandler, this));
             this.model.addEventListener('dataProviderChanged',
                 goog.bind(this.dataProviderChangeHandler, this));
 
-            if (this.dataGroup_ == null) {
-              var m2 = org.apache.flex.core.ValuesManager.valuesImpl.
-                  getValue(this._strand, 'iDataGroup');
-              this.dataGroup_ = new m2();
-            }
             this.dataGroup_.strand = this;
-            this._strand.addElement(this.dataGroup_);
 
-            if (this._strand.getBeadByType(org.apache.flex.core.IBeadLayout) == null) {
-              var m3 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this._strand, 'iBeadLayout');
+            /*if (this.strand_.getBeadByType(org.apache.flex.core.IBeadLayout) == null) {
+              var m3 = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this.strand_, 'iBeadLayout');
               this.layout_ = new m3();
-              this._strand.addBead(this.layout_);
-            }
+              this.strand_.addBead(this.layout_);
+             }*/
+        },
+        get: function() {
+            return this.strand_;
+        }
+    },
+    /** @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 */
@@ -95,6 +128,30 @@ Object.defineProperties(org.apache.flex.html.beads.ListView.prototype, {
         set: function(value) {
             this.dataGroup_ = value;
         }
+    },
+    /** @export */
+    border: {
+        /** @this {org.apache.flex.html.beads.ListView} */
+        get: function() {
+            return null;
+        }
+    },
+    /** @export */
+    vScrollBar: {
+        /** @this {org.apache.flex.html.beads.ListView} */
+        get: function() {
+            return null;
+        },
+        /** @this {org.apache.flex.html.beads.ListView} */
+        set: function(value) {
+        }
+    },
+    /** @export */
+    resizeableView: {
+        /** @this {org.apache.flex.html.beads.ListView} */
+        get: function() {
+            return this;
+        }
     }
 });
 
@@ -130,46 +187,11 @@ org.apache.flex.html.beads.ListView.prototype.
 };
 
 
-Object.defineProperties(org.apache.flex.html.beads.ListView.prototype, {
-    /** @export */
-    contentView: {
-        /** @this {org.apache.flex.html.beads.ListView} */
-        get: function() {
-            return this.dataGroup_;
-        }
-    },
-    /** @export */
-    border: {
-        /** @this {org.apache.flex.html.beads.ListView} */
-        get: function() {
-            return null;
-        }
-    },
-    /** @export */
-    vScrollBar: {
-        /** @this {org.apache.flex.html.beads.ListView} */
-        get: function() {
-            return null;
-        },
-        /** @this {org.apache.flex.html.beads.ListView} */
-        set: function(value) {
-        }
-    },
-    /** @export */
-    resizeableView: {
-        /** @this {org.apache.flex.html.beads.ListView} */
-        get: function() {
-            return this;
-        }
-    }
-});
-
-
 /**
  * @export
  * @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/f03e77f5/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 d0b27a2..6056ccb 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
@@ -38,6 +38,8 @@ org.apache.flex.html.beads.PanelView = function() {
    * @type {?Object}
   */
   this.titleBar_ = null;
+
+  this.className = 'PanelView';
 };
 goog.inherits(
     org.apache.flex.html.beads.PanelView,
@@ -56,6 +58,13 @@ org.apache.flex.html.beads.PanelView
 
 
 /**
+ * @private
+ * @type {Object}
+ */
+org.apache.flex.html.beads.PanelView.prototype.strand_ = null;
+
+
+/**
  * @override
  */
 org.apache.flex.html.beads.PanelView.
@@ -70,22 +79,25 @@ Object.defineProperties(org.apache.flex.html.beads.PanelView.prototype, {
     strand: {
         /** @this {org.apache.flex.html.beads.PanelView} */
         set: function(value) {
-            org.apache.flex.utils.Language.superSetter(org.apache.flex.html.beads.PanelView, this, 'strand', value);
-
+            this.strand_ = value;
             if (!this.titleBar_)
               this.titleBar_ = new org.apache.flex.html.TitleBar();
 
-            this._strand.titleBar = this.titleBar_;
-            this.titleBar_.id = 'titleBar';
-            this.titleBar_.model = this._strand.model;
+            this.strand_.titleBar = this.titleBar_;
+            this.titleBar_.id = 'panelTitleBar';
+            this.titleBar_.model = this.strand_.model;
+            this.titleBarAdded_ = true;
+            this.strand_.addElement(this.titleBar_);
 
-            this._strand.controlBar =
-                new org.apache.flex.html.ControlBar();
+//            this.strand_.controlBar =
+//                new org.apache.flex.html.ControlBar();
 
             // listen for changes to the strand's model so items can be changed
             // in the view
-            this._strand.model.addEventListener('titleChange',
+            this.strand_.model.addEventListener('titleChange',
                 goog.bind(this.changeHandler, this));
+
+            org.apache.flex.utils.Language.superSetter(org.apache.flex.html.beads.PanelView, this, 'strand', value);
         }
     },
     /** @export */
@@ -104,11 +116,35 @@ Object.defineProperties(org.apache.flex.html.beads.PanelView.prototype, {
 
 /**
  * @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('layoutNeeded');
+
+  if (heightSizedToContent) {
+    this.strand_.height = this.strand_.height + this.titleBar_.height;
+  }
+
+  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
  * @param {org.apache.flex.events.Event} event The event that triggered this handler.
  */
-org.apache.flex.html.beads.PanelView.prototype.changeHandler =
+/**org.apache.flex.html.beads.PanelView.prototype.changeHandler =
     function(event) {
-  var strand = this._strand;
+  var strand = this.strand_;
   if (!this.titleBarAdded_)
   {
     this.titleBarAdded_ = true;
@@ -121,7 +157,7 @@ org.apache.flex.html.beads.PanelView.prototype.changeHandler =
     this.titleBar_.title = strand.model.title;
   }
 
-  var p = this._strand.positioner;
+  var p = this.strand_.positioner;
   if (!strand.isWidthSizedToContent()) {
     var w = strand.width;
     w -= p.offsetWidth - p.clientWidth;
@@ -141,4 +177,4 @@ org.apache.flex.html.beads.PanelView.prototype.changeHandler =
     strand.contentArea.style.height = h.toString() + 'px';
   }
   org.apache.flex.html.beads.PanelView.base(this, 'changeHandler', event);
-};
+};**/

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.js
index 29f30d0..2932704 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/TextItemRendererFactoryForArrayData.js
@@ -16,6 +16,7 @@ goog.provide('org.apache.flex.html.beads.TextItemRendererFactoryForArrayData');
 
 goog.require('org.apache.flex.core.IDataProviderItemRendererMapper');
 goog.require('org.apache.flex.core.IItemRenderer');
+goog.require('org.apache.flex.core.ValuesManager');
 goog.require('org.apache.flex.events.Event');
 goog.require('org.apache.flex.events.EventDispatcher');
 goog.require('org.apache.flex.html.beads.models.ArraySelectionModel');
@@ -66,9 +67,30 @@ Object.defineProperties(org.apache.flex.html.beads.TextItemRendererFactoryForArr
             this.model.addEventListener('dataProviderChanged',
                 goog.bind(this.dataProviderChangedHandler, this));
 
+            if (!this.itemRendererFactory)
+            {
+                var m2 = org.apache.flex.core.ValuesManager.valuesImpl.
+                    getValue(this.strand_, 'iItemRendererClassFactory');
+                this.itemRendererFactory = new m2();
+                this.strand_.addBead(this.itemRendererFactory);
+            }
+
             this.dataProviderChangedHandler(null);
+        },
+        get: function() {
+            return this.strand_;
+        }
+    },
+    itemRendererFactory: {
+        /** @this {org.apache.flex.html.beads.TextItemRendererFactoryForArrayData} */
+        set: function(value) {
+           this.itemRendererFactory_ = value;
+        },
+        /** @this {org.apache.flex.html.beads.TextItemRendererFactoryForArrayData} */
+        get: function() {
+           return this.itemRendererFactory_;
         }
-    }
+     }
 });
 
 
@@ -83,10 +105,10 @@ org.apache.flex.html.beads.TextItemRendererFactoryForArrayData.
   dp = this.model.dataProvider;
   n = dp.length;
   for (i = 0; i < n; i++) {
-    opt = new
-        org.apache.flex.html.supportClasses.StringItemRenderer();
-    this.dataGroup.addElement(opt);
-    opt.text = dp[i];
+    var tf = this.itemRendererFactory.createItemRenderer(this.dataGroup);
+    this.dataGroup.addElement(tf);
+    tf.data = dp[i];
+    tf.index = i;
   }
 
   var newEvent = new org.apache.flex.events.Event('itemsCreated');

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 9d5d149..dec2378 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
@@ -77,11 +77,12 @@ org.apache.flex.html.beads.layouts.ButtonBarLayout.
   var layoutParent = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
   var contentView = layoutParent.contentView;
   var itemRendererParent = contentView;
+  var viewportModel = layoutParent.viewportModel;
 
   var n = itemRendererParent.numElements;
   var xpos = 0;
-  var useWidth = this.strand_.width / n;
-  var useHeight = this.strand_.height;
+  var useWidth = viewportModel.contentWidth / n;
+  var useHeight = viewportModel.contentHeight;
 
   for (var i = 0; i < n; i++)
   {
@@ -95,8 +96,8 @@ org.apache.flex.html.beads.layouts.ButtonBarLayout.
     ir.positioner.style['top-margin'] = 'auto';
     ir.positioner.style['bottom-margin'] = 'auto';
 
-    if (this.buttonWidths_ && !isNaN(this.buttonWidths_[i])) ir.width = this.buttonWidths_[i] - 2;
-    else ir.width = useWidth - 2;
+    if (this.buttonWidths_ && !isNaN(this.buttonWidths_[i])) ir.width = this.buttonWidths_[i];
+    else ir.width = useWidth;
 
     if (ir.positioner.style.display == 'none')
       ir.positioner.lastDisplay_ = 'inline-block';

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/HorizontalLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/HorizontalLayout.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/HorizontalLayout.js
index bf36a2e..54ff416 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/HorizontalLayout.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/HorizontalLayout.js
@@ -62,7 +62,9 @@ org.apache.flex.html.beads.layouts.HorizontalLayout.
     prototype.layout = function() {
   var children, i, n;
 
-  children = this.strand_.internalChildren();
+  var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
+  var contentView = viewBead.contentView;
+  children = contentView.internalChildren();
   var sps = this.strand_.positioner.style;
   var scv = getComputedStyle(this.strand_.positioner);
   var hasHeight = sps.height !== undefined && sps.height != this.lastHeight_;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/TileLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/TileLayout.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/TileLayout.js
index d00d250..0e0095c 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/TileLayout.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/TileLayout.js
@@ -15,6 +15,7 @@
 goog.provide('org.apache.flex.html.beads.layouts.TileLayout');
 
 goog.require('org.apache.flex.core.IBeadLayout');
+goog.require('org.apache.flex.core.ILayoutParent');
 
 
 
@@ -93,7 +94,9 @@ org.apache.flex.html.beads.layouts.TileLayout.
   var children, i, n, child;
   var xpos, ypos, useWidth, useHeight;
 
-  children = this.strand_.internalChildren();
+  var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
+  var contentView = viewBead.contentView;
+  children = contentView.internalChildren();
   n = children.length;
   if (n === 0) return;
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/VerticalLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/VerticalLayout.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/VerticalLayout.js
index e351995..428675e 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/VerticalLayout.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/layouts/VerticalLayout.js
@@ -65,7 +65,9 @@ org.apache.flex.html.beads.layouts.VerticalLayout.
     prototype.layout = function() {
   var children, i, n;
 
-  children = this.strand_.internalChildren();
+  var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
+  var contentView = viewBead.contentView;
+  children = contentView.internalChildren();
   var sps = this.strand_.positioner.style;
   var scv = getComputedStyle(this.strand_.positioner);
   var hasWidth = sps.width !== undefined && sps.width != this.lastWidth_;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ContainerContentArea.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ContainerContentArea.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ContainerContentArea.js
index 3eedbb7..952fcd1 100644
--- a/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ContainerContentArea.js
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/supportClasses/ContainerContentArea.js
@@ -47,6 +47,7 @@ org.apache.flex.html.supportClasses.ContainerContentArea.prototype.FLEXJS_CLASS_
 org.apache.flex.html.supportClasses.ContainerContentArea.prototype.createElement =
     function() {
   this.element = document.createElement('div');
+  this.element.className = 'ContainerContentArea';
 
   this.positioner = this.element;
   // absolute positioned children need a non-null

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/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 4b1a1d9..131d2da 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
@@ -57,6 +57,17 @@ org.apache.flex.html.supportClasses.ScrollingViewport.prototype.updateContentAre
 };
 
 
+/**
+ * @param {org.apache.flex.events.Event} event The event.
+ */
+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';
+};
+
+
 
 Object.defineProperties(org.apache.flex.html.supportClasses.ScrollingViewport.prototype, {
     /** @export */
@@ -74,22 +85,30 @@ Object.defineProperties(org.apache.flex.html.supportClasses.ScrollingViewport.pr
     verticalScrollPosition: {
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         get: function() {
-            return this.strand.positioner.scrollTop;
+             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
+             var contentView = viewBead.contentView;
+            return contentView.positioner.scrollTop;
         },
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         set: function(value) {
-             this.strand.positioner.scrollTop = value;
+             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
+             var contentView = viewBead.contentView;
+             contentView.positioner.scrollTop = value;
         }
     },
     /** @export */
     horizontalScrollPosition: {
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         get: function() {
-            return this.strand.positioner.scrollLeft;
+             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
+             var contentView = viewBead.contentView;
+            return contentView.positioner.scrollLeft;
         },
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         set: function(value) {
-             this.strand.positioner.scrollLeft = value;
+             var viewBead = this.strand_.getBeadByType(org.apache.flex.core.ILayoutParent);
+             var contentView = viewBead.contentView;
+             contentView.positioner.scrollLeft = value;
         }
     },
     /** @export */
@@ -101,7 +120,8 @@ Object.defineProperties(org.apache.flex.html.supportClasses.ScrollingViewport.pr
         /** @this {org.apache.flex.html.supportClasses.ScrollingViewport} */
         set: function(value) {
             this.strand_ = value;
-            this.strand_.element.style['overflow'] = 'auto';
+            this.strand_.addEventListener('initComplete',
+              goog.bind(this.handleInitComplete, this));
         }
     }
 });

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/Mobile/as/src/org/apache/flex/mobile/ManagerBase.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Mobile/as/src/org/apache/flex/mobile/ManagerBase.as b/frameworks/projects/Mobile/as/src/org/apache/flex/mobile/ManagerBase.as
index c6b0ec0..8d444a5 100644
--- a/frameworks/projects/Mobile/as/src/org/apache/flex/mobile/ManagerBase.as
+++ b/frameworks/projects/Mobile/as/src/org/apache/flex/mobile/ManagerBase.as
@@ -20,6 +20,7 @@ package org.apache.flex.mobile
 {
 	import org.apache.flex.core.IChrome;
 	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.Event;
 	
 	/**
 	 *  The ManagerBase is a base class for mobile display managers such as StackedViewManager
@@ -47,6 +48,24 @@ package org.apache.flex.mobile
 			
 			_contentArea = new UIBase();
 			super.addElement(_contentArea,false);
+			
+			addEventListener("initComplete", handleInitComplete);
+			addEventListener("sizeChanged", handleInitComplete);
+			addEventListener("widthChanged", handleInitComplete);
+			addEventListener("heightChanged", handleInitComplete);
+		}
+		
+		private function handleInitComplete(event:Event):void
+		{
+			trace("Manager base event: "+event.type+"; width="+width+", height="+height);
+			_contentArea.setWidthAndHeight(width, height, true);
+			// todo: listen for changes to this item
+			
+			var num:Number = UIBase(_contentArea).numElements;
+			for (var i:int = 0; i < num; i++) {
+				var child:UIBase = UIBase(_contentArea).getElementAt(i) as UIBase;
+				child.setWidthAndHeight(width, height);
+			}
 		}
 		
 		private var _contentArea:UIBase;
@@ -80,9 +99,10 @@ package org.apache.flex.mobile
 				super.addElementAt(c,0,dispatchEvent);
 			}
 			else {
-				(c as UIBase).width = _contentArea.width;
-				(c as UIBase).height = _contentArea.height;
 				_contentArea.addElement(c, dispatchEvent);
+//				(c as UIBase).setWidthAndHeight(_contentArea.width, _contentArea.height, false);
+//				(c as UIBase).width = _contentArea.width;
+//				(c as UIBase).height = _contentArea.height;
 			}
 		}
 		

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f03e77f5/frameworks/projects/Mobile/asjs/src/MobileASJSClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Mobile/asjs/src/MobileASJSClasses.as b/frameworks/projects/Mobile/asjs/src/MobileASJSClasses.as
index 7e8b849..90d41f5 100644
--- a/frameworks/projects/Mobile/asjs/src/MobileASJSClasses.as
+++ b/frameworks/projects/Mobile/asjs/src/MobileASJSClasses.as
@@ -27,8 +27,10 @@ package
  */
 internal class MobileASJSClasses
 {
+	import org.apache.flex.mobile.ViewManagerBase; ViewManagerBase;
 	import org.apache.flex.mobile.beads.StackedViewManagerView; StackedViewManagerView;
 	import org.apache.flex.mobile.beads.TabbedViewManagerView; TabbedViewManagerView;
+	import org.apache.flex.mobile.beads.ViewManagerView; ViewManagerView;
 	import org.apache.flex.mobile.chrome.NavigationBar; NavigationBar;
 	import org.apache.flex.mobile.chrome.TabBar; TabBar;
 	import org.apache.flex.mobile.chrome.ToolBar; ToolBar;


Mime
View raw message