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 696b1c1  - SimpleTable and Table refactor to get Table selection and 
refactor for better organization and visuals. - 
TableItemRendererFactoryForCollectionView replaces old 
TableMapperForArrayListData - DateChooser now shows selection in its table and 
layout is almost done
696b1c1 is described below

commit 696b1c1efb35fa0ae9db7c71177999714fa53f84
Author: Carlos Rovira <[email protected]>
AuthorDate: Wed Aug 8 19:12:12 2018 +0200

    - SimpleTable and Table refactor to get Table selection and refactor for 
better organization and visuals.
    - TableItemRendererFactoryForCollectionView replaces old 
TableMapperForArrayListData
    - DateChooser now shows selection in its table and layout is almost done
---
 .../src/main/royale/DateComponentsPlayGround.mxml  |   2 +-
 .../src/main/royale/TablePlayGround.mxml           |  16 +-
 .../projects/Jewel/src/main/resources/defaults.css |  83 +++++---
 .../Jewel/src/main/resources/jewel-manifest.xml    |   9 +-
 .../royale/org/apache/royale/jewel/SimpleTable.as  |  31 ++-
 .../main/royale/org/apache/royale/jewel/Table.as   |  55 +++--
 .../DataItemRendererFactoryForCollectionView.as    |   3 +-
 .../jewel/beads/itemRenderers/ITextItemRenderer.as |  13 +-
 .../TableItemRendererFactoryForCollectionView.as   | 227 +++++++++++++++++++++
 .../itemRenderers/TableMapperForArrayListData.as   |  10 +-
 .../royale/jewel/beads/views/DateChooserView.as    |  16 +-
 .../apache/royale/jewel/beads/views/TableView.as   |  33 ++-
 .../royale/jewel/itemRenderers/DateItemRenderer.as |  10 +-
 .../jewel/itemRenderers/StringItemRenderer.as      |  24 +++
 .../jewel/itemRenderers/TableItemRenderer.as       |  16 +-
 .../royale/jewel/supportClasses/table/TBody.as     |   7 +-
 .../royale/jewel/supportClasses/table/TFoot.as     |   6 +-
 .../royale/jewel/supportClasses/table/THead.as     |   6 +-
 .../jewel/{ => supportClasses/table}/TableCell.as  |   4 +-
 .../jewel/supportClasses/table/TableColumn.as      |   9 +-
 .../table/TableHeaderCell.as}                      |  12 +-
 .../jewel/{ => supportClasses/table}/TableRow.as   |   9 +-
 .../src/main/sass/components/_datechooser.sass     |   6 +-
 .../Jewel/src/main/sass/components/_table.sass     | 116 +++++++----
 .../JewelTheme/src/main/resources/defaults.css     |  62 +++++-
 .../main/sass/components-primary/_datechooser.sass |   6 +-
 .../src/main/sass/components-primary/_table.sass   |  90 ++++++--
 27 files changed, 668 insertions(+), 213 deletions(-)

diff --git 
a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml 
b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
index abefbbf..21db5b1 100644
--- a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
@@ -52,7 +52,7 @@ limitations under the License.
         <j:HorizontalCenteredLayout gap="3"/>
     </j:beads>
 
-       <j:Card width="400">
+       <j:Card>
                <html:H3 text="Jewel DateChooser"/>
                <j:DateChooser id="dateChooser" change="dateChooserChanged()" 
initComplete="dateChooserInit()"/>
                <j:Label id="dateChooserSelectedDate" text="DateChooser 
selected date: "/>
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml 
b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
index 420b6d7..7256ac1 100644
--- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -38,22 +38,22 @@ limitations under the License.
                <j:SimpleTable width="500">
                        <j:THead>
                                <j:TableRow>
-                                       <j:TableHeader width="48">
+                                       <j:TableHeaderCell width="48">
                                                <j:Label text="Icons" />
-                                       </j:TableHeader>
-                                       <j:TableHeader width="140">
+                                       </j:TableHeaderCell>
+                                       <j:TableHeaderCell width="140">
                                                <j:Label text="Text Column" />
-                                       </j:TableHeader>
-                                       <j:TableHeader width="140">
+                                       </j:TableHeaderCell>
+                                       <j:TableHeaderCell width="140">
                                                <j:Label text="Centered Text 
Column" />
-                                       </j:TableHeader>
-                                       <j:TableHeader>
+                                       </j:TableHeaderCell>
+                                       <j:TableHeaderCell>
                                                <j:Label text="Number Column">
                                                        <j:beads>
                                                                <j:TextAlign 
align="right"/>
                                                        </j:beads>
                                                </j:Label>
-                                       </j:TableHeader>
+                                       </j:TableHeaderCell>
                                </j:TableRow>
                        </j:THead>
                        <j:TBody>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css 
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index a3120ed..2c1a2ad 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -246,7 +246,7 @@ j|ControlBar {
     IMeasurementBead: 
ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
   }
 }
-.jewel.datechooser .jewel.table .jewel.tableheader.buttonsRow {
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
   padding: 0px;
 }
 .jewel.datechooser .jewel.table td {
@@ -264,10 +264,6 @@ j|DateChooser {
   IBeadController: 
ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController");
 }
 
-j|DateChooserTable {
-  IItemRenderer: 
ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer");
-}
-
 .dateChooserPopUp {
   position: absolute;
 }
@@ -2793,58 +2789,83 @@ j|Slider {
     iTrackView: 
ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
   }
 }
-.jewel.table {
+.jewel.simpletable {
   position: relative;
   white-space: nowrap;
   border-spacing: 0px;
   overflow: hidden;
 }
-.jewel.table thead {
-  padding-bottom: 3px;
-}
-.jewel.table th:first-of-type, .jewel.table td:first-of-type {
-  padding-left: 20px;
-}
-.jewel.table th {
+.jewel.simpletable .jewel.tableheadercell {
   position: relative;
   vertical-align: bottom;
   text-overflow: ellipsis;
   letter-spacing: 0;
-  height: 48px;
-  padding-bottom: 8px;
-  padding: 0 18px 12px 18px;
+  padding: 12px;
   text-align: left;
 }
-.jewel.table tbody tr {
+.jewel.simpletable .jewel.tbody .jewel.tablerow {
   position: relative;
-  height: 48px;
   transition-duration: 0.28s;
   transition-property: background-color;
 }
-.jewel.table td {
+.jewel.simpletable .jewel.tablecell {
   position: relative;
-  height: 48px;
-  padding: 12px 18px;
 }
-.jewel.table.fixedHeader {
-  table-layout: fixed;
+.jewel.simpletable .jewel.tablecell > * {
+  padding: 12px;
 }
-.jewel.table.fixedHeader .jewel.thead tr {
-  display: block;
+
+.jewel.table {
+  position: relative;
+  white-space: nowrap;
+  border-spacing: 0px;
+  overflow: hidden;
 }
-.jewel.table.fixedHeader .jewel.tbody {
-  display: block;
-  overflow: auto;
-  width: 100%;
+.jewel.table .jewel.tableheadercell {
+  position: relative;
+  vertical-align: bottom;
+  text-overflow: ellipsis;
+  letter-spacing: 0;
+  padding: 12px;
+  text-align: left;
+}
+.jewel.table .jewel.tbody .jewel.tablerow {
+  position: relative;
+  transition-duration: 0.28s;
+  transition-property: background-color;
+}
+.jewel.table .jewel.tablecell {
+  position: relative;
+}
+.jewel.table .jewel.tablecell > * {
+  padding: 12px;
 }
 
 j|Table {
   IBeadLayout: 
ClassReference("org.apache.royale.jewel.beads.layouts.TableLayout");
-  IBeadModel: 
ClassReference("org.apache.royale.jewel.beads.models.TableModel");
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView");
+  IBeadModel: 
ClassReference("org.apache.royale.jewel.beads.models.TableModel");
   IItemRendererClassFactory: 
ClassReference("org.apache.royale.core.ItemRendererClassFactory");
   IItemRenderer: 
ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer");
-  IDataProviderItemRendererMapper: 
ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableMapperForArrayListData");
+  IBeadController: 
ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
+  IDataProviderItemRendererMapper: 
ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView");
+}
+
+.jewel.tableitem {
+  cursor: pointer;
+  text-decoration: none;
+  align-items: center;
+  letter-spacing: 0;
+  line-height: normal !important;
+  overflow: hidden;
+}
+
+.empty-cell {
+  pointer-events: none;
+}
+
+j|TableItemRenderer {
+  IBeadController: 
ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
 }
 
 .alignTextLeft {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml 
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index fa4b04c..52fec4f 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -31,13 +31,13 @@
     <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="TableRow" 
class="org.apache.royale.jewel.supportClasses.table.TableRow"/>
+    <component id="TableCell" 
class="org.apache.royale.jewel.supportClasses.table.TableCell"/>
+    <component id="TableHeaderCell" 
class="org.apache.royale.jewel.supportClasses.table.TableHeaderCell"/>
     <component id="TableColumn" 
class="org.apache.royale.jewel.supportClasses.table.TableColumn"/>
 
     <component id="Button" class="org.apache.royale.jewel.Button"/>
@@ -117,6 +117,7 @@
 
     <component id="DataItemRendererFactoryForArrayData" 
class="org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForArrayData"/>
     <component id="DataItemRendererFactoryForCollectionView" 
class="org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView"/>
+    <component id="TableItemRendererFactoryForCollectionView" 
class="org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView"/>
     <component id="TableMapperForArrayListData" 
class="org.apache.royale.jewel.beads.itemRenderers.TableMapperForArrayListData"/>
 
     <!-- <component id="JewelLabelViewBead" 
class="org.apache.royale.jewel.beads.views.JewelLabelViewBead"/> -->
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
index 4da092b..9910eff 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
@@ -26,8 +26,31 @@ package org.apache.royale.jewel
     }
 
        /**
-        *  The SimpleTable class represents a simple HTML <table> element
-     *  
+        *  The SimpleTable class represents a simple HTML <table> element.
+        *  This component is designed to be declarative in MXML (or AS3),
+        *  Check Table component for a Table that uses itemRenderers, columns
+        *  and a data provider.
+        *  
+        *  This component uses the following jewel classes to generate the 
+        *  Table structure:
+        *  
+        *  - Header:
+        *              j:THead
+        *                      j:TableRow
+        *                              j:TableHeaderCell
+        * 
+        *  - Body
+        *              j:TBody
+        *                      j:TableRow
+        *                              j:TableCell
+        * 
+        *      - Footer
+        *              j:TFoot
+        *                      j:TableRow
+        *                              j:TableCell
+        *
+        * 
+        *  As well, DataGrid is a more complex component
         *  
      *  @toplevel
         *  @langversion 3.0
@@ -49,7 +72,7 @@ package org.apache.royale.jewel
                {
                        super();
                        
-                       typeNames = "jewel table";
+                       typeNames = "jewel simpletable";
                }
 
         /**
@@ -58,7 +81,7 @@ package org.apache.royale.jewel
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-            return addElementToWrapper(this,'table');
+            return addElementToWrapper(this, 'table');
         }
     }
 }
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 0728dbf..914b426 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
@@ -56,9 +56,11 @@ package org.apache.royale.jewel
        /**
         *  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.
-     *  
+     *  This Table component uses a data mapper and item renderers to generate
+     *  a Table from a data source, in opposite to SimpleTable component that 
is a 
+        *  declarative mxml.
+        * 
+        *  As well, DataGrid is a more complex component
         *  
      *  @toplevel
         *  @langversion 3.0
@@ -103,7 +105,7 @@ package org.apache.royale.jewel
                        TableModel(model).columns = value;
                }
 
-               private var _fixedHeader:Boolean;
+               // private var _fixedHeader:Boolean;
                /**
                 *  Makes the header of the table fixed so the data rows will 
scroll
                 *  behind it.
@@ -115,18 +117,18 @@ package org.apache.royale.jewel
                 *  @playerversion AIR 2.6
                 *  @productversion Royale 0.9.3
                 */
-               public function get fixedHeader():Boolean
-               {
-                       return _fixedHeader;
-               }
-               public function set fixedHeader(value:Boolean):void
-               {
-                       _fixedHeader = value;
+               // public function get fixedHeader():Boolean
+               // {
+               //      return _fixedHeader;
+               // }
+               // public function set fixedHeader(value:Boolean):void
+               // {
+               //      _fixedHeader = value;
 
-                       // toggleClass("fixedHeader", _fixedHeader);
-               }
+               //      // toggleClass("fixedHeader", _fixedHeader);
+               // }
 
-               private var _tableDataHeight:Boolean;
+               // private var _tableDataHeight:Boolean;
                /**
                 *  Makes the header of the table fixed so the data rows will 
scroll
                 *  behind it.
@@ -138,14 +140,14 @@ package org.apache.royale.jewel
                 *  @playerversion AIR 2.6
                 *  @productversion Royale 0.9.3
                 */
-               public function get tableDataHeight():Boolean
-               {
-                       return _tableDataHeight;
-               }
-               public function set tableDataHeight(value:Boolean):void
-               {
-                       _tableDataHeight = value;
-               }
+               // public function get tableDataHeight():Boolean
+               // {
+               //      return _tableDataHeight;
+               // }
+               // public function set tableDataHeight(value:Boolean):void
+               // {
+               //      _tableDataHeight = value;
+               // }
                
                /**
                 *  A list of data items that correspond to the rows in the 
table.
@@ -212,13 +214,6 @@ package org.apache.royale.jewel
                {
                        ISelectionModel(model).selectedItem = value;
                }
-               
-               override public function addedToParent():void
-               {
-                       super.addedToParent();
-                       
-                       dispatchEvent( new Event("tableComplete") );
-               }
 
                /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -226,7 +221,7 @@ package org.apache.royale.jewel
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-            return addElementToWrapper(this,'table');
+            return addElementToWrapper(this, 'table');
         }
     }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForCollectionView.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForCollectionView.as
index f46bb94..544b013 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForCollectionView.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForCollectionView.as
@@ -34,9 +34,8 @@ package org.apache.royale.jewel.beads.itemRenderers
        import org.apache.royale.events.Event;
        import org.apache.royale.events.EventDispatcher;
        import org.apache.royale.events.IEventDispatcher;
-       import org.apache.royale.html.supportClasses.UIItemRendererBase;
-       import org.apache.royale.utils.loadBeadFromValuesManager;
        import org.apache.royale.html.beads.IListView;
+       import org.apache.royale.utils.loadBeadFromValuesManager;
 
        
        /**
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ITextItemRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ITextItemRenderer.as
index 5c5f1aa..4a37a17 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ITextItemRenderer.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ITextItemRenderer.as
@@ -41,5 +41,16 @@ package org.apache.royale.jewel.beads.itemRenderers
          */
         function get text():String;
         function set text(value:String):void;
-       }
+
+        /**
+         *  How text align in the itemRenderer instance.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+        function get align():String
+        function set align(value:String):void
+    }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
new file mode 100644
index 0000000..2d3c13c
--- /dev/null
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
@@ -0,0 +1,227 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.collections.ICollectionView;
+    import org.apache.royale.core.IChild;
+       import org.apache.royale.core.IBeadModel;
+       import org.apache.royale.core.IListPresentationModel;
+       import org.apache.royale.core.SimpleCSSStyles;
+       import org.apache.royale.core.UIBase;
+       import org.apache.royale.events.CollectionEvent;
+       import org.apache.royale.events.Event;
+       import org.apache.royale.events.IEventDispatcher;
+       import org.apache.royale.html.beads.IListView;
+    import org.apache.royale.jewel.Label;
+       import org.apache.royale.jewel.Table;
+       import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
+       import org.apache.royale.jewel.beads.models.TableModel;
+       import org.apache.royale.jewel.beads.views.TableView;
+       import org.apache.royale.jewel.supportClasses.table.TableCell;
+       import org.apache.royale.jewel.supportClasses.table.TableHeaderCell;
+       import org.apache.royale.jewel.supportClasses.table.TableRow;
+       import org.apache.royale.jewel.supportClasses.table.TBody;
+       import org.apache.royale.jewel.supportClasses.table.THead;
+       import org.apache.royale.jewel.supportClasses.table.TableColumn;
+
+    /**
+        * This class creates itemRenderer instances from the data contained 
within an ICollectionView
+     * and generates the appropiate table structure with thead, tbody and 
table rows and cells
+     * to hold the columns and data in cells.
+     * 
+        */
+       public class TableItemRendererFactoryForCollectionView extends 
DataItemRendererFactoryForCollectionView
+       {
+               public function 
TableItemRendererFactoryForCollectionView(target:Object = null)
+               {
+                       super(target);
+               }
+
+        /**
+                *  initialize bead
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9.3
+                *  @royaleignorecoercion 
org.apache.royale.events.IEventDispatcher
+                *  @royaleignorecoercion org.apache.royale.html.beads.IListView
+                */
+               override protected function initComplete(event:Event):void
+               {
+            view = _strand.getBeadByType(IListView) as TableView;
+            tbody = view.tbody;
+            model = _strand.getBeadByType(IBeadModel) as TableModel;
+            table = _strand as Table;
+
+                       super.initComplete(event);
+               }
+
+        protected var view:TableView;
+        protected var model:TableModel;
+        protected var table:Table;
+
+        private var tbody:TBody;
+
+        /**
+                * @private
+                * @royaleignorecoercion 
org.apache.royale.collections.ICollectionView
+                * @royaleignorecoercion 
org.apache.royale.core.IListPresentationModel
+                * @royaleignorecoercion 
org.apache.royale.core.ISelectableItemRenderer
+                * @royaleignorecoercion 
org.apache.royale.events.IEventDispatcher
+                */
+               override protected function 
dataProviderChangeHandler(event:Event):void
+               {
+            if (!dataProviderModel)
+                               return;
+                       var dp:ICollectionView = dataProviderModel.dataProvider 
as ICollectionView;
+                       if (!dp)
+                               return;
+                       
+                       // listen for individual items being added in the 
future.
+                       var dped:IEventDispatcher = dp as IEventDispatcher;
+                       dped.addEventListener(CollectionEvent.ITEM_ADDED, 
itemAddedHandler);
+                       dped.addEventListener(CollectionEvent.ITEM_REMOVED, 
itemRemovedHandler);
+                       dped.addEventListener(CollectionEvent.ITEM_UPDATED, 
itemUpdatedHandler);
+                       
+            // THEAD - remove header items
+                       dataGroup.removeAllItemRenderers();
+
+            // TBody - remove data items
+                       if(tbody != null)
+                       {
+                               while (tbody.numElements > 0) {
+                                       var child:IChild = 
tbody.getElementAt(0);
+                                       tbody.removeElement(child);
+                               }
+                       }
+
+            // -- add the header
+            createHeader();
+                       
+                       var presentationModel:IListPresentationModel = 
_strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+                       labelField = dataProviderModel.labelField;
+                       
+            // -- add the data items
+            table.addElement(tbody);
+
+            var row:TableRow;
+            var column:TableColumn;
+            var tableCell:TableCell;
+            var ir:ITextItemRenderer;
+
+                       var n:int = dp.length;
+                       for (var i:int = 0; i < n; i++)
+                       {
+                row = new TableRow();
+
+                for(var j:int = 0; j < model.columns.length; j++)
+                               {
+                    column = model.columns[j] as TableColumn;
+                                       tableCell = new TableCell();
+
+                    if(column.itemRenderer != null)
+                    {
+                        ir = column.itemRenderer.newInstance() as 
ITextItemRenderer;
+                    } else
+                    {
+                        ir = itemRendererFactory.createItemRenderer(dataGroup) 
as ITextItemRenderer;
+                    }
+
+                    tableCell.addElement(ir);
+                    row.addElement(tableCell);
+
+                    ir.labelField = column.dataField;
+                    var item:Object = dp.getItemAt(i);
+                    fillRenderer(i, item, ir, presentationModel);
+                    
+                    if(column.align != "")
+                    {
+                        ir.align = column.align;
+                    }
+                }
+                tbody.addElement(row);
+                       }
+                       
+                       IEventDispatcher(_strand).dispatchEvent(new 
Event("itemsCreated"));
+            table.dispatchEvent(new Event("layoutNeeded"));
+        }
+
+        /**
+                * @private
+                * @royaleignorecoercion org.apache.royale.core.UIBase
+                */
+               override protected function fillRenderer(index:int,
+                                                                               
item:Object,
+                                                                               
itemRenderer:ITextItemRenderer,
+                                                                               
presentationModel:IListPresentationModel):void
+               {
+                       // dataGroup.addItemRendererAt(itemRenderer, index);
+                       
+                       // itemRenderer.labelField = labelField;
+                       
+                       if (presentationModel) {
+                               var style:SimpleCSSStyles = new 
SimpleCSSStyles();
+                               style.marginBottom = 
presentationModel.separatorThickness;
+                               UIBase(itemRenderer).style = style;
+                               UIBase(itemRenderer).height = 
presentationModel.rowHeight;
+                               UIBase(itemRenderer).percentWidth = 100;
+                       }
+                       
+                       setData(itemRenderer, item, index);
+               }
+
+        private function createHeader():void
+               {
+            var createHeaderRow:Boolean = false;
+            var test:TableColumn;
+            var c:int;
+
+                       for(c=0; c < model.columns.length; c++)
+                       {
+                               test = model.columns[c] as TableColumn;
+                               if (test.label != null) {
+                                       createHeaderRow = true;
+                                       break;
+                               }
+                       }
+
+            if (createHeaderRow) 
+            {
+                view.thead = new THead();
+                               var thead:THead = view.thead;
+                               var headerRow:TableRow = new TableRow();
+                               
+                               for(c=0; c < model.columns.length; c++)
+                               {
+                                       test = model.columns[c] as TableColumn;
+                                       var tableHeader:TableHeaderCell = new 
TableHeaderCell();
+                                       
+                    var label:Label = new Label();
+                                       tableHeader.addElement(label);
+                                       label.text = test.label == null ? "" : 
test.label;
+                                       headerRow.addElement(tableHeader);
+                               }
+
+                               thead.addElement(headerRow);
+                               table.addElement(thead);
+                       }
+        }
+    }
+}
\ No newline at end of file
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
index 284256b..beca0c6 100644
--- 
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
@@ -31,9 +31,9 @@ package org.apache.royale.jewel.beads.itemRenderers
        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.jewel.supportClasses.table.TableCell;
+       import org.apache.royale.jewel.supportClasses.table.TableHeaderCell;
+       import org.apache.royale.jewel.supportClasses.table.TableRow;
        import org.apache.royale.jewel.beads.models.TableModel;
        import org.apache.royale.jewel.beads.views.TableView;
        import org.apache.royale.jewel.itemRenderers.TableItemRenderer;
@@ -102,7 +102,7 @@ package org.apache.royale.jewel.beads.itemRenderers
 
                private var headerRow:TableRow;
                private var row:TableRow;
-               private var tableHeader:TableHeader;
+               private var tableHeader:TableHeaderCell;
                private function cleanTable():void
                {
                        //THead
@@ -145,7 +145,7 @@ package org.apache.royale.jewel.beads.itemRenderers
                                for(c=0; c < model.columns.length; c++)
                                {
                                        test = model.columns[c] as TableColumn;
-                                       tableHeader = new TableHeader();
+                                       tableHeader = new TableHeaderCell();
                                        var label:Label = new Label();
                                        tableHeader.addElement(label);
                                        label.text = test.label == null ? "" : 
test.label;
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
index f592604..628c82d 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
@@ -28,14 +28,12 @@ package org.apache.royale.jewel.beads.views
        import org.apache.royale.events.IEventDispatcher;
        import org.apache.royale.html.beads.GroupView;
        import org.apache.royale.jewel.Button;
-       import org.apache.royale.jewel.Group;
-       import org.apache.royale.jewel.Table;
-       import org.apache.royale.jewel.TableRow;
-       import org.apache.royale.jewel.TableHeader;
        import org.apache.royale.jewel.beads.models.DateChooserModel;
        import org.apache.royale.jewel.beads.views.TableView;
        import org.apache.royale.jewel.itemRenderers.DateItemRenderer;
        import 
org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable;
+       import org.apache.royale.jewel.supportClasses.table.TableRow;
+       import org.apache.royale.jewel.supportClasses.table.TableHeaderCell;
        import org.apache.royale.jewel.supportClasses.table.TableColumn;
        import org.apache.royale.utils.loadBeadFromValuesManager;
 
@@ -133,14 +131,14 @@ package org.apache.royale.jewel.beads.views
                
                private var _daysTable:DateChooserTable;
                /**
-                *  The Table of days to display
+                *  The DateChooserTable of days to display
                 *
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
                 *  @productversion Royale 0.9.3
                 */
-               public function get daysTable():Table
+               public function get daysTable():DateChooserTable
                {
                        return _daysTable;
                }
@@ -182,18 +180,18 @@ package org.apache.royale.jewel.beads.views
                        var view:TableView = 
_daysTable.getBeadByType(IBeadView) as TableView;
                        buttonsRow = new TableRow();
 
-                       var tableHeader:TableHeader = new TableHeader();
+                       var tableHeader:TableHeaderCell = new TableHeaderCell();
                        tableHeader.className = "buttonsRow";
                        tableHeader.addElement(_monthLabel);
                        tableHeader.expandColumns = 5;
                        buttonsRow.addElement(tableHeader);
 
-                       tableHeader= new TableHeader();
+                       tableHeader= new TableHeaderCell();
                        tableHeader.className = "buttonsRow";
                        tableHeader.addElement(_prevMonthButton);
                        buttonsRow.addElement(tableHeader);
                        
-                       tableHeader= new TableHeader();
+                       tableHeader= new TableHeaderCell();
                        tableHeader.className = "buttonsRow";
                        tableHeader.addElement(_nextMonthButton);
                        buttonsRow.addElement(tableHeader);
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
index c079aff..2397621 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
@@ -21,19 +21,22 @@ package org.apache.royale.jewel.beads.views
        import org.apache.royale.html.beads.DataContainerView;
        import org.apache.royale.core.UIBase;
        import org.apache.royale.core.IStrand;
+       import org.apache.royale.jewel.beads.views.ListView;
        import org.apache.royale.jewel.supportClasses.table.TBody;
        import org.apache.royale.jewel.supportClasses.table.THead;
        import org.apache.royale.jewel.supportClasses.table.TFoot;
        
        /**
         *  The TableView class creates the visual elements of the 
org.apache.royale.jewel.Table component.
+        * 
+        *  It creates a TBody, and defines THead and TFoot optional parts to 
be created by a mapper
         *  
         *  @langversion 3.0
         *  @playerversion Flash 10.2
         *  @playerversion AIR 2.6
         *  @productversion Royale 0.9.3
         */
-       public class TableView extends DataContainerView
+       public class TableView extends ListView
        {
                /**
                 *  constructor.
@@ -45,16 +48,17 @@ package org.apache.royale.jewel.beads.views
                 */
                public function TableView()
                {
+                       super();
         }
 
                /**
-                * @royaleignorecoercion org.apache.royale.core.UIBase
+                *  @copy org.apache.royale.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9.3
                 */
-               private function get host():UIBase
-               {
-                       return _strand as UIBase;
-               }
-
                override public function set strand(value:IStrand):void
                {
                        super.strand = value;
@@ -63,7 +67,6 @@ package org.apache.royale.jewel.beads.views
                }
 
                /**
-                * This os created in the mapper
                 * @royalesuppresspublicvarwarning
                 */
                public var thead:THead;
@@ -72,23 +75,19 @@ package org.apache.royale.jewel.beads.views
                 * @royalesuppresspublicvarwarning
                 */
                public var tbody:TBody;
-
                
-               // private var tfoot:TFoot;
+               /**
+                * @royalesuppresspublicvarwarning
+                */
+               public var tfoot:TFoot;
 
                /**
                 * @private
                 */
                private function createChildren():void
                {
-                       // thead = new THead();
-                       // host.addElement(thead);
-
                        tbody = new TBody();
-                       host.addElement(tbody);
-                       
-                       // tfoot = new TFoot();
-                       // host.addElement(tfoot);
+                       (_strand as UIBase).addElement(tbody);
                }
        }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
index 0d8f799..c1addcc 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
@@ -45,7 +45,7 @@ package org.apache.royale.jewel.itemRenderers
                {
                        super();
 
-                       typeNames = "calendar item date";
+                       // typeNames = "calendar item date";
                }
 
                /**
@@ -73,10 +73,6 @@ package org.apache.royale.jewel.itemRenderers
                                        mouseEnabled = true;
                                        mouseChildren = true;
                                }
-
-                               // COMPILE::JS {
-                               //      element.style["pointer-events"] = "";
-                               // }
                        } else {
                                this.text = "";
 
@@ -85,9 +81,7 @@ package org.apache.royale.jewel.itemRenderers
                                        mouseChildren = false;
                                }
 
-                               // COMPILE::JS {
-                               //   element.style["pointer-events"] = "none";
-                               // }
+                               className = "empty-cell";
                        }
                }
 
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/StringItemRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/StringItemRenderer.as
index bfb23e7..c08b5a8 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/StringItemRenderer.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/StringItemRenderer.as
@@ -31,6 +31,7 @@ package org.apache.royale.jewel.itemRenderers
         import org.apache.royale.core.WrappedHTMLElement;
        import org.apache.royale.html.util.addElementToWrapper;
     }
+       import org.apache.royale.jewel.beads.controls.TextAlign;
     import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
        import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
 
@@ -67,8 +68,13 @@ package org.apache.royale.jewel.itemRenderers
                 textField.selectable = false;
                 textField.parentDrawsBackground = true;
             }
+
+                       textAlign = new TextAlign();
+                       addBead(textAlign);
                }
 
+               private var textAlign:TextAlign;
+
         COMPILE::SWF
                public var textField:CSSTextField;
 
@@ -133,6 +139,24 @@ package org.apache.royale.jewel.itemRenderers
                }
 
                /**
+                *  How text align in the itemRenderer instance.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9.3
+                */
+               public function get align():String
+               {
+                       return textAlign.align;
+               }
+
+               public function set align(value:String):void
+               {
+                       textAlign.align = value;
+               }
+
+               /**
                 *  Sets the data value and uses the String version of the data 
for display.
                 *
                 *  @param Object data The object being displayed by the 
itemRenderer instance.
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
index d266b3d..6ef2345 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
@@ -18,8 +18,11 @@
 
////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.itemRenderers
 {
-    import org.apache.royale.html.supportClasses.DataItemRenderer;
-    COMPILE::SWF
+       import org.apache.royale.jewel.beads.controls.TextAlign;
+       import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
+       import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+    
+       COMPILE::SWF
     {
         import flash.text.TextFieldAutoSize;
         import flash.text.TextFieldType;
@@ -31,9 +34,6 @@ package org.apache.royale.jewel.itemRenderers
         import org.apache.royale.core.WrappedHTMLElement;
        import org.apache.royale.html.util.addElementToWrapper;
     }
-    import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
-       import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
-       import org.apache.royale.jewel.beads.controls.TextAlign;
 
        /**
         *  The TableItemRenderer class displays data in string form using the 
data's toString()
@@ -44,7 +44,7 @@ package org.apache.royale.jewel.itemRenderers
         *  @playerversion AIR 2.6
         *  @productversion Royale 0.9.3
         */
-       public class TableItemRenderer extends DataItemRenderer implements 
ITextItemRenderer
+       public class TableItemRenderer extends ListItemRenderer implements 
ITextItemRenderer
        {
                /**
                 *  constructor.
@@ -114,7 +114,7 @@ package org.apache.royale.jewel.itemRenderers
                 *  @playerversion AIR 2.6
                 *  @productversion Royale 0.9.3
                 */
-               public function get text():String
+               override public function get text():String
                {
             COMPILE::SWF
             {
@@ -126,7 +126,7 @@ package org.apache.royale.jewel.itemRenderers
             }
                }
 
-               public function set text(value:String):void
+               override public function set text(value:String):void
                {
             COMPILE::SWF
             {
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
index 2dd6a4a..c421057 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
@@ -19,6 +19,7 @@
 package org.apache.royale.jewel.supportClasses.table
 {
     import org.apache.royale.jewel.Group;
+       
 
     COMPILE::JS
     {
@@ -27,8 +28,8 @@ package org.apache.royale.jewel.supportClasses.table
     }
 
        /**
-        *  The TBody class is a building block of Jewel Table, is used in 
TableView
-     *  and represents an HTML <tbody> element
+        *  The TBody class is a building block of Jewel SimpleTable and Table 
components, 
+        *  is used in TableView and represents an HTML <tbody> element
         *  
      *  @toplevel
         *  @langversion 3.0
@@ -56,7 +57,7 @@ package org.apache.royale.jewel.supportClasses.table
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-                       return addElementToWrapper(this,'tbody');
+                       return addElementToWrapper(this, 'tbody');
         }
     }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as
index eb54a68..1f656fe 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as
@@ -27,8 +27,8 @@ package org.apache.royale.jewel.supportClasses.table
     }
 
        /**
-        *  The TFoot class is a building block of Jewel Table, is used in 
TableView
-     *  and represents an HTML <tfoot> element
+        *  The TFoot class is a building block of Jewel SimpleTable and Table 
components, 
+        *  is used in TableView and represents an HTML <tfoot> element
         *  
      *  @toplevel
         *  @langversion 3.0
@@ -56,7 +56,7 @@ package org.apache.royale.jewel.supportClasses.table
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-                       return addElementToWrapper(this,'tfoot');
+                       return addElementToWrapper(this, 'tfoot');
         }
     }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as
index dea5ad3..b66a212 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as
@@ -27,8 +27,8 @@ package org.apache.royale.jewel.supportClasses.table
     }
 
        /**
-        *  The THead class is a building block of Jewel Table, is used in 
TableView
-     *  and represents an HTML <thead> element
+        *  The THead class is a building block of Jewel SimpleTable and Table 
components, 
+        *  is used in TableView and represents an HTML <thead> element
         *  
      *  @toplevel
         *  @langversion 3.0
@@ -56,7 +56,7 @@ package org.apache.royale.jewel.supportClasses.table
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-                       return addElementToWrapper(this,'thead');
+                       return addElementToWrapper(this, 'thead');
         }
     }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableCell.as
similarity index 97%
rename from 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
rename to 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableCell.as
index 7aedd3c..5f393a8 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableCell.as
@@ -16,8 +16,10 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.table
 {
+       import org.apache.royale.jewel.Group;
+       
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
index 5b57adb..e8c8fdd 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
@@ -21,8 +21,13 @@ package org.apache.royale.jewel.supportClasses.table
        import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn;
        
        /**
-        * TableColumn is a DataGridColumn used in Table component
-        * with special table properties
+        *  TableColumn is a DataGridColumn used in Jewel Table component
+        *  with special table properties.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.9.3
         */
        public class TableColumn extends DataGridColumn
        {
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableHeader.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableHeaderCell.as
similarity index 84%
rename from 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableHeader.as
rename to 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableHeaderCell.as
index a438d06..0df7749 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableHeader.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableHeaderCell.as
@@ -16,7 +16,7 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.table
 {
     COMPILE::JS
     {
@@ -25,7 +25,7 @@ package org.apache.royale.jewel
     }
        
        /**
-        *  The TableHeader class defines a table header cell in the Table 
component. 
+        *  The TableHeaderCell class defines a table header cell in the Table 
component. 
      *  
      *  @toplevel
         *  @langversion 3.0
@@ -33,7 +33,7 @@ package org.apache.royale.jewel
         *  @playerversion AIR 2.6
         *  @productversion Royale 0.9.3
         */
-       public class TableHeader extends TableCell
+       public class TableHeaderCell extends TableCell
        {
                /**
                 *  constructor.
@@ -43,11 +43,11 @@ package org.apache.royale.jewel
                 *  @playerversion AIR 2.6
                 *  @productversion Royale 0.9.3
                 */
-               public function TableHeader()
+               public function TableHeaderCell()
                {
                        super();
                        
-                       typeNames = "jewel tableheader";
+                       typeNames = "jewel tableheadercell";
                }
                
                /**
@@ -56,7 +56,7 @@ package org.apache.royale.jewel
                COMPILE::JS
                override protected function createElement():WrappedHTMLElement
                {
-                       return addElementToWrapper(this,'th');
+                       return addElementToWrapper(this, 'th');
                }
     }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableRow.as 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableRow.as
similarity index 85%
rename from 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableRow.as
rename to 
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableRow.as
index 74e8d13..087adcb 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableRow.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableRow.as
@@ -16,8 +16,10 @@
 //  limitations under the License.
 //
 
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.table
 {
+       import org.apache.royale.jewel.Group;
+
        COMPILE::JS
        {
                import org.apache.royale.core.WrappedHTMLElement;
@@ -25,7 +27,8 @@ package org.apache.royale.jewel
        }
        
        /**
-        *  The TableRow class defines a row of a Table. This will translate to 
a <tr> elemement
+        *  The TableRow class is a building block of Jewel SimpleTable and 
Table components, 
+        *  is used in TableView and represents an HTML <tr> element
         *  
      *  @toplevel
         *  @langversion 3.0
@@ -56,7 +59,7 @@ package org.apache.royale.jewel
                COMPILE::JS
                override protected function createElement():WrappedHTMLElement
                {
-                       return addElementToWrapper(this,'tr');
+                       return addElementToWrapper(this, 'tr');
                }
     }
 }
diff --git 
a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass 
b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index 80eaed0..51dd8cb 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -30,7 +30,7 @@
 
         th
         
-        .jewel.tableheader.buttonsRow
+        .jewel.tableheadercell.buttonsRow
             padding: 0px
 
         tbody
@@ -49,5 +49,7 @@ j|DateChooser
     IBeadController: 
ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController")
 
 j|DateChooserTable
-    IItemRenderer: 
ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer")
+    // IItemRenderer: 
ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer")
+    // IDataProviderItemRendererMapper: 
ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+    // IBeadController: 
ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass 
b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
index 38793cc..6e9cd18 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -17,78 +17,121 @@
 //
 
////////////////////////////////////////////////////////////////////////////////
 
-// Jewel Table
+// Jewel SimpleTable
 
-// Table variables
+// SimpleTable variables
 
-.jewel.table
+.jewel.simpletable
     position: relative
     white-space: nowrap
-    // border-collapse: collapse
     border-spacing: 0px
     overflow: hidden
 
-    thead
-        padding-bottom: 3px
+    .jewel.tableheadercell
+        position: relative
+        vertical-align: bottom
+        text-overflow: ellipsis
+        letter-spacing: 0
+        padding: 12px
+        text-align: left
+        
+    .jewel.tbody 
+        .jewel.tablerow
+            position: relative
+            transition-duration: .28s
+            // transition-timing-function: cubic-bezier(.4,0,.2,1)
+            transition-property: background-color
+    
+    //td
+    .jewel.tablecell
+        position: relative
+        > *
+            padding: 12px
+
+j|SimpleTable
 
-    th:first-of-type, td:first-of-type
-        padding-left: 20px
 
-    th
+
+// Jewel Table
+
+// Table variables
+$tableitem-min-height: 34px
+.jewel.table
+    position: relative
+    white-space: nowrap
+    border-spacing: 0px
+    overflow: hidden
+
+    // th
+    .jewel.tableheadercell
         position: relative
         vertical-align: bottom
         text-overflow: ellipsis
         letter-spacing: 0
-        height: 48px
-        padding-bottom: 8px
-        padding: 0 18px 12px 18px
+        padding: 12px
         text-align: left
     
-    tbody 
-        tr
+    .jewel.tbody 
+        .jewel.tablerow
             position: relative
-            height: 48px
             transition-duration: .28s
             // transition-timing-function: cubic-bezier(.4,0,.2,1)
             transition-property: background-color
 
-    td
+    // td
+    .jewel.tablecell
         position: relative
-        height: 48px
-        padding: 12px 18px
-        // text-align: right
+        > *
+            padding: 12px
+        
+    // &.fixedHeader
+    //     table-layout: fixed
 
-    &.fixedHeader
-        table-layout: fixed
+    //     .jewel.thead tr
+    //         display: block
 
-        .jewel.thead tr
-            display: block
-
-        .jewel.tbody
-            display: block
-            overflow: auto
-            width: 100%
-            
-j|SimpleTable
+    //     .jewel.tbody
+    //         display: block
+    //         overflow: auto
+    //         width: 100%
 
 j|Table
     IBeadLayout: 
ClassReference("org.apache.royale.jewel.beads.layouts.TableLayout")
-    IBeadModel: 
ClassReference("org.apache.royale.jewel.beads.models.TableModel")
     IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView")
+    IBeadModel: 
ClassReference("org.apache.royale.jewel.beads.models.TableModel")
     IItemRendererClassFactory: 
ClassReference("org.apache.royale.core.ItemRendererClassFactory")
     IItemRenderer: 
ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer")
-    IDataProviderItemRendererMapper: 
ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableMapperForArrayListData")
+    IBeadController: 
ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
+    IDataProviderItemRendererMapper: 
ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView")
     // IViewport: 
ClassReference("org.apache.royale.html.supportClasses.scrollbar.ScrollingViewport")
     // IViewportModel: 
ClassReference("org.apache.royale.html.beads.models.ViewportModel")
 
-j|TBody
 
+.jewel.tableitem
+    cursor: pointer
+    text-decoration: none
+    align-items: center
+    letter-spacing: 0
+    line-height: normal !important
+    overflow: hidden
+    
+.empty-cell
+    pointer-events: none
+
+j|TableItemRenderer
+    IBeadController: 
ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
+
+
+
+j|TBody
 j|THead
 j|TFoot
 
-j|TableHeader
-
 j|TableCell
+j|TableHeaderCell
+j|TableRow
+j|TableColumn
+
 
 @media -royale-swf
     j|SimpleTable
@@ -99,7 +142,7 @@ j|TableCell
         // IBeadLayout: 
ClassReference("org.apache.royale.html.beads.layouts.TableCellLayout")
         // IBeadView: 
ClassReference("org.apache.royale.html.beads.TableCellView")
 
-    j|TableHeader
+    j|TableHeaderCell
         // IBeadLayout: 
ClassReference("org.apache.royale.html.beads.layouts.TableHeaderLayout")
         // IBeadView: 
ClassReference("org.apache.royale.html.beads.TableCellView")
 
@@ -108,5 +151,4 @@ j|TableCell
     // IBeadLayout: 
ClassReference("org.apache.royale.html.beads.layouts.SimpleTableLayout")
     // IBeadView: 
ClassReference("org.apache.royale.jewel.beads.views.TableView")
 
-j|TableColumn
 
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css 
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 2a5858f..20ff2d3 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -235,7 +235,6 @@ j|Card {
 
 .jewel.datechooser {
   background: white;
-  width: 330px;
 }
 .jewel.datechooser .jewel.table {
   background: white;
@@ -247,6 +246,9 @@ j|Card {
   border: none;
   box-shadow: none;
 }
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+  border-bottom: 1px solid #d9d9d9;
+}
 .jewel.datechooser .jewel.table th {
   background: white;
   box-shadow: none;
@@ -533,40 +535,82 @@ j|Card {
   border-radius: 3px;
 }
 
-.jewel.table {
+.jewel.simpletable {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   box-shadow: inset 0 1px 0 white;
   border-radius: 0.25rem;
 }
-.jewel.table th:first-of-type {
+.jewel.simpletable .jewel.thead tr {
+  border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
   border-left: 0px;
 }
-.jewel.table th {
+.jewel.simpletable .jewel.tableheadercell {
   background: linear-gradient(white, #f3f3f3);
   box-shadow: inset 0 1px 0 white;
   font-weight: 700;
-  line-height: 24px;
+  line-height: normal !important;
   font-size: 1em;
   color: #808080;
   border-left: 1px solid #d9d9d9;
 }
-.jewel.table td:first-of-type {
+.jewel.simpletable .jewel.tablecell:first-of-type {
   border-left: 0px;
 }
-.jewel.table td {
+.jewel.simpletable .jewel.tablecell {
   border-top: 1px solid #d9d9d9;
   border-left: 1px solid #d9d9d9;
 }
-.jewel.table tfoot td {
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
   border-left: 0px;
   background: linear-gradient(white, white);
   box-shadow: inset 0 1px 0 white;
 }
 
-.jewel.thead tr {
+.jewel.table {
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
+  box-shadow: inset 0 1px 0 white;
+  border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
   border-bottom: 1px solid #d9d9d9;
 }
+.jewel.table .jewel.tableheadercell:first-of-type {
+  border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+  background: linear-gradient(white, #f3f3f3);
+  box-shadow: inset 0 1px 0 white;
+  font-weight: 700;
+  line-height: normal !important;
+  font-size: 1em;
+  color: #808080;
+  border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+  border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+  border-top: 1px solid #d9d9d9;
+  border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+  border-left: 0px;
+  background: linear-gradient(white, white);
+  box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem:hover {
+  color: #FFFFFF;
+  background: #3CADF1;
+}
+.jewel.tableitem:active, .jewel.tableitem.selected {
+  color: #FFFFFF;
+  background: #24a3ef;
+}
 
 .jewel.textinput {
   font-weight: 400;
diff --git 
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
 
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
index 98b8e4f..a0ba9a2 100644
--- 
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
+++ 
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -23,8 +23,7 @@
 
 .jewel.datechooser
     background: lighten($default-color, 20%)
-    width: 330px
-
+    // width: 282px
 
     .jewel.table
         background: lighten($default-color, 20%)
@@ -36,6 +35,9 @@
             border: none
             box-shadow: none
 
+        .jewel.tableheadercell.buttonsRow
+            border-bottom: 1px solid $default-color
+
         th
             @if $flat
                 background: lighten($default-color, 20%)
diff --git 
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass 
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
index 85c0a83..0baf972 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
@@ -17,13 +17,63 @@
 //
 
////////////////////////////////////////////////////////////////////////////////
 
+// Jewel SimpleTable
+
+// SimpleTable variables
+$simpletable-border-radius: $border-radius
+        
+.jewel.simpletable
+    @if $flat
+        background: $default-color
+        border: 1px solid transparent
+    @else
+        background: linear-gradient(lighten($default-color, 15%), 
lighten($default-color, 10%))
+        border: 1px solid darken($default-color, 15%)
+        box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+    border-radius: $simpletable-border-radius
+
+    .jewel.thead tr
+        border-bottom: 1px solid $default-color
+    
+    // th
+    .jewel.tableheadercell:first-of-type
+        border-left: 0px
+    .jewel.tableheadercell
+        @if $flat
+            background: $default-color
+        @else
+            background: linear-gradient(lighten($default-color, 15%), 
lighten($default-color, 10%))
+            box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+        font-weight: 700
+        line-height: normal !important
+        font-size: $font-size
+        color: $default-font-color
+        border-left: 1px solid $default-color
+    
+    // td
+    .jewel.tablecell:first-of-type
+        border-left: 0px
+    .jewel.tablecell
+        border-top: 1px solid $default-color
+        border-left: 1px solid $default-color
+
+    .jewel.tfoot
+        .jewel.tablecell
+            border-left: 0px
+            @if $flat
+                background: lighten($default-color, 10%)
+            @else
+                background: linear-gradient(lighten($default-color, 15%), 
lighten($default-color, 20%))
+                box-shadow: inset 0 1px 0 lighten($default-color, 30%)
+        // border-bottom: 1px solid darken($light-color, 20%)
+
+
 // Jewel Table
 
 // Table variables
 $table-border-radius: $border-radius
 
 .jewel.table
-    
     @if $flat
         background: $default-color
         border: 1px solid transparent
@@ -33,38 +83,50 @@ $table-border-radius: $border-radius
         box-shadow: inset 0 1px 0 lighten($default-color, 20%)
     border-radius: $table-border-radius
 
-    th:first-of-type
+    .jewel.thead tr
+        border-bottom: 1px solid $default-color
+
+    // th
+    .jewel.tableheadercell:first-of-type
         border-left: 0px
-    th
+    .jewel.tableheadercell
         @if $flat
             background: $default-color
         @else
             background: linear-gradient(lighten($default-color, 15%), 
lighten($default-color, 10%))
             box-shadow: inset 0 1px 0 lighten($default-color, 20%)
         font-weight: 700
-        line-height: 24px
+        line-height: normal !important
         font-size: $font-size
         color: $default-font-color
         border-left: 1px solid $default-color
     
-    td:first-of-type
+    // td
+    .jewel.tablecell:first-of-type
         border-left: 0px
-    td
+    .jewel.tablecell
         border-top: 1px solid $default-color
         border-left: 1px solid $default-color
 
-    tfoot
-        td
+    .jewel.tfoot
+        .jewel.tablecell
             border-left: 0px
             @if $flat
                 background: lighten($default-color, 10%)
             @else
                 background: linear-gradient(lighten($default-color, 15%), 
lighten($default-color, 20%))
                 box-shadow: inset 0 1px 0 lighten($default-color, 30%)
-        
-        // border-bottom: 1px solid darken($light-color, 20%)
 
-.jewel.thead tr
-    border-bottom: 1px solid $default-color
-// .jewel.tableheader
-//     border: 1px solid black
\ No newline at end of file
+// .jewel.tableheadercell
+//     border: 1px solid black
+
+.jewel.tableitem
+    // padding: 12px 0px 14px 0px
+    
+    &:hover
+        color: $font-theme-color
+        background: $primary-color
+
+    &:active, &.selected
+        color: $font-theme-color
+        background: darken($primary-color, 5%)
\ No newline at end of file

Reply via email to