Monday, June 27, 2011

XML in Flex: Part 1 - The fx:Model tag

Today we will start learning about using XML data in flex, specifically we will learn about fx:Model.

In Flex, we can include the XML model in the mxml file itself, or load it from an external file. Regardless of where the data is loaded from, there are 2 ways of working with it after it has been loaded - we can turn the data into a fx:Model data model, which is a tree of objects, or we could work directly with the XML using E4X.

In this tutorial we will learn about working with embedded fx:Model data.This is an Actionscript object which contains a tree of objects in a hierarchy, with no type information. This type of data model is recommended to be used only for the simplest cases.

To create a data model, we need to use the fx:Declarations tags. The declarations tags contain non-visible objects (data) that we will be able to use in our code. Put the fx:Model tags inside the declaration tags, and give the model an id. Write your data model into the Model tags.

Example:

<fx:Declarations>
<fx:Model id="myProduct">

  <product>
    <name>Table</name>
    <description>Something to put stuff on</description>
    <price>$70</price>
  </product>

</fx:Model>
</fx:Declarations>

Remember that this model object is a hierarchy of objects. We can display the data by using data binding, for example:

<s:VGroup>
<s:Label text="{myProduct.name}" />
</s:VGroup>

This will display "Table".

Now let's write this data in a separate file. If you are using FlashDeveloper, you can create a new XML file this way: find the 'src' folder in the right project side of the screen, thats the folder where Main.mxml is located. Right click on it, Add > New XML File...

Call it something you like. I'll name my file product.xml. Write your data there, mine looks like this:

<?xml version="1.0" encoding="utf-8" ?>
  <product>
    <name>Table</name>
    <description>Something to put stuff on</description>
    <price>$70</price>
  </product>

Now in the Main.mxml file, delete the data from the Model tags and set its source to the path to this file:

<fx:Declarations>
<fx:Model id="myProduct" source="product.xml">
</fx:Model>
</fx:Declarations>

The code works just the same.

<b>IMPORTANT:</b> We do NOT load the data on the go, we are in fact embedding the data into the final flex file, even if we use the source property. That is because all the compiler does is get the content of that file, then pastes it in the place where you would write the model data in the mxml file, which results in the data being embedded into the final file.

It is possible to load external files, though. We will learn how to do that in future tutorials.

But first, here's something else to note. A child tag of fx:Model is considered null if it is empty. For example, <name></name> will be considered null. If you want it to be an empty string instead of null, use the binding { } brackets like this: <name>{""}</name>.

Thanks for reading!

Related:

XML in Flex: Part 2 - The fx:XML 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