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/08 17:12:17 UTC
[royale-asjs] branch develop updated: - 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
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 <ca...@apache.org>
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