Flex 3 Binding problem - apache-flex

Question

I have a custom ActionScript class:
package EntityClasses
{
import mx.collections.ArrayCollection;
[RemoteClass(alias="tkatva.tt.entities.CompanyInfo")]
[Bindable]
public class CompanyInfo
{
public var companyInfoId:int;
public var companyName:String;
public var streetAddress:String;
public var postNumber:String;
public var city:String;
public var country:String;
public var email:String;
public var businessIdentityCode:String;
public var intBic:String;
public var homepageUrl:String;
public var lastUpdatedBy:String;
public var lastUpdateDate:Date;
public var version:int;
public var settingGroupList:ArrayCollection;
public var bankAccountList:ArrayCollection;
public var personList:ArrayCollection;
}
}
And I want to bind these values to textBoxes, so that when user types information to the textBoxes it is populated in the class too. Is Flex 3 bidirectional so that marking the class with [Bindable] I can bind the values to a textbox for example?
This is my mxml file in which I try to bind the class:
import mx.rpc.events.ResultEvent;
import EntityClasses.CompanyInfo;
[Bindable]
public var company:CompanyInfo;
public var uuid:String;
private function init():void {
company = new CompanyInfo();
}
private function getCompanyInfo():void {
try {
company = TtRo.getCompanyInfo(uuid);
} catch (Exception) {
}
}
private function handleClick():void {
this.txtInfo.text = "COMPANY:" + company.companyName;
TtRo.addCompanyInfo(company,uuid);
}
private function handleAdding(e:ResultEvent):void {
var res:Boolean;
res = e.result as Boolean;
if (res) {
this.txtInfo.text = "OK";
} else {
this.txtInfo.text = "NOTOK";
}
}
]]>
</mx:Script>
<mx:TextInput x="194" y="10" id="txtCname" text="{company.companyName}"/>
<mx:TextInput x="194" y="40" id="txtStreet" text="{company.streetAddress}"/>
<mx:TextInput x="194" y="70" id="txtPostnumber" text="{company.postNumber}"/>
<mx:TextInput x="194" y="100" id="txtCity" text="{company.city}"/>
<mx:TextInput x="194" y="130" id="txtCountry" text="{company.country}"/>
<mx:TextInput x="194" y="160" id="txtEmail" text="{company.email}"/>
<mx:TextInput x="194" y="190" id="txtBic" text="{company.businessIdentityCode}"/>
<mx:TextInput x="194" y="220" id="txtIntBic" text="{company.intBic}"/>
<mx:TextInput x="194" y="250" id="txtUrl" text="{company.homepageUrl}"/>
Whats wrong with this? The flex compiler shows me this kind of warnings: Data binding will not be able to detect assignments to "company".
Im new to Flex and any help would be appriciated... Thanks...

Answer 1

No, Flex data binding is not bidirectional. You have to explicitly bind the text property of text fields back to the corresponding properties of the company object using BindingUtils.bindProperty()
private function init():void
{
company = new CompanyInfo();
BindingUtils.bindProperty(company, "companyName", this ["txtCname", "text"]);
}

Answer 2

If you're using it in MXML components it might be more readable if you add the reverse binding in one place using the mx:Bindable tag
eg.
<mx:Binding destination="company.companyName" source="txtCname.text" />
<mx:Binding destination="company.streetAddress" source="txtStreet.text" />
...
etc.

Answer 3

Flex 3 Cookbook has a lot of recipes for this sort of work in chapter 11.9 & ch 14

Answer 4

You need to mark the variables themselves as bindable:
[Bindable]public var companyInfoId:int;
Welcome to Flex data binding, its lovely :)