Friday, December 31, 2010

Search through XML database using AS3: Part 1

In this tutorial series, we will create an application that will allow us search through an XML database.

In this first tutorial, we'll just set everything up:


First of all, the XML file (userbase.xml):

<userbase>
<user id="1" firstname="John" secondname="McCallister" sex="Male" age="26" job="Driver" />
<user id="2" firstname="Adam" secondname="Jackson" sex="Male" age="25" job="Shop assistant" />
<user id="3" firstname="Mary" secondname="McCallister" sex="Female" age="24" job="Manager" />
<user id="4" firstname="John" secondname="Anderson" sex="Male" age="25" job="Pilot" />
<user id="5" firstname="Eddie" secondname="Parker" sex="Male" age="27" job="Driver" />
<user id="6" firstname="Richard" secondname="Jackson" sex="Male" age="23" job="Manager" />
<user id="7" firstname="Sarah" secondname="Anderson" sex="Female" age="25" job="Operator" />
<user id="8" firstname="Justin" secondname="Jackson" sex="Male" age="20" job="Operator" />
<user id="9" firstname="Mary" secondname="Thompson" sex="Female" age="26" job="Shop assistant" />
</userbase>

As you can see, there are 5 parameters for each user - first name, second name, sex, age and job.

Now, put a list component on the stage. Call it userList. Make sure its wide enough to display all these 5 parameters. Create 5 buttons that will manage sorting the users by these 5 parameters, label them "First name", "Last name", "Sex", "Age" and "Job", and give them instance names of "s_firstname", "s_secondname", "s_sex", "s_age" and "s_job".

Now, the code:

import fl.data.DataProvider;

var allUserbase:Array = [];// contains all users like in xml
var currentUserbase:Array = [];// contains users that need to be displayed

var _loader:URLLoader = new URLLoader();
var _data:XML = new XML();

_loader.addEventListener(Event.COMPLETE, readXML);
_loader.load(new URLRequest("userbase.xml"));

function readXML(event:Event):void
{
_data = new XML(event.target.data);
for each (var usr in _data.user)
{
allUserbase.push({id: usr.@id, firstname: usr.@firstname, secondname: usr.@secondname, sex: usr.@sex, age: usr.@age, job: usr.@job});
}
currentUserbase = allUserbase.concat();
updateList();
}

function updateList():void
{
userList.dataProvider = new DataProvider ();

for (var i:int = 0; i<currentUserbase.length; i++)
{
userList.addItem({label:currentUserbase[i].firstname + "  " + currentUserbase[i].secondname + "       " + currentUserbase[i].sex + "        " + currentUserbase[i].age + "       " + currentUserbase[i].job, data: currentUserbase[i].id});
}
}

// sorting buttons:

s_firstname.addEventListener(MouseEvent.CLICK, sortFirstname);
s_secondname.addEventListener(MouseEvent.CLICK, sortSecondname);
s_sex.addEventListener(MouseEvent.CLICK, sortSex);
s_age.addEventListener(MouseEvent.CLICK, sortAge);
s_job.addEventListener(MouseEvent.CLICK, sortJob);

function sortFirstname(MouseEvent):void{
currentUserbase.sortOn("firstname");
updateList();
}
function sortSecondname(MouseEvent):void{
currentUserbase.sortOn("secondname");
updateList();
}
function sortSex(MouseEvent):void{
currentUserbase.sortOn("sex");
updateList();
}
function sortAge(MouseEvent):void{
currentUserbase.sortOn("age");
updateList();
}
function sortJob(MouseEvent):void{
currentUserbase.sortOn("job");
updateList();
}

As you can see, we have 2 main arrays we operate with. The first one, allUserbase, is the one that contains all the data from the XML database as it is in the XML. Basically, it's the database already loaded into an Array.

The second array, currentUserbase, is the array of elements that will be displayed in the list, because, not necessarily all users want to be displayed. For example, later, when we will implement the search feature, we will want to display all people whose name is John, and the array will only contain users with the name John.

When currentUserbase is constructed (according to the search results later, right now it equals allUserbase) we start building the list using the updateList(); function.

The sorting is commenced on the currentUserbase, for it is the only array that we will be changing in any way we want - allUserbase will never be changed once the data is loaded.

Next time we will implement the search feature.

Thanks for reading! Happy new year!

Related:

Search through XML database using AS3: Part 2
Search through XML database using AS3: Part 3
Search through XML database using AS3: Part 4
Search through XML database using AS3: Part 5
Search through XML database using AS3: Part 6

1 comment:

yasir said...

Excellent Tutorials

Post a Comment