The Document class: RendererExample

We now write a Document class for our movie. First we need to import several classes including the cellrenderer classes, which we have created. Note that we also made a new class to control the Header for the DataGrid.

          package 
{
	import flash.display.Sprite;
	import fl.controls.DataGrid;
	import fl.controls.dataGridClasses.DataGridColumn;
	import flash.events.Event;
	import biz.Flashscript.cellrenderer.MyCellRenderer;
	import biz.Flashscript.cellrenderer.MyHeaderRenderer;
	public class RendererExample extends Sprite
	{
		public function RendererExample ():void
		{
		

We create a new DataGrid instance and size and position it. We change the style properties to include the altered properties from the renderer classes.

/*
/ We add a new DataGrid and set its properties.
*/
			var myGrid:DataGrid=new DataGrid();
			myGrid.move (35,80);
			myGrid.setSize (225,120);
			myGrid.setStyle ("cellRenderer",MyCellRenderer);
			myGrid.setStyle ("headerRenderer",MyHeaderRenderer);
			addChild (myGrid);
			

We create new columns for each category, size them and add header text. Since we allowed html properties we can now change the properties of individual header text using html.

/*
/ We define the columns for the DataGrid.
*/
			var no:DataGridColumn=new DataGridColumn();
			var item:DataGridColumn=new DataGridColumn();
			var price:DataGridColumn=new DataGridColumn();
			myGrid.columns = ["no", "item","price"];
			myGrid.getColumnAt(0).width=50;
			myGrid.getColumnAt(1).width=100;
			myGrid.getColumnAt(2).width=75;
			myGrid.getColumnAt(0).headerText="Num";
			myGrid.getColumnAt(1).headerText="Item Description";
			myGrid.getColumnAt(2).headerText="<font color='#FF0000'>Price</font>";
			

We then add labels to the component using the addItem method. Again we can alter the label properties using html.

/*
/ We fill the DataGrid with data.
*/
			myGrid.addItem ({no:"1",item:"Apples",price:"$1,50"});
			myGrid.addItem ({no:"2",item:"Oranges",price:"<font color='#218429'>$0.89</font>"});
			myGrid.addItem ({no:"3",item:"Banana",price:"$0.59"});
			myGrid.addItem ({no:"4",item:"Cherries",price:"$2.69"});
			

Now we add an eventlistener, which when triggered will call the selectIndex method of the MyCellRenderer class. Remember that this method will add the index number of a selected row from the DataGrid.

			myGrid.addEventListener (Event.CHANGE, changeHandler);
		}
		private function changeHandler (event:Event):void
		{
			trace ("selected");
/*
/ We call the static function from the 'MyCellRenderer' class to
/ add the index for each row selected.
*/
			MyCellRenderer.selectIndex (event.currentTarget.selectedIndex);
		}
	}
}

And this brings us to the end of this tutorial.

previous