Chad 2010-08-14

I'm now getting into the latest version of Flex, that is, Flex 4. There are a lot of new features comparing to Flex 3, all of which are very handy to developers.

In Flash Builder 4, when I tried to create a MXML component and instantiate it in the main MXML application, I found that the "Outline" explorer is not displaying the correct tree view anymore, instead it displayed excalmatory marks for each of the components' icon:


And when I switched to the design view in the MXML editor, it failed to render the preview and showed an error message "The default property contents must be contiguous":


However, when I compiled and run the application, everything looked OK. I think this was just an error for the Flash Builder 4 failing to parse and render the outline and preview. The code which was generating such error looks like this:

Code - MXMLPlain Text
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
  5.                xmlns:components="components.*">  
  6.     <fx:Declarations>  
  7.         <!-- Place non-visual elements (e.g., services, value objects) here -->  
  8.     </fx:Declarations>  
  9.       
  10.     <s:layout>  
  11.         <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>  
  12.     </s:layout>  
  13.       
  14.     <!-- shorthand MXML bindings -->  
  15.     <s:TextInput id="sourceText" text="some value"/>  
  16.     <s:Label text="{sourceText.text}"/>  
  17.           
  18.     <!-- two-way bindings -->  
  19.     <s:TextInput id="input1" text="@{input2.text}"/>  
  20.     <s:TextInput id="input2"/>  
  21.       
  22.       
  23.     <!-- Using <fx:Binding> -->  
  24.     <s:TextInput id="sourceText2" text="some value 2"/>  
  25.     <s:Label id="destinationText"/>  
  26.     <fx:Binding source="sourceText2.text" destination="destinationText.text"/>  
  27.       
  28.     <!-- Instantiate a MXML component -->  
  29.     <components:MyComponent id="comp1"/>  
  30. </s:Application>  


As the error message said, the visual componets (default property contents) must  be contiguous. So I tried to move the "fx:Binding" tag to just behind the "fx:Declaration" tag, then the error went away.

Code - XML/HTMLPlain Text
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
  5.                xmlns:components="components.*">  
  6.     <fx:Declarations>  
  7.         <!-- Place non-visual elements (e.g., services, value objects) here -->  
  8.     </fx:Declarations>  
  9.     <fx:Binding source="sourceText2.text" destination="destinationText.text"/>  
  10.       
  11.     <s:layout>  
  12.         <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>  
  13.     </s:layout>  
  14.       
  15.     <!-- shorthand MXML bindings -->  
  16.     <s:TextInput id="sourceText" text="some value"/>  
  17.     <s:Label text="{sourceText.text}"/>  
  18.           
  19.     <!-- two-way bindings -->  
  20.     <s:TextInput id="input1" text="@{input2.text}"/>  
  21.     <s:TextInput id="input2"/>  
  22.           
  23.     <!-- Using <fx:Binding> -->  
  24.     <s:TextInput id="sourceText2" text="some value 2"/>  
  25.     <s:Label id="destinationText"/>  
  26.       
  27.     <!-- Instantiate a MXML component -->  
  28.     <components:MyComponent id="comp1"/>  
  29. </s:Application>  




Note that the "s:layout" from the spark library is also a non-visual component, so it can't be placed between any of the visual components neither, otherwise the same error would occur.