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 2019/12/12 23:47:03 UTC
[royale-asjs] 02/42: jewel-datagrid: starting example for Jewel
DataGrid in Tour De Jewel
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
commit 5f716f8bec76568cd59463aa80f425498d8c2f11
Author: Carlos Rovira <ca...@apache.org>
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 72e00ca..60c6257 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;
+ }
+ }
+}