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 2018/11/07 09:09:21 UTC
[royale-asjs] 01/03: Updates to Jewel DropDowns / DropDown examples
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 <gr...@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;
- }
+ /* }*/
}
}
}