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


Did you enjoy this article?
Share the love
Get free updates and win TTL prizes

Other Posts You Might Like

14 Responses to “How to build a contact manager in AIR using XML”

  1. it gossips says:

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

  2. Adnan says:

    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. server racks says:

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

  4. Surendra Gurjar says:

    Hi,

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

  5. Sokina Bobo says:

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

    This was a great start though

    Cheers

  6. Nidal says:

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

  7. Deepak says:

    myContactsCol = new XMLListCollection(myXml..contact);

    shows error

  8. My Site says:

    What about the other post on this?

  9. Elke Hinze says:

    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. AbuBashar says:

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

  11. james g says:

    great tutorial i

  12. Almas says:

    Thank you. It helped me to build my first AIR application ever. ;)

Leave a Reply

TTL VIP
Become a TTL VIP Member & Get Notified of The Best Changes in Technology, Plus Win Prizes in Our VIP Only Contests...

Tech News Tech Tutorials Smartphone News Tablet News Gaming News Free Software Infographics Contact