Wednesday, January 12, 2011

Search through XML database using AS3: Part 5

In today's tutorial we will keep displaying everything we have in our datagrid even after search, but highlight those rows, that match the search criteria.

Try it out:


I am going to use the same cellRenderer class that I used in my "AS3 DataGrid component: Part 8" tutorial. If you have no idea what CellRenderer is, you should read the DataGrid tutorial series.

So, we have the colorCellRenderer.as class (from AS3 DataGrid component: Part 8), a CellRenderer_upSkin2 movieclip with red background of the cell (from AS3 DataGrid component: Part 8), and the code of the database search feature from (from Search through XML database using AS3: Part 4).

To enable the highlighting feature, I first add rowcolor parameter to the allUserbase array:

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, rowcolor:"white"});
}

and then I add the RowColor parameter to the myGrid array in the updateList function:

for (var i:int = 0; i<currentUserbase.length; i++)
{
myGrid.addItem({First: currentUserbase[i].firstname, Last: currentUserbase[i].secondname, Age: currentUserbase[i].age, Sex: currentUserbase[i].sex, Job: currentUserbase[i].job, RowColor: currentUserbase[i].rowcolor});
}

Now, the search() function.

for (var n:int = 0; n<allUserbase.length; n++)
{
currentUserbase.push(allUserbase[n]);
if ((pattern_firstname.test(allUserbase[n].firstname) || search_firstname.text=="") && (pattern_secondname.test(allUserbase[n].secondname) || search_secondname.text=="") && (allUserbase[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any") && (allUserbase[n].age == search_age.text || search_age.text=="") && (pattern_job.test(allUserbase[n].job) || search_job.text==""))
{
currentUserbase[currentUserbase.length - 1].rowcolor = "red";
}
else
{
currentUserbase[currentUserbase.length - 1].rowcolor = "white";
}
}

As you can see, I display all the items, whether it matches the search criteria or not. However, if it does match - then i set its rowcolor to red, if it doesn't - to white.

And that's it!

Here's the full code:

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

var col_fname:DataGridColumn = new DataGridColumn("First");
myGrid.addColumn(col_fname);

var col_lname:DataGridColumn = new DataGridColumn("Last");
myGrid.addColumn(col_lname);

var col_age:DataGridColumn = new DataGridColumn("Age");
myGrid.addColumn(col_age);
col_age.sortOptions = Array.NUMERIC;
col_age.width = 35;

var col_sex:DataGridColumn = new DataGridColumn("Sex");
myGrid.addColumn(col_sex);
col_sex.width = 50;

var col_job:DataGridColumn = new DataGridColumn("Job");
myGrid.addColumn(col_job);

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, rowcolor:"white"});
}
currentUserbase = allUserbase.concat();
updateList();
}

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

for (var i:int = 0; i<currentUserbase.length; i++)
{
myGrid.addItem({First: currentUserbase[i].firstname, Last: currentUserbase[i].secondname, Age: currentUserbase[i].age, Sex: currentUserbase[i].sex, Job: currentUserbase[i].job, RowColor: currentUserbase[i].rowcolor});
}
}

// 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 ";

var pattern_firstname:RegExp;
var pattern_secondname:RegExp;
var pattern_job:RegExp;

bt_search.addEventListener(MouseEvent.CLICK, search);

function search(MouseEvent):void
{
currentUserbase = [];

pattern_firstname = new RegExp(search_firstname.text);
pattern_secondname = new RegExp(search_secondname.text);
pattern_job = new RegExp(search_job.text);

for (var n:int = 0; n<allUserbase.length; n++)
{
currentUserbase.push(allUserbase[n]);
if ((pattern_firstname.test(allUserbase[n].firstname) || search_firstname.text=="") && (pattern_secondname.test(allUserbase[n].secondname) || search_secondname.text=="") && (allUserbase[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any") && (allUserbase[n].age == search_age.text || search_age.text=="") && (pattern_job.test(allUserbase[n].job) || search_job.text==""))
{
currentUserbase[currentUserbase.length - 1].rowcolor = "red";
}
else
{
currentUserbase[currentUserbase.length - 1].rowcolor = "white";
}
}
updateList();
}

myGrid.setStyle("cellRenderer", colorCellRenderer);

Thanks for reading!

Related:

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

4 comments:

Anonymous said...

Nice Tutorial. May I ask some questions?
1. Can I access my XML database in LocalHost?
2. Is this secure(no one can change or access the XML database in server)?

Thanks..
Love this tutorial from Part 1.

Kirill Poletaev said...

1. Yes.
2. Anyone with a direct link to the XML can read it with their browser. Only a person with special rights can modify, remove, create any files on the server, including the XML database.

A Flash file can only read the XML file if it is in the same domain as the XML file.

CoDo said...

How can I let the datagrid render text as HTML so I can use special characters, like é (= é) and ë (= ë)

CoDo said...

Oh, and this is exactly the problem.
It should show ë as HTMl format ampersand+euml;

Post a Comment