royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gregd...@apache.org
Subject [royale-asjs] 01/03: Updates to Jewel DropDowns / DropDown examples
Date Wed, 07 Nov 2018 09:09:21 GMT
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.dove@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;
-            }
+           /* }*/
         }
     }
 }


Mime
View raw message