I found the cause of my problem.
if I try to bind model.assets.cartIcon to the icon property of a button,
like this:
<mx:Button id="purchase" icon="{model.assets.cartIcon}"/>
I get a binding warning for that property and all other properties that are
use in data binding. For example:
<mx:State name="compare">
<mx:SetStyle target="{prodName}" name="left" value="3"/>
<mx:SetStyle target="{prodName}" name="horizontalCenter"/>
<mx:SetProperty target="{prodName}" name="width"/>
<mx:SetStyle target="{prodName}" name="right" value="3"/>
</mx:State>
in this case data binding to prodName won't work, and when you change state
nothing happens.
I discover that using this.model.assets.cartIcon and this.prodName get rid
of the warning and that data binding was working again.
But now I had a different problem, when using the design view in flexbuilder
I wont be able to see the changes on different states, because apparently
flexbuilder doesn't understand that this.prodName refers to prodName on the
page an doesn't update the view.
Finally I discover that replacing:
<mx:Button id="purchase" icon="{model.assets.cartIcon}"/>
with
<mx:Button id="purchase" icon="{getButtonIcon('purchase')}"/>
public function getButtonIcon(btn:String) : Class
{
var model : StoreModelLocator = StoreModelLocator.getInstance();
var result : Class;
switch ( btn ) {
case "purchase":
result = model.assets.cartIcon;
break;
case "compare":
result = model.assets.compareIcon;
break;
case "details":
result = model.assets.detailsIcon;
break;
}
return result;
}
solved all the problems, the reason is not clear to me, but at least now is
working properly.
