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 b667b2c7ef3d642a2bd6691c04bcd9a03edff958 Author: greg-dove <greg.d...@gmail.com> AuthorDate: Wed Nov 7 19:48:48 2018 +1300 Updates to Jewel DropDowns / DropDown examples --- .../src/main/royale/DropDownListPlayGround.mxml | 65 +++++++++++------- .../royale/org/apache/royale/jewel/DropDownList.as | 57 ++++++++++++--- .../royale/jewel/beads/models/DropDownListModel.as | 80 ++++++++++++++++------ .../jewel/beads/models/IDropDownListModel.as | 3 + .../royale/jewel/beads/views/DropDownListView.as | 40 +++++++---- 5 files changed, 175 insertions(+), 70 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml index 152939c..e9192a3 100644 --- a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml @@ -22,40 +22,53 @@ limitations under the License. xmlns:js="library://ns.apache.org/royale/basic" xmlns:html="library://ns.apache.org/royale/html" xmlns:models="models.*"> - + <fx:Script> <![CDATA[ import vos.IconListVO; + + private function translateItem(item:Object):String{ + if (item === null) { + return '[Nothing Selected]' + } else { + if (item is String) { + return 'String value: \''+ item +'\''; + } else { + if (item is IconListVO) { + return 'Object\'s label field: \'' + IconListVO(item).label + '\''; + } + } + } + return 'Object : ' + item; + } + private function watchmenDropDownListHandler_noPrompt(event:Event):void { - watchmenDropDownListResult_noPrompt.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem; + watchmenDropDownListResult_noPrompt.html = "<strong>DropDownList selectedItem:</strong> " + translateItem(event.target.selectedItem); } - + private function avengersDropDownListHandler_noPrompt(event:Event):void { - if(event.target.selectedItem != null) - avengersDropDownListResult_noPrompt.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem.label; + avengersDropDownListResult_noPrompt.html = "<strong>DropDownList selectedItem:</strong> " +translateItem(event.target.selectedItem); } private function watchmenDropDownListHandler(event:Event):void { - watchmenDropDownListResult.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem; + watchmenDropDownListResult.html = "<strong>DropDownList selectedItem:</strong> " + translateItem(event.target.selectedItem); } - + private function avengersDropDownListHandler(event:Event):void { - avengersDropDownListResult.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem.label; + avengersDropDownListResult.html = "<strong>DropDownList selectedItem:</strong> " + translateItem(event.target.selectedItem); } private function watchmenDropDownListHandler_withSelectedIndex(event:Event):void { - watchmenDropDownListResult_withSelectedIndex.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem; + watchmenDropDownListResult_withSelectedIndex.html = "<strong>DropDownList selectedItem:</strong> " + translateItem(event.target.selectedItem); } - + private function avengersDropDownListHandler_withSelectedIndex(event:Event):void { - if(event.target.selectedItem != null) - avengersDropDownListResult_withSelectedIndex.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem.label; + avengersDropDownListResult_withSelectedIndex.html = "<strong>DropDownList selectedItem:</strong> " + translateItem(event.target.selectedItem); } - + private function avengersDropDownListHandler_withSelectedItem(event:Event):void { - if(event.target.selectedItem != null) - avengersDropDownListResult_withSelectedItem.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem.label; + avengersDropDownListResult_withSelectedItem.html = "<strong>DropDownList selectedItem:</strong> " + translateItem(event.target.selectedItem); } ]]> </fx:Script> @@ -67,7 +80,7 @@ limitations under the License. <j:model> <models:ListsModel id="listModel"/> </j:model> - + <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight"> <j:GridCell desktopNumerator="1" desktopDenominator="1" @@ -75,7 +88,7 @@ limitations under the License. phoneNumerator="1" phoneDenominator="1"> <j:Card> <html:H3 text="Jewel DropDownList (String Collection)"/> - + <j:Grid gap="true" itemsVerticalAlign="itemsCentered"> <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" @@ -109,7 +122,7 @@ limitations under the License. phoneNumerator="1" phoneDenominator="1"> <j:Card> <html:H3 text="Jewel DropDownList (Object Collection)"/> - + <j:Grid gap="true" itemsVerticalAlign="itemsCentered"> <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" @@ -141,7 +154,7 @@ limitations under the License. phoneNumerator="1" phoneDenominator="1"> <j:Card> <html:H3 text="Jewel DropDownList (String Collection) with Prompt"/> - + <j:Grid gap="true" itemsVerticalAlign="itemsCentered"> <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" @@ -179,7 +192,7 @@ limitations under the License. phoneNumerator="1" phoneDenominator="1"> <j:Card> <html:H3 text="Jewel DropDownList (Object Collection) with Prompt"/> - + <j:Grid gap="true" itemsVerticalAlign="itemsCentered"> <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" @@ -216,7 +229,7 @@ limitations under the License. phoneNumerator="1" phoneDenominator="1"> <j:Card> <html:H3 text="Jewel DropDownList (String Collection) with SelectedIndex: {watchmenDropDownList_withSelectedIndex.selectedIndex}"/> - + <j:Grid gap="true" itemsVerticalAlign="itemsCentered"> <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" @@ -254,7 +267,7 @@ limitations under the License. phoneNumerator="1" phoneDenominator="1"> <j:Card> <html:H3 text="Jewel DropDownList (Object Collection) with SelectedIndex: {avengersDropDownList_withSelectedIndex.selectedIndex}"/> - + <j:Grid gap="true" itemsVerticalAlign="itemsCentered"> <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" @@ -291,16 +304,16 @@ limitations under the License. phoneNumerator="1" phoneDenominator="1"> <j:Card> <html:H3 text="Jewel DropDownList (Object Collection) with SelectedItem"/> - + <j:Grid gap="true" itemsVerticalAlign="itemsCentered"> <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290"> - <j:DropDownList id="avengersDropDownList_withSelectedItem" + <j:DropDownList id="avengersDropDownList_withSelectedItem" labelField="label" - dataProvider="{listModel.avengers}" - selectedItem="{listModel.avengers.getItemAt(4)}" + dataProvider="{listModel.avengers}" + selectedItem="{listModel.avengers.getItemAt(4)}" change="avengersDropDownListHandler_withSelectedItem(event)"> <j:beads> <j:DropDownListTextPrompt prompt="Select Avengers..."/> diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as index 09d023d..393edd1 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as @@ -22,8 +22,11 @@ package org.apache.royale.jewel import org.apache.royale.core.IDataProviderModel; import org.apache.royale.core.DataContainerBase; import org.apache.royale.core.IListPresentationModel; + import org.apache.royale.jewel.beads.models.IDropDownListModel; import org.apache.royale.jewel.beads.models.ListPresentationModel; import org.apache.royale.html.elements.Select; + import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.events.Event; COMPILE::JS { @@ -80,6 +83,7 @@ package org.apache.royale.jewel { super(); typeNames = "jewel dropdownlist"; + addEventListener('initComplete', setupModelChangeListener); } protected var _dropDown:Select; @@ -161,7 +165,7 @@ package org.apache.royale.jewel // } // // The value could be undefined if data binding is used and the variable is not initialized. // if(!value)return; - + // var lf:String = labelField; // n = value.length; // for (i = 0; i < n; i++) { @@ -180,7 +184,7 @@ package org.apache.royale.jewel /** * The index of the currently selected item. Changing this value * also changes the selectedItem property. - * + * * @copy org.apache.royale.core.ISelectionModel#selectedIndex * * @langversion 3.0 @@ -198,13 +202,18 @@ package org.apache.royale.jewel * @private * @royaleignorecoercion HTMLSelectElement * @royaleignorecoercion org.apache.royale.core.ISelectionModel + * @royaleignorecoercion org.apache.royale.jewel.beads.models.IDropDownListModel */ public function set selectedIndex(value:int):void { ISelectionModel(model).selectedIndex = value; COMPILE::JS { - (element as HTMLSelectElement).selectedIndex = ISelectionModel(model).selectedIndex + 1; + value = ISelectionModel(model).selectedIndex; + if (model is IDropDownListModel) { + value += IDropDownListModel(model).offset; + } + (element as HTMLSelectElement).selectedIndex = value; } } @@ -212,7 +221,7 @@ package org.apache.royale.jewel /** * The item currently selected. Changing this value also * changes the selectedIndex property. - * + * * @copy org.apache.royale.core.ISelectionModel#selectedItem * * @langversion 3.0 @@ -230,13 +239,15 @@ package org.apache.royale.jewel * @private * @royaleignorecoercion HTMLSelectElement * @royaleignorecoercion org.apache.royale.core.ISelectionModel + * @royaleignorecoercion org.apache.royale.core.ISelectionModel */ public function set selectedItem(value:Object):void { ISelectionModel(model).selectedItem = value; COMPILE::JS { - (element as HTMLSelectElement).selectedIndex = ISelectionModel(model).selectedIndex + 1; + const offset:int = model is IDropDownListModel ? IDropDownListModel(model).offset : 0; + (element as HTMLSelectElement).selectedIndex = ISelectionModel(model).selectedIndex + offset; } } @@ -258,7 +269,7 @@ package org.apache.royale.jewel } return presModel; } - + /** * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement @@ -269,21 +280,49 @@ package org.apache.royale.jewel { addElementToWrapper(this, 'select'); (element as HTMLSelectElement).size = 1; - + goog.events.listen(element, 'change', changeHandler); - + positioner = element; return element; } /** + * @royaleignorecoercion org.apache.royale.events.IEventDispatcher; + */ + private function setupModelChangeListener(event:Event):void{ + removeEventListener('initComplete', setupModelChangeListener); + IEventDispatcher(model).addEventListener('change', modelChangeDispatcher); + } + + private var respondingToProgrammaticChange:Boolean; + + private function modelChangeDispatcher(event:Event):void{ + //handles re-dispatching for programmatic changes + respondingToProgrammaticChange = true; + dispatchEvent(new Event("change")); + respondingToProgrammaticChange = false; + } + + /** * @royaleignorecoercion HTMLSelectElement */ COMPILE::JS protected function changeHandler(event:Event):void { + if (respondingToProgrammaticChange) return; var index:int = (element as HTMLSelectElement).selectedIndex; - model.selectedIndex = (index == 0) ? -1 : index; + + var ddModel:IDropDownListModel = model as IDropDownListModel; + if (ddModel) { + index -= ddModel.offset; + ddModel.processingInteractiveChange = true; + } + + model.selectedIndex = index; + + if (ddModel) + ddModel.processingInteractiveChange = false; } } } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DropDownListModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DropDownListModel.as index f2204a3..f247bf0 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DropDownListModel.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DropDownListModel.as @@ -37,7 +37,17 @@ package org.apache.royale.jewel.beads.models super(); } - private var offset:int = 1; + + private var _offset:int = 1; + public function get offset():int{ + return _offset; + } + + private var _processingInteractiveChange:Boolean = false; + public function set processingInteractiveChange(value:Boolean):void{ + _processingInteractiveChange = value; + } + private var _dataProvider:IArrayList; @@ -63,12 +73,30 @@ package org.apache.royale.jewel.beads.models if (value == _dataProvider) return; _dataProvider = value as IArrayList; - if(!_dataProvider || _selectedIndex >= _dataProvider.length + offset) + var itemChanged:Boolean; + const oldIndex:int = _selectedIndex; + if (_dataProvider) { + if (_selectedItem) { + _selectedIndex = _dataProvider.getItemIndex(_selectedItem); + + if (_selectedIndex == -1) { + _selectedItem = null; + itemChanged = true; + } + } else { + _selectedIndex = -1; + } + } else { + itemChanged = _selectedItem != null; + _selectedItem = null; _selectedIndex = -1; - - _selectedItem = _selectedIndex == -1 ? null : _dataProvider.getItemAt(_selectedIndex - offset); - - dispatchEvent(new Event("dataProviderChanged")); + } + + dispatchEvent(new Event("dataProviderChanged")); + if (itemChanged) + dispatchEvent(new Event("selectedItemChanged")); + if (oldIndex != _selectedIndex) + dispatchEvent(new Event("selectedIndexChanged")); } private var _selectedIndex:int = -1; @@ -91,11 +119,23 @@ package org.apache.royale.jewel.beads.models */ override public function set selectedIndex(value:int):void { + if (!_dataProvider) _selectedIndex = value = -1; if (value == _selectedIndex) return; - _selectedIndex = value; - _selectedItem = (value == -1 || _dataProvider == null) ? null : (value < _dataProvider.length + offset) ? _dataProvider.getItemAt(value - offset) : null; - dispatchEvent(new Event("selectedIndexChanged")); + const oldItem:Object = _selectedItem; + _selectedIndex = value < _dataProvider.length ? value : _dataProvider.length - 1; + if (_selectedIndex != -1) { + _selectedItem = _dataProvider.getItemAt(_selectedIndex); + } else { + _selectedItem = null; + } + + if ( oldItem != _selectedItem) + dispatchEvent(new Event("selectedItemChanged")); + dispatchEvent(new Event("selectedIndexChanged")); + if (!_processingInteractiveChange) { + dispatchEvent(new Event("change")); + } } private var _selectedItem:Object; @@ -119,19 +159,17 @@ package org.apache.royale.jewel.beads.models override public function set selectedItem(value:Object):void { if (value == _selectedItem) return; + _selectedItem = value; + if (_dataProvider) { + const indexChanged:Boolean = _selectedIndex != (_selectedIndex = _dataProvider.getItemIndex(value)); - _selectedItem = value; - var n:int = _dataProvider.length; - for (var i:int = 0; i < n; i++) - { - if (_dataProvider.getItemAt(i) == value) - { - _selectedIndex = i; - break; - } - } - dispatchEvent(new Event("selectedItemChanged")); - dispatchEvent(new Event("selectedIndexChanged")); + dispatchEvent(new Event("selectedItemChanged")); + if (indexChanged) + dispatchEvent(new Event("selectedIndexChanged")); + if (!_processingInteractiveChange) { + dispatchEvent(new Event("change")); + } + } } } } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/IDropDownListModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/IDropDownListModel.as index 766e9cd..dce03ef 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/IDropDownListModel.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/IDropDownListModel.as @@ -28,5 +28,8 @@ package org.apache.royale.jewel.beads.models */ public interface IDropDownListModel { + + function get offset():int; + function set processingInteractiveChange(value:Boolean):void; } } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as index 0a25b9a..36cd549 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as @@ -18,7 +18,9 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.jewel.beads.views { - COMPILE::JS +import org.apache.royale.jewel.beads.models.IDropDownListModel; + +COMPILE::JS { import org.apache.royale.html.elements.Select; } @@ -46,11 +48,11 @@ package org.apache.royale.jewel.beads.views super(); } - private var dropDownList:DropDownList; - + private var dropDownList:DropDownList; + /** * The prompt - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -77,7 +79,7 @@ package org.apache.royale.jewel.beads.views { dropDownList = value as DropDownList; dropDownList.dropDown = new Select(); - + var name:String = "dropDownList" + Math.random(); dropDownList.dropDown.element.name = name; @@ -100,7 +102,7 @@ package org.apache.royale.jewel.beads.views { model = _strand.getBeadByType(ISelectionModel) as ISelectionModel; model.addEventListener("selectedIndexChanged", selectionChangeHandler); - + super.handleInitComplete(event); } @@ -109,17 +111,27 @@ package org.apache.royale.jewel.beads.views /** * @private * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer + * @royaleignorecoercion org.apache.royale.jewel.beads.models.IDropDownListModel */ protected function selectionChangeHandler(event:Event):void { - var ir:ISelectableItemRenderer = dataGroup.getItemRendererAt(lastSelectedIndex) as ISelectableItemRenderer; + var ir:ISelectableItemRenderer; + if (lastSelectedIndex != -1) { + ir = dataGroup.getItemRendererAt(lastSelectedIndex) as ISelectableItemRenderer; + } + if(ir) ir.selected = false; - ir = dataGroup.getItemRendererAt(model.selectedIndex) as ISelectableItemRenderer; + var newIndex:int = model.selectedIndex; + if (model is IDropDownListModel) { + newIndex += IDropDownListModel(model).offset; + } + + ir = dataGroup.getItemRendererAt(newIndex) as ISelectableItemRenderer; if(ir) ir.selected = true; - lastSelectedIndex = model.selectedIndex; + lastSelectedIndex = newIndex; } override protected function itemsCreatedHandler(event:org.apache.royale.events.Event):void @@ -134,13 +146,13 @@ package org.apache.royale.jewel.beads.views private function changedSelection():void { model = dataModel as ISelectionModel; - var selectedIndex:int = dropDownList.selectedIndex; - - if (model.selectedIndex > -1 && model.dataProvider) - { + //var selectedIndex:int = dropDownList.selectedIndex; + + /* if (model.selectedIndex > -1 && model.dataProvider) + {*/ dropDownList.selectedIndex = model.selectedIndex; dropDownList.selectedItem = model.selectedItem; - } + /* }*/ } } }