Tuesday, June 28, 2011

XML in Flex: Part 2 - The fx:XML tag

In the previous tutorial we've learned about embedding XML data using the fx:Model tags.

The fx:Model is a data model which holds data as a hierarchy of objects. However, it is pretty basic, it doesn't have value types, so it should be used for smaller, simpler things. The fx:XML tags are used to store XML data that we can interact with using E4X.

Just like fx:Model, fx:XML tags need to be included in the declarations of the flex application. Just like with the model, we can set the id of the node and then later refer to it using data binding.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100" height="85"gt;
   
<fx:Declarations>
<fx:XML id="myProducts">

<catalog>
  <product>
    <name>Chair</name>
    <description>Something to sit on</description>
    <price>$50</price>
  </product>
  <product>
    <name>Sofa</name>
    <description>Something soft to sit on</description>
    <price>$100</price>
  </product>
  <product>
    <name>Table</name>
    <description>Something to put stuff on</description>
    <price>$70</price>
  </product>
</catalog>

</fx:XML>
</fx:Declarations>
   
<s:Label text="{myProducts.product[0].name}" />

</s:Application>

If you test this code, the label object will display "Chair".

We can also have the whole XML model in an external file, products.xml.

<?xml version="1.0" encoding="utf-8" ?>
<catalog>
  <product>
    <name>Chair</name>
    <description>Something to sit on</description>
    <price>$50</price>
  </product>
  <product>
    <name>Sofa</name>
    <description>Something soft to sit on</description>
    <price>$100</price>
  </product>
  <product>
    <name>Table</name>
    <description>Something to put stuff on</description>
    <price>$70</price>
  </product>
</catalog>

And then just provide the path to this file in the 'source' property of the XML node:

<fx:Declarations>
<fx:XML id="myProducts" source="products.xml">
</fx:XML>
</fx:Declarations>

Once again, the XML data will still be embedded into the final flex application.

The fx:XML tags have a property called 'format', which is set to 'e4x' by default. You can also set the type to xml, which will result in the data being transformed into an XMLNode AS3 object. If you choose that, you will need to refer to the nodes and values of the XML model differently. Reference can be found here.

So, what format to use? E4X or XMLNode? Unless you really need to use XMLNode, you should use E4X. The Adobe reference itself states that the XMLNode class is only present for backward compatibility.

That's all for now.

Thanks for reading!

Related:

XML in Flex: Part 1 - The fx:Model tag
XML in Flex: Part 3 - Loading XML at runtime
XML in Flex: Part 4 - Using the XML loaded at runtime
XML in Flex: Part 5 - Using XMLListCollection

No comments:

Post a Comment