Flex 3 Tree Control with Radio Button and Checkbox Controls
Flex 3 Tree Control with Radio and Checkbox Controls
Guys, I have created the Flex tree control with radio button and checkbox item renderer.
Main File
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" >
<mx:Script>
import mx.controls.Alert;
import mx.collections.*;
import flash.events.*;
import mx.events.*;
import mx.controls.*;
private function changeEvt(event:Event):void {
var obj:Object = new Object();
obj = event.currentTarget.selectedItem;
var counter:Number = folderList..folder.(@first=="true").length();
var i:Number;
var j:Number;
var k:Number;
//Parent
if(obj.@first == "true") {
for(i=0;i<counter;i++){
if(obj.@label != folderCollection[i].@label){
folderCollection[i].@state = "unchecked";
for(j=0;j<folderCollection[i].folder.length();j++) {
folderCollection[i].folder[j].@state="unchecked";
}
}
}
}
//Child
if(obj.@first=="false") {
for(i=0;i<counter;i++){
if(obj.parent().@label == folderCollection[i].@label){
folderCollection[i].@state = "checked";
}
else {
folderCollection[i].@state = "unchecked";
for(j=0;j<folderCollection[i].folder.length();j++){
if(folderCollection[i].folder[j].@label!=obj.@label)
folderCollection[i].folder[j].@state="unchecked";
}
}
}
}
}
private function processCheck(obj:Object):void{
}
private function itemOpenEvt(event:TreeEvent):void {
// forOpen.text = event.item.@label;
}
[Bindable]
public var folderList:XML =
<folderTop>
<folder state="unchecked" first="true" isBranch="true" label="A" >
<folder state="unchecked" first="false" isBranch="false" label="Article Reprint Disclaimers" />
<folder state="unchecked" first="false" isBranch="false" label="Articles Reprints" />
<folder state="unchecked" first="false" isBranch="false" label="Interviews and Transcripts" />
<folder state="unchecked" first="false" isBranch="false" label="Press Kits" />
<folder state="unchecked" first="false" isBranch="false" label="Press Releases" />
<folder state="unchecked" first="false" isBranch="false" label="Quick Hits" />
<folder state="unchecked" first="false" isBranch="false" label="Rep Talking Points" />
<folder state="unchecked" first="false" isBranch="false" label="Special Updates" />
<folder state="unchecked" first="false" isBranch="false" label="White Papers" />
</folder>
<folder state="unchecked" first="true" isBranch="true" label="B" >
<folder state="unchecked" first="false" isBranch="false" label="Applications" />
<folder state="unchecked" first="false" isBranch="false" label="Forms" />
</folder>
<folder state="unchecked" first="true" isBranch="true" label="C" >
<folder state="unchecked" first="false" isBranch="false" label="Article Reprint Disclaimers" />
<folder state="unchecked" first="false" isBranch="false" label="Articles Reprints" />
<folder state="unchecked" first="false" isBranch="false" label="Interviews and Transcripts" />
<folder state="unchecked" first="false" isBranch="false" label="Press Kits" />
<folder state="unchecked" first="false" isBranch="false" label="Press Releases" />
<folder state="unchecked" first="false" isBranch="false" label="Quick Hits" />
<folder state="unchecked" first="false" isBranch="false" label="Rep Talking Points" />
<folder state="unchecked" first="false" isBranch="false" label="Special Updates" />
<folder state="unchecked" first="false" isBranch="false" label="White Papers" />
</folder>
<folder state="unchecked" first="true" isBranch="true" label="D" >
<folder state="unchecked" first="false" isBranch="false" label="Applications" />
<folder state="unchecked" first="false" isBranch="false" label="Forms" />
</folder>
<folder state="unchecked" first="true" isBranch="true" label="E" >
<folder state="unchecked" first="false" isBranch="false" label="Article Reprint Disclaimers" />
<folder state="unchecked" first="false" isBranch="false" label="Articles Reprints" />
<folder state="unchecked" first="false" isBranch="false" label="Interviews and Transcripts" />
<folder state="unchecked" first="false" isBranch="false" label="Press Kits" />
<folder state="unchecked" first="false" isBranch="false" label="Press Releases" />
<folder state="unchecked" first="false" isBranch="false" label="Quick Hits" />
<folder state="unchecked" first="false" isBranch="false" label="Rep Talking Points" />
<folder state="unchecked" first="false" isBranch="false" label="Special Updates" />
<folder state="unchecked" first="false" isBranch="false" label="White Papers" />
</folder>
<folder state="unchecked" first="true" isBranch="true" label="F" >
<folder state="unchecked" first="false" isBranch="false" label="Applications" />
<folder state="unchecked" first="false" isBranch="false" label="Forms" />
</folder>
</folderTop>;
[Bindable]
public var folderCollection:XMLListCollection;
private function init() : void {
checkTree.dataProvider = folderList..folder.(@first=="true");
folderCollection = new XMLListCollection(folderList..folder.(@first=="true"));
//Alert.show((folderList..folder.(@first=="true")).toString())
}
</mx:Script>
<mx:Tree
id="checkTree"
itemRenderer="CheckTreeRenderer"
labelField="@label"
width="100%" height="100%"
click="changeEvt(event);">
>
</mx:Tree>
</mx:Application>
Itemrenderer File
package {
import flash.events.MouseEvent;
import flash.xml.*;
import mx.automation.IAutomationObject;
import mx.collections.*;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.Image;
import mx.controls.RadioButton;
import mx.controls.RadioButtonGroup;
import mx.controls.Tree;
import mx.controls.listes.*;
import mx.controls.treees.*;
public CheckTreeRenderer extends TreeItemRenderer {
protected var myImage:Image;
public var i:int=0;
// set image properties
private var imageWidth:Number = 6;
private var imageHeight:Number = 6;
private var inner:String = "inner.png";
protected var myCheckBox:CheckBox;
protected var myRadioButton:RadioButton;
protected var myRadioButtonGroup:RadioButtonGroup = new RadioButtonGroup;
static private var STATE_SCHRODINGER:String = "schrodinger";
static private var STATE_CHECKED:String = "checked";
static private var STATE_UNCHECKED:String = "unchecked";
public function CheckTreeRenderer () {
super();
mouseEnabled = false;
}
private function toggleParents (item:Object, tree:Tree, state:String):void {
if (item == null) {
return;
}
else {
item.@state = state;
toggleParents(tree.getParentItem(item), tree, getState (tree, tree.getParentItem(item)));
}
}
private function toggleChildren (item:Object, tree:Tree, state:String):void {
if (item == null) {
return;
}
else {
item.@state = state;
var treeData:ITreeDataDescriptor = tree.dataDescriptor;
if (treeData.hasChildren(item)) {
var children:ICollectionView = treeData.getChildren (item);
var cursor:IViewCursor = children.createCursor();
while (!cursor.afterLast) {
toggleChildren(cursor.current, tree, state);
cursor.moveNext();
}
}
}
}
private function getState(tree:Tree, parent:Object):String {
var noChecks:int = 0;
var noCats:int = 0;
var noUnChecks:int = 0;
if (parent != null) {
var treeData:ITreeDataDescriptor = tree.dataDescriptor;
var cursor:IViewCursor = treeData.getChildren(parent).createCursor();
while (!cursor.afterLast) {
if (cursor.current.@state == STATE_CHECKED) {
noChecks++;
}
else if (cursor.current.@state == STATE_UNCHECKED) {
noUnChecks++
}
else {
noCats++;
}
cursor.moveNext();
}
}
if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0)) {
return STATE_SCHRODINGER;
}
else if (noChecks > 0) {
return STATE_CHECKED;
}
else {
return STATE_UNCHECKED;
}
}
private function checkBoxToggleHandler(event:MouseEvent):void
{
if (data)
{
var myListData:TreeListData = TreeListData(this.listData);
var selectedNode:Object = myListData.item;
var tree:Tree = Tree(myListData.owner);
var toggle:Boolean = myCheckBox.selected;
if (toggle)
{
toggleChildren(data, tree, STATE_CHECKED);
}
else
{
toggleChildren(data, tree, STATE_UNCHECKED);
}
var parent:Object = tree.getParentItem (data);
toggleParents (parent, tree, getState (tree, parent));
}
}
private function RadioButtonToggleHandler(event:MouseEvent):void
{
if (data)
{
var myListData:TreeListData = TreeListData(this.listData);
var selectedNode:Object = myListData.item;
var tree:Tree = Tree(myListData.owner);
var toggle:Boolean = myRadioButton.selected;
if (toggle)
{
toggleChildren(data, tree, STATE_CHECKED);
}
else
{
toggleChildren(data, tree, STATE_UNCHECKED);
}
var parent:Object = tree.getParentItem (data);
toggleParents (parent, tree, getState (tree, parent));
}
}
override protected function createChildren():void
{
super.createChildren();
myCheckBox = new CheckBox();
myCheckBox.setStyle( "verticalAlign", "middle" );
myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler );
addChild(myCheckBox);
myRadioButton = new RadioButton();
myRadioButton.setStyle( "verticalAlign", "middle" );
myRadioButton.addEventListener( MouseEvent.CLICK, RadioButtonToggleHandler );
addChild(myRadioButton);
}
private function setCheckStateCheck (checkBox:CheckBox, value:Object, state:String):void
{
if (state == STATE_CHECKED)
{
checkBox.selected = true;
}
else if (state == STATE_UNCHECKED)
{
checkBox.selected = false;
}
else if (state == STATE_SCHRODINGER)
{
checkBox.selected = false;
}
}
private function setCheckStateRadio (radioButton:RadioButton, value:Object, state:String):void
{
if (state == STATE_CHECKED)
{
radioButton.selected = true;
}
else if (state == STATE_UNCHECKED)
{
radioButton.selected = false;
}
else if (state == STATE_SCHRODINGER)
{
radioButton.selected = false;
}
}
override public function set data(value:Object):void
{
super.data = value;
if(super.data.@first == "true")
{
setCheckStateRadio (myRadioButton, value, value.@state);
}
if(super.data.@first == "false")
{
setCheckStateCheck (myCheckBox, value, value.@state);
}
if(TreeListData(super.listData).item.@type == 'dimension')
{
setStyle("fontStyle", 'italic');
}
else
{
if (this.parent != null)
{
var _tree:Tree = Tree(this.parent.parent);
_tree.setStyle("defaultLeafIcon", null);
}
setStyle("fontStyle", 'normal');
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data)
{
if (data.@first == "true")
{
myRadioButton.x = super.icon.x;
myRadioButton.y = 8;
super.icon.x = myRadioButton.x + myRadioButton.width + 17;
super.label.x = super.icon.x + super.icon.width + 3;
//this.getAutomationChildAt(0);
myRadioButton.visible = true;
myCheckBox.visible = false;
}
if (data.@first == "false")
{
myCheckBox.x = super.label.x;
myCheckBox.y = 8;
super.label.x = myCheckBox.x + myCheckBox.width + 17;
addChild(myCheckBox);
myCheckBox.visible = true;
myRadioButton.visible = false;
}
}
}
override public function get numAutomationChildren():int {
return 1; //instead of checkbox
}
override public function getAutomationChildAt(index:int):IAutomationObject {
switch(index) {
case 0:
return myRadioButton;
case 1:
return myCheckBox;
}
return null;
}
}
