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 9f7ae31 adding new items to Jewel Table 9f7ae31 is described below commit 9f7ae310901ce2cb82c13579506cc0184894f4ba Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Thu Aug 23 19:42:43 2018 +0200 adding new items to Jewel Table --- .../src/main/royale/TablePlayGround.mxml | 40 ++-- .../TableCellCloseIconItemRenderer.mxml | 23 +- .../src/main/royale/models/TablesModel.as | 16 +- .../projects/Jewel/src/main/resources/defaults.css | 7 +- .../Jewel/src/main/resources/jewel-manifest.xml | 1 + .../AddTableItemRendererForArrayListData.as | 247 +++++++++++++++++++++ .../TableItemRendererFactoryForCollectionView.as | 25 +-- .../jewel/itemRenderers/TableItemRenderer.as | 6 +- .../Jewel/src/main/sass/components/_table.sass | 7 +- 9 files changed, 307 insertions(+), 65 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml index e905c3d..de9c76a 100644 --- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml @@ -176,26 +176,29 @@ limitations under the License. <html:H3 text="Jewel Table"/> <j:Table id="table" width="440" change="onChange(event)"> + <j:TableColumn dataField="icon" label="" align="center" itemRenderer="itemRenderers.TableCellCloseIconItemRenderer"/> <j:TableColumn dataField="guitarrist" label="Guitarrist"/> <j:TableColumn dataField="album" label="Album" align="center" columnLabelAlign="center"/> - <j:TableColumn dataField="year" label="Release Year" align="right" columnLabelAlign="right" - itemRenderer="itemRenderers.TableCellCloseIconItemRenderer"/> + <j:TableColumn dataField="year" label="Release Year" align="right" columnLabelAlign="right"/> <!--item renderers can be get from CSS or declared in column but must extend TableItemRenderer --> <j:beads> <js:ConstantBinding sourceID="tablesModel" sourcePropertyName="guitarrists" destinationPropertyName="dataProvider" /> - <j:DynamicRemoveAllItemRendererForArrayListData/> + <j:AddTableItemRendererForArrayListData/> + <j:DynamicRemoveItemRendererForArrayListData/> <j:DynamicUpdateItemRendererForArrayListData/> + <j:DynamicRemoveAllItemRendererForArrayListData/> </j:beads> </j:Table> <j:Label id="selected"/> <j:ControlBar> <j:Button click="clearTable()" text="Change Data" emphasis="primary"/> - <j:Button text="Remove all data" click="removeAllData()"/> - <j:Button click="changeCell()" text="Change Cell"/> + <j:Button text="Add item" click="addItem()"/> + <j:Button text="Remove first item" click="removeItemAt()"/> <j:Button text="Update first item" click="updateFirstItem()"/> + <j:Button text="Remove all data" click="removeAllData()"/> </j:ControlBar> </j:Card> @@ -204,9 +207,6 @@ limitations under the License. <![CDATA[ import org.apache.royale.collections.ArrayList; - private function changeCell():void - { - } private function onChange(event:Event):void { selected.text = "Selected: " + table.selectedItemProperty; @@ -215,17 +215,22 @@ limitations under the License. private function clearTable():void { table.dataProvider = new ArrayList([ - {guitarrist: "Ssi", album: "Paasadasdssion & Warfare", year: "1990"}, - {guitarrist: "Steve Morse", album: "Southern Steel", year: "1991"}, - {guitarrist: "Yngwie Malmsteen", album: "sfsdf Force", year: "2984"}, - {guitarrist: "Joe sf", album: "Surfing With The Alien", year: "1987"}, - {guitarrist: "Mark Knopfler", album: "Local sf", year: "1983"} + {icon: MaterialIconType.CLOSE, guitarrist: "Ssi", album: "Paasadasdssion & Warfare", year: "1990"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Steve Morse", album: "Southern Steel", year: "1991"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Yngwie Malmsteen", album: "sfsdf Force", year: "2984"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Joe sf", album: "Surfing With The Alien", year: "1987"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Mark Knopfler", album: "Local sf", year: "1983"} ]); } - public function removeAllData():void + private function addItem():void { - tablesModel.guitarrists.removeAll(); + tablesModel.guitarrists.addItem({icon: MaterialIconType.CLOSE, guitarrist: "Eric Johnson", album: "Venus Isle", year: "1996"}); + } + + public function removeItemAt():void + { + tablesModel.guitarrists.removeItemAt(0); } public function updateFirstItem():void @@ -234,6 +239,11 @@ limitations under the License. item.guitarrist = "Mango"; tablesModel.guitarrists.itemUpdated(item); } + + public function removeAllData():void + { + tablesModel.guitarrists.removeAll(); + } ]]> </fx:Script> diff --git a/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml index 8ed5cad..484a466 100644 --- a/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml +++ b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml @@ -21,24 +21,19 @@ limitations under the License. xmlns:j="library://ns.apache.org/royale/jewel" xmlns:js="library://ns.apache.org/royale/basic" xmlns:html="library://ns.apache.org/royale/html" - xmlns="http://www.w3.org/1999/xhtml"> - - <fx:Script> - <![CDATA[ - [Bindable("dataChange")] - public function get guitarrist():Object - { - return data; - } - ]]> - </fx:Script> - + xmlns="http://www.w3.org/1999/xhtml" + hoverable="false" + selectable="false"> + <mdl:beads> <js:ItemRendererDataBinding/> </mdl:beads> - <html:Span text="{guitarrist.year}"/> - <js:FontIcon text="{MaterialIconType.CLOSE}" material="true"/> + <j:IconButton emphasis="primary" width="24" height="24" style="padding: 0px; border-radius: 50%"> + <j:icon> + <js:FontIcon text="{data.icon}" material="true" size="18"/> + </j:icon> + </j:IconButton> </j:TableItemRenderer> diff --git a/examples/royale/JewelExample/src/main/royale/models/TablesModel.as b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as index 02ce862..0f986e9 100644 --- a/examples/royale/JewelExample/src/main/royale/models/TablesModel.as +++ b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as @@ -23,14 +23,14 @@ package models public class TablesModel { private var _guitarrists:ArrayList = new ArrayList([ - {guitarrist: "Steve Vai", album: "Passion & Warfare", year: "1990"}, - {guitarrist: "Joe Satriani", album: "Surfing With The Alien", year: "1987"}, - {guitarrist: "Yngwie Malmsteen", album: "Rising Force", year: "1984"}, - {guitarrist: "Steve Morse", album: "Southern Steel", year: "1991"}, - {guitarrist: "Mark Knopfler", album: "Local Hero", year: "1983"}, - {guitarrist: "Eric Sardinas", album: "Treat Me Right", year: "1999"}, - {guitarrist: "Mike Oldfield", album: "Tubular Bells", year: "1973"}, - {guitarrist: "Van Halen", album: "1984", year: "1984"} + {icon: MaterialIconType.CLOSE, guitarrist: "Steve Vai", album: "Passion & Warfare", year: "1990"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Joe Satriani", album: "Surfing With The Alien", year: "1987"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Yngwie Malmsteen", album: "Rising Force", year: "1984"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Steve Morse", album: "Southern Steel", year: "1991"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Mark Knopfler", album: "Local Hero", year: "1983"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Eric Sardinas", album: "Treat Me Right", year: "1999"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Mike Oldfield", album: "Tubular Bells", year: "1973"}, + {icon: MaterialIconType.CLOSE, guitarrist: "Van Halen", album: "1984", year: "1984"} ]); public function get guitarrists():ArrayList diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index 014d0f1..1c29c4d 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -2941,9 +2941,6 @@ j|Slider { .jewel.table .jewel.tablecell { position: relative; } -.jewel.table .jewel.tablecell > * { - padding: 12px; -} .jewel.table.fixedHeader { table-layout: fixed; } @@ -2972,6 +2969,7 @@ j|Table { } .jewel.tableitem { + padding: 12px; cursor: pointer; text-decoration: none; align-items: center; @@ -2979,6 +2977,9 @@ j|Table { line-height: normal !important; overflow: hidden; } +.jewel.tableitem.with-childs { + padding: 6px; +} .jewel.tableitem.calendar { border-radius: 10%; } diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml index d460783..7820f6f 100644 --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml @@ -125,6 +125,7 @@ <component id="DynamicUpdateItemRendererForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.DynamicUpdateItemRendererForArrayListData" /> <component id="DynamicRemoveAllItemRendererForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.DynamicRemoveAllItemRendererForArrayListData" /> + <component id="AddTableItemRendererForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.AddTableItemRendererForArrayListData" /> <!-- <component id="JewelLabelViewBead" class="org.apache.royale.jewel.beads.views.JewelLabelViewBead"/> --> </componentPackage> diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableItemRendererForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableItemRendererForArrayListData.as new file mode 100644 index 0000000..eaee0cd --- /dev/null +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableItemRendererForArrayListData.as @@ -0,0 +1,247 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.core.IBead; + import org.apache.royale.core.IDataProviderModel; + import org.apache.royale.core.IItemRendererClassFactory; + import org.apache.royale.core.IItemRendererParent; + import org.apache.royale.core.IList; + import org.apache.royale.core.IListPresentationModel; + import org.apache.royale.core.ISelectableItemRenderer; + import org.apache.royale.core.ISelectionModel; + import org.apache.royale.core.IStrand; + 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.utils.loadBeadFromValuesManager; + import org.apache.royale.jewel.beads.models.TableModel; + import org.apache.royale.jewel.supportClasses.table.TableColumn; + import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer; + import org.apache.royale.jewel.supportClasses.table.TBodyContentArea; + import org.apache.royale.html.supportClasses.DataItemRenderer; + import org.apache.royale.collections.ICollectionView; + + /** + * Handles the adding of an itemRenderer in a Table component once the corresponding datum has been added + * from the IDataProviderModel. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.0 + */ + public class AddTableItemRendererForArrayListData implements IBead + { + /** + * Constructor + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.0 + */ + public function AddTableItemRendererForArrayListData() + { + } + + protected var _strand:IStrand; + + protected var labelField:String; + + /** + * @copy org.apache.royale.core.IStrand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.0 + */ + public function set strand(value:IStrand):void + { + _strand = value; + IEventDispatcher(value).addEventListener("initComplete", initComplete); + } + + /** + * finish setup + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.8 + */ + protected function initComplete(event:Event):void + { + IEventDispatcher(_strand).removeEventListener("initComplete", initComplete); + + model = _strand.getBeadByType(ISelectionModel) as TableModel; + labelField = model.labelField; + + model.addEventListener("dataProviderChanged", dataProviderChangeHandler); + + // invoke now in case "dataProviderChanged" has already been dispatched. + dataProviderChangeHandler(null); + } + + /** + * @private + */ + protected function dataProviderChangeHandler(event:Event):void + { + var dp:IEventDispatcher = model.dataProvider as IEventDispatcher; + if (!dp) + return; + + // listen for individual items being added in the future. + dp.addEventListener(CollectionEvent.ITEM_ADDED, handleItemAdded); + } + + /** + * Handles the itemRemoved event by removing the item. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.0 + */ + protected function handleItemAdded(event:CollectionEvent):void + { + var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel; + var column:TableColumn; + var tbody:TBodyContentArea = itemRendererParent as TBodyContentArea; + var ir:ITextItemRenderer; + + var index:int = event.index * model.columns.length; + var rowIndex:int = index; + for(var j:int = 0; j < model.columns.length; j++) + { + column = model.columns[j] as TableColumn; + + if(column.itemRenderer != null) + { + ir = column.itemRenderer.newInstance() as ITextItemRenderer; + } else + { + ir = itemRendererFactory.createItemRenderer(tbody) as ITextItemRenderer; + } + + labelField = column.dataField; + + (ir as DataItemRenderer).dataField = labelField; + (ir as DataItemRenderer).rowIndex = event.index; + (ir as DataItemRenderer).columnIndex = j; + + fillRenderer(index++, event.item, (ir as ISelectableItemRenderer), presentationModel); + + if(column.align != "") + { + ir.align = column.align; + } + } + + // update the index values in the itemRenderers to correspond to their shifted positions. + var n:int = tbody.numElements; + var d:DataItemRenderer; + index = event.index * model.columns.length; + for (var i:int = event.index; i < n; i++) + { + d = tbody.getItemRendererForIndex(i) as DataItemRenderer; + d.index = i; + } + + (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded")); + } + + private var _itemRendererParent: IItemRendererParent; + + /** + * The org.apache.royale.core.IItemRendererParent used + * to generate instances of item renderers. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.0 + */ + public function get itemRendererParent():IItemRendererParent + { + if (_itemRendererParent == null) { + var list:IList = _strand as IList; + _itemRendererParent = list.dataGroup; + } + return _itemRendererParent; + } + + 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.8 + */ + public function get itemRendererFactory():IItemRendererClassFactory + { + if(!_itemRendererFactory) + _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory; + + return _itemRendererFactory; + } + + protected var model:TableModel; + + /** + * @private + */ + protected function fillRenderer(index:int, + item:Object, + itemRenderer:ISelectableItemRenderer, + presentationModel:IListPresentationModel):void + { + itemRendererParent.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 + */ + protected function setData(itemRenderer:ISelectableItemRenderer, data:Object, index:int):void + { + itemRenderer.index = index; + itemRenderer.data = data; + } + } +} 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 index 6b42fee..2d0db87 100644 --- 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 @@ -105,25 +105,6 @@ package org.apache.royale.jewel.beads.itemRenderers dataProviderChangeHandler(null); } - protected var _dataProviderModel:IDataProviderModel; - - /** - * The model holding the dataProvider. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion Royale 0.9 - * @royaleignorecoercion org.apache.royale.core.IDataProviderModel - */ - public function get dataProviderModel():IDataProviderModel - { - if (_dataProviderModel == null) { - _dataProviderModel = _strand.getBeadByType(IBeadModel) as IDataProviderModel; - } - return _dataProviderModel; - } - protected var labelField:String; private var _itemRendererFactory:IItemRendererClassFactory; @@ -170,9 +151,9 @@ package org.apache.royale.jewel.beads.itemRenderers protected function dataProviderChangeHandler(event:Event):void { // -- 1) CLEANING PHASE - if (!dataProviderModel) + if (!model) return; - var dp:ICollectionView = dataProviderModel.dataProvider as ICollectionView; + var dp:ICollectionView = model.dataProvider as ICollectionView; if (!dp) return; @@ -194,7 +175,7 @@ package org.apache.royale.jewel.beads.itemRenderers // -- 2) CREATION PHASE var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel; - labelField = dataProviderModel.labelField; + labelField = model.labelField; var column:TableColumn; var ir:ITextItemRenderer; 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 83dfae5..76a2346 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 @@ -50,7 +50,11 @@ package org.apache.royale.jewel.itemRenderers { super(); - typeNames = "jewel tableitem"; + typeNames = "jewel tableitem"; + if(MXMLDescriptor != null) + { + typeNames += " with-childs"; + } textAlign = new TextAlign(); addBead(textAlign); diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass index daaa4da..732194e 100644 --- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass +++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass @@ -81,8 +81,8 @@ $tableitem-min-height: 34px // td .jewel.tablecell position: relative - > * - padding: 12px + // > * + // padding: 12px &.fixedHeader table-layout: fixed @@ -115,6 +115,7 @@ j|Table .jewel.tableitem + padding: 12px cursor: pointer text-decoration: none align-items: center @@ -122,6 +123,8 @@ j|Table line-height: normal !important overflow: hidden + &.with-childs + padding: 6px &.calendar border-radius: 10%