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.listClasses.*;
import mx.controls.treeClasses.*;

public class 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;
}
}
}

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
tree with all radio buttons by chandrasekhar

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.