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/02 08:02:15 UTC
[royale-asjs] branch develop updated: - SimpleTable extends Group - Table extends DataContainer - Added TableLayout - Added TableItemRenderer - Make Table Mapper get ItemRenderers vía CSS or MXML
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 0064bd4 - SimpleTable extends Group - Table extends DataContainer - Added TableLayout - Added TableItemRenderer - Make Table Mapper get ItemRenderers vía CSS or MXML
0064bd4 is described below
commit 0064bd4e06483ac3bb352bb51908f187cf6d6781
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Aug 2 10:02:10 2018 +0200
- SimpleTable extends Group
- Table extends DataContainer
- Added TableLayout
- Added TableItemRenderer
- Make Table Mapper get ItemRenderers vía CSS or MXML
---
.../src/main/royale/TablePlayGround.mxml | 19 +-
.../projects/Jewel/src/main/resources/defaults.css | 18 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 4 +-
.../projects/Jewel/src/main/royale/JewelClasses.as | 13 --
.../main/royale/org/apache/royale/jewel/Table.as | 26 ++-
.../itemRenderers/TableMapperForArrayListData.as | 77 +++++--
.../royale/jewel/beads/layouts/TableLayout.as | 235 +++++++++++++++++++++
.../apache/royale/jewel/beads/views/TableView.as | 4 +-
.../jewel/itemRenderers/TableItemRenderer.as | 194 +++++++++++++++++
.../jewel/supportClasses/table/TableColumn.as | 20 ++
.../Jewel/src/main/sass/components/_layout.sass | 66 +++---
.../Jewel/src/main/sass/components/_table.sass | 17 +-
12 files changed, 598 insertions(+), 95 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
index a06c116..6c243bd 100644
--- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -32,10 +32,10 @@ limitations under the License.
<j:HorizontalCenteredLayout gap="3"/>
</j:beads>
- <j:Card width="550">
+ <j:Card >
<html:H3 text="Jewel SimpleTable"/>
- <j:SimpleTable>
+ <j:SimpleTable width="500">
<j:THead>
<j:TableRow>
<j:TableHeader width="48">
@@ -172,16 +172,15 @@ limitations under the License.
</j:SimpleTable>
</j:Card>
- <j:Card width="440">
+ <j:Card >
<html:H3 text="Jewel Table"/>
- <j:Table>
- <j:TableColumn dataField="guitarrist" label="Guitarrist"
- itemRenderer="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
- <j:TableColumn dataField="album" label="Album"
- itemRenderer="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
- <j:TableColumn dataField="year" label="Year"
- itemRenderer="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
+ <j:Table width="440" height="300">
+ <j:TableColumn dataField="guitarrist" label="Guitarrist"/>
+ <j:TableColumn dataField="album" label="Album" align="center"/>
+ <j:TableColumn dataField="year" label="Release Year" align="right"
+ itemRenderer="org.apache.royale.jewel.itemRenderers.TableItemRenderer"/>
+ <!--item renderers can be get from CSS or declared in column but must extend TableItemRenderer -->
<j:beads>
<js:ConstantBinding sourceID="tablesModel"
sourcePropertyName="guitarrists"
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 62b7906..f0f44ab 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -435,7 +435,6 @@ j|Label {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
}
-/* Absolute */
.layout.absolute {
position: absolute;
}
@@ -476,8 +475,6 @@ j|Label {
.layout.itemsExpand > * {
flex: 1 0 auto !important;
}
-
-/* Horizontal */
.layout.horizontal {
flex-direction: row !important;
flex-wrap: nowrap;
@@ -558,8 +555,6 @@ j|Label {
.layout.horizontal.gap-10x3px > * {
margin: 0px 0px 0px 30px;
}
-
-/* Vertical */
.layout.vertical {
flex-direction: column !important;
flex-wrap: nowrap;
@@ -638,14 +633,10 @@ j|Label {
.layout.vertical.gap-10x3px > * {
margin: 30px 0px 0px;
}
-
-/* Tile */
.layout.tile {
flex-flow: row wrap;
align-items: flex-start;
}
-
-/* Grid */
.layout.grid {
flex-flow: row wrap;
width: 100%;
@@ -2547,6 +2538,9 @@ j|Label {
width: calc(100% - 10px);
}
}
+.layout.table {
+ display: table;
+}
@media (max-width: 767px) {
.visible-phone {
@@ -2832,7 +2826,13 @@ j|Slider {
}
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");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer");
+ IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
}
.alignTextLeft {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 44c8a24..f4b737c 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -107,10 +107,12 @@
<component id="TileLayout" class="org.apache.royale.jewel.beads.layouts.TileLayout"/>
<component id="GridLayout" class="org.apache.royale.jewel.beads.layouts.GridLayout"/>
<component id="GridCellLayout" class="org.apache.royale.jewel.beads.layouts.GridCellLayout"/>
+ <component id="TableLayout" class="org.apache.royale.jewel.beads.layouts.TableLayout"/>
<component id="StringItemRenderer" class="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
- <component id="DateItemRenderer" class="org.apache.royale.jewel.itemRenderers.DateItemRenderer"/>
<component id="ListItemRenderer" class="org.apache.royale.jewel.itemRenderers.ListItemRenderer"/>
+ <component id="TableItemRenderer" class="org.apache.royale.jewel.itemRenderers.TableItemRenderer"/>
+ <component id="DateItemRenderer" class="org.apache.royale.jewel.itemRenderers.DateItemRenderer"/>
<component id="DayNameItemRenderer" class="org.apache.royale.jewel.itemRenderers.DayNameItemRenderer"/>
<component id="ScrollingViewport" class="org.apache.royale.jewel.supportClasses.ScrollingViewport" />
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 6806d2c..1c7f936 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -54,11 +54,6 @@ package
import org.apache.royale.jewel.beads.models.SingleSelectionCollectionViewModel; SingleSelectionCollectionViewModel;
import org.apache.royale.jewel.beads.models.SingleSelectionArrayListModel; SingleSelectionArrayListModel;
import org.apache.royale.jewel.supportClasses.ScrollingViewport; ScrollingViewport;
-
- import org.apache.royale.jewel.itemRenderers.StringItemRenderer; StringItemRenderer;
- import org.apache.royale.jewel.itemRenderers.ListItemRenderer; ListItemRenderer;
- import org.apache.royale.jewel.itemRenderers.DateItemRenderer; DateItemRenderer;
- import org.apache.royale.jewel.itemRenderers.DayNameItemRenderer; DayNameItemRenderer;
COMPILE::SWF
{
@@ -74,14 +69,6 @@ package
import org.apache.royale.jewel.beads.controllers.DropDownListController; DropDownListController;
}
- import org.apache.royale.jewel.beads.layouts.BasicLayout; BasicLayout;
- import org.apache.royale.jewel.beads.layouts.GridLayout; GridLayout;
- import org.apache.royale.jewel.beads.layouts.TileLayout; TileLayout;
- import org.apache.royale.jewel.beads.layouts.SimpleHorizontalLayout; SimpleHorizontalLayout;
- import org.apache.royale.jewel.beads.layouts.SimpleVerticalLayout; SimpleVerticalLayout;
- import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
- import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
-
// import org.apache.royale.html.beads.TableCellView; TableCellView;
// import org.apache.royale.html.beads.layouts.SimpleTableLayout; SimpleTableLayout;
// import org.apache.royale.html.beads.layouts.TableCellLayout; TableCellLayout;
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 1386802..f37193d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
@@ -19,16 +19,17 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
+ import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.itemRenderers.TableMapperForArrayListData;
import org.apache.royale.jewel.beads.models.TableModel;
- import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
[DefaultProperty("columns")]
-
- /**
- *
- */
/**
* The Table class represents an HTML <table> element.
@@ -43,7 +44,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public class Table extends SimpleTable
+ public class Table extends DataContainer
{
/**
* constructor.
@@ -69,11 +70,11 @@ package org.apache.royale.jewel
TableModel(model).columns = value;
}
- public function get dataProvider():Object
+ override public function get dataProvider():Object
{
return TableModel(model).dataProvider;
}
- public function set dataProvider(value:Object):void
+ override public function set dataProvider(value:Object):void
{
TableModel(model).dataProvider = value;
}
@@ -86,5 +87,14 @@ package org.apache.royale.jewel
dispatchEvent( new Event("tableComplete") );
}
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'table');
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/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 01f42b5..caf1ea5 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
@@ -22,6 +22,7 @@ package org.apache.royale.jewel.beads.itemRenderers
import org.apache.royale.jewel.beads.models.TableModel;
import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.core.IItemRendererParent;
import org.apache.royale.core.IBead;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IStrand;
@@ -32,9 +33,12 @@ package org.apache.royale.jewel.beads.itemRenderers
import org.apache.royale.jewel.TableCell;
import org.apache.royale.jewel.TableHeader;
import org.apache.royale.jewel.TableRow;
- import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.jewel.itemRenderers.TableItemRenderer;
+ import org.apache.royale.core.IDataProviderItemRendererMapper;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
- public class TableMapperForArrayListData implements IBead
+ public class TableMapperForArrayListData implements IBead, IDataProviderItemRendererMapper
{
public function TableMapperForArrayListData()
{
@@ -48,6 +52,34 @@ package org.apache.royale.jewel.beads.itemRenderers
IEventDispatcher(_strand).addEventListener("tableComplete", handleInitComplete);
}
+
+ private var _itemRendererFactory:IItemRendererClassFactory;
+
+ /**
+ * The org.apache.royale.core.IItemRendererClassFactory used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.IItemRendererClassFactory
+ */
+ public function get itemRendererFactory():IItemRendererClassFactory
+ {
+ if(!_itemRendererFactory)
+ _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ return _itemRendererFactory;
+ }
+
+ /**
+ * @private
+ */
+ public function set itemRendererFactory(value:IItemRendererClassFactory):void
+ {
+ _itemRendererFactory = value;
+ }
private function handleInitComplete(event:Event):void
{
@@ -58,19 +90,22 @@ package org.apache.royale.jewel.beads.itemRenderers
if (dp == null || dp.length == 0) return;
var table:Table = _strand as Table;
+ var dataGroup:IItemRendererParent = table.dataGroup;
var createHeaderRow:Boolean = false;
+ var test:TableColumn;
for(var c:int=0; c < model.columns.length; c++)
{
- var test:TableColumn = model.columns[c] as TableColumn;
+ test = model.columns[c] as TableColumn;
if (test.label != null) {
createHeaderRow = true;
break;
}
}
+ var row:TableRow;
if (createHeaderRow) {
- var headerRow:TableRow = new TableRow();
+ row = new TableRow();
for(c=0; c < model.columns.length; c++)
{
@@ -79,31 +114,49 @@ package org.apache.royale.jewel.beads.itemRenderers
var label:Label = new Label();
tableHeader.addElement(label);
label.text = test.label == null ? "" : test.label;
- headerRow.addElement(tableHeader);
+ row.addElement(tableHeader);
}
- table.addElement(headerRow);
+ table.addElement(row);
}
+ var column:TableColumn;
+ var tableCell:TableCell;
+ var ir:TableItemRenderer;
+
for(var i:int=0; i < dp.length; i++)
{
- var tableRow:TableRow = new TableRow();
+ row = new TableRow();
for(var j:int=0; j < model.columns.length; j++)
{
- var column:TableColumn = model.columns[j] as TableColumn;
- var tableCell:TableCell = new TableCell();
+ column = model.columns[j] as TableColumn;
+ tableCell = new TableCell();
- var ir:DataItemRenderer = column.itemRenderer.newInstance() as DataItemRenderer;
+ if(column.itemRenderer != null)
+ {
+ trace("1");
+ ir = column.itemRenderer.newInstance() as TableItemRenderer;
+ } else
+ {
+ trace("2");
+ ir = itemRendererFactory.createItemRenderer(dataGroup) as TableItemRenderer;
+ }
+
tableCell.addElement(ir);
- tableRow.addElement(tableCell);
+ row.addElement(tableCell);
ir.labelField = column.dataField;
ir.index = i;
ir.data = dp.getItemAt(i);
+
+ if(column.align != "")
+ {
+ ir.align = column.align;
+ }
}
- table.addElement(tableRow);
+ table.addElement(row);
}
table.dispatchEvent(new Event("layoutNeeded"));
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
new file mode 100644
index 0000000..54918bc
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
@@ -0,0 +1,235 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.LayoutBase;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IStrand;
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The TableLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * as a Table.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TableLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TableLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout table";
+
+ COMPILE::JS
+ private var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ hostComponent = host as UIBase;
+ hostClassList = hostComponent.positioner.classList;
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("table"))
+ hostClassList.remove("table");
+ hostClassList.add("table");
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+
+ var w:Number = hostWidthSizedToContent ? 0 : contentView.width;
+ var h:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+ var n:int = contentView.numElements;
+
+ for (var i:int = 0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+
+ var positions:Object = childPositions(child);
+ var margins:Object = childMargins(child, contentView.width, contentView.height);
+ var ww:Number = w;
+ var hh:Number = h;
+
+ var ilc:ILayoutChild = child as ILayoutChild;
+
+ // set the top edge of the child
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setX(positions.left+margins.left);
+ else
+ child.x = positions.left+margins.left;
+ ww -= positions.left + margins.left;
+ }
+
+ // set the left edge of the child
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setY(positions.top+margins.top);
+ else
+ child.y = positions.top+margins.top;
+ hh -= positions.top + margins.top;
+ }
+
+ // set the right edge of the child
+ if (!isNaN(positions.right))
+ {
+ if (!hostWidthSizedToContent)
+ {
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setWidth(ww - positions.right - margins.right, false);
+ else
+ child.width = ww - positions.right - margins.right;
+ }
+ else
+ {
+ if (ilc)
+ {
+ ilc.setX( w - positions.right - margins.left - child.width - margins.right);
+ }
+ else
+ {
+ child.x = w - positions.right - margins.left - child.width - margins.right;
+ }
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentWidth) && !hostWidthSizedToContent)
+ {
+ ilc.setWidth((ww - margins.right - margins.left) * ilc.percentWidth/100, false);
+ }
+
+ // set the bottm edge of the child
+ if (!isNaN(positions.bottom))
+ {
+ if (!hostHeightSizedToContent)
+ {
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setHeight(hh - positions.bottom - margins.bottom, false);
+ else
+ child.height = hh - positions.bottom - margins.bottom;
+ }
+ else
+ {
+ if (ilc)
+ ilc.setY( h - positions.bottom - child.height - margins.bottom);
+ else
+ child.y = h - positions.bottom - child.height - margins.bottom;
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentHeight) && !hostHeightSizedToContent)
+ {
+ ilc.setHeight((hh - margins.top - margins.bottom) * ilc.percentHeight/100, false);
+ }
+
+ if (margins.auto)
+ {
+ if (ilc)
+ ilc.setX( (w - child.width) / 2);
+ else
+ child.x = (w - child.width) / 2;
+ }
+ }
+
+ return true;
+
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.absolute {
+ * position: relative;
+ * }
+ *
+ * .layout.absolute > * {
+ * position: absolute
+ * }
+ */
+
+ return true;
+ }
+ }
+ }
+}
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 3f3e445..f395bd9 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
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.views
{
- import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.html.beads.DataContainerView;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.IStrand;
import org.apache.royale.jewel.supportClasses.table.TBody;
@@ -33,7 +33,7 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public class TableView extends BeadViewBase
+ public class TableView extends DataContainerView
{
/**
* constructor.
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
new file mode 100644
index 0000000..d266b3d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
@@ -0,0 +1,194 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ COMPILE::SWF
+ {
+ import flash.text.TextFieldAutoSize;
+ import flash.text.TextFieldType;
+
+ import org.apache.royale.core.CSSTextField;
+ }
+ COMPILE::JS
+ {
+ 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()
+ * function.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TableItemRenderer extends DataItemRenderer implements ITextItemRenderer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TableItemRenderer()
+ {
+ super();
+
+ typeNames = "jewel tableitem";
+
+ COMPILE::SWF
+ {
+ textField = new CSSTextField();
+ textField.type = TextFieldType.DYNAMIC;
+ textField.autoSize = TextFieldAutoSize.LEFT;
+ textField.selectable = false;
+ textField.parentDrawsBackground = true;
+ }
+
+ textAlign = new TextAlign();
+ addBead(textAlign);
+ }
+
+ private var textAlign:TextAlign;
+
+ COMPILE::SWF
+ public var textField:CSSTextField;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+
+ addChild(textField);
+
+ adjustSize();
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function adjustSize():void
+ {
+ var cy:Number = height/2;
+
+ textField.x = 0;
+ textField.y = cy - textField.height/2;
+ textField.width = width;
+
+ updateRenderer();
+ }
+
+ /**
+ * The text currently displayed by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get text():String
+ {
+ COMPILE::SWF
+ {
+ return textField.text;
+ }
+ COMPILE::JS
+ {
+ return this.element.textContent;
+ }
+ }
+
+ public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ textField.text = value;
+ }
+ COMPILE::JS
+ {
+ this.element.textContent = value;
+ }
+ }
+
+ /**
+ * 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.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ * @royaleignorecoercion String
+ */
+ override public function set data(value:Object):void
+ {
+ super.data = value;
+ var text:String;
+ this.text = getLabelFromData(this, value);
+ }
+
+ // COMPILE::JS
+ // private var backgroundView:WrappedHTMLElement;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'div');
+ // itemRenderers should provide something for the background to handle
+ // the selection and highlight
+ // backgroundView = element;
+ // return element;
+ }
+
+ }
+}
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 5e77f92..5b57adb 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
@@ -22,6 +22,7 @@ package org.apache.royale.jewel.supportClasses.table
/**
* TableColumn is a DataGridColumn used in Table component
+ * with special table properties
*/
public class TableColumn extends DataGridColumn
{
@@ -29,5 +30,24 @@ package org.apache.royale.jewel.supportClasses.table
{
super();
}
+
+ private var _align:String = ""
+ /**
+ * How text align in the column
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get align():String
+ {
+ return _align;
+ }
+
+ public function set align(value:String):void
+ {
+ _align = value;
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index f1a95f7..21f2cb3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -24,7 +24,10 @@ $gaps: 10
$gap-step: 3
$gap: 0px
-/* Absolute */
+$grid-columns: 12 !default
+$gap-size: 10px !default
+
+// Absolute
.layout.absolute
position: absolute
> *
@@ -63,8 +66,7 @@ $gap: 0px
> *
flex: 1 0 auto !important
-/* Horizontal */
-.layout
+ // Horizontal
&.horizontal
flex-direction: row !important
flex-wrap: nowrap
@@ -91,8 +93,7 @@ $gap: 0px
> *
margin: 0px 0px 0px ($gap + $i * $gap-step)
-/* Vertical */
-.layout
+ // Vertical
&.vertical
flex-direction: column !important
flex-wrap: nowrap
@@ -118,10 +119,10 @@ $gap: 0px
> *
margin: ($gap + $i * $gap-step) 0px 0px
-/* Tile */
-.layout.tile
- flex-flow: row wrap
- align-items: flex-start
+ // Tile
+ &.tile
+ flex-flow: row wrap
+ align-items: flex-start
// this not compile******
// &.gap
@@ -134,39 +135,36 @@ $gap: 0px
// > *
// margin: $gap-size 0px 0px $gap-size
-/* Grid */
-$grid-columns: 12 !default
-$gap-size: 10px !default
-
-.layout.grid
- flex-flow: row wrap
- width: 100%
- height: 100%
-
- > *
- flex: 0 0 auto // flex-grow, flex-shrink and flex-basis
- max-width: 100%
+ // Grid
+ &.grid
+ flex-flow: row wrap
width: 100%
+ height: 100%
-
- @each $size in $size-names
- @media (min-width: map-get($sizes, $size))
- @for $i from 1 through $grid-columns
- @for $j from 1 through $i
- .#{$size}-col-#{$j}-#{$i}
- width: percentage($j / $i)
- &.gap
> *
- margin: $gap-size / 2
+ flex: 0 0 auto // flex-grow, flex-shrink and flex-basis
+ max-width: 100%
+ width: 100%
+
+
@each $size in $size-names
@media (min-width: map-get($sizes, $size))
@for $i from 1 through $grid-columns
@for $j from 1 through $i
.#{$size}-col-#{$j}-#{$i}
- width: calc(#{percentage($j / $i)} - #{$gap-size})
-
-
-
+ width: percentage($j / $i)
+ &.gap
+ > *
+ margin: $gap-size / 2
+ @each $size in $size-names
+ @media (min-width: map-get($sizes, $size))
+ @for $i from 1 through $grid-columns
+ @for $j from 1 through $i
+ .#{$size}-col-#{$j}-#{$i}
+ width: calc(#{percentage($j / $i)} - #{$gap-size})
+
+ &.table
+ display: table
@each $size in $size-names
@if index($size-names, $size) == 1
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
index 44fe34e..ef066a6 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -59,9 +59,17 @@
// text-align: right
j|SimpleTable
+
+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")
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer")
+ IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+
j|TBody
- // IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
- // IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
j|THead
j|TFoot
@@ -83,12 +91,9 @@ j|TableCell
// IBeadView: ClassReference("org.apache.royale.html.beads.TableCellView")
// Table Component
-j|Table
- IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TableModel")
+// j|Table
// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.SimpleTableLayout")
// IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView")
j|TableColumn
- // IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
- // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer")