Runtime CheckBox in Datagrid

DataGridMCSSExample.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.controls.DataGrid;
import flash.utils.getDefinitionByName;

private var o:DataGrid = null;
private var mcssDataGridComponent:MCSSDataGridComponent;

private function init():void
{
var urlRequest:URLRequest = new URLRequest("template.xml");
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
urlLoader.load(urlRequest);
}

private function onXMLLoadComplete(e:Event):void
{
var dataXML:XML = XML(e.currentTarget.data);
this.parseXML(dataXML.children(),this);
}

private function parseXML(data:XMLList, parent:*):void
{
var iCount:int = 0;
var iCountLen:int = data.length();
for(iCount = 0; iCount < iCountLen; ++iCount)
{
var classRef:String = data[iCount].@classRef;
var oClass:Class = getDefinitionByName(classRef) as Class;
var child:ICustomComponent = new oClass();
child.parseXML(data.children());
parent.addChild(child);
}
}

]]>
</mx:Script>
<!--local:MCSSDataGridComponent dataProvider="{dgArrayCollection}" />-->
</mx:Application>





CustomCheckboxItemRenderer.as


package
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.events.ListEvent;


public class CustomCheckboxItemRenderer extends CheckBox 
{
private var value:XML;
override public function set data(value:Object):void
    {
    this.value = XML(value);
    var passedData:String = value[DataGridListData(listData).dataField];
    this.selected = (passedData.toLowerCase() == "true")?true:false;
   
}  

override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);
this.value[DataGridListData(listData).dataField] = this.selected;
this.listData.owner.dispatchEvent(new ListEvent(ListEvent.CHANGE));
}

}
}







ICustomComponent.as


package
{
import mx.collections.ArrayCollection;

public interface ICustomComponent
{
function parseXML(data:XMLList):void;
}
}









MCSSDataGridComponent.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%" implements="ICustomComponent">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import flash.utils.getDefinitionByName;
import mx.collections.ArrayCollection;
import mx.controls.Label;
import mx.controls.RadioButton;


private var o:Label = null;
private var c:CustomCheckboxItemRenderer = null;
private var r:RadioButton = null
private var arrColumns:Array = new Array();

[Bindable]
private var dataProvider:XMLList;

public function setDataProvider(dataProvider:XML):void
{
this.dataProvider = dataProvider.children();
}

public function parseXML(data:XMLList):void
{
var iCount:int = 0;
var iCountLen:int = data.length();
var id:String = "";
for(iCount = 0; iCount < iCountLen; ++iCount)
{
id = data[iCount].@id;
if(id == "dataProvider")
{
setDataProvider(XML(data[iCount]));
}
else
{
var itemRenderer:String = data[iCount].@itemRenderer;

var fieldName:String = data[iCount].@id;
var headerText:String = fieldName.charAt(0).toUpperCase() + fieldName.substr(1);

var headerText:String = headerText;//data[iCount].@id;
var dataField:String = data[iCount].@id;
var dataGridColumn:DataGridColumn = new DataGridColumn();
var oClass:Class = getDefinitionByName(itemRenderer) as Class;
dataGridColumn.itemRenderer = new ClassFactory(oClass); 
dataGridColumn.headerText = headerText;
dataGridColumn.dataField = dataField;

var customLabelFunction:Function = this["covertColumnDataTo"+String(data[iCount].@type)] as Function;
dataGridColumn.labelFunction = customLabelFunction;
arrColumns.push(dataGridColumn);
}
}
}

private function covertColumnDataToString(item:Object, column:DataGridColumn):String
{
var value:String = XML(item)[column.dataField].toString();
       return value;
} 

private function covertColumnDataToBoolean(item:Object, column:DataGridColumn):String
{
var value:String = XML(item)[column.dataField].toString();
       return value;
} 

private function onCreationCompleteHandler():void
{
myDataGrid.columns = arrColumns;
myDataGrid.dataProvider = this.dataProvider;
}

private function onChangeHandler():void
{
trace("onChangeHandler"+dataProvider.toXMLString())
}

]]>
</mx:Script>
<mx:DataGrid id="myDataGrid" creationComplete="onCreationCompleteHandler()" change="onChangeHandler()">  
</mx:DataGrid>
</mx:Canvas>









template.xml


<data>
<component id="myDataGrid" classRef="MCSSDataGridComponent">
<component id="question" itemRenderer="mx.controls.Label" type="String" dataField="question" classRef="mx.controls.Label"/>
<component id="option1" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option1" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="option2" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option2" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="option3" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option3" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="option4" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option4" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="dataProvider">
<node id="question1">
<question>Question 1</question>
<option1>true</option1>
<option2>true</option2>
<option3>true</option3>
<option4>true</option4>
</node>
<node id="question2">
<question>Question 2</question>
<option1>false</option1>
<option2>true</option2>
<option3>true</option3>
<option4>true</option4>

</node>
</component>
</component>
</data>

Custom Event Example

MyComponent.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%">
<mx:Metadata>
    [Event( name="addProduct", type="AddProductEvent") ]
    </mx:Metadata>
<mx:Script>
<![CDATA[


private function onClikHanlder(e:MouseEvent):void
{
var myEventObj:AddProductEvent = new AddProductEvent( "addProduct", {id:1 ,fistName:"Amit" ,lastName :"Patel"} );
dispatchEvent( myEventObj );
}
]]>
</mx:Script>
<mx:Button id="btn" click="onClikHanlder(event)" label="Click"/>
</mx:Canvas>



AddProductEvent.as
package{

   import flash.events.Event;

   public class AddProductEvent extends Event {

      public var obj:Object;

      public function AddProductEvent( type:String, value:Object ) {

         super( type );
         this.obj = value;

      }

      override public function clone():Event {
         return new AddProductEvent( type, obj );
      }

   }
}



<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns:local="*">

  <mx:Script>
  <![CDATA[
  import mx.controls.dataGridClasses.DataGridColumn;
  import mx.controls.DataGrid;
  import mx.controls.Alert;
  import AddProductEvent;

private function onAddProduct( event:AddProductEvent):void {

var dg:DataGrid = new DataGrid();
dg.dataProvider = event.obj;
addChild(dg);
}
  ]]>
  </mx:Script>

    <local:MyComponent id="myComponent" addProduct="onAddProduct( event );"/>
   
</mx:Application>

Simple Dispatch Event

eve = new ItemClickEvent("IMG_MOUSE_OVER",true);

            eve.item = img.source;

            dispatchEvent(eve);

select only one if there are multiple canvas ,, toggling

private var isSelect:Canvas;

trace(isSelect);

                    if(isSelect != null){

                        isSelect.setStyle('borderStyle','solid');

                        isSelect.setStyle("backgroundColor","#DEE6E9");

                        //isSelect.setStyle("borderColor","#DEE6E9");

                        isSelect.setStyle("borderThickness","0");

                       

                    }

                   

                    Canvas(event.currentTarget).setStyle('borderStyle','solid');

                    Canvas(event.currentTarget).setStyle("backgroundColor","#FFFFFF");

                    //Canvas(event.currentTarget).setStyle("borderColor","#FFFFFF");

                    Canvas(event.currentTarget).setStyle("borderThickness","2");

                      isSelect = Canvas(event.currentTarget);