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:30 UTC
[royale-asjs] 29/42: jewel-datagrid: use jewel itemenderer
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 ec630447d713a7c4b0b099c503c5e181a154568c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Dec 6 18:57:19 2019 +0100
jewel-datagrid: use jewel itemenderer
---
.../src/main/royale/DataGridPlayGround.mxml | 37 +++++++++---------
.../itemRenderers/ImageListItemRenderer.mxml | 44 ++++++++++++++++++++++
.../TourDeJewel/src/main/royale/vos/Product.as | 2 +
3 files changed, 65 insertions(+), 18 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index b9b3b7a..e479d64 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -53,11 +53,11 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DataGrid"/>
+
+ <j:Label text="Basic configuration with no column widths"/>
<j:DataGrid localId="dataGrid" width="100%" height="100%"
- change="dataGridChange(dataGrid, output1)"
- rowHeight="40" className="PercentageColumnWidths"
- emphasis="primary">
+ change="dataGridChange(event.target as DataGrid, output1)">
<j:beads>
<js:ConstantBinding
sourceID="productModel"
@@ -65,9 +65,9 @@ limitations under the License.
destinationPropertyName="dataProvider" />
</j:beads>
<j:columns>
- <j:DataGridColumn label="Images and Pictures" dataField="image" columnWidth="45" itemRenderer="itemRenderers.ProductItemRenderer"/>
- <j:DataGridColumn label="Title" dataField="title" columnWidth="120" />
- <j:DataGridColumn label="Sales" dataField="sales" columnWidth="50" />
+ <j:DataGridColumn label="Images" dataField="image" itemRenderer="itemRenderers.ImageListItemRenderer"/>
+ <j:DataGridColumn label="Title" dataField="title"/>
+ <j:DataGridColumn label="Sales" dataField="sales"/>
</j:columns>
</j:DataGrid>
@@ -78,7 +78,19 @@ limitations under the License.
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H4 text="DataGrid"/>
+ <html:H3 text="Jewel DataGrid"/>
+
+ <j:Label text="Using specific column widths"/>
+
+ <j:DataGrid width="100%" height="100%" rowHeight="40"
+ emphasis="primary" change="dataGridChange(event.target as DataGrid, output1)"
+ dataProvider="{productModel.productList}">
+ <j:columns>
+ <j:DataGridColumn label="Images" dataField="image" columnWidth="45" itemRenderer="itemRenderers.ImageListItemRenderer"/>
+ <j:DataGridColumn label="Title" dataField="title" columnWidth="120" />
+ <j:DataGridColumn label="Sales" dataField="sales" columnWidth="50" />
+ </j:columns>
+ </j:DataGrid>
</j:Card>
</j:GridCell>
</j:Grid>
@@ -86,17 +98,6 @@ limitations under the License.
<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.
*/
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ImageListItemRenderer.mxml b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ImageListItemRenderer.mxml
new file mode 100644
index 0000000..f2e3786
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ImageListItemRenderer.mxml
@@ -0,0 +1,44 @@
+<?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.
+
+-->
+<j:ListItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns="http://www.w3.org/1999/xhtml">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.Product;
+
+ [Bindable("dataChange")]
+ public function get product():Product
+ {
+ return data as Product;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding/>
+ </j:beads>
+
+ <j:Image src="{ product ? product.image : '' }"/>
+
+</j:ListItemRenderer>
+
diff --git a/examples/royale/TourDeJewel/src/main/royale/vos/Product.as b/examples/royale/TourDeJewel/src/main/royale/vos/Product.as
index 106c86c..3a26fb0 100644
--- a/examples/royale/TourDeJewel/src/main/royale/vos/Product.as
+++ b/examples/royale/TourDeJewel/src/main/royale/vos/Product.as
@@ -17,6 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
package vos {
+
+ [Bindable]
public class Product
{
private var _id:String;