You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/08/01 18:07:43 UTC

[royale-asjs] branch develop updated: Table with dataProvider and columns property

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 8528a44  Table with dataProvider and columns property
8528a44 is described below

commit 8528a447e6641a9bd504147854337c157ee25a23
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Aug 1 20:07:36 2018 +0200

    Table with dataProvider and columns property
---
 .../src/main/royale/TablePlayGround.mxml           |  29 ++-
 .../src/main/royale/models/TablesModel.as          |  57 ++---
 .../projects/Jewel/src/main/resources/defaults.css |   4 +
 .../Jewel/src/main/resources/jewel-manifest.xml    |   3 +-
 .../projects/Jewel/src/main/royale/JewelClasses.as |   2 +
 .../main/royale/org/apache/royale/jewel/Table.as   |  56 +++--
 .../itemRenderers/TableMapperForArrayListData.as   | 112 ++++++++++
 .../jewel/beads/models/ArrayListSelectionModel.as  | 246 +++++++++++++++++++++
 .../jewel/{Table.as => beads/models/TableModel.as} |  56 ++---
 .../supportClasses/datagrid/DataGridColumn.as      | 163 ++++++++++++++
 .../supportClasses/datagrid/IDataGridColumn.as     |  95 ++++++++
 .../table/TableColumn.as}                          |  45 +---
 .../Jewel/src/main/sass/components/_table.sass     |  19 +-
 13 files changed, 745 insertions(+), 142 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
index fe067fe..a06c116 100644
--- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -20,14 +20,20 @@ limitations under the License.
 <j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
 		xmlns:j="library://ns.apache.org/royale/jewel"
 		xmlns:js="library://ns.apache.org/royale/basic"
-		xmlns:html="library://ns.apache.org/royale/html">
+		xmlns:html="library://ns.apache.org/royale/html"
+		xmlns:models="models.*">
+
+	<j:model>
+        <models:TablesModel id="tablesModel"/>
+	</j:model>
 
 	<j:beads>
         <js:ContainerDataBinding/>
+		<j:HorizontalCenteredLayout gap="3"/>
     </j:beads>
 
 	<j:Card width="550">
-		<html:H3 text="Jewel Table"/>
+		<html:H3 text="Jewel SimpleTable"/>
 
 		<j:SimpleTable>
 			<j:THead>
@@ -165,4 +171,23 @@ limitations under the License.
 			</j:TFoot>
 		</j:SimpleTable>
 	</j:Card>
+
+	<j:Card width="440">
+		<html:H3 text="Jewel Table"/>
+
+		<j:Table>
+			<j:TableColumn dataField="guitarrist" label="Guitarrist"
+							itemRenderer="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
+			<j:TableColumn dataField="album" label="Album"
+							itemRenderer="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
+			<j:TableColumn dataField="year" label="Year"
+							itemRenderer="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
+			<j:beads>
+				<js:ConstantBinding sourceID="tablesModel"
+									sourcePropertyName="guitarrists"
+									destinationPropertyName="dataProvider" />
+			</j:beads>
+		</j:Table>
+		
+	</j:Card>
 </j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
similarity index 51%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
copy to examples/royale/JewelExample/src/main/royale/models/TablesModel.as
index 73491cb..02ce862 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
+++ b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
@@ -1,4 +1,3 @@
-
 ////////////////////////////////////////////////////////////////////////////////
 //
 //  Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,48 +16,26 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package models
 {
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
+	import org.apache.royale.collections.ArrayList;
 
-	/**
-	 *  The Table class represents an HTML <table> element
-     *  
-	 *  
-     *  @toplevel
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.9.3
-	 */
-	public class Table extends Group
+	public class TablesModel 
 	{
-		/**
-		 *  constructor.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
-		public function Table()
+		private var _guitarrists:ArrayList = new ArrayList([
+			{guitarrist: "Steve Vai", album: "Passion & Warfare", year: "1990"},
+			{guitarrist: "Joe Satriani", album: "Surfing With The Alien", year: "1987"},
+			{guitarrist: "Yngwie Malmsteen", album: "Rising Force", year: "1984"},
+			{guitarrist: "Steve Morse", album: "Southern Steel", year: "1991"},
+			{guitarrist: "Mark Knopfler", album: "Local Hero", year: "1983"},
+			{guitarrist: "Eric Sardinas", album: "Treat Me Right", year: "1999"},
+			{guitarrist: "Mike Oldfield", album: "Tubular Bells", year: "1973"},
+			{guitarrist: "Van Halen", album: "1984", year: "1984"}
+		]);
+		
+		public function get guitarrists():ArrayList
 		{
-			super();
-			
-			typeNames = "jewel table";
+			return _guitarrists;
 		}
-
-        /**
-         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
-         */
-        COMPILE::JS
-        override protected function createElement():WrappedHTMLElement
-        {
-            return addElementToWrapper(this,'table');
-        }
-    }
+	}
 }
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index fff953a..62b7906 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -2831,6 +2831,10 @@ j|Slider {
   padding: 12px 18px;
 }
 
+j|Table {
+  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TableModel");
+}
+
 .alignTextLeft {
   text-align: left;
 }
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 194d12d..44c8a24 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -31,13 +31,14 @@
     <component id="GridCell" class="org.apache.royale.jewel.GridCell"/>
 
     <component id="SimpleTable" class="org.apache.royale.jewel.SimpleTable"/>
-    <component id="Table" class="org.apache.royale.jewel.Table"/>
     <component id="THead" class="org.apache.royale.jewel.supportClasses.table.THead"/>
     <component id="TBody" class="org.apache.royale.jewel.supportClasses.table.TBody"/>
     <component id="TFoot" class="org.apache.royale.jewel.supportClasses.table.TFoot"/>
     <component id="TableRow" class="org.apache.royale.jewel.TableRow"/>
     <component id="TableCell" class="org.apache.royale.jewel.TableCell"/>
     <component id="TableHeader" class="org.apache.royale.jewel.TableHeader"/>
+    <component id="Table" class="org.apache.royale.jewel.Table"/>
+    <component id="TableColumn" class="org.apache.royale.jewel.supportClasses.table.TableColumn"/>
 
     <component id="Button" class="org.apache.royale.jewel.Button"/>
     <component id="IconButton" class="org.apache.royale.jewel.IconButton"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 86614b6..6806d2c 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -93,6 +93,8 @@ package
         import org.apache.royale.jewel.supportClasses.IActivable; IActivable;
         import org.apache.royale.jewel.supportClasses.ITextInput; ITextInput;
 
+        import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn; DataGridColumn;
+
         import org.apache.royale.jewel.supportClasses.table.TBody;
         import org.apache.royale.jewel.supportClasses.table.THead;
         import org.apache.royale.jewel.supportClasses.table.TFoot;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
index 73491cb..1386802 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
@@ -19,14 +19,22 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
+    import org.apache.royale.jewel.beads.itemRenderers.TableMapperForArrayListData;
+	import org.apache.royale.jewel.beads.models.TableModel;
+	
+	import org.apache.royale.events.Event;
+	
+	[DefaultProperty("columns")]
+	
+	/**
+	 * 
+	 */
 
 	/**
-	 *  The Table class represents an HTML <table> element
+	 *  The Table class represents an HTML <table> element.
+     *  
+     *  The able uses SimpleTable along with a data mapper and item renderers to generate
+     *  a Table from a data source.
      *  
 	 *  
      *  @toplevel
@@ -35,7 +43,7 @@ package org.apache.royale.jewel
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Table extends Group
+	public class Table extends SimpleTable
 	{
 		/**
 		 *  constructor.
@@ -52,13 +60,31 @@ package org.apache.royale.jewel
 			typeNames = "jewel table";
 		}
 
-        /**
-         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
-         */
-        COMPILE::JS
-        override protected function createElement():WrappedHTMLElement
-        {
-            return addElementToWrapper(this,'table');
-        }
+        public function get columns():Array
+		{
+			return TableModel(model).columns;
+		}
+		public function set columns(value:Array):void
+		{
+			TableModel(model).columns = value;
+		}
+		
+		public function get dataProvider():Object
+		{
+			return TableModel(model).dataProvider;
+		}
+		public function set dataProvider(value:Object):void
+		{
+			TableModel(model).dataProvider = value;
+		}
+		
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+			
+			addBead(new TableMapperForArrayListData());
+			
+			dispatchEvent( new Event("tableComplete") );
+		}
     }
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as
new file mode 100644
index 0000000..01f42b5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as
@@ -0,0 +1,112 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.itemRenderers
+{
+	import org.apache.royale.jewel.supportClasses.table.TableColumn;
+	import org.apache.royale.jewel.beads.models.TableModel;
+	
+	import org.apache.royale.collections.ArrayList;
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IBeadModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.jewel.Label;
+	import org.apache.royale.jewel.Table;
+	import org.apache.royale.jewel.TableCell;
+	import org.apache.royale.jewel.TableHeader;
+	import org.apache.royale.jewel.TableRow;
+	import org.apache.royale.html.supportClasses.DataItemRenderer;
+	
+	public class TableMapperForArrayListData implements IBead
+	{
+		public function TableMapperForArrayListData()
+		{
+		}
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			IEventDispatcher(_strand).addEventListener("tableComplete", handleInitComplete);
+		}
+		
+		private function handleInitComplete(event:Event):void
+		{
+			var model:TableModel = _strand.getBeadByType(IBeadModel) as TableModel;
+			if (model == null) return;
+			
+			var dp:ArrayList = model.dataProvider as ArrayList;
+			if (dp == null || dp.length == 0) return;
+			
+			var table:Table = _strand as Table;
+			
+			var createHeaderRow:Boolean = false;
+			for(var c:int=0; c < model.columns.length; c++)
+			{
+				var test:TableColumn = model.columns[c] as TableColumn;
+				if (test.label != null) {
+					createHeaderRow = true;
+					break;
+				}
+			}
+			
+			if (createHeaderRow) {
+				var headerRow:TableRow = new TableRow();
+				
+				for(c=0; c < model.columns.length; c++)
+				{
+					test = model.columns[c] as TableColumn;
+					var tableHeader:TableHeader = new TableHeader();
+					var label:Label = new Label();
+					tableHeader.addElement(label);
+					label.text = test.label == null ? "" : test.label;
+					headerRow.addElement(tableHeader);
+				}
+				
+				table.addElement(headerRow);
+			}
+			
+			for(var i:int=0; i < dp.length; i++)
+			{
+				var tableRow:TableRow = new TableRow();
+				
+				for(var j:int=0; j < model.columns.length; j++)
+				{
+					var column:TableColumn = model.columns[j] as TableColumn;
+					var tableCell:TableCell = new TableCell();
+					
+					var ir:DataItemRenderer = column.itemRenderer.newInstance() as DataItemRenderer;
+					tableCell.addElement(ir);
+					tableRow.addElement(tableCell);
+					
+					ir.labelField = column.dataField;
+					ir.index = i;
+					ir.data = dp.getItemAt(i);
+				}
+				
+				table.addElement(tableRow);
+			}
+			
+			table.dispatchEvent(new Event("layoutNeeded"));
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ArrayListSelectionModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ArrayListSelectionModel.as
new file mode 100644
index 0000000..2e0628c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ArrayListSelectionModel.as
@@ -0,0 +1,246 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.models
+{
+	import org.apache.royale.collections.IArrayList;
+	import org.apache.royale.core.IRollOverModel;
+	import org.apache.royale.core.ISelectionModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.EventDispatcher;
+
+    /**
+     *  The ArrayListSelectionModel class is a selection model for
+     *  a dataProvider that is an ArrayList. It assumes that items
+     *  can be fetched from the dataProvider using dataProvider.getItemAt(index).
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+	public class ArrayListSelectionModel extends EventDispatcher implements ISelectionModel, IRollOverModel
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function ArrayListSelectionModel()
+		{
+		}
+
+		private var _strand:IStrand;
+
+        /**
+         *  @copy org.apache.royale.core.IBead#strand
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+
+		private var _dataProvider:IArrayList;
+
+        /**
+         *  @copy org.apache.royale.core.ISelectionModel#dataProvider
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get dataProvider():Object
+		{
+			return _dataProvider;
+		}
+
+        /**
+         *  @private
+         */
+		public function set dataProvider(value:Object):void
+		{
+            if (value == _dataProvider) return;
+
+            _dataProvider = value as IArrayList;
+			if(!_dataProvider || _selectedIndex >= _dataProvider.length)
+				_selectedIndex = -1;
+            
+			_selectedItem = _selectedIndex == -1 ? null : _dataProvider.getItemAt(_selectedIndex);
+			
+			dispatchEvent(new Event("dataProviderChanged"));
+		}
+
+		private var _selectedIndex:int = -1;
+		private var _rollOverIndex:int = -1;
+		private var _labelField:String = null;
+
+        /**
+         *  @copy org.apache.royale.core.ISelectionModel#labelField
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get labelField():String
+		{
+			return _labelField;
+		}
+
+        /**
+         *  @private
+         */
+		public function set labelField(value:String):void
+		{
+			if (value != _labelField) {
+				_labelField = value;
+				dispatchEvent(new Event("labelFieldChanged"));
+			}
+		}
+
+        /**
+         *  @copy org.apache.royale.core.ISelectionModel#selectedIndex
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get selectedIndex():int
+		{
+			return _selectedIndex;
+		}
+
+        /**
+         *  @private
+         */
+		public function set selectedIndex(value:int):void
+		{
+            if (value == _selectedIndex) return;
+
+			_selectedIndex = value;
+			_selectedItem = (value == -1 || _dataProvider == null) ? null : (value < _dataProvider.length) ? _dataProvider.getItemAt(value) : null;
+			dispatchEvent(new Event("selectedIndexChanged"));
+		}
+
+        /**
+         *  @copy org.apache.royale.core.IRollOverModel#rollOverIndex
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get rollOverIndex():int
+		{
+			return _rollOverIndex;
+		}
+
+        /**
+         *  @private
+         */
+		public function set rollOverIndex(value:int):void
+		{
+			if (value != _rollOverIndex) {
+				_rollOverIndex = value;
+				dispatchEvent(new Event("rollOverIndexChanged"));
+			}
+		}
+
+		private var _selectedItem:Object;
+
+        /**
+         *  @copy org.apache.royale.core.ISelectionModel#selectedItem
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get selectedItem():Object
+		{
+			return _selectedItem;
+		}
+
+        /**
+         *  @private
+         */
+		public function set selectedItem(value:Object):void
+		{
+            if (value == _selectedItem) return;
+
+			_selectedItem = value;
+			var n:int = _dataProvider.length;
+			for (var i:int = 0; i < n; i++)
+			{
+				if (_dataProvider.getItemAt(i) == value)
+				{
+					_selectedIndex = i;
+					break;
+				}
+			}
+			dispatchEvent(new Event("selectedItemChanged"));
+			dispatchEvent(new Event("selectedIndexChanged"));
+		}
+
+		private var _selectedString:String;
+
+        /**
+         *  An alternative to selectedItem for strongly typing the
+         *  the selectedItem if the Array is an Array of Strings.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get selectedString():String
+		{
+			return String(_selectedItem);
+		}
+
+        /**
+         *  @private
+         */
+		public function set selectedString(value:String):void
+		{
+			_selectedString = value;
+			var n:int = _dataProvider.length;
+			for (var i:int = 0; i < n; i++)
+			{
+				if (String(_dataProvider.getItemAt(i)) == value)
+				{
+					_selectedIndex = i;
+					break;
+				}
+			}
+			dispatchEvent(new Event("selectedItemChanged"));
+			dispatchEvent(new Event("selectedIndexChanged"));
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
similarity index 52%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
index 73491cb..6c5b7d8 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
@@ -1,4 +1,3 @@
-
 ////////////////////////////////////////////////////////////////////////////////
 //
 //  Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,48 +16,25 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.beads.models
 {
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
-
-	/**
-	 *  The Table class represents an HTML <table> element
-     *  
-	 *  
-     *  @toplevel
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.9.3
-	 */
-	public class Table extends Group
+	import org.apache.royale.jewel.beads.models.ArrayListSelectionModel;
+	
+	public class TableModel extends ArrayListSelectionModel
 	{
-		/**
-		 *  constructor.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
-		public function Table()
+		public function TableModel()
 		{
 			super();
-			
-			typeNames = "jewel table";
 		}
-
-        /**
-         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
-         */
-        COMPILE::JS
-        override protected function createElement():WrappedHTMLElement
-        {
-            return addElementToWrapper(this,'table');
-        }
-    }
+		
+		private var _columns:Array;
+		public function get columns():Array
+		{
+			return _columns;
+		}
+		public function set columns(value:Array):void
+		{
+			_columns = value;
+		}
+	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
new file mode 100644
index 0000000..cac4ea9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
@@ -0,0 +1,163 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+	import org.apache.royale.core.IFactory;
+	import org.apache.royale.core.IUIBase;
+	import org.apache.royale.jewel.List;
+
+	/**
+	 *  The DataGridColumn class is the collection of properties that describe
+	 *  a column of the org.apache.royale.jewel.DataGrid: which renderer 
+	 *  to use for each cell in the column, the width of the column, the label for the 
+	 *  column, and the name of the field in the data containing the value to display 
+	 *  in the column. 
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class DataGridColumn implements IDataGridColumn
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function DataGridColumn()
+		{
+		}
+		
+		/**
+		 * Returns a new instance of a UIBase component to be used as the actual
+		 * column in the grid.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		public function createColumn():IUIBase
+		{
+			return new List();
+		}
+		
+		private var _itemRenderer:IFactory;
+		
+		/**
+		 *  The itemRenderer class or factory to use to make instances of itemRenderers for
+		 *  display of data.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get itemRenderer():IFactory
+		{
+			return _itemRenderer;
+		}
+		public function set itemRenderer(value:IFactory):void
+		{
+			_itemRenderer = value;
+		}
+		
+		private var _columnWidth:Number = Number.NaN;
+		
+		/**
+		 *  The width of the column (default is 100 pixels).
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get columnWidth():Number
+		{
+			return _columnWidth;
+		}
+		public function set columnWidth(value:Number):void
+		{
+			_columnWidth = value;
+		}
+		
+		private var _label:String;
+		
+		/**
+		 *  The label for the column (appears in the header area).
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get label():String
+		{
+			return _label;
+		}
+		public function set label(value:String):void
+		{
+			_label = value;
+		}
+		
+		private var _dataField:String;
+		
+		/**
+		 *  The name of the field containing the data value presented by the column. This value is used
+		 *  by the itemRenderer is select the property from the data.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get dataField():String
+		{
+			return _dataField;
+		}
+		public function set dataField(value:String):void
+		{
+			_dataField = value;
+		}
+		
+		private var _className:String;
+		
+		/**
+		 * The name of the style class to use for this column. If this is not set
+		 * it defaults to DataGridColumnList.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get className():String
+		{
+			return _className;
+		}
+		public function set className(value:String):void
+		{
+			_className = value;
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/IDataGridColumn.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/IDataGridColumn.as
new file mode 100644
index 0000000..c5778b2
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/IDataGridColumn.as
@@ -0,0 +1,95 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+	import org.apache.royale.core.IFactory;
+	import org.apache.royale.core.IUIBase;
+
+	public interface IDataGridColumn
+	{
+		/**
+		 *  The itemRenderer class or factory to use to make instances of itemRenderers for
+		 *  display of data.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		function get itemRenderer():IFactory;
+		function set itemRenderer(value:IFactory):void;
+		
+		/**
+		 *  The width of the column (default is 100 pixels).
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		function get columnWidth():Number;
+		function set columnWidth(value:Number):void;
+		
+		/**
+		 *  The label for the column (appears in the header area).
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		function get label():String;
+		function set label(value:String):void;
+		
+		/**
+		 *  The name of the field containing the data value presented by the column. This value is used
+		 *  by the itemRenderer is select the property from the data.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		function get dataField():String;
+		function set dataField(value:String):void;
+		
+		/**
+		 * The name of the style class to use for this column. If this is not set
+		 * it defaults to DataGridColumnList.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.0
+		 */
+		function get className():String;
+		function set className(value:String):void;
+		
+		/**
+		 * Returns a new instance of a UIBase component to be used as the actual
+		 * column in the grid.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		function createColumn():IUIBase;
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
similarity index 52%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
index 73491cb..5e77f92 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
@@ -1,4 +1,3 @@
-
 ////////////////////////////////////////////////////////////////////////////////
 //
 //  Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,48 +16,18 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.table
 {
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
-
+	import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn;
+	
 	/**
-	 *  The Table class represents an HTML <table> element
-     *  
-	 *  
-     *  @toplevel
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.9.3
+	 * TableColumn is a DataGridColumn used in Table component
 	 */
-	public class Table extends Group
+	public class TableColumn extends DataGridColumn
 	{
-		/**
-		 *  constructor.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
-		public function Table()
+		public function TableColumn()
 		{
 			super();
-			
-			typeNames = "jewel table";
 		}
-
-        /**
-         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
-         */
-        COMPILE::JS
-        override protected function createElement():WrappedHTMLElement
-        {
-            return addElementToWrapper(this,'table');
-        }
-    }
+	}
 }
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
index 9ff06c5..44fe34e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -65,16 +65,12 @@ j|TBody
 j|THead
 j|TFoot
 
-j|Table
-    // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.SimpleTableLayout")
-    // IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView")
-
 j|TableHeader
 
 j|TableCell
 
 @media -royale-swf
-    j|Table
+    j|SimpleTable
         // IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
         // IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
 
@@ -84,4 +80,15 @@ j|TableCell
 
     j|TableHeader
         // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.TableHeaderLayout")
-        // IBeadView: ClassReference("org.apache.royale.html.beads.TableCellView")
\ No newline at end of file
+        // IBeadView: ClassReference("org.apache.royale.html.beads.TableCellView")
+
+// Table Component
+j|Table
+    IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TableModel")
+    // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.SimpleTableLayout")
+    // IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView")
+
+j|TableColumn
+    // IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+    // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer")
+