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/27 13:41:52 UTC
[royale-asjs] branch develop updated: jewel-datagrid: updates to
size and scrolling and more examples in TDJ, but still some cases uncovered
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 0bc42bc jewel-datagrid: updates to size and scrolling and more examples in TDJ, but still some cases uncovered
0bc42bc is described below
commit 0bc42bcb9889289647337d1c1cd3f66b0f1dd1bb
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Dec 27 14:41:40 2019 +0100
jewel-datagrid: updates to size and scrolling and more examples in TDJ, but still some cases uncovered
---
.../src/main/royale/DataGridPlayGround.mxml | 84 ++++++++++++++++++----
.../royale/itemRenderers/IconItemRenderer.mxml | 59 +++++++++++++++
.../projects/Jewel/src/main/resources/defaults.css | 21 ++++--
.../royale/jewel/beads/layouts/DataGridLayout.as | 7 +-
.../royale/jewel/beads/views/DataGridView.as | 12 +++-
.../Jewel/src/main/sass/components/_datagrid.sass | 33 +++++++--
6 files changed, 189 insertions(+), 27 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index e8e4ef5..89c98c9 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -26,11 +26,20 @@ limitations under the License.
<fx:Script>
<![CDATA[
+ import models.ListsModel;
import models.ProductModel;
- private function dataGridChange(grid:DataGrid, output:Label) : void
+ import vos.IconListVO;
+ import vos.Product;
+
+ private function dataGridProductChange(grid:DataGrid, output:Label) : void
+ {
+ output.text = "Clicked on row " + grid.selectedIndex + " (Title: " + (grid.selectedItem as Product).title + ")";
+ }
+
+ private function dataGridIconListChange(grid:DataGrid, output:Label) : void
{
- output.text = "Clicked on row " + grid.selectedIndex;
+ output.text = "Clicked on row " + grid.selectedIndex + " (Label: " + (grid.selectedItem as IconListVO).label + ")";
}
private function refreshGrid(grid:DataGrid):void
@@ -38,6 +47,9 @@ limitations under the License.
grid.dataProvider = null;
grid.dataProvider = (productModel as ProductModel).productList;
}
+
+ [Bindable]
+ public var listModel:ListsModel = new ListsModel();
]]>
</fx:Script>
@@ -54,10 +66,10 @@ limitations under the License.
<j:Card>
<html:H3 text="Jewel DataGrid"/>
- <j:Label text="Basic configuration, width = 100%, no column widths"/>
+ <j:Label text="Basic configuration, default width, no column widths, no rowHeight"/>
- <j:DataGrid localId="datagrid" width="100%" height="100%"
- change="dataGridChange(event.target as DataGrid, datagrid_lb)">
+ <j:DataGrid localId="datagrid"
+ change="dataGridProductChange(event.target as DataGrid, datagrid_lb)">
<j:beads>
<js:ConstantBinding
sourceID="productModel"
@@ -72,19 +84,18 @@ limitations under the License.
</j:columns>
</j:DataGrid>
- <j:Label id="datagrid_lb" text="DagaGrid selection will be shown here"/>
- <!-- <j:Button text="Refresh Grid" click="refreshGrid(datagrid)" emphasis="primary"/> -->
+ <j:Label id="datagrid_lb" text="DataGrid selection will be shown here"/>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DataGrid"/>
- <j:Label text="Using specific column widths"/>
+ <j:Label text="Using specific column widths, rowHeight=54 and height=220"/>
- <j:DataGrid localId="datagrid2" width="100%" height="100%"
- rowHeight="40" emphasis="primary"
- change="dataGridChange(event.target as DataGrid, datagrid2_lb)"
+ <j:DataGrid localId="datagrid2" height="205"
+ rowHeight="54" emphasis="primary"
+ change="dataGridProductChange(event.target as DataGrid, datagrid2_lb)"
dataProvider="{productModel.productList}">
<j:columns>
<j:DataGridColumn label="Images" dataField="image" columnWidth="90"
@@ -94,10 +105,59 @@ limitations under the License.
</j:columns>
</j:DataGrid>
- <j:Label id="datagrid2_lb" text="DagaGrid selection will be shown here"/>
+ <j:Label id="datagrid2_lb" text="DataGrid selection will be shown here"/>
<j:Button text="Refresh Grid" click="refreshGrid(datagrid2)" emphasis="primary"/>
</j:Card>
</j:GridCell>
</j:Grid>
+ <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:Label text="Basic configuration, width = 100%, no column widths, rowHeight=42"/>
+
+ <j:DataGrid width="100%" emphasis="secondary" rowHeight="42"
+ change="dataGridIconListChange(event.target as DataGrid, datagrid3_lb)">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconDetailListData"
+ destinationPropertyName="dataProvider"/>
+ </j:beads>
+ <j:columns>
+ <j:DataGridColumn label="Label" dataField="label"
+ itemRenderer="itemRenderers.IconItemRenderer"/>
+ <j:DataGridColumn label="Icon" dataField="icon"/>
+ <j:DataGridColumn label="Set" dataField="componentSet"/>
+ </j:columns>
+ </j:DataGrid>
+
+ <j:Label id="datagrid3_lb" text="DataGrid selection will be shown here"/>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DataGrid"/>
+
+ <j:Label text="Using specific column widths, rowHeight=40"/>
+
+ <j:DataGrid height="246"
+ rowHeight="40" emphasis="emphasized"
+ change="dataGridIconListChange(event.target as DataGrid, datagrid4_lb)"
+ dataProvider="{listModel.iconListData}">
+ <j:columns>
+ <j:DataGridColumn label="Icon" dataField="icon" columnWidth="90"
+ itemRenderer="itemRenderers.IconItemRenderer"/>
+ <j:DataGridColumn label="Label" dataField="label" columnWidth="200" />
+ </j:columns>
+ </j:DataGrid>
+
+ <j:Label id="datagrid4_lb" text="DataGrid selection will be shown here"/>
+ <j:Button text="Refresh Grid" click="refreshGrid(datagrid2)" emphasis="primary"/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/IconItemRenderer.mxml b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/IconItemRenderer.mxml
new file mode 100644
index 0000000..ec8afed
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/IconItemRenderer.mxml
@@ -0,0 +1,59 @@
+<?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 org.apache.royale.collections.ArrayList;
+
+ import vos.IconListVO;
+
+ [Bindable("dataChange")]
+ public function get iconList():IconListVO
+ {
+ return data as IconListVO;
+ }
+
+ public function clickCloseButton():void
+ {
+ // var view:ListView = this.itemRendererParent as ListView;
+ // if (view) {
+ // var host:List = view.host as List;
+ // if (host) {
+ // (host.dataProvider as ArrayList).removeItemAt(index);
+ // }
+ // }
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+
+ <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
+ visible="{iconList ? iconList.icon != null : false}"
+ click="clickCloseButton()"/>
+
+</j:ListItemRenderer>
+
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 84bb535..f510348 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -493,8 +493,10 @@ j|ComboBoxPopUp {
}
.jewel.datagrid {
- width: 200px;
- height: 290px;
+ width: 220px;
+ height: 220px;
+ display: flex;
+ position: relative;
}
.jewel.datagrid .jewel.buttonbar.header {
width: 100%;
@@ -506,19 +508,26 @@ j|ComboBoxPopUp {
border-bottom-right-radius: 0;
}
.jewel.datagrid .listarea {
- width: 100%;
+ width: auto;
+ position: absolute;
+ border-top-width: 0px;
+ border-left-width: 0px;
+ border-right-width: 0px;
+ border-bottom-width: 1px;
+ border-bottom-left-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
+ border-style: solid;
+ border-color: #b3b3b3;
}
.jewel.datagrid .jewel.list.column {
border-radius: 0px;
- border-top-width: 0px;
+ border-bottom-width: 0px;
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
}
.jewel.datagrid .jewel.list.column.first {
- border-right: 0px;
border-bottom-left-radius: 0.25rem;
}
.jewel.datagrid .jewel.list.column.last {
- border-left: 0px;
border-bottom-right-radius: 0.25rem;
}
.jewel.datagrid .jewel.list.column .jewel.item {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as
index bec60ca..572cbf5 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as
@@ -139,9 +139,12 @@ package org.apache.royale.jewel.beads.layouts
bbmodel.buttonWidths = columnWidths;
if(pixelflag)
{
- // bbmodel.widthType = ButtonBarModel.PIXEL_WIDTHS;
bblayout.widthType = ButtonBarModel.PIXEL_WIDTHS;
- // bblayout.layout();
+ COMPILE::JS
+ {
+ uiHost.positioner.style.width = "auto";
+ listArea.positioner.style.width = null;
+ }
}
header.dispatchEvent(new Event("layoutNeeded"));
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
index 10e8056..d006b26 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
@@ -29,6 +29,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.core.IParent;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
@@ -40,7 +41,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.jewel.supportClasses.datagrid.DataGridButtonBar;
import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn;
import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumnList;
- import org.apache.royale.core.UIBase;
+ import org.apache.royale.html.beads.models.ButtonBarModel;
/**
* The DataGridView class is the visual bead for the org.apache.royale.jewel.DataGrid.
@@ -107,6 +108,7 @@ package org.apache.royale.jewel.beads.views
_header.dataProvider = new ArrayList(_sharedModel.columns);
_header.emphasis = (_dg as IEmphasis).emphasis;
_header.labelField = "label";
+ _header.height = 38;
var headerLayoutClass:Class = ValuesManager.valuesImpl.getValue(host, "headerLayoutClass") as Class;
var bblayout:ButtonBarLayout = new headerLayoutClass() as ButtonBarLayout;
_header.addBead(bblayout as IBead);
@@ -117,6 +119,13 @@ package org.apache.royale.jewel.beads.views
// columns
var listAreaClass:Class = ValuesManager.valuesImpl.getValue(host, "listAreaClass") as Class;
_listArea = new listAreaClass() as IUIBase;
+ //_listArea.emphasis = (_dg as IEmphasis).emphasis;
+ _listArea.height = _dg.height - _header.height;
+ COMPILE::JS
+ {
+ (_listArea as UIBase).element.style.top = _header.height + "px";
+ }
+
_dg.strandChildren.addElement(_listArea as IChild);
if (_sharedModel.columns)
@@ -289,6 +298,7 @@ package org.apache.royale.jewel.beads.views
list.addEventListener('selectionChanged', handleColumnListChange);
list.addBead(presentationModel as IBead);
+ (_listArea as UIBase).percentWidth = 100;
(_listArea as IParent).addElement(list as IChild);
_lists.push(list);
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
index f3215d2..560d60a 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
@@ -22,11 +22,16 @@ $border-radius: .25rem
// DataGrid variables
.jewel.datagrid
- width: 200px
- height: 290px
+ width: 220px
+ height: 220px
+ display: flex
+ position: relative
+ // overflow: hidden
+ // border: 1px solid red
.jewel.buttonbar.header
width: 100%
+ // height: 38px // button
.jewel.button
&.first
@@ -36,18 +41,34 @@ $border-radius: .25rem
border-bottom-right-radius: 0
.listarea
- width: 100%
+ width: auto
+ //top: 38px
+ //height: dg.height-header-height
+ position: absolute
+ border-top-width: 0px
+ border-left-width: 0px
+ border-right-width: 0px
+ border-bottom-width: 1px
+ border-bottom-left-radius: $border-radius
+ border-bottom-right-radius: $border-radius
+ border-style: solid
+ border-color: #b3b3b3
.jewel.list.column
border-radius: 0px
- border-top-width: 0px
+ // border-top-width: 0px
+ border-bottom-width: 0px
box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.25)
&.first
- border-right: 0px
+ // border-left: 0px
+ // border-right: 0px
border-bottom-left-radius: $border-radius
+ &.middle
+
&.last
- border-left: 0px
+ // border-left: 0px
+ // border-right: 0px
border-bottom-right-radius: $border-radius
.jewel.item