Flex Chronicles#11: Nesting Tags For Attributes

I’m not a big fan of doing ActionScript inline within tags and/or within attributes. However, it does make data binding to properties extremely simple. Example, if you want to show a city & state based on a result from a webservice that takes a zipcode, you can do:

<mx:Label id="cityState_lbl" text="{ws.result}" />

Extremely simple binding. I’d personally rather do this in code because I’m an MXML purist, but you cannot deny the power of it.

What I just learned today was that sometimes naturally your data binding results from web services can be long making your MXML unreadable since you have a long object property name list in your MXML attribute tag.

I’ve always wondered why the dataProvider tag starts with a lowercase “d”, for example like the ComboBox:

<mx:ComboBox id="SoftwareSelection">
 <mx:dataProvider>

      <mx:Array>

         <mx:String>Macromedia Flex</mx:String>

         <mx:String>Macromedia Dreamweaver</mx:String>

         <mx:String>Macromedia ColdFusion</mx:String>

         <mx:String>Macromedia Flash</mx:String>

      </mx:Array>

   </mx:dataProvider>
</mx:ComboBox></pre>

That always threw me off, but today I learned why.

You can nest ANY attribute of a Component/Class/Tag in Flex. So, for the above, if your webservice result is obnoxiously long, you can instead nest it for readability:

<mx:Label id="cityState_lbl">

   <mx:text>

      {yourLongWebServiceName.result.nestedPropName}

   </mx:text>

</mx:Label>

Wow… that’s awesome! Thanks David George for that pimp technique.