You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2013/11/05 20:26:46 UTC

git commit: [flex-asjs] [refs/heads/develop] - Adding DataGrid - ActionScript and JavaScript versions. Updated a number of component elements in JavaScript to extract beads using ValuesManager (bead references stored in CSS). Added JavaScript "interface"

Updated Branches:
  refs/heads/develop ad7786071 -> 07d4e7b73


Adding DataGrid - ActionScript and JavaScript versions. Updated a number of component elements in JavaScript to extract beads using ValuesManager (bead references stored in CSS). Added JavaScript "interface" classes (base classes that look like interfaces) for bead models, layouts, controllers, and views.


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

Branch: refs/heads/develop
Commit: 07d4e7b7371eee1158517f62f50a7ad426005395
Parents: ad77860
Author: Peter Ent <pe...@apache.org>
Authored: Tue Nov 5 14:26:33 2013 -0500
Committer: Peter Ent <pe...@apache.org>
Committed: Tue Nov 5 14:26:33 2013 -0500

----------------------------------------------------------------------
 frameworks/as/defaults.css                      | 122 +++++++++---------
 .../apache/flex/html/staticControls/DataGrid.as |   7 +
 .../html/staticControls/beads/DataGridView.as   |  16 ++-
 .../ButtonBarButtonItemRenderer.as              |  22 +++-
 .../src/org/apache/flex/core/IBeadController.js |  28 ++++
 .../src/org/apache/flex/core/IBeadLayout.js     |  28 ++++
 .../src/org/apache/flex/core/IBeadModel.js      |  28 ++++
 .../src/org/apache/flex/core/IBeadView.js       |  35 +++++
 .../src/org/apache/flex/core/IItemRenderer.js   |  28 ++++
 .../flex/core/ItemRendererClassFactory.js       |  65 ++++++++++
 .../FlexJS/src/org/apache/flex/core/ListBase.js |  12 +-
 .../FlexJS/src/org/apache/flex/core/UIBase.js   |  87 +++++++++++++
 .../FlexJS/src/org/apache/flex/core/ViewBase.js |   3 +
 .../flex/html/staticControls/ButtonBar.js       |  36 +++---
 .../flex/html/staticControls/Container.js       |  12 ++
 .../apache/flex/html/staticControls/DataGrid.js | 104 +++++++++++++++
 .../org/apache/flex/html/staticControls/List.js |  40 ++++--
 .../flex/html/staticControls/SimpleList.js      |   1 +
 .../html/staticControls/beads/ButtonBarView.js  |  43 +++++++
 .../staticControls/beads/DataGridColumnView.js  |  86 +++++++++++++
 .../html/staticControls/beads/DataGridView.js   | 127 +++++++++++++++++++
 .../DataItemRendererFactoryForColumnData.js     | 119 +++++++++++++++++
 .../flex/html/staticControls/beads/ListView.js  |  19 ++-
 .../TextItemRendererFactoryForArrayData.js      |   8 +-
 .../controllers/ItemRendererMouseController.js  |   5 +
 .../ListSingleSelectionMouseController.js       |   5 +
 .../beads/layouts/ButtonBarLayout.js            |  84 ++++++++++++
 .../beads/layouts/NonVirtualHorizontalLayout.js |  16 ++-
 .../beads/layouts/NonVirtualVerticalLayout.js   |  11 +-
 .../NonVirtualVerticalScrollingLayout.js        |  65 ++++++++++
 .../beads/models/ArraySelectionModel.js         |   5 +-
 .../beads/models/DataGridModel.js               |  66 ++++++++++
 .../beads/models/DataGridPresentationModel.js   |  87 +++++++++++++
 33 files changed, 1302 insertions(+), 118 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/as/defaults.css b/frameworks/as/defaults.css
index c17b3a6..69ffc96 100644
--- a/frameworks/as/defaults.css
+++ b/frameworks/as/defaults.css
@@ -34,6 +34,7 @@ Button
 	background-color: #d8d8d8;
 	border: 1px solid #000000;
 	padding: 4px;
+	/*IBeadView: ClassReference("org.apache.flex.html.staticControls.beads.CSSButtonView");*/
 }
 
 Button:hover
@@ -50,51 +51,85 @@ Button:active
 	padding: 4px;
 }
 
-/* Global style declaration */
-global
+ButtonBar
 {
-    IStatesImpl: ClassReference("org.apache.flex.core.SimpleStatesImpl");
+    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel");
+    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.ButtonBarView");			
+    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController");
+    IBeadLayout: ClassReference("org.apache.flex.html.staticControls.beads.layouts.ButtonBarLayout");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.ButtonBarButtonItemRenderer");
+
+    border-style: none;
 }
 
-@media -flex-flash
+ButtonBarButtonItemRenderer
 {
+    width: 80;
+    height: 30;
+}
 
-Alert
+DataGrid
 {
-    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.AlertModel");
-    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.AlertView");
-    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.AlertController");
-    iBackgroundBead: ClassReference("org.apache.flex.html.staticControls.beads.SolidBackgroundBead");
-    iBorderBead: ClassReference("org.apache.flex.html.staticControls.beads.SingleLineBorderBead");
-    
+    IDataGridPresentationModel: ClassReference("org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel");
+    IBeadView: ClassReference("org.apache.flex.html.staticControls.beads.DataGridView");
+    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.DataGridModel");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.StringItemRenderer");
+
     background-color: #FFFFFF;
-    border-style: solid;
-    border-color: #000000;
-    border-thickness: 1;
 }
 
-Button
+List
 {
-    IBeadView: ClassReference("org.apache.flex.html.staticControls.beads.CSSButtonView");
+    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel");
+    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.ListView");			
+    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController");
+    IBeadLayout: ClassReference("org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.DataItemRenderer");
 }
 
-ButtonBar
+SimpleList
 {
     IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel");
-    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.ButtonBarView");			
+    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.ListView");
     IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController");
-    IBeadLayout: ClassReference("org.apache.flex.html.staticControls.beads.layouts.ButtonBarLayout");
-    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForArrayData");
+    IBeadLayout: ClassReference("org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
-    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.ButtonBarButtonItemRenderer");
+    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.StringItemRenderer");
+}
 
-    border-style: none;
+StringItemRenderer
+{
+    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController");
+    height: 16;
 }
 
-ButtonBarButtonItemRenderer
+/* Global Style Declaration */
+global
 {
-    width: 80;
-    height: 30;
+    IStatesImpl: ClassReference("org.apache.flex.core.SimpleStatesImpl");
+}
+
+@media -flex-flash
+{
+
+Alert
+{
+    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.AlertModel");
+    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.AlertView");
+    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.AlertController");
+    iBackgroundBead: ClassReference("org.apache.flex.html.staticControls.beads.SolidBackgroundBead");
+    iBorderBead: ClassReference("org.apache.flex.html.staticControls.beads.SingleLineBorderBead");
+    
+    background-color: #FFFFFF;
+    border-style: solid;
+    border-color: #000000;
+    border-thickness: 1;
 }
 
 CheckBox
@@ -132,15 +167,6 @@ ControlBar
     border-thickness: 1;
 }
 
-DataGrid
-{
-    IDataGridPresentationModel: ClassReference("org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel");
-    IBeadView: ClassReference("org.apache.flex.html.staticControls.beads.DataGridView");
-    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.DataGridModel");
-
-    background-color: #FFFFFF;;
-}
-
 DropDownList
 {
     IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel");
@@ -174,17 +200,6 @@ Label
 	iMeasurementBead: ClassReference("org.apache.flex.html.staticControls.beads.TextFieldLabelMeasurementBead");
 }
 
-List
-{
-    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel");
-    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.ListView");			
-    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController");
-    IBeadLayout: ClassReference("org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout");
-    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForArrayData");
-    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
-    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.DataItemRenderer");
-}
-
 NumericStepper
 {
     IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.RangeModel");
@@ -240,17 +255,6 @@ SimpleAlert
     border-thickness: 1;
 }
 
-SimpleList
-{
-    IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel");
-    IBeadView:  ClassReference("org.apache.flex.html.staticControls.beads.ListView");
-    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController");
-    IBeadLayout: ClassReference("org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout");
-    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData");
-    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
-    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.StringItemRenderer");
-}
-
 Slider
 {
     IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.RangeModel");
@@ -267,12 +271,6 @@ Spinner
     IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.SpinnerMouseController");
 }
 
-StringItemRenderer
-{
-    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController");
-    height: 16;
-}
-
 TextArea
 {
     IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.TextModel");

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/as/src/org/apache/flex/html/staticControls/DataGrid.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/DataGrid.as b/frameworks/as/src/org/apache/flex/html/staticControls/DataGrid.as
index 5fb436b..9a02831 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/DataGrid.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/DataGrid.as
@@ -21,6 +21,8 @@ package org.apache.flex.html.staticControls
 	import org.apache.flex.core.IDataGridModel;
 	import org.apache.flex.core.UIBase;
 	
+	[Event(name="change", type="org.apache.flex.events.Event")]
+	
 	public class DataGrid extends UIBase
 	{
 		public function DataGrid()
@@ -45,5 +47,10 @@ package org.apache.flex.html.staticControls
 		{
 			IDataGridModel(model).labelFields = value;
 		}
+		
+		public function get selectedIndex():int
+		{
+			return IDataGridModel(model).selectedIndex;
+		}
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/as/src/org/apache/flex/html/staticControls/beads/DataGridView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/beads/DataGridView.as b/frameworks/as/src/org/apache/flex/html/staticControls/beads/DataGridView.as
index c06b97f..4088734 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/beads/DataGridView.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/beads/DataGridView.as
@@ -23,8 +23,8 @@ package org.apache.flex.html.staticControls.beads
 	import flash.display.Shape;
 	
 	import org.apache.flex.core.IBeadModel;
-	import org.apache.flex.core.IDataGridPresentationModel;
 	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.IDataGridPresentationModel;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.ValuesManager;
@@ -83,6 +83,8 @@ package org.apache.flex.html.staticControls.beads
 				column.addBead(factory);
 				columnContainer.addElement(column);
 				columns.push(column);
+				
+				column.addEventListener('change',columnListChangeHandler);
 			}
 			
 			IEventDispatcher(_strand).addEventListener("widthChanged",handleSizeChange);
@@ -125,5 +127,17 @@ package org.apache.flex.html.staticControls.beads
 				column.height = columnContainer.height; // this will actually be Nitem*rowHeight
 			}
 		}
+		
+		private function columnListChangeHandler(event:Event):void
+		{
+			var list:List = event.target as List;
+			for(var i:int=0; i < columns.length; i++) {
+				if (list != columns[i]) {
+					columns[i].selectedIndex = list.selectedIndex;
+				}
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event('change'));
+		}
 	}
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/ButtonBarButtonItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/ButtonBarButtonItemRenderer.as b/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/ButtonBarButtonItemRenderer.as
index 92af717..01750b8 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/ButtonBarButtonItemRenderer.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/ButtonBarButtonItemRenderer.as
@@ -20,8 +20,9 @@ package org.apache.flex.html.staticControls.supportClasses
 {
 	import org.apache.flex.events.Event;
 	import org.apache.flex.html.staticControls.TextButton;
+	import org.apache.flex.html.staticControls.beads.ITextItemRenderer;
 
-	public class ButtonBarButtonItemRenderer extends UIItemRendererBase
+	public class ButtonBarButtonItemRenderer extends UIItemRendererBase implements ITextItemRenderer
 	{
 		public function ButtonBarButtonItemRenderer()
 		{
@@ -40,6 +41,15 @@ package org.apache.flex.html.staticControls.supportClasses
 			this.dispatchEvent(new Event("selected"));
 		}
 		
+		public function get text():String
+		{
+			return data as String;
+		}
+		public function set text(value:String):void
+		{
+			data = value;
+		}
+		
 		override public function set data(value:Object):void
 		{
 			super.data = value;
@@ -51,16 +61,20 @@ package org.apache.flex.html.staticControls.supportClasses
 				added = true;
 			}
 			
+			var valueAsString:String;
+			
 			if (value is String) {
-				textButton.text = String(value);
+				valueAsString = value as String;
 			}
 			else if (value.hasOwnProperty("label")) {
-				textButton.text = String(value["label"]);
+				valueAsString = String(value["label"]);
 			}
 			else if (value.hasOwnProperty("title")) {
-				textButton.text = String(value["title"]);
+				valueAsString = String(value["title"]);
 			}
 			
+			if (valueAsString) textButton.text = valueAsString;
+			
 			if (added) addElement(textButton);
 		}
 		

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadController.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadController.js b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadController.js
new file mode 100644
index 0000000..9cff762
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadController.js
@@ -0,0 +1,28 @@
+/**
+ * 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.IBeadController');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.events.EventDispatcher}
+ */
+org.apache.flex.core.IBeadController = function() {
+  goog.base(this);
+};
+goog.inherits(
+              org.apache.flex.core.IBeadController,
+              org.apache.flex.events.EventDispatcher);
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadLayout.js b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadLayout.js
new file mode 100644
index 0000000..8c990a3
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadLayout.js
@@ -0,0 +1,28 @@
+/**
+ * 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.IBeadLayout');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.events.EventDispatcher}
+ */
+org.apache.flex.core.IBeadLayout = function() {
+  goog.base(this);
+};
+goog.inherits(
+  org.apache.flex.core.IBeadLayout,
+  org.apache.flex.events.EventDispatcher);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadModel.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadModel.js b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadModel.js
new file mode 100644
index 0000000..ff67c5f
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadModel.js
@@ -0,0 +1,28 @@
+/**
+ * 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.IBeadModel');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.events.EventDispatcher}
+ */
+org.apache.flex.core.IBeadModel = function() {
+  goog.base(this);
+};
+goog.inherits(
+  org.apache.flex.core.IBeadModel,
+  org.apache.flex.events.EventDispatcher);

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadView.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadView.js b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadView.js
new file mode 100644
index 0000000..6c5f6d1
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/IBeadView.js
@@ -0,0 +1,35 @@
+/**
+ * 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.IBeadView');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.events.EventDispatcher}
+ */
+org.apache.flex.core.IBeadView = function() {
+  goog.base(this);
+};
+goog.inherits(
+  org.apache.flex.core.IBeadView,
+  org.apache.flex.events.EventDispatcher);
+
+/**
+ * @expose
+ */
+org.apache.flex.core.IBeadView.prototype.isaView = function() {
+  return true;
+};
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/IItemRenderer.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/IItemRenderer.js b/frameworks/js/FlexJS/src/org/apache/flex/core/IItemRenderer.js
new file mode 100644
index 0000000..d39e5a2
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/IItemRenderer.js
@@ -0,0 +1,28 @@
+/**
+ * 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.IItemRenderer');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.events.EventDispatcher}
+ */
+org.apache.flex.core.IItemRenderer = function() {
+  goog.base(this);
+};
+goog.inherits(
+              org.apache.flex.core.IItemRenderer,
+              org.apache.flex.events.EventDispatcher);
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/ItemRendererClassFactory.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/ItemRendererClassFactory.js b/frameworks/js/FlexJS/src/org/apache/flex/core/ItemRendererClassFactory.js
new file mode 100644
index 0000000..d240715
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/ItemRendererClassFactory.js
@@ -0,0 +1,65 @@
+/**
+ * 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.ItemRendererClassFactory');
+
+goog.require('org.apache.flex.core.ValuesManager');
+
+/**
+ * @constructor
+ */
+org.apache.flex.core.ItemRendererClassFactory = function() {
+  this.itemRendererClass = null;
+};
+
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.core.ItemRendererClassFactory}
+ * @param {object} value The component strand.
+ */
+org.apache.flex.core.ItemRendererClassFactory.
+prototype.set_strand = function(value) {
+  this.strand_ = value;
+  
+  this.itemRendererClass = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this.strand_,'iItemRenderer');
+  if (this.itemRendererClass) {
+     this.createFunction = this.createFromClass;
+   }
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.core.ItemRendererClassFactory}
+ * @param {object} parent The display parent of the new item renderer.
+ * @return {object} The new item renderer.
+ */
+org.apache.flex.core.ItemRendererClassFactory.
+prototype.createItemRenderer = function(parent) {
+  return this.createFunction(parent);
+};
+
+/**
+ * @expose
+ * @this {org.apache.flex.core.ItemRendererClassFactory}
+ * @param {object} parent The parent of the new item renderer.
+ */
+org.apache.flex.core.ItemRendererClassFactory.
+prototype.createFromClass = function(parent) {
+  var renderer = new this.itemRendererClass();
+  parent.addElement(renderer);
+  return renderer;
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js b/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
index fedac12..b20f5f3 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
@@ -66,7 +66,7 @@ org.apache.flex.core.ListBase.prototype.createElement = function() {
  */
 org.apache.flex.core.ListBase.prototype.get_dataProvider =
     function() {
-   return this.model.get_dataProvider();
+   return this.get_model().get_dataProvider();
 };
 
 
@@ -77,7 +77,7 @@ org.apache.flex.core.ListBase.prototype.get_dataProvider =
  */
 org.apache.flex.core.ListBase.prototype.set_dataProvider =
     function(value) {
-  this.model.set_dataProvider(value);
+  this.get_model().set_dataProvider(value);
 };
 
 
@@ -88,7 +88,7 @@ org.apache.flex.core.ListBase.prototype.set_dataProvider =
  */
 org.apache.flex.core.ListBase.prototype.get_selectedIndex =
     function() {
-  return this.model.get_selectedIndex();
+  return this.get_model().get_selectedIndex();
 };
 
 
@@ -99,7 +99,7 @@ org.apache.flex.core.ListBase.prototype.get_selectedIndex =
  */
 org.apache.flex.core.ListBase.prototype.set_selectedIndex =
     function(value) {
-  this.model.set_selectedIndex(value);
+  this.get_model().set_selectedIndex(value);
 };
 
 
@@ -110,7 +110,7 @@ org.apache.flex.core.ListBase.prototype.set_selectedIndex =
  */
 org.apache.flex.core.ListBase.prototype.get_selectedItem =
     function() {
-  return this.model.get_selectedItem();
+  return this.get_model().get_selectedItem();
 };
 
 
@@ -121,7 +121,7 @@ org.apache.flex.core.ListBase.prototype.get_selectedItem =
  */
 org.apache.flex.core.ListBase.prototype.set_selectedItem =
     function(value) {
-  this.model.set_selectedItem(value);
+  this.get_model().set_selectedItem(value);
 };
 
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js b/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js
index c9608f8..c04fdb7 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js
@@ -15,6 +15,11 @@
 goog.provide('org.apache.flex.core.UIBase');
 
 goog.require('org.apache.flex.core.HTMLElementWrapper');
+goog.require('org.apache.flex.core.IBeadModel');
+goog.require('org.apache.flex.core.IBeadLayout');
+goog.require('org.apache.flex.core.IBeadView');
+goog.require('org.apache.flex.core.IBeadController');
+goog.require('org.apache.flex.core.ValuesManager');
 
 
 
@@ -118,6 +123,47 @@ org.apache.flex.core.UIBase.prototype.removeElement = function(c) {
  */
 org.apache.flex.core.UIBase.prototype.addedToParent = function() {
   
+  var c;
+  if (this.getBeadByType(org.apache.flex.core.IBeadModel) == null) 
+  {
+    c = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this, 'iBeadModel');
+    if (c)
+    {
+        var model = new c();
+        if (model)
+            this.addBead(model);
+    }
+  }
+  if (this.getBeadByType(org.apache.flex.core.IBeadView) == null)
+  {
+    c = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this,'iBeadView');
+    if (c)
+    {
+      var view = new c();
+      if (view)
+          this.addBead(view);
+    }
+  }
+  if (this.getBeadByType(org.apache.flex.core.IBeadLayout) == null)
+  {
+    c = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this,'iBeadLayout');
+    if (c)
+    {
+      var layout = new c();
+      if (layout)
+        this.addBead(layout);
+    }
+  }
+  if (this.getBeadByType(org.apache.flex.core.IBeadController) == null)
+  {
+    c = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this,'iBeadController');
+    if (c)
+    {
+      var controller = new c();
+      if (controller)
+        this.addBead(controller);
+    }
+  }
 };
 
 
@@ -130,6 +176,14 @@ org.apache.flex.core.UIBase.prototype.addBead = function(bead) {
     this.beads_ = new Array();
   }
   this.beads_.push(bead);
+  
+  if (bead instanceof org.apache.flex.core.IBeadModel)
+    this.model = bead;
+
+  if (bead instanceof org.apache.flex.core.IBeadView) {
+    this.dispatchEvent(new org.apache.flex.events.Event("viewChanged"));
+  }
+
   bead.set_strand(this);
 };
 
@@ -141,6 +195,9 @@ org.apache.flex.core.UIBase.prototype.addBead = function(bead) {
  */
 org.apache.flex.core.UIBase.prototype.getBeadByType = 
 function(classOrInterface) {
+  if (!this.beads_) {
+    this.beads_ = new Array();
+  }
   for (var i=0; i < this.beads_.length; i++) {
       var bead = this.beads_[i];
       if (bead instanceof classOrInterface) {
@@ -158,6 +215,7 @@ function(classOrInterface) {
  */
 org.apache.flex.core.UIBase.prototype.removeBead =
 function(value) {
+  if (!this.beads_) return null;
   var n = beads_.length;
   for (var i=0; i < n; i++) {
     var bead = beads_[i];
@@ -199,6 +257,17 @@ org.apache.flex.core.UIBase.prototype.set_width = function(pixels) {
   this.positioner.style.width = pixels.toString() + 'px';
 };
 
+/**
+ * @expose
+ * @this {org.apache.flex.core.UIBase}
+ * @return {number} The width of the object in pixels.
+ */
+org.apache.flex.core.UIBase.prototype.get_width = function() {
+  var strpixels = this.positioner.style.width;
+  var pixels = parseFloat(strpixels);
+  return pixels;
+}
+
 
 /**
  * @expose
@@ -209,6 +278,17 @@ org.apache.flex.core.UIBase.prototype.set_height = function(pixels) {
   this.positioner.style.height = pixels.toString() + 'px';
 };
 
+/**
+ * @expose
+ * @this {org.apache.flex.core.UIBase}
+ * @return {number} The height of the object in pixels.
+ */
+org.apache.flex.core.UIBase.prototype.get_height = function() {
+  var strpixels = this.positioner.style.height;
+  var pixels = parseFloat(strpixels);
+  return pixels;
+}
+
 
 /**
  * @expose
@@ -285,6 +365,13 @@ org.apache.flex.core.UIBase.prototype.model = null;
  * @return {Object} The model.
  */
 org.apache.flex.core.UIBase.prototype.get_model = function() {
+  if (this.model == null)
+  {
+    // addbead will set _model
+    var m = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this, 'iBeadModel');
+    var b = new m;
+    this.addBead(b);
+  }
   return this.model;
 };
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/core/ViewBase.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/ViewBase.js b/frameworks/js/FlexJS/src/org/apache/flex/core/ViewBase.js
index e65ed8e..d171acd 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/core/ViewBase.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/ViewBase.js
@@ -17,6 +17,7 @@ goog.provide('org.apache.flex.core.ViewBase');
 goog.require('org.apache.flex.core.UIBase');
 goog.require('org.apache.flex.core.ValuesManager');
 goog.require('org.apache.flex.events.ValueChangeEvent');
+goog.require('org.apache.flex.events.Event');
 goog.require('org.apache.flex.utils.MXMLDataInterpreter');
 
 
@@ -76,6 +77,8 @@ org.apache.flex.core.ViewBase.prototype.MXMLDescriptor = null;
  * @this {org.apache.flex.core.ViewBase}
  */
 org.apache.flex.core.ViewBase.prototype.addedToParent = function() {
+      
+  //goog.base(this,'addedToParent');
 
   org.apache.flex.utils.MXMLDataInterpreter.generateMXMLProperties(this,
       this.get_MXMLProperties());

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/ButtonBar.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/ButtonBar.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/ButtonBar.js
index 23eac85..929f574 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/ButtonBar.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/ButtonBar.js
@@ -24,35 +24,35 @@ goog.require('org.apache.flex.html.staticControls.supportClasses.ButtonBarButton
 
 /**
  * @constructor
- * @extends {org.apache.flex.core.ListBase}
+ * @extends {org.apache.flex.html.staticControls.List}
  */
 org.apache.flex.html.staticControls.ButtonBar = function() {
 
-  this.model = new
-        org.apache.flex.html.staticControls.beads.models.ArraySelectionModel();
-  this.addBead(this.model);
+//  this.model = new
+//        org.apache.flex.html.staticControls.beads.models.ArraySelectionModel();
+//  this.addBead(this.model);
 
   goog.base(this);
 
-  this.addBead(new
-        org.apache.flex.html.staticControls.beads.ListView());
+//  this.addBead(new
+//        org.apache.flex.html.staticControls.beads.ListView());
 
-  this.addBead(new
-org.apache.flex.html.staticControls.beads.layouts.NonVirtualHorizontalLayout());
+//  this.addBead(new
+//org.apache.flex.html.staticControls.beads.layouts.NonVirtualHorizontalLayout());
 
-  this.itemRendererFactory = new
-        org.apache.flex.html.staticControls.beads.
-        DataItemRendererFactoryForArrayData();
-  this.itemRendererFactory.set_itemRendererClass('org.apache.flex.html.' +
-        'staticControls.supportClasses.ButtonBarButtonItemRenderer');
-  this.addBead(this.itemRendererFactory);
+//  this.itemRendererFactory = new
+//        org.apache.flex.html.staticControls.beads.
+//        DataItemRendererFactoryForArrayData();
+//  this.itemRendererFactory.set_itemRendererClass('org.apache.flex.html.' +
+//        'staticControls.supportClasses.ButtonBarButtonItemRenderer');
+//  this.addBead(this.itemRendererFactory);
 
-  this.addBead(new
-        org.apache.flex.html.staticControls.beads.controllers.
-        ListSingleSelectionMouseController());
+//  this.addBead(new
+//        org.apache.flex.html.staticControls.beads.controllers.
+//        ListSingleSelectionMouseController());
 };
 goog.inherits(org.apache.flex.html.staticControls.ButtonBar,
-    org.apache.flex.core.ListBase);
+    org.apache.flex.html.staticControls.List);
 
 
 /**

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Container.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Container.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Container.js
index 0ed5b12..2cf5eea 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Container.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Container.js
@@ -41,8 +41,20 @@ org.apache.flex.html.staticControls.Container.prototype.createElement =
 
   this.positioner = this.element;
   this.element.flexjs_wrapper = this;
+    };
+
+
+/**
+ * @override
+ * @this {org.apache.flex.html.staticControls.Container}
+ */
+org.apache.flex.html.staticControls.Container.prototype.addElement =
+function(child) {
+  goog.base(this,'addElement',child);
+  this.dispatchEvent('elementAdded');
 };
 
+
 /**
  * @override
  * @this {org.apache.flex.html.staticControls.Container}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/DataGrid.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/DataGrid.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/DataGrid.js
new file mode 100644
index 0000000..fd16eec
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/DataGrid.js
@@ -0,0 +1,104 @@
+/**
+ * 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.html.staticControls.DataGrid');
+
+goog.require('org.apache.flex.core.UIBase');
+goog.require('org.apache.flex.html.staticControls.beads.models.DataGridModel');
+
+
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.core.UIBase}
+ */
+org.apache.flex.html.staticControls.DataGrid = function() {
+
+//  this.model = new
+//        org.apache.flex.html.staticControls.beads.models.DataGridModel();
+//  this.addBead(this.model);
+
+  goog.base(this);
+};
+goog.inherits(org.apache.flex.html.staticControls.DataGrid,
+    org.apache.flex.core.UIBase);
+
+
+/**
+ * @override
+ * @this {org.apache.flex.html.staticControls.DataGrid}
+ */
+org.apache.flex.html.staticControls.DataGrid.prototype.createElement =
+    function() {
+  this.element = document.createElement('div');
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+  this.set_className('DataGrid');
+  
+ // this.addBead(new
+ //       org.apache.flex.html.staticControls.beads.DataGridView());
+};
+  
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.DataGrid}
+ * @return {string} The dataProvider getter.
+ */
+org.apache.flex.html.staticControls.DataGrid.prototype.get_dataProvider =
+function() {
+  return this.get_model().get_dataProvider();
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.DataGrid}
+ * @param {string} value The dataProvider setter.
+ */
+org.apache.flex.html.staticControls.DataGrid.prototype.set_dataProvider =
+function(value) {
+  this.get_model().set_dataProvider(value);
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.DataGrid}
+ * @return {string} The labelFields getter.
+ */
+org.apache.flex.html.staticControls.DataGrid.prototype.get_labelFields =
+function() {
+  return this.get_model().get_labelFields();
+};
+
+
+/**
+ * @expose
+ * @this {xxx}
+ * @param {string} value The labelFields setter.
+ */
+org.apache.flex.html.staticControls.DataGrid.prototype.set_labelFields =
+function(value) {
+  this.get_model().set_labelFields(value);
+};
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.DataGrid}
+ * @return {string} value The current selectedIndex.
+ */
+org.apache.flex.html.staticControls.DataGrid.prototype.get_selectedIndex =
+function(value) {
+  return this.get_model().get_selectedIndex();
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
index de6ea81..5b59874 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
@@ -15,6 +15,7 @@
 goog.provide('org.apache.flex.html.staticControls.List');
 
 goog.require('org.apache.flex.core.ListBase');
+goog.require('org.apache.flex.core.IItemRenderer');
 goog.require('org.apache.flex.html.staticControls.beads.ListView');
 goog.require('org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData');
 goog.require('org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController');
@@ -41,20 +42,37 @@ org.apache.flex.html.staticControls.List.prototype.createElement =
     function() {
   goog.base(this, 'createElement');
   this.set_className('List');
+};
 
-  this.model = new
-        org.apache.flex.html.staticControls.beads.models.ArraySelectionModel();
-  this.addBead(this.model);
-  this.addBead(new
-        org.apache.flex.html.staticControls.beads.ListView());
-  this.addBead(new
-        org.apache.flex.html.staticControls.beads.
-        TextItemRendererFactoryForArrayData());
-  this.addBead(new
-        org.apache.flex.html.staticControls.beads.controllers.
-        ListSingleSelectionMouseController());
+/**
+ * @override
+ * @this {org.apache.flex.html.staticControls.List}
+ */
+org.apache.flex.html.staticControls.List.prototype.addedToParent =
+function() {
+  goog.base(this,'addedToParent');
+  
+  var c = this.getBeadByType(org.apache.flex.core.IItemRenderer);
+  if (c == null) {
+    this.addBead(new
+                 org.apache.flex.html.staticControls.beads.
+                 TextItemRendererFactoryForArrayData());
+  }
 };
 
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.List}
+ * Returns an array of objects that make up the actual list (most likely
+ * itemRenderers).
+ */
+org.apache.flex.html.staticControls.List.prototype.internalChildren =
+function() {
+  var listView = this.getBeadByType(org.apache.flex.html.staticControls.beads.ListView);
+  var dg = listView.get_dataGroup();
+  var items = dg.renderers;
+  return items;
+}
 
 /**
  * @expose

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/SimpleList.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/SimpleList.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/SimpleList.js
index c04c47f..4e15461 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/SimpleList.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/SimpleList.js
@@ -42,6 +42,7 @@ createElement = function() {
   goog.events.listen(this.element, 'change',
     goog.bind(this.changeHandler, this));
   this.positioner = this.element;
+  this.set_className('SimpleList');
 };
 
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ButtonBarView.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ButtonBarView.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ButtonBarView.js
new file mode 100644
index 0000000..98fbd5c
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ButtonBarView.js
@@ -0,0 +1,43 @@
+/**
+ * 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.html.staticControls.beads.ButtonBarView');
+
+goog.require('org.apache.flex.html.staticControls.beads.ListView');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.html.staticControls.beads.ListView}
+ */
+org.apache.flex.html.staticControls.beads.ButtonBarView = function() {
+  this.lastSelectedIndex = -1;
+  goog.base(this);
+  
+  this.className = 'ButtonBarView';
+};
+goog.inherits(
+  org.apache.flex.html.staticControls.beads.ButtonBarView,
+  org.apache.flex.html.staticControls.beads.ListView);
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.ButtonBarView}
+ * @param {Object} value The new host.
+ */
+org.apache.flex.html.staticControls.beads.ButtonBarView.prototype.set_strand =
+    function(value) {
+
+  goog.base(this,'set_strand',value);
+  this.strand_ = value;
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.js
new file mode 100644
index 0000000..c765ab8
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.js
@@ -0,0 +1,86 @@
+/**
+ * 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.html.staticControls.beads.DataGridColumnView');
+
+goog.require('org.apache.flex.html.staticControls.beads.ListView');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.html.staticControls.beads.ListView}
+ */
+org.apache.flex.html.staticControls.beads.DataGridColumnView = function() {
+  goog.base(this);
+  this.className = 'DataGridColumnView';
+};
+goog.inherits(
+  org.apache.flex.html.staticControls.beads.DataGridColumnView,
+  org.apache.flex.html.staticControls.beads.ListView);
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.DataGridColumnView}
+ * @param {Object} value The new host.
+ */
+org.apache.flex.html.staticControls.beads.DataGridColumnView.prototype.set_strand =
+    function(value) {
+    this.strand_ = value;
+    
+    goog.base(this,'set_strand',value);
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.DataGridColumnView}
+ * @return {number} The column index for this grid column.
+ */
+org.apache.flex.html.staticControls.beads.DataGridColumnView.prototype.get_columnIndex =
+function() {
+  return this.columnIndex_;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.DataGridColumnView}
+ * @param {number} The column index for this grid column.
+ */
+org.apache.flex.html.staticControls.beads.DataGridColumnView.prototype.set_columnIndex =
+function(value) {
+  this.columnIndex_ = value;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.DataGridColumnView}
+ * @return {string} The field in the data to use for the column's label.
+ */
+org.apache.flex.html.staticControls.beads.DataGridColumnView.prototype.get_labelField =
+function() {
+  return this.labelField_;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.DataGridColumnView}
+ * @param {string} The field in the data to use for the column's label.
+ */
+org.apache.flex.html.staticControls.beads.DataGridColumnView.prototype.set_labelField =
+function(value) {
+  this.labelField_ = value;
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridView.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridView.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridView.js
new file mode 100644
index 0000000..c4a604c
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataGridView.js
@@ -0,0 +1,127 @@
+/**
+ * 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.html.staticControls.beads.DataGridView');
+
+goog.require('org.apache.flex.core.IBeadView');
+goog.require('org.apache.flex.core.IItemRendererParent');
+goog.require('org.apache.flex.events.Event');
+goog.require('org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData');
+goog.require('org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForColumnData');
+goog.require('org.apache.flex.html.staticControls.beads.DataGridColumnView');
+goog.require('org.apache.flex.html.staticControls.beads.layouts.NonVirtualHorizontalLayout');
+goog.require('org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel');
+goog.require('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
+goog.require('org.apache.flex.html.staticControls.beads.models.DataGridModel');
+goog.require('org.apache.flex.html.staticControls.ButtonBar');
+goog.require('org.apache.flex.html.staticControls.Container');
+goog.require('org.apache.flex.html.staticControls.SimpleList');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.core.IBeadView}
+ */
+org.apache.flex.html.staticControls.beads.DataGridView = function() {
+  this.lastSelectedIndex = -1;
+  goog.base(this);
+};
+goog.inherits(
+  org.apache.flex.html.staticControls.beads.DataGridView,
+  org.apache.flex.core.IBeadView,
+  org.apache.flex.events.EventDispatcher);
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.DataGridView}
+ * @param {Object} value The new host.
+ */
+org.apache.flex.html.staticControls.beads.DataGridView.prototype.set_strand =
+function(value) {
+
+  this.strand_ = value;
+
+  // Use the presentation model's columnLabels as the dataProvider for the
+  // ButtonBar header. 
+  var pm = value.getBeadByType(
+    org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel);
+  this.buttonBarModel = new
+         org.apache.flex.html.staticControls.beads.models.ArraySelectionModel();
+  this.buttonBarModel.set_dataProvider(pm.get_columnLabels());
+  this.buttonBar = new org.apache.flex.html.staticControls.ButtonBar();
+  this.buttonBar.addBead(this.buttonBarModel);
+  
+  this.buttonBar.set_height(20);
+  this.buttonBar.set_width(this.strand_.get_width());
+  this.strand_.addElement(this.buttonBar);
+  
+  this.columnContainer = new org.apache.flex.html.staticControls.Container();
+  var layout = new org.apache.flex.html.staticControls.beads.layouts.
+                                                   NonVirtualHorizontalLayout();
+  this.columnContainer.addBead(layout);
+  this.strand_.addElement(this.columnContainer);
+  this.columnContainer.positioner.style.width =
+      this.strand_.positioner.style.width;
+
+  var sharedModel = value.getBeadByType(
+                org.apache.flex.html.staticControls.beads.models.DataGridModel);
+  var columnWidth = this.strand_.get_width() / pm.get_columnLabels().length - 2;
+  var columnHeight = this.strand_.get_height() - this.buttonBar.get_height();
+
+  this.columns = new Array();
+  
+  for(var i=0; i < pm.get_columnLabels().length; i++) {
+    var columnView = new
+                 org.apache.flex.html.staticControls.beads.DataGridColumnView();
+    columnView.set_columnIndex(i);
+    columnView.set_labelField(sharedModel.get_labelFields()[i]);
+    
+    var factory = new org.apache.flex.html.staticControls.beads.
+                                         DataItemRendererFactoryForColumnData();
+    
+    var column = new org.apache.flex.html.staticControls.List();
+    column.set_dataProvider(this.strand_.get_dataProvider());
+    column.set_width(columnWidth);
+    column.set_height(columnHeight);
+    column.addBead(columnView);
+    column.addBead(factory);
+    column.addEventListener('change',
+      goog.bind(this.columnListChangeHandler, this));
+
+    this.columnContainer.addElement(column);
+    this.columns.push(column);
+  }
+};
+
+/**
+ * @this {org.apache.flex.html.staticControls.beads.DataGridView}
+ * @param {object} event The selection change event from one of the column
+ * lists.
+ */
+org.apache.flex.html.staticControls.beads.DataGridView.prototype.
+columnListChangeHandler = function(event) {
+  var list = event.target;
+  var index = list.get_selectedIndex();
+  
+  if (index != this.strand_.get_model().get_selectedIndex()) {
+    for(var i=0; i < this.columns.length; i++) {
+      if (list != this.columns[i]) {
+        this.columns[i].set_selectedIndex(index);
+      }
+    }
+    this.strand_.get_model().set_selectedIndex(index);
+    var newEvent = new org.apache.flex.events.Event('change');
+    this.strand_.dispatchEvent(newEvent);
+  }
+};
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.js
new file mode 100644
index 0000000..38d634a
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.js
@@ -0,0 +1,119 @@
+/**
+ * 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.html.staticControls.beads.DataItemRendererFactoryForColumnData');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+goog.require('org.apache.flex.core.IItemRenderer');
+goog.require('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
+goog.require('org.apache.flex.html.staticControls.supportClasses.ButtonBarButtonItemRenderer');
+goog.require('org.apache.flex.html.staticControls.beads.DataGridColumnView');
+goog.require('org.apache.flex.core.ValuesManager');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.core.IItemRenderer}
+ */
+org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForColumnData =
+function() {
+  goog.base(this);
+};
+goog.inherits(
+  org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForColumnData,
+  org.apache.flex.core.IItemRenderer,
+  org.apache.flex.events.EventDispatcher);
+
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.
+          DataItemRendererFactoryForColumnData}
+ * @param {object} value The component strand.
+ */
+org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForColumnData.
+prototype.set_strand = function(value) {
+  this.strand_ = value;
+
+  this.model = value.getBeadByType(
+          org.apache.flex.html.staticControls.beads.models.ArraySelectionModel);
+          
+  this.listView = value.getBeadByType(
+          org.apache.flex.html.staticControls.beads.DataGridColumnView);
+  this.dataGroup = this.listView.get_dataGroup();
+
+  this.model.addEventListener('dataProviderChanged',
+      goog.bind(this.dataProviderChangedHandler, this));
+
+  if (!this.itemRendererFactory_) {
+    var irf = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this.strand_, 'iItemRendererClassFactory');
+    this.itemRendererFactory_ = new irf;
+    this.strand_.addBead(this.itemRendererFactory_);
+  }
+
+  this.dataProviderChangedHandler(null);
+};
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.
+ *        DataItemRendererFactoryForColumnData}
+ * @return {object} The factory class to use for creating item renderers.
+ */
+org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForColumnData.
+prototype.get_itemRendererFactory = function() {
+  return this.itemRendererFactory_;
+};
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.
+ *        DataItemRendererFactoryForColumnData}
+ * @param {object} value The factory class to use for creating item renderers.
+ */
+org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForColumnData.
+prototype.set_itemRendererFactory = function(value) {
+  this.itemRendererFactory_ = value;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.
+          DataItemRendererFactoryForColumnData}
+ * @param {object} event The event that triggered the dataProvider change.
+ */
+org.apache.flex.html.staticControls.beads.DataItemRendererFactoryForColumnData.
+prototype.dataProviderChangedHandler = function(event) {
+  var dp, i, n, opt;
+
+
+  dp = this.model.get_dataProvider();
+  n = dp.length;
+
+  // todo: this.dataGroup.removeAllElements();
+
+  var view = this.listView;
+  for (i = 0; i < n; i++) {
+    var fieldName = view.get_labelField();
+    
+    // todo: grab an itemRenderer from a factory for this column
+    var opt = new org.apache.flex.html.staticControls.supportClasses.StringItemRenderer();
+    this.dataGroup.addElement(opt);
+    opt.set_text(dp[i][fieldName]);
+  }
+
+  var newEvent = new org.apache.flex.events.Event('itemsCreated');
+  this.strand_.dispatchEvent(newEvent);
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ListView.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ListView.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ListView.js
index d905015..fdc73b4 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ListView.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/ListView.js
@@ -14,6 +14,9 @@
 
 goog.provide('org.apache.flex.html.staticControls.beads.ListView');
 
+goog.require('org.apache.flex.core.IBeadView');
+goog.require('org.apache.flex.core.IBeadLayout');
+goog.require('org.apache.flex.core.ValuesManager');
 goog.require('org.apache.flex.core.IItemRendererParent');
 goog.require('org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData');
 goog.require('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
@@ -21,10 +24,17 @@ goog.require('org.apache.flex.html.staticControls.supportClasses.NonVirtualDataG
 
 /**
  * @constructor
+ * @extends {org.apache.flex.core.IBeadView}
  */
 org.apache.flex.html.staticControls.beads.ListView = function() {
   this.lastSelectedIndex = -1;
+  goog.base(this);
+  
+  this.className = 'ListView';
 };
+goog.inherits(
+  org.apache.flex.html.staticControls.beads.ListView,
+  org.apache.flex.core.IBeadView);
 
 /**
  * @expose
@@ -35,9 +45,14 @@ org.apache.flex.html.staticControls.beads.ListView.prototype.set_strand =
     function(value) {
 
   this.strand_ = value;
+  
+  /*if (this.strand_.getBeadByType(org.apache.flex.core.IBeadLayout) == null) {
+    var m = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this.strand_,'iBeadLayout');
+    var c = new m();
+    this.strand_.addBead(c);
+  }*/
 
-  this.model = value.getBeadByType(
-        org.apache.flex.html.staticControls.beads.models.ArraySelectionModel);
+  this.model = this.strand_.get_model();
   this.model.addEventListener('selectedIndexChanged',
     goog.bind(this.selectionChangeHandler, this));
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.js
index c46e469..48e1cf6 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.js
@@ -15,11 +15,12 @@
 goog.provide('org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData');
 
 goog.require('org.apache.flex.events.EventDispatcher');
+goog.require('org.apache.flex.core.IItemRenderer');
 goog.require('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
 
 /**
  * @constructor
- * @extends {org.apache.flex.events.EventDispatcher}
+ * @extends {org.apache.flex.core.IItemRenderer}
  */
 org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData =
 function() {
@@ -27,6 +28,7 @@ function() {
 };
 goog.inherits(
   org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData,
+  org.apache.flex.core.IItemRenderer,
   org.apache.flex.events.EventDispatcher);
 
 
@@ -50,6 +52,8 @@ prototype.set_strand = function(value) {
 
   this.model.addEventListener('dataProviderChanged',
       goog.bind(this.dataProviderChangedHandler, this));
+  
+  this.dataProviderChangedHandler(null);
 };
 
 
@@ -73,5 +77,5 @@ prototype.dataProviderChangedHandler = function(event) {
   }
 
   var newEvent = new org.apache.flex.events.Event('itemsCreated');
-  this.dispatchEvent(newEvent);
+  this.strand_.dispatchEvent(newEvent);
 };

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js
index 12c79df..17d5165 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js
@@ -14,13 +14,18 @@
 
 goog.provide('org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController');
 
+goog.require('org.apache.flex.core.IBeadController');
 
 /**
  * @constructor
+ * @extends {org.apache.flex.core.IBeadController}
  */
 org.apache.flex.html.staticControls.beads.controllers.
 ItemRendererMouseController = function() {
+  goog.base(this);
 };
+goog.inherits(org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController,
+              org.apache.flex.core.IBeadController);
 
 
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ListSingleSelectionMouseController.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ListSingleSelectionMouseController.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ListSingleSelectionMouseController.js
index 444104a..4634c7c 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ListSingleSelectionMouseController.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ListSingleSelectionMouseController.js
@@ -14,16 +14,21 @@
 
 goog.provide('org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController');
 
+goog.require('org.apache.flex.core.IBeadController');
 goog.require('org.apache.flex.html.staticControls.beads.ListView');
 goog.require('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
 
 
 /**
  * @constructor
+ * @extends {org.apache.flex.core.IBeadController}
  */
 org.apache.flex.html.staticControls.beads.controllers.
 ListSingleSelectionMouseController = function() {
+  goog.base(this);
 };
+goog.inherits(org.apache.flex.html.staticControls.beads.controllers.ListSingleSelectionMouseController,
+              org.apache.flex.core.IBeadController);
 
 
 /**

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/ButtonBarLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/ButtonBarLayout.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/ButtonBarLayout.js
new file mode 100644
index 0000000..3ae0169
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/ButtonBarLayout.js
@@ -0,0 +1,84 @@
+/**
+ * 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.html.staticControls.beads.layouts.ButtonBarLayout');
+
+goog.require('org.apache.flex.core.IBeadLayout');
+goog.require('org.apache.flex.html.staticControls.beads.ListView');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.core.IBeadLayout}
+ */
+org.apache.flex.html.staticControls.beads.layouts.ButtonBarLayout =
+    function() {
+  goog.base(this);
+  this.strand_ = null;
+  this.className = 'ButtonBarLayout';
+};
+goog.inherits(org.apache.flex.html.staticControls.beads.layouts.ButtonBarLayout,
+org.apache.flex.core.IBeadLayout);
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.layouts.
+          ButtonBarLayout}
+ * @param {Object} value The new host.
+ */
+org.apache.flex.html.staticControls.beads.layouts.ButtonBarLayout.
+prototype.set_strand =
+    function(value) {
+  if (this.strand_ !== value) {
+    this.strand_ = value;
+    this.strand_.addEventListener('childrenAdded',
+        goog.bind(this.changeHandler, this));
+    this.strand_.addEventListener('itemsCreated',
+        goog.bind(this.changeHandler, this));
+    this.strand_.element.style.display = 'block';
+  }
+};
+
+
+/**
+ * @this {org.apache.flex.html.staticControls.beads.layouts.
+          ButtonBarLayout}
+ * @param {org.apache.flex.events.Event} event The text getter.
+ */
+org.apache.flex.html.staticControls.beads.layouts.ButtonBarLayout.
+prototype.changeHandler = function(event) {
+  var children, i, n, xpos, useWidth, useHeight;
+
+  children = this.strand_.internalChildren();
+  n = children.length;
+  
+  xpos = 0;
+  useWidth = this.strand_.get_width() / n;
+  useHeight = this.strand_.get_height();
+  
+  for (i = 0; i < n; i++)
+  {
+    children[i].set_width(useWidth);
+    children[i].set_height(useHeight);
+    children[i].element.style['vertical-align'] = 'middle';
+    children[i].element.style['left-margin'] = 'auto';
+    children[i].element.style['right-margin'] = 'auto';
+    
+    if (children[i].element.style.display == 'none')
+      children[i].lastDisplay_ = 'inline-block';
+    else
+      children[i].element.style.display = 'inline-block';
+  }
+};
+
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualHorizontalLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualHorizontalLayout.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualHorizontalLayout.js
index 535e2af..6303f70 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualHorizontalLayout.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualHorizontalLayout.js
@@ -14,6 +14,7 @@
 
 goog.provide('org.apache.flex.html.staticControls.beads.layouts.NonVirtualHorizontalLayout');
 
+goog.require('org.apache.flex.core.IBeadLayout');
 goog.require('org.apache.flex.html.staticControls.beads.ListView');
 
 /**
@@ -21,13 +22,12 @@ goog.require('org.apache.flex.html.staticControls.beads.ListView');
  */
 org.apache.flex.html.staticControls.beads.layouts.NonVirtualHorizontalLayout =
     function() {
-
-  /**
-   * @private
-   * @type {Object}
-   */
+  goog.base(this);
   this.strand_ = null;
+  this.className = 'NonVirtualHorizontalLayout';
 };
+goog.inherits(org.apache.flex.html.staticControls.beads.layouts.NonVirtualHorizontalLayout,
+org.apache.flex.core.IBeadLayout);
 
 /**
  * @expose
@@ -43,8 +43,12 @@ prototype.set_strand =
     this.strand_.addEventListener('childrenAdded',
         goog.bind(this.changeHandler, this));
     this.strand_.addEventListener('itemsCreated',
-        goog.bind(this.changeHandler, this));
+                                  goog.bind(this.changeHandler, this));
+    this.strand_.addEventListener('elementAdded',
+                                  goog.bind(this.changeHandler, this));
     this.strand_.element.style.display = 'block';
+    
+    this.changeHandler(null);
   }
 };
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalLayout.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalLayout.js
index 49285ce..42dd052 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalLayout.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalLayout.js
@@ -14,19 +14,20 @@
 
 goog.provide('org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalLayout');
 
+goog.require('org.apache.flex.core.IBeadLayout');
 
 /**
  * @constructor
+ * @extends {org.apache.flex.core.IBeadLayout}
  */
 org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalLayout =
     function() {
-
-  /**
-   * @private
-   * @type {Object}
-   */
+  goog.base(this);
   this.strand_ = null;
+  this.className = 'NonVirtualVerticalLayout';
 };
+goog.inherits(org.apache.flex.html.staticControls.beads.layouts.ButtonBarLayout,
+org.apache.flex.core.IBeadLayout);
 
 /**
  * @expose

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.js
new file mode 100644
index 0000000..b25a80e
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.js
@@ -0,0 +1,65 @@
+/**
+ * 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.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout');
+
+goog.require('org.apache.flex.core.IBeadLayout');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.core.IBeadLayout');
+ */
+org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout =
+    function() {
+  goog.base(this);
+  this.strand_ = null;
+  this.className = 'NonVirtualVerticalScrollingLayout';
+};
+goog.inherits(org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout,
+org.apache.flex.core.IBeadLayout);
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout}
+ * @param {Object} value The new host.
+ */
+org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout.prototype.set_strand =
+    function(value) {
+  if (this.strand_ !== value) {
+    this.strand_ = value;
+    this.strand_.addEventListener('childrenAdded',
+        goog.bind(this.changeHandler, this));
+  }
+};
+
+
+/**
+ * @this {org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout}
+ * @param {org.apache.flex.events.Event} event The text getter.
+ */
+org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout.prototype.changeHandler = function(event) {
+  var children, i, n;
+
+  children = this.strand_.internalChildren();
+  n = children.length;
+  for (i = 0; i < n; i++)
+  {
+    if (children[i].style.display == 'none')
+      children[i].lastDisplay_ = 'block';
+    else
+      children[i].style.display = 'block';
+  }
+};
+
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js
index 099aefe..99a54b7 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js
@@ -14,18 +14,21 @@
 
 goog.provide('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
 
+goog.require('org.apache.flex.core.IBeadModel');
 goog.require('org.apache.flex.events.EventDispatcher');
 
 /**
  * @constructor
- * @extends {org.apache.flex.events.EventDispatcher}
+ * @extends {org.apache.flex.core.IBeadModel}
  */
 org.apache.flex.html.staticControls.beads.models.ArraySelectionModel =
 function() {
   goog.base(this);
+  this.className = 'ArraySelectionModel';
 };
 goog.inherits(
   org.apache.flex.html.staticControls.beads.models.ArraySelectionModel,
+  org.apache.flex.core.IBeadModel,
   org.apache.flex.events.EventDispatcher);
 
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridModel.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridModel.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridModel.js
new file mode 100644
index 0000000..e1b44e6
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridModel.js
@@ -0,0 +1,66 @@
+/**
+ * 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.html.staticControls.beads.models.DataGridModel');
+
+goog.require('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.html.staticControls.beads.models.ArraySelectionModel}
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridModel =
+function() {
+  goog.base(this);
+  
+  this.labelFields_ = [];
+  
+  this.className = 'DataGridModel';
+};
+goog.inherits(
+  org.apache.flex.html.staticControls.beads.models.DataGridModel,
+  org.apache.flex.html.staticControls.beads.models.ArraySelectionModel);
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridModel}
+ * @param {Object} value The strand.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridModel.prototype.
+set_strand = function(value) {
+  goog.base(this,'set_strand',value);
+  this.strand_ = value;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridModel}
+ * @param {Array} value Array of label fields.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridModel.prototype.
+set_labelFields = function(value) {
+  this.labelFields_ = value;
+};
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridModel}
+ * @return {Array} Array of label fields.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridModel.prototype.
+get_labelFields = function() {
+  return this.labelFields_;
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/07d4e7b7/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridPresentationModel.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridPresentationModel.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridPresentationModel.js
new file mode 100644
index 0000000..24c9718
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/DataGridPresentationModel.js
@@ -0,0 +1,87 @@
+ /**
+ * 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.html.staticControls.beads.models.DataGridPresentationModel');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.events.EventDispatcher}
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel =
+function() {
+  goog.base(this);
+  
+  this.className = 'DataGridPresentationModel';
+};
+goog.inherits(
+  org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel,
+  org.apache.flex.events.EventDispatcher);
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel}
+ * @param {Object} value The strand.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel.prototype.
+set_strand = function(value) {
+  this.strand_ = value;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel}
+ * @return {Object} value The array of column labels.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel.prototype.
+get_columnLabels = function() {
+  return this.columnLabels_;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel}
+ * @param {Object} value The column labels.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel.prototype.
+set_columnLabels = function(value) {
+  this.columnLabels_ = value;
+  this.dispatchEvent('columnLabelsChanged');
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel}
+ * @return {Object} value The height of every row.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel.prototype.
+get_rowHeight = function() {
+  return this.rowHeight_;
+};
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel}
+ * @param {Object} value The height of every row.
+ */
+org.apache.flex.html.staticControls.beads.models.DataGridPresentationModel.prototype.
+set_rowHeight = function(value) {
+  this.rowHeight_ = value;
+  this.dispatchEvent('rowHeightChanged');
+};