How to build a contact manager in AIR using XML

by Pedro Furtado 14

Hello from Dreaming in flash’s team

We’ve been invited by Carlos to make some tutorials on what we know best, Flash and Flex.

This will be the first part of our first tutorial: How to build a contact manager in AIR using XML.

For the first part of this tutorial we’ll be reading, parsing and searching an XML into an AIR application and going through the whole getting it to compile and exporting a release version. So first things first, you’ll need Flex 3 SDK, or Flex 3 IDE, that you can get for free over at Adobe, or the 30 day trial if you go for the builder.

After you’ve installed it we’re good to go. Open Flex, and create a new Flex Project. Select the Desktop Application option and we’re all set to start coding.

First we must start by adding an initialize handler to our application so that we know when we can start working.

<mx:WindowedApplication xmlns:mx="" initialize="{init()}" layout="absolute" viewSourceURL="srcview/index.html" height="451">
<!-- // -->
import mx.collections.XMLListCollection;

Then we create our variables and initiate them, set an Event handler to handle the loading of the XML File, and start the loading process.

private var myXml:XML;
private var myLoader:URLLoader;
private var myContactsCol:XMLListCollection;

The handler is simple, it casts the received data to an XML Object and initializes the XMLListCollection to our full data. (More on why we use a XmlListCollection on part 2)

public function init():void
var myReq:URLRequest = new URLRequest('data.xml');
myLoader = new URLLoader()
myLoader.addEventListener(Event.COMPLETE, dataComplete);

Now here’s where the ‘magic’ happens the search and updating of our datagrid.

private function dataComplete(e:Event):void
myXml = new XML(;
myContactsCol = new XMLListCollection(;
myDg.dataProvider = myContactsCol;

I know this line might look scary but it really isn’t, it’s simple E4X at work, what we do is to get an XMLList out of our xml where the name node of each contact node matches our expression, in this case any name that contains our search string. And then we refresh the visual part of the datagrid.

private function updateList():void
myContactsCol = new XMLListCollection( != -1 ))
myDg.dataProvider = myContactsCol;

Now for the MXML part of our application, it’s simple enough we drag our datagrid to our workspace, name it and set the names for it’s columns, note the dataField property this related directly to the name of the XML Nodes.

<mx:DataGrid bottom="60" top="10" left="10" id="myDg">
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Telphone" dataField="telephone"/>
<mx:DataGridColumn headerText="Email" dataField="email"/>
<mx:Label x="10" text="Search:" bottom="10"/>
<mx:TextInput x="65" id="search_txt" bottom="10"/>

And finally we just set the click handler for the GO! button to update our search results.

<mx:Button x="233" label="Go!" id="go_btn" click="{updateList()}" bottom="10"/>

Now in order to publish the application we need to create a certificate (or use an existing one), this can be easily done by using create new certificate option, which will create an unsigned certificate, or by getting one from Twathe or Verisign.

After that you just save your certificate, select it and hit finish!

We now have a fully working Air application.

In part 2 we’ll go through Editing and saving the file, how to set up our bindings so that both the Xml, and the results are updated automatically, go through the data types that we use and how to use an auto-updating library for your application.

Download the support files

Comments (14)

  1. Great tutorial! I always wonder how to build an AIR App easily. And you just show me :D.

  2. Hi, this is a nice tutorial. And i want to develop an air application that can be used as cash manager for shop. In which i can enter daily earnings and then it will show the total money earned that day and store all of them and show grand total of the month. And also present data in a line graph.

    Please Help!
    Waiting for your reply…

  3. Thanks for the tutorial. Working on an air app for quick check out too.

  4. Hi,

    This is very useful website for beginners and expert both ..

  5. Great tutorial. I’m looking to develop an application for sending newsletters. Any idea on a tutorial?

    This was a great start though


  6. Wouldn’t it be better to use creationComplete for loading the xml , so the app doesn’t hang up ?

  7. myContactsCol = new XMLListCollection(;

    shows error

  8. What about the other post on this?

  9. Thanks a lot, just starting to get into Flex development and this tutorial was outstanding, clear and easy to read. I am going to utilize this starting point to make an app to handle media in the library here at my work.

  10. Thanks a lot, a very good tutorial to start learn to dynamically populate datagrid.

  11. Thank you. It helped me to build my first AIR application ever. 😉

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>