You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by gr...@apache.org on 2020/08/10 04:59:39 UTC
[royale-asjs] 02/02: more Jewel Datagrid tuning,
with updated example in TdJ
This is an automated email from the ASF dual-hosted git repository.
gregdove pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 6ce5070fb27a5181cfa7779377a500dd7c2fa32c
Author: greg-dove <gr...@gmail.com>
AuthorDate: Mon Aug 10 16:57:51 2020 +1200
more Jewel Datagrid tuning, with updated example in TdJ
---
.../src/main/royale/DataGridPlayGround.mxml | 102 +++++++++++++--------
.../jewel/beads/layouts/DataGridColumnLayout.as | 8 +-
.../royale/jewel/beads/layouts/DataGridLayout.as | 15 ++-
.../royale/jewel/beads/views/DataGridView.as | 1 +
.../supportClasses/datagrid/DataGridColumnWidth.as | 13 ++-
.../org/apache/royale/utils/observeElementSize.as | 24 ++---
6 files changed, 99 insertions(+), 64 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index 9b71602..fff0d9e 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -148,6 +148,18 @@ limitations under the License.
// {
// this.dgFixedWidth.width = 500;
// }
+
+ private function changeExplicitWidth(event:Event):void{
+ this.dgFixedWidth.width = this.dgFixedWidth.width == 500 ? 240 : 500;
+ }
+
+ private function changeDataprovider(event:Event):void{
+ if (this.dgFixedWidth.dataProvider && this.dgFixedWidth.dataProvider.length){
+ this.dgFixedWidth.dataProvider = null;
+ } else {
+ this.dgFixedWidth.dataProvider = listModel.iconDetailListData;
+ }
+ }
]]>
</fx:Script>
@@ -406,7 +418,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<j:CardHeader>
- <html:H3 text="Width 100% adn no columnWidth" className="primary-normal"/>
+ <html:H3 text="Width 100% and no columnWidth" className="primary-normal"/>
</j:CardHeader>
<j:CardPrimaryContent>
@@ -489,51 +501,61 @@ 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="width = 100%, no column widths, rowHeight=42 and emphasis='secondary', middle column has center alignment, last column has columnWidth=40. Clicking on row icon, remove the entire row."
- multiline="true"/>
+ <j:CardHeader>
+ <html:H3 text="Mixed column width variations #1" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Label text="width = 100%, no column widths, rowHeight=42 and emphasis='secondary', middle column has center alignment, last column has columnWidth=75. Clicking on row icon, remove the entire row."
+ multiline="true"/>
- <j:DataGrid width="100%" height="240" emphasis="secondary" rowHeight="42">
- <j:beads>
- <js:ConstantBinding
- sourceID="listModel"
- sourcePropertyName="iconDetailListData"
- destinationPropertyName="dataProvider"/>
- </j:beads>
- <j:columns>
- <j:DataGridColumn label="Icon"
- itemRenderer="itemRenderers.IconDataGridItemRenderer"/>
- <j:DataGridColumn label="Label" dataField="label" align="center"/>
- <j:DataGridColumn label="Is Jewel?" columnWidth="40"
- itemRenderer="itemRenderers.CheckBoxDataGridItemRenderer"/>
- </j:columns>
- </j:DataGrid>
+ <j:DataGrid width="100%" height="240" emphasis="secondary" rowHeight="42">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconDetailListData"
+ destinationPropertyName="dataProvider"/>
+ </j:beads>
+ <j:columns>
+ <j:DataGridColumn label="Icon"
+ itemRenderer="itemRenderers.IconDataGridItemRenderer"/>
+ <j:DataGridColumn label="Label" dataField="label" align="center"/>
+ <j:DataGridColumn label="Is Jewel?" columnWidth="75"
+ itemRenderer="itemRenderers.CheckBoxDataGridItemRenderer"/>
+ </j:columns>
+ </j:DataGrid>
+ </j:CardPrimaryContent>
</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="Setup fixed size of DataGrid to 500px after initComplete. Last column has columnWidth=40."
- multiline="true"/>
+ <j:CardHeader>
+ <html:H3 text="Mixed column width variations #2" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Label text="Toggle fixed size of DataGrid between 240px and 500px via button. Last column has columnWidth=75. Toggle dataprovider between null and test data set via button"
+ multiline="true"/>
- <j:DataGrid localId="dgFixedWidth" height="240" emphasis="secondary" rowHeight="42">
- <j:beads>
- <js:ConstantBinding
- sourceID="listModel"
- sourcePropertyName="iconDetailListData"
- destinationPropertyName="dataProvider"/>
-
- </j:beads>
- <j:columns>
- <j:DataGridColumn label="Icon"
- itemRenderer="itemRenderers.IconDataGridItemRenderer"/>
- <j:DataGridColumn label="Label" dataField="label" align="center"/>
- <j:DataGridColumn label="Is Jewel?" columnWidth="40"
- itemRenderer="itemRenderers.CheckBoxDataGridItemRenderer"/>
- </j:columns>
- </j:DataGrid>
+ <j:DataGrid localId="dgFixedWidth" height="240" emphasis="secondary" rowHeight="42">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconDetailListData"
+ destinationPropertyName="dataProvider"/>
+
+ </j:beads>
+ <j:columns>
+ <j:DataGridColumn label="Icon"
+ itemRenderer="itemRenderers.IconDataGridItemRenderer"/>
+ <j:DataGridColumn label="Label" dataField="label" align="center"/>
+ <j:DataGridColumn label="Is Jewel?" columnWidth="75"
+ itemRenderer="itemRenderers.CheckBoxDataGridItemRenderer"/>
+ </j:columns>
+ </j:DataGrid>
+ </j:CardPrimaryContent>
+ <j:CardActions>
+ <j:Button text="Change Explicit Width" click="changeExplicitWidth(event)" emphasis="primary"/>
+ <j:Button text="Cycle Dataprovider" click="changeDataprovider(event)" emphasis="primary"/>
+ </j:CardActions>
</j:Card>
</j:GridCell>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridColumnLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridColumnLayout.as
index d24cf94..f1e1bd5 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridColumnLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridColumnLayout.as
@@ -114,11 +114,11 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS {
var LA_Element:HTMLElement = listArea.element;
var latestHOffset:Number = LA_Element.offsetWidth - LA_Element.clientWidth;
-
- if (latestHOffset != _vScrollerHOffset || event.type == 'headerLayoutReset') {
+ var reset:Boolean = event.type == 'headerLayoutReset';
+ if (latestHOffset != _vScrollerHOffset || reset) {
_vScrollerHOffset = latestHOffset;
_vScrollChange = true;
- layout();
+ if (!reset) layout();
}
}
@@ -170,7 +170,7 @@ package org.apache.royale.jewel.beads.layouts
}
}
COMPILE::JS{
- if (last && _vScrollChange) {
+ if (last && (_vScrollChange || _vScrollerHOffset)) {
lastWidthConfig.applyRightOffset(last, _vScrollerHOffset);
_vScrollChange = false;
}
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 6f65bd9..5648141 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
@@ -74,6 +74,7 @@ package org.apache.royale.jewel.beads.layouts
_strand = value;
(_strand as IEventDispatcher).addEventListener("layoutNeeded", handleLayoutNeeded);
(_strand as IEventDispatcher).addEventListener("sizeChanged", sizeChangedNeeded);
+ (_strand as IEventDispatcher).addEventListener("widthChanged", sizeChangedNeeded);
}
/**
@@ -87,10 +88,20 @@ package org.apache.royale.jewel.beads.layouts
/**
* sizeChangedNeeded
*
- * @param event
+ * @param event
+ *
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ * @royaleignorecoercion org.apache.royale.html.beads.IDataGridView
+ * @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
*/
private function sizeChangedNeeded(event:Event):void
{
+
+ var view:IDataGridView = datagrid.view as IDataGridView
+ var header:IUIBase = view.header;
+ var bbmodel:ButtonBarModel = header.getBeadByType(ButtonBarModel) as ButtonBarModel;
+ bbmodel.buttonWidths = null;
+ header.dispatchEvent(new Event('headerLayoutReset'));
layout();
}
@@ -185,7 +196,7 @@ package org.apache.royale.jewel.beads.layouts
if (defaultColumnWidth.value) defaultColumnWidth.widthType = DataGridColumnWidth.EXPLICIT_PERCENT;
} else if (datagrid.explicitWidth){
defaultColumnWidth.value = ((100 - explicitPercents)/100 * datagrid.width - explicitWidths) / denominatorInst.value;
- if (defaultColumnWidth.value) defaultColumnWidth.widthType = DataGridColumnWidth.EXPLICIT_PIXELS;
+ if (defaultColumnWidth.value) defaultColumnWidth.widthType = DataGridColumnWidth.DEFAULT;
}
// special case when no width is set at all, defaultColumnWidth will be 0
if (defaultColumnWidth.value == 0 && isDGWidthSizedToContent) {
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 88bfd9c..a86dfd7 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
@@ -152,6 +152,7 @@ import org.apache.royale.jewel.beads.models.ListPresentationModel;
_header.element.scrollLeft = _listArea.element.scrollLeft;
if (!event) {
_header.dispatchEvent(new Event("headerLayoutReset"));
+ _header.dispatchEvent(new Event("layoutNeeded"));
}
}
/**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnWidth.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnWidth.as
index 8821dce..2914586 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnWidth.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnWidth.as
@@ -104,10 +104,17 @@ package org.apache.royale.jewel.supportClasses.datagrid {
targetElement.style['maxWidth'] = _value +'px';
content.width = _value;
} else if (isDefault()) {
- targetElement.style['flex'] = '';
- targetElement.style['minWidth'] = '';
- targetElement.style['maxWidth'] = '';
content.width = NaN;
+ if (_value) {
+ targetElement.style['flex'] = '0 1 ' + _value +'px';
+ targetElement.style['minWidth'] = '';
+ targetElement.style['maxWidth'] = '';
+ } else {
+ targetElement.style['flex'] = '';
+ targetElement.style['minWidth'] = '';
+ targetElement.style['maxWidth'] = '';
+ }
+
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/utils/observeElementSize.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/utils/observeElementSize.as
index 7e6ce77..54ab5e1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/utils/observeElementSize.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/utils/observeElementSize.as
@@ -41,12 +41,12 @@ package org.apache.royale.utils{
} else {
isNative = false;
var callbacks:Array ;
- if (timerFunc == null) {
+ if (observeElementSize['t'] == null) {
if (stop) return false;
callbacks = [];
referenceMap.set(observeElementSize, callbacks);
- checkFunc = function(el:HTMLElement ,callback:Function):void{
+ observeElementSize['c'] = function(el:HTMLElement ,callback:Function):void{
var checks:Object;
var change:Boolean;
if (referenceMap.has(el)) {
@@ -80,7 +80,7 @@ package org.apache.royale.utils{
} catch(e:Error){}
}
}
- timerFunc = function():void{
+ observeElementSize['t'] = function():void{
var l:uint = callbacks.length;
for (var i:uint = 0; i<l;i++) {
var cb:Function = callbacks[i]
@@ -88,12 +88,12 @@ package org.apache.royale.utils{
if (els) {
var l2:uint = els.length;
for (var ii:uint = 0; ii<l2;ii++) {
- checkFunc(els[ii], cb);
+ observeElementSize['c'](els[ii], cb);
}
}
}
}
- timerFunc['interval'] = setInterval(timerFunc, 50);
+ observeElementSize['t']['interval'] = setInterval(observeElementSize['t'], 50);
} else {
callbacks = referenceMap.get(observeElementSize);
}
@@ -107,11 +107,11 @@ package org.apache.royale.utils{
}
if (callbacks.length == 0) {
referenceMap = new WeakMap();
- if (timerFunc) {
- clearInterval(timerFunc['interval']);
- timerFunc = null;
+ if (observeElementSize['t']) {
+ clearInterval(observeElementSize['t']['interval']);
+ observeElementSize['t'] = null;
}
- checkFunc = null;
+ observeElementSize['c'] = null;
}
}
@@ -134,9 +134,3 @@ package org.apache.royale.utils{
COMPILE::JS
var referenceMap:WeakMap = new WeakMap();
-
-COMPILE::JS
-var timerFunc:Function;
-
-COMPILE::JS
-var checkFunc:Function;
\ No newline at end of file