How to build a contact manager in AIR using XML

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="http://www.adobe.com/2006/mxml" initialize="{init()}" layout="absolute" viewSourceURL="srcview/index.html" height="451">
<!-- // -->
<mx:Script>
<![CDATA[
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);
myLoader.load(myReq);
}

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

private function dataComplete(e:Event):void
{
myXml = new XML(myLoader.data.toString());
myContactsCol = new XMLListCollection(myXml..contact);
myDg.dataProvider = myContactsCol;
myDg.invalidateList()
}

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(myXml..contact.(name.toLowerCase().indexOf(search_txt.text.toLowerCase()) != -1 ))
myDg.dataProvider = myContactsCol;
myDg.invalidateList()
}
]]>
</mx:Script>

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:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Telphone" dataField="telephone"/>
<mx:DataGridColumn headerText="Email" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<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"/>
</mx:WindowedApplication>

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