Custom DataGrid with multiple row colors

CustomDatagrid.as

package com
{
import mx.controls.DataGrid;
import flash.display.Sprite;
import mx.collections.ArrayCollection;

public class Customgrid extends DataGrid
{
public var rowColorFunction:Function;

public function Customgrid()
{
super();
}
override protected function drawRowBackground(s:Sprite,  rowIndex:int,
y:Number, height:Number, color:uint, dataIndex:int):void
{
if(rowColorFunction != null && dataProvider != null)
{
var item:Object;
if(dataIndex < dataProvider.length)
{
item = dataProvider[dataIndex];
}
if(item)
{
color = rowColorFunction(item, rowIndex, dataIndex, color);
}
}

super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}
override protected function drawHorizontalLine(s:Sprite, rowIndex:int, color:uint, y:Number):void
{
super.drawHorizontalLine(s,rowIndex,0x0000ff,y);
}
}
}

In this above custom grid i have over ridden a function called drawRowBackground in which iam setting the colors to the rows of the grid through a function rowColorFunction .

Application

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:co=”com.*” creationComplete=”init()”>
<mx:Style source=”ext.css”>

</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;

private var arrCol:ArrayCollection=new ArrayCollection();
private var color1:uint=new uint();
private var back2:uint=new uint();
private var back3:uint=new uint();

private function init():void
{
for(var i:int=0;i<20;i++)
arrCol.addItem({idl:1,label:"data1"});
adg1.dataProvider=arrCol;
color1=adg1.getStyle("back1");
back2=adg1.getStyle("back2");
}
private function myfun(item:Object, rowIndex:int, dataIndex:int, color:uint):uint
{
if(rowIndex % 2)
return color1;
else if(rowIndex==4)
return back2;
else
return back3;
}

]]>
</mx:Script>
<co:Customgrid x=”156″ y=”86″ id=”adg1″ rowColorFunction=”myfun” styleName=”ColorGrid”>
<co:columns>
<mx:DataGridColumn headerText=”Column 1″ dataField=”idl”/>
<mx:DataGridColumn headerText=”Column 2″ dataField=”label”/>
</co:columns>
</co:Customgrid>

</mx:Application>

In this application i have just set the  row color for the grid through the rowcolorfunction

Note:I am setting the color from a style sheet so that u can dynamically change the colors u want.

.ColorGrid
{
back1 :#740F0F;
back2 :#ffffff;
back3 :#111111;
}

Download /View : http://www.box.net/shared/xua0f38u4n

PREDICT THE OUTPUT FOR THE CODE

void main()
{
int a=1;
printf(“%d%d%d”,a++,++a,a);
}

ur predicted output 1 3 3 is wrong,then…..

OUTPUT:
2 2 1

this is because control in printf statement travels from right to left and not from left to right
hence first ‘a’ is computed then ‘++a’ and then ‘a++’ and printed in the order u have specified
got it..

ADDING NUMBERS WITH CHARACTERS

void main()
{
char ch[10];
printf(“enter:”);
gets(ch);
printf(“\n%c”,(*ch+1));
}

output:
enter:APPLE
B
can’t understand just go through the explanation….

if u enter “APPLE” in to the array ch then (*ch+1) will first add the number
one with the first character of the array (actually the ascii value of the character) hence here
when one is added with the ascii value of ‘A’ produces the next character ‘B’ which is the output.

Custom Events

MainApplication
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”>
<mx:Script>
<![CDATA[
import event.Customevent;
private function init():void
{
this.addEventListener(Customevent.CUSTOM_EVENT,customHandler);
}
private function customHandler(e:Customevent):void
{
dat1.text=e.data1;
dat2.text=e.data2;
}
private function dispatchClick():void
{
bt.dispatchEvent(new Customevent("custom",new Object(),"iam data1","iam data2"));
}
]]>
</mx:Script>
<mx:Panel x=”131″ y=”69″ width=”250″ height=”200″ layout=”absolute”>
<mx:Text x=”83″ y=”30″ text=”Text” id=”dat1″/>
<mx:Label x=”40″ y=”30″ text=”Data1″ />
<mx:Text x=”83″ y=”56″ text=”Text” id=”dat2″/>
<mx:Label x=”40″ y=”56″ text=”Data2″/>
<mx:Button id=”bt” x=”73″ y=”100″ label=”Dispatch” click=”dispatchClick()”/>
</mx:Panel>
</mx:Application>

CustomEvent.as
package event
{
import flash.events.Event;

public class Customevent extends Event
{
public var ob:Object;
public function Customevent(type:String,passOb:Object,passData1:String,passData2:String)
{
ob=passOb;
data1=passData1;
data2=passData2;
super(type, true, false);
}
public static const CUSTOM_EVENT:String=”custom”;
public var data1:String;
public var data2:String;
}
}

In the main application when u click the dispatch button it will dispatch the customEvent which passes the customEvent Class object in to the event flow then the application which handles that event will call the handler function which populates the text with the passed data

This will be usefull when one component wants to pass data to other component after some event.

Forming Hierarchial Data

<![CDATA[
// import com.render.TreeRender;
import mx.collections.HierarchicalData;
import mx.collections.ArrayCollection;
// import com.model.SettingModel;
// import com.manager.ConnectionConstants;

import mx.controls.Alert;
private var responder:Responder;
[Bindable]
private var result:ArrayCollection=new ArrayCollection();
// public var settingModel:SettingModel=SettingModel.getInstance();
private var childPresent:Boolean=false;
private var result2:ArrayCollection=new ArrayCollection();

public function init():void
{
// getSection();
result2.addItem({section_id:23,ref_section_id:13,name:"Abotus1",children:new Array()});
result2.addItem({section_id:24,ref_section_id:23,name:"Abotus2",children:new Array()});
result2.addItem({section_id:89,ref_section_id:10,name:"Terns2",children:new Array()});
result2.addItem({section_id:19,ref_section_id:3,name:"Contact",children:new Array()});
result2.addItem({section_id:14,ref_section_id:12,name:"Businewss",children:new Array()});
result2.addItem({section_id:13,ref_section_id:12,name:"Abotus",children:new Array()});
result2.addItem({section_id:12,ref_section_id:3,name:"Corporate",children:new Array()});
result2.addItem({section_id:11,ref_section_id:20,name:"Disclaimer",children:new Array()});
result2.addItem({section_id:10,ref_section_id:20,name:"Terns",children:new Array()});
result2.addItem({section_id:9,ref_section_id:20,name:"policy",children:new Array()});
result2.addItem({section_id:8,ref_section_id:3,name:"Release",children:new Array()});
result2.addItem({section_id:21,ref_section_id:null,name:"Music",children:new Array()});
result2.addItem({section_id:22,ref_section_id:null,name:"Blog",children:new Array()});
result2.addItem({section_id:3,ref_section_id:null,name:"Music",children:new Array()});
result2.addItem({section_id:2,ref_section_id:null,name:"Home",children:new Array()});
result2.addItem({section_id:20,ref_section_id:3,name:"Policy",children:new Array()});

/* result.addItem({section_id:2,ref_section_id:null,name:"Home",children:new Array()});
result.addItem({section_id:3,ref_section_id:null,name:"ThinkMusic",children:new Array()});
result.addItem({section_id:22,ref_section_id:null,name:"Blog",children:new Array()});
result.addItem({section_id:21,ref_section_id:null,name:"Music",children:new Array()});
result.addItem({section_id:8,ref_section_id:3,name:"Press Release",children:new Array()});
result.addItem({section_id:20,ref_section_id:3,name:"Policy",children:new Array()});
result.addItem({section_id:9,ref_section_id:20,name:"Privacy policy",children:new Array()});
result.addItem({section_id:10,ref_section_id:20,name:"Terns",children:new Array()});
result.addItem({section_id:11,ref_section_id:20,name:"Disclaimer",children:new Array()});
result.addItem({section_id:12,ref_section_id:3,name:"Corporate",children:new Array()});
result.addItem({section_id:13,ref_section_id:12,name:"Abotus",children:new Array()});
result.addItem({section_id:14,ref_section_id:12,name:"Businewss",children:new Array()});
result.addItem({section_id:19,ref_section_id:3,name:"Contact",children:new Array()});*/
filter1();
// formTree();
}

public function getSection():void
{
responder=new Responder(onGetResult,onFault);
// settingModel.connManager.call(ConnectionConstants.cmsBackEndClass+"."+ConnectionConstants.getAllSectionMethod,responder);
}
private function addClick():void
{

}
public function onGetResult(e:Object):void
{
result2.removeAll();
for(var i:int=0;i<e.length;i++)
{
var arr:Array=new Array();
result2.addItem({name:e[i].name,children:arr,description:e[i].description,flag:e[i].flag,ref_section_id:e[i].ref_section_id
,section_id:e[i].section_id,sequence:e[i].sequence,type:e[i].type});
}
filter1();

//formTree();
}
public function filter1():void
{
result.removeAll();
for(var i:int=0;i<result2.length;i++)
{
if(result2[i].ref_section_id!=null)
{
if(!childPresentOrnotresult2(result2[i].section_id))
{
result.addItem(result2[i]);
result2.removeItemAt(i);
i–;
}
}
}

for(i=0;i<result2.length;i++)
{
result.addItem(result2[i]);
}
formTree();
}
public function formTree():void
{
var j:int=0;
var count:int=0;
var lastId:int=0;
var refId:int=0;
for(var i:int=0;i<result.length;i++)
{
if(result[i].ref_section_id!=null)
{
lastId=chkForChilds(result[i].section_id);
refId=getRef(lastId);
var index:int=getSectionIndex(refId);
}
else
{
continue;
}
if(index!=-1)
{
for(var z:int=0;z0)
index–;
count++;
}
}

}
}
if(count!=0)
{
i–;
count=0;
}
}
for(i=0;i<result.length;i++)
{
if(result[i].ref_section_id==null)
{
j++;
}
}
if(j!=result.length)
formTree();
// settingModel.lastSectionSeq=j;
var hr:HierarchicalData=new HierarchicalData();
hr.source=result;
settingTree.dataProvider=hr;
settingTree.validateNow();
// settingTree.expandAll();
}
public function getSectionIndex(id:int):int
{
for(var i:int=0;i<result.length;i++)
{
if(result[i].section_id==id)
{
return i;
}
}
return -1;
}
public function getRef(id:int):int
{
for(var i:int=0;i<result.length;i++)
{
if(id==result[i].section_id)
{
return result[i].ref_section_id;
}
}
return 0;
}
public function onFault():void
{
Alert.show("Fault in Section service");
}
public function chkForChilds(id:int):int
{
var inP:int=0;
childPresent=false;
for(var j:int=0;j<result.length;j++)
{
if(result[j].ref_section_id!=null)
{
if(id==result[j].ref_section_id)
{

inP=result[j].section_id;
childPresent=true;
chkForChilds(result[j].section_id);
}

}
}
if(!childPresent)
{
return id;
}
else
return inP;
}
public function childPresentOrnot(id:int):Boolean
{
for(var j:int=0;j<result.length;j++)
{
if(id==result[j].ref_section_id)
{
return true;
}
}
return false;
}
public function childPresentOrnotresult2(id:int):Boolean
{
for(var j:int=0;j<result2.length;j++)
{
if(id==result2[j].ref_section_id)
{
return true;
}
}
return false;
}
public function removeChilds(id:int):void
{
for(var i:int=0;i<result.length;i++)
{
if(id==result[i].section_id)
{
result.removeItemAt(i);
break;
}
}
}

In the above component result2 array we have section id and refrence section id in each element,refrence section id is the section id of another element which indicates the parent node so here refsection id indicates the parent sectionid,with this we have to form a tree structure.

Here is how i have done .

First i have rearranged the array and formed anew array so that all childs appear first in the array then at topmost appears.The topmost
parents have refsectionid null .

Then we are taking the section id of first element and finding the whether it has any childs and chkforchilds() method will return the last child section id.from the last child section id we are taking the refrence id of the last child which is the parent and attach all nodes with that refsection id to the parent if the node is not having child and the node is removed from the result array

this continues tilll the topmost elements alone left in the array.

Preview :http://www.box.net/shared/bofeauioku