Saturday, January 1, 2011

Search through XML database using AS3: Part 2

Today we'll add a strict-search feature.

Strict search means that if you, for example, enter "John" in the first name search box, the code will only look for users whose name is exactly "John" - not "john" and not "Johnny".

Try it out - search by all parameters, leave a field blank if you don't want any criteria for that field (for example, leave second name field blank if you don't care what second name does the person have).


Firstly, put 4 input textfields (search_firstname, search_secondname, search_age, search_job), one ComboBox (search_sex) and a button (bt_search) on stage.

Here's the code for the initialization - restricting necessary characters and more:

search_firstname.text = "";
search_firstname.restrict = "A-Za-z";
search_secondname.text = "";
search_secondname.restrict = "A-Za-z";
search_sex.dataProvider = new DataProvider([{label:"Any",data:"Any"},{label:"Male",data:"Male"},{label:"Female",data:"Female"}]);
search_age.text = "";
search_age.restrict = "0-9";
search_job.text = "";
search_job.restrict = "A-Za-z ";

bt_search.addEventListener(MouseEvent.CLICK, search);

I should note that because you can't leave a ComboBox empty, unlike the textfields, I made 3 options for the box - Male, Female and Any.

Now, the search function:

function search(MouseEvent):void
{
currentUserbase = [];
for (var n:int = 0; n<allUserbase.length; n++)
{
if ((allUserbase[n].firstname == search_firstname.text || search_firstname.text=="") && (allUserbase[n].secondname == search_secondname.text || search_secondname.text=="") && (allUserbase[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any") && (allUserbase[n].age == search_age.text || search_age.text=="") && (allUserbase[n].job == search_job.text || search_job.text==""))
{
currentUserbase.push(allUserbase[n]);
}
}
updateList();
}

That sure is a long line there! Let's take a closer look:

First we empty the currentUserbase array, because we will be rebuilding it from scratch. Then, we start checking whether the current user matches the set criteria (if he does - add him to the currentUserbase array), and update list.

Now let's see how the checking works. Let's take the first part of the conditional:

(allUserbase[n].firstname == search_firstname.text || search_firstname.text=="") 

There are 2 possible reasons for each search field to allow the code to add the user to the list:
1) the parameter in the allUserbase array equals the text in the search field
2) the search field is blank (equals "")

And that's exactly what we do - perform the check using the "either A or B" pattern. Because we have 5 of these parameters, and we need all of them to be true to add the user to the list, we use the "and" operator to link them together.

So the full code is:

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();
}

// Search:

search_firstname.text = "";
search_firstname.restrict = "A-Za-z";
search_secondname.text = "";
search_secondname.restrict = "A-Za-z";
search_sex.dataProvider = new DataProvider([{label:"Any",data:"Any"},{label:"Male",data:"Male"},{label:"Female",data:"Female"}]);
search_age.text = "";
search_age.restrict = "0-9";
search_job.text = "";
search_job.restrict = "A-Za-z ";

bt_search.addEventListener(MouseEvent.CLICK, search);

function search(MouseEvent):void
{
currentUserbase = [];
for (var n:int = 0; n<allUserbase.length; n++)
{
if ((allUserbase[n].firstname == search_firstname.text || search_firstname.text=="") && (allUserbase[n].secondname == search_secondname.text || search_secondname.text=="") && (allUserbase[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any") && (allUserbase[n].age == search_age.text || search_age.text=="") && (allUserbase[n].job == search_job.text || search_job.text==""))
{
currentUserbase.push(allUserbase[n]);
}
}
updateList();
}

Thanks for reading!

Related:

Search through XML database using AS3: Part 1
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:

andry said...

tutorial very good and hopefully can help me in building a web application thanks

Post a Comment