This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch feature/jewel-datagrid in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit f227eea390a15b1e2273002af3cba75635d6d540 Author: Carlos Rovira <[email protected]> AuthorDate: Mon Nov 25 13:06:34 2019 +0100 jewel-datagrid: starting example for Jewel DataGrid in Tour De Jewel --- .../src/main/royale/DataGridPlayGround.mxml | 119 +++++++++++++++++++++ .../TourDeJewel/src/main/royale/MainContent.mxml | 1 + .../royale/itemRenderers/ProductItemRenderer.as | 66 ++++++++++++ .../src/main/royale/models/MainNavigationModel.as | 1 + .../src/main/royale/models/ProductModel.as | 52 +++++++++ .../TourDeJewel/src/main/royale/vos/Product.as | 67 ++++++++++++ 6 files changed, 306 insertions(+) diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml new file mode 100644 index 0000000..6bce9cb --- /dev/null +++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml @@ -0,0 +1,119 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + +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. + +--> +<c:ExampleAndSourceCodeTabbedSectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:j="library://ns.apache.org/royale/jewel" + xmlns:html="library://ns.apache.org/royale/html" + xmlns:js="library://ns.apache.org/royale/basic" + xmlns:models="models.*" + xmlns:c="components.*" sourceCodeUrl="DataGridPlayGround.mxml"> + + <fx:Script> + <![CDATA[ + import org.apache.royale.jewel.Label; + import models.ProductModel; + + private function dataGridChange(grid:DataGrid, output:Label) : void + { + output.text = "Clicked on row "+grid.selectedIndex; + } + + private function refreshGrid():void + { + dataGrid.dataProvider = null; + dataGrid.dataProvider = (productModel as ProductModel).productArray; + } + ]]> + </fx:Script> + + <js:model> + <models:ProductModel localId="productModel"/> + </js:model> + + <j:beads> + <js:ContainerDataBinding/> + </j:beads> + + <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight"> + <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <html:H3 text="Jewel DataGrid"/> + + <j:DataGrid localId="dataGrid" width="100%" height="100%" change="dataGridChange(dataGrid, output1)" + rowHeight="40" className="PercentageColumnWidths DataGrid"> + <j:beads> + <js:ConstantBinding + sourceID="productModel" + sourcePropertyName="productArray" + destinationPropertyName="dataProvider" /> + </j:beads> + <j:columns> + <j:DataGridColumn label="Image" dataField="image" columnWidth="15" itemRenderer="itemRenderers.ProductItemRenderer"/> + <j:DataGridColumn label="Title" dataField="title" columnWidth="60" /> + <j:DataGridColumn label="Sales" dataField="sales" columnWidth="25" /> + </j:columns> + </j:DataGrid> + + <!-- controls for first grid --> + <j:Label id="output1" x="30" y="430"/> + <j:Button text="Refresh Grid" x="20" y="460" click="refreshGrid()" /> + <j:Label text="Refresh this grid after add or removing values" x="30" y="490" /> + + </j:Card> + </j:GridCell> + <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <html:H4 text="DataGrid"/> + </j:Card> + </j:GridCell> + </j:Grid> + + <fx:Style> + @namespace j "library://ns.apache.org/royale/jewel"; + + /* Puts a box around each cell of the DataGrids. + */ + j|DataGrid .DataItemRenderer { + border: 1px solid #ACACAC; + line-height: 40px; + } + j|DataGrid .StringItemRenderer { + border: 1px solid #ACACAC; + line-height: 40px; + } + + /* Allows the DataGrid to be specified with percentage widths for the columns (rather + * than pixel widths) and does not respond to changes to its dataProvider. + */ + .PercentageColumnWidths { + IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridPercentageLayout"); + border: 1px solid #ACACAC; + } + + .OuterGroup { + background-color: orange; + padding: 10px; + } + .OuterGroup .DataGrid { + position: relative; + } + + </fx:Style> + +</c:ExampleAndSourceCodeTabbedSectionContent> diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml index b5f02af..7e7574c 100644 --- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml +++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml @@ -248,6 +248,7 @@ limitations under the License. <local:TextInputPlayGround name="textinput_panel"/> <local:GridPlayGround name="grid_panel"/> <local:CardPlayGround name="card_panel"/> + <local:DataGridPlayGround name="datagrid_panel"/> <local:TablePlayGround name="tables_panel"/> <local:FormsValidationPlayGround name="form_validation_panel"/> <local:DropDownListPlayGround name="dropdownlist_panel"/> diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as new file mode 100644 index 0000000..347c370 --- /dev/null +++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as @@ -0,0 +1,66 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 itemRenderers +{ + import org.apache.royale.html.Image; + import org.apache.royale.html.supportClasses.DataItemRenderer; + + public class ProductItemRenderer extends DataItemRenderer + { + public function ProductItemRenderer() + { + super(); + } + + private var image:Image; + + override public function addedToParent():void + { + super.addedToParent(); + + // add an image and two labels + image = new Image(); + addElement(image); + } + + override public function get data():Object + { + return super.data; + } + + override public function set data(value:Object):void + { + super.data = value; + + image.src = value.image; + } + + override public function adjustSize():void + { + var cy:Number = this.height/2; + + image.x = 4; + image.y = cy - 16; + image.width = 32; + image.height = 32; + + updateRenderer(); + } + } +} diff --git a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as index 19254f7..0e1bd4b 100644 --- a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as +++ b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as @@ -56,6 +56,7 @@ package models new NavigationLinkVO("Card", "card_panel", MaterialIconType.WEB_ASSET), new NavigationLinkVO("Layouts", "layouts_panel", MaterialIconType.VIEW_QUILT), new NavigationLinkVO("Grid", "grid_panel", MaterialIconType.GRID_ON), + new NavigationLinkVO("DataGrid", "datagrid_panel", MaterialIconType.VIEW_LIST), new NavigationLinkVO("Tables", "tables_panel", MaterialIconType.VIEW_LIST), new NavigationLinkVO("TabBar", "tabbar_panel", MaterialIconType.TAB), new NavigationLinkVO("View States", "viewstates_panel", MaterialIconType.CHORME_READER_MODE), diff --git a/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as b/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as new file mode 100644 index 0000000..edbb6fe --- /dev/null +++ b/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as @@ -0,0 +1,52 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 models +{ + import org.apache.royale.collections.ArrayList; + import vos.Product; + + public class ProductModel + { + private var _productList:ArrayList = new ArrayList([ + new Product("ps100","Widgets",44,200,"assets/smallbluerect.jpg"), + new Product("tx200","Thingys",5,285,"assets/smallgreenrect.jpg"), + new Product("rz300","Sprockets",80,105,"assets/smallyellowrect.jpg"), + new Product("dh440","Doohickies",10,340,"assets/smallredrect.jpg"), + new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg") + ]); + + public function get productList():ArrayList + { + return _productList; + } + + private var _productArray:Array = [ + new Product("ps100","Blueberries",44,200,"assets/smallbluerect.jpg"), + new Product("tx200","Kiwis",5,285,"assets/smallgreenrect.jpg"), + new Product("rz300","Bananas",80,105,"assets/smallyellowrect.jpg"), + new Product("dh440","Strawberries",10,340,"assets/smallredrect.jpg"), + new Product("ps220","Oranges",35,190,"assets/smallorangerect.jpg") + ]; + + public function get productArray():Array + { + return _productArray; + } + } +} diff --git a/examples/royale/TourDeJewel/src/main/royale/vos/Product.as b/examples/royale/TourDeJewel/src/main/royale/vos/Product.as new file mode 100644 index 0000000..106c86c --- /dev/null +++ b/examples/royale/TourDeJewel/src/main/royale/vos/Product.as @@ -0,0 +1,67 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 vos { + public class Product + { + private var _id:String; + private var _title:String; + private var _detail:Number; + private var _image:String; + private var _sales:Number; + + public function Product(id:String,title:String,detail:Number,sales:Number,image:String) + { + this._id = id; + this._title = title; + this._detail = detail; + this._sales = sales; + this._image = image; + } + + public function get id():String + { + return _id; + } + + public function get title():String + { + return _title; + } + + public function get detail():Number + { + return _detail; + } + + public function get image():String + { + return _image; + } + + public function get sales():Number + { + return _sales; + } + + public function toString():String + { + return title; + } + } +}
