Friday, September 17, 2010

Working with XML data using AS3: Part 8

In this tutorial we will create a contact book using XML.

Here is what our final product will look like:

You are able to click a name in the list to get the information about the person, as well as sort the contacts in your book by first and last names.

What I did is load an external XML document's (contactlist.xml) data, and pass each person as an object to an Array. I create the list based on the Array data, and I can sort the Array (re-creating list, based on the new data).

Below is the full, commented code. If you have read my XML tutorials, my tut on Associative Arrays and sorting Arrays, you will understand the code with no problem.

Firstly, here is my contactlist.xml document:

  <contact firstName="James" lastName="Thompson" phoneNumber="5789862"/>
  <contact firstName="Justin" lastName="Green" phoneNumber="1876534"/>
  <contact firstName="Christie" lastName="Adams" phoneNumber="3348796"/>
  <contact firstName="Frank" lastName="Potter" phoneNumber="7589642"/>
  <contact firstName="Alex" lastName="Anderson" phoneNumber="1214597"/>
  <contact firstName="John" lastName="Long" phoneNumber="3487656"/>
  <contact firstName="Richard" lastName="Gray" phoneNumber="1578998"/>
  <contact firstName="Claire" lastName="Brown" phoneNumber="9845326"/>
  <contact firstName="Mindy" lastName="Smith" phoneNumber="3248751"/>
  <contact firstName="Kevin" lastName="Kent" phoneNumber="4758557"/>

And the commented code:


// We load our XML document
var _loader:URLLoader = new URLLoader();
var _data:XML = new XML();

_loader.addEventListener(Event.COMPLETE, readXML);

_loader.load(new URLRequest("contactlist.xml"));

function readXML(event:Event):void
_data = new XML(;
trace("XML file loaded!");

// Create an array to hold all the contacts
var allContacts:Array = [];

// Parse all the data
function parseXML(xmlData:XML):void
for each (var cont in
// Put each contact into the array as an object with 3 attributes:
// fn, ln and pn (first name, last name, phone number)
allContacts.push({fn: cont.@firstName, ln: cont.@lastName, pn: cont.@phoneNumber});
// Call an updateList function to write the list

function updateList():void
// myList - instance name of the list component on stage.
// We set its data provider to blank
myList.dataProvider = new DataProvider ();

for (var i:int = 0; i<allContacts.length; i++)
// Now we create new list items according to the array.
// We store the items number in the data attribute
myList.addItem({label: allContacts[i].fn + "     \t " + allContacts[i].ln + "\n", data: i});

// Listen to these two buttons on stage
btn_sortFirst.addEventListener(MouseEvent.CLICK, sortByFirst);
btn_sortLast.addEventListener(MouseEvent.CLICK, sortByLast);

// Sort by first name
function sortByFirst(MouseEvent):void

// Sort by last name
function sortByLast(MouseEvent):void

// Create a listener for myList. When an item is selected,
// call the showInfo function.
myList.addEventListener(Event.CHANGE, showInfo);

function showInfo(evt:Event){
// Update the outpField text field on stage.
// We access the data through the array, and we know which array
// element it is by checking the data attribute of the selected
// item in List.
outpField.text="First name: " + allContacts[].fn + "\n"
outpField.appendText("Last name: " + allContacts[].ln + "\n");
outpField.appendText("Phone: " + allContacts[].pn);

Thanks for reading!


Working with XML data using AS3: Part 1
Working with XML data using AS3: Part 2
Working with XML data using AS3: Part 3
Working with XML data using AS3: Part 4
Working with XML data using AS3: Part 5
Working with XML data using AS3: Part 6
Working with XML data using AS3: Part 7
Working with XML data using AS3: Part 9
Working with XML data using AS3: Part 10


Rene said...

This is pretty cool! How would I add and display an image to that contact list?

Kirill Poletaev said...

Store the picture's URL in the XML file's node and apply it to an UIloader.

Rene said...

I don't know if I posted this twice.

Hello Kirill,

Thank you for your reply! I don't have any trouble with adding the image URL to the XML <contact imageFile="gfx/image_01.jpg"

This is my first AS3 project and I have trouble making it work in the AS file. Could you send/post an updated AS file from your above posted code that would include an contact photo? I don't want any freebies and would be more then happy to donate and keep your blog alive for your help (it's a great blog). Thanks Rene

Kirill Poletaev said...

You did it correctly by adding the image URL to the XML that way - <contact imageFile="gfx/image_01.jpg"...

Now all you need is to retrieve this data using AS3 and add it to the array. So, instead of

allContacts.push({fn: cont.@firstName, ln: cont.@lastName, pn: cont.@phoneNumber});

you'll have something like this:

allContacts.push({fn: cont.@firstName, ln: cont.@lastName, pn: cont.@phoneNumber, pic: cont.@imageFile});

Now when we have that sorted out, it is time do display the picture. Add an UIloader component and put it somewhere near the outpField text field on your stage. You can add the UIloader by simply going to the components menu in Flash and dragging it to stage, or you can add it dynamically (using code). Give it an instance name of "myPicHolder" or something like that.

Now, in the showInfo function, you need to add a line that will update the picture every time:

myPicHolder.source = allContacts[].pic;

Note that you don't need to use the load(); function (but it doesn't give an error if you do) if you have autoLoad property of that UIloader set to true.

And it should work!

Don't hesitate to ask more questions if you still have any problems. I might make a separate tutorial for it :)

Post a Comment