Add feature to spark combobox to allow better binding - data-binding

Question

What I try todo...
I am trying to implement a more advanced dropDownList component. I added a new property selectedValue which can basically take any value. At the moment the component only tries to match the selectedValue with "id" of dataprovider items. When i debug the sample it looks fine, the selectedIndex gets set based on selectedValue.
Problem...
The selectedItem does not show up in dropDownList after startUp, it only appears if i click the dropdown button. Means it is selected but not represented in view.
After application startup...
click to see image
When i click the arrow button on custom component...
click to see image
And here is the code...
MAIN.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="ch.fa.ed.ui.components.*"
width="100%" height="100%" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _dpList : ArrayCollection;
public function get dpList() : ArrayCollection {
if (_dpList == null) {
_dpList = new ArrayCollection();
// create items
var person1 : Object = new Object();
person1.id = 10;
person1.name = "Bush";
var person2 : Object = new Object();
person2.id = 12;
person2.name = "Obama";
var person3 : Object = new Object();
person3.id = 30;
person3.name = "Clinton";
_dpList.addItem(person1);
_dpList.addItem(person2);
_dpList.addItem(person3);
}
return _dpList;
}
public function set dpList(dpList : ArrayCollection) : void {
_dpList = dpList;
}
]]>
</fx:Script>
<s:VGroup>
<s:DropDownList id="ddList" dataProvider="{dpList}" labelField="name" selectedIndex="2"/>
<components:EdDropDownList id="ddList2" dataProvider="{dpList}" labelField="name" selectedValue="30"/>
</s:VGroup>
</s:Group>
EdDrowDownList.as
package ch.fa.ed.ui.components {
import mx.collections.IList;
import spark.components.DropDownList;
/**
* #author Michael Wittwer <michael.wittwer#falution.ch>
* #date 20.09.2012
*/
public class EdDropDownList extends DropDownList {
/* ******************************************************************************************************
* fields *
****************************************************************************************************** */
private var _selectedValue : *;
/* ******************************************************************************************************
* member variables *
****************************************************************************************************** */
private var selectedValueChanged : Boolean;
private var dataProviderChanged : Boolean;
public function EdDropDownList() {
super();
}
/*
* overriding the commitProperties method to make sure the selectedValue field gets represented in ui
*/
override protected function commitProperties() : void {
super.commitProperties();
if (selectedValueChanged && dataProviderChanged) {
// find the item mathing selectedValue and set index
if (selectedValue != null && dataProvider != null) {
for (var i : int = 0; i < dataProvider.length; i++) {
var item : * = dataProvider.getItemAt(i);
if (item.id == selectedValue) {
selectedIndex = i;
break;
}
}
}
dataProviderChanged = false;
selectedValueChanged = false;
}
if (selectedValueChanged) {
selectedValueChanged = false;
// find the item mathing selectedValue and set index
if (selectedValue != null && dataProvider != null) {
for (var i : int = 0; i < dataProvider.length; i++) {
var item : * = dataProvider.getItemAt(i);
if (item.id == selectedValue) {
selectedIndex = i;
break;
}
}
}
}
if (dataProviderChanged) {
dataProviderChanged = false;
// find the item mathing selectedValue and set index
if (selectedValue != null && dataProvider != null) {
for (var i : int = 0; i < dataProvider.length; i++) {
var item : * = dataProvider.getItemAt(i);
if (item.id == selectedValue) {
selectedIndex = i;
break;
}
}
}
}
}
/* ******************************************************************************************************
* getter and setter methods *
****************************************************************************************************** */
[Bindable]
public function get selectedValue() : * {
return _selectedValue;
}
public function set selectedValue(selectedValue : *) : void {
_selectedValue = selectedValue;
selectedValueChanged = true;
invalidateProperties();
}
[Bindable]
override public function set dataProvider(value : IList) : void {
super.dataProvider = value;
dataProviderChanged = true;
invalidateProperties();
}
}
Any ideas how to fix this?

Answer 1

The finally solution is pretty easy. Just put the super.commitProperties(); at the end of the overriding commitProperties() method.
It makes absolutely sence. Because we are manipulating a property (selectedIndex) in our own commitProperties() which was already handled in the super method. So the updates on selectedIndex will not be visible until commitProperties() gets called for the next time.
so commitProperties() looks like this for a working component:
override protected function commitProperties() : void {
if (selectedValueChanged && dataProviderChanged) {
// find the item mathing selectedValue and set index
updateSelectedIndex();
dataProviderChanged = false;
selectedValueChanged = false;
}
if (selectedValueChanged) {
selectedValueChanged = false;
// find the item mathing selectedValue and set index
updateSelectedIndex();
}
if (dataProviderChanged) {
dataProviderChanged = false;
// find the item mathing selectedValue and set index
updateSelectedIndex();
}
super.commitProperties();
}
private function updateSelectedIndex() : void {
if (selectedValue != null && dataProvider != null) {
for (var i : int = 0; i < dataProvider.length; i++) {
var item : * = dataProvider.getItemAt(i);
if (item.id == selectedValue) {
selectedIndex = i;
break;
}
}
}
}
Hope this helps.

Answer 2

The <s:ComboBox> has several bugs including issues which affect binding (as noted in the topic above) and custom text entry. As a work-around, there is an ActionScript, Flex, spark only combo box which fixes many of these issues, it is available as open source.