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 <[email protected]> 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
