Creating a dynamic tree in flex

Tree control is one of the most powerful control in Flex. You must have stumbled upon N number of articles explaining the tree control, where they pick up the data from an XML for the tree, but that does not really happen too often if you have a tree which is to be built dynamically as loading a new XML everytime to build a tree is a costly affair.

So, let’s create a tree in Flex using actionscript objects which may be serialized version of server side objects or you may want to create a tree using some business logic rather than some plain input text. So, we will create a TreeNode class in Actionscript which will represent each and every node in the tree. The advantage of working with node objects is that you can have different types of objects at different levels and also use the inheritance concept pretty nicely. So a basic node may be a Node with variables – id, name, type.  A subclass of this node may be a PersonNode with additional variables – age, sex etc… and you can go on like this creating trees with the apt information and you can display any kind of data just by clicking on the node by fetching that node from the tree.

The top level class will be TreeNode.

public class TreeNode {

     public var id : int;

     public var name : String;

     public var type : int;

     public var children : ArrayCollection;

     public function addChild(node : TreeNode) : void {

      if (this.children == null)

          this.children = new ArrayCollection();

          children.addItem(node);

     }
//Similarly you could have getNode();

}

A sublcass of this could be a DataTreeNode

public class DataTreeNode extends TreeNode {

     public var data : Object;    

}

Now you can simply create a tree in Flex, by creating a RootNode of type DataTreeNode.

var rootNode : DataTreeNode = new DataTreeNode();

rootNode.id = 0;

rootNode.name = “Root”;

rootNode.type = -1;

Now you can keep creating nodes of different types and keep adding to the rootNode. Just assign the rootNode to you tree as a dataProvider and there you are, the flex tree will display automatically. I have found this approach much better and easy as it allows easy extension and also allows me to do much more on when i click a treeNode. Also, this way you don’t solely rely on the Tree api in Flex to do something with your tree, you can manipulate or swift your tree in any manner you want and reap the benefits.

If you have better way of creating dynamic tree in flex do comment, i would be more than pleased to improve or use that for my project, with all the regard definitely .

Comparable datagrid in flex

Using a datagrid in Flex seems very easy, but it has the inherent problem as ready to eat meal. It may not allow you to do all the modifications and may not allow you to present it in a view you desire.

A few months back i had a requirement to create a datagrid, which displayed data column wise instead row wise i.e. the datagrid was suppose to be used for comparing and viewing data across columns rather than rows. So, how do we deal with such a problem in Flex. If you are working on HTML, its easy as you can just alter the logic in the for loop printing the rows. The whole point is using multi dimension arrays.

After finding no easy way to do it in Flex, i had to use to the same programming talent to display data column wise.

As datagrid expects the dataprovider to be in the form of an Array or ArrayCollection of objects and then it iterates over these objects to display a property of these objects in each column when you use the dataField property or you can reformat your test using the labelFunction property for the column. I used a combination of programming logic and labelFunction to display the list.

Lets say we intend to display Person objects columnWise, as displayed below.

Now we would receive person object from the server to the client and there is no way that you can use labelfield property or the lablefunction straight away to create such a table.

The wrokaround is to keep the person array aside and create an array of indexes equal to the number of rows that each column would have or the max. number of rows that a column could have in the whole table. So we will create an array with numbers {1,2,3,4…} each number denoting a particular row in the column. Now, iterate through the person object array and keep on adding DataGridColumn objects to the datagrid for as many Person object. So, the dataprovider to the datagrid is an array of indexes and the number of columns is equal to the number of Person objects. Assign a labelFunction to each column such that

public function getCompareLabel(item : Object, column : DataGridColumn) : String {
var cIndex : int = int(Number(column.dataField)); //this will give you the column for which you have to get data.
if (cIndex == 0)
return getRowLabel(item, column); //Now in getRowLabel just write a switch function which will give label’s for each row, such as “First”, “Last” etc. This gives the first column.
var person : PersonDAO = personArray[cIndex-1] as PersonDAO;
//Now from second column onwards we will get the particular person object from the dataArray and display data for a particular field accordingly.
switch(item) {
case 1 : return getCmpStr(person.firstName);
case 2 : return getCmpStr(person.lastName);
case 3 : return getCmpStr(person.age);
….

…..

}

The output will be a table like above. Strange, isn’t it Flex is suppose to make things easier but i had to swing around the whole place to get this is in place.

Opensource Flex api / Actionscript api

List of some additional functions i have written for the flex project. Will keep on updating my api, regularly with reusable functions.


/** Determines if a string is upper case */ public function isUpperCase(value : String) : Boolean {
return isValidCode(value, 65, 90);

}

/** Determines if a string is lower case */
public function isLowerCase(value : String) : Boolean {
return isValidCode(value, 97, 122);
}

/** Determines if a string is digit */
private function isDigit(value : String) : Boolean {
return isValidCode(value, 48, 57);
}

/** Determines if a string is letter */
public function isLetter(value : String) : Boolean {
return (isLowerCase(value) || isUpperCase(value));
}

/** The meat of the functions which checks the values */
private function isValidCode(value : String, minCode : Number, maxCode : Number) : Boolean {
if ((value == null) || (StringUtil.trim(value).length < 1))
return false;

for (var i : int=value.length-1;i >= 0; i--) {
var code : Number = value.charCodeAt(i);
if ((code < minCode) || (code > maxCode))
return false;
}

return true;
}

Expanding Flex Tree Control / Tree in Flex 2.0

It’s been some time since i have been writing code for displaying trees for different modules in my project. A tree is a very useful component as it its fast to navigate, hierarchical, can be sorted, expands/collapses so requires less space and what not. Over this period of time i have come across some code snippets which may definitely prove to be useful for any Flex developer working with trees. Let me kick them one by one.

Expanding the complete tree from the root node and select a particular node – This is one of the common requirements and can be easily established by using the following snippet. Once you have done whatever you want to do with the tree just put a call to the function -

/**
expandTree - is a function which will expand the root node
[newNode] - is an array of arguments which will be passed to the expandTree().
*/
callLater(expandTree, [newNode]);

A sample expandTree function is -
private function expandTree(childNode : Object) : void {
treeID.expandChildrenOf(treeID.getChildAt(0), true); treeID.selectedItem = childNode;
}

The assignment of expandTree to callLater sets the data provider properly and then trigger a call for expanding the tree.

Fix for the Datefield issue in flex 2.0

There seems to be an issue with the <mx:DateField> component in Flex 2.0. The issue is that when you choose todays date i.e. the current date which is highlighted grey in the DateChooser again the selected date clears out and you get a null as the selected date. Even if you select any other date two times in the chooser its becomes null and the text clears out. I am not sure why on earth Adobe is clearing out the date. Let the user select any date he wants to and let programmer’s brain do the rest . This is an issue and the workaround i coded for the above is as follows.

Let’s take an example:

<mx:DateField id=”dfStartDate” selectedDate=”{DateRange.getDate(xxx)}”
editable=”true” change=”updateStartDate(event)”/>

private function updateStartDate(event : CalendarLayoutChangeEvent) : void {
if (event.newDate != null) {
var dateNew : Date = new Date(event.newDate.getFullYear(), event.newDate.month, event.newDate.date);
dfStartDate.selectedDate = event.newDate;
}
}

This function gets the changed date and sets it back to the dateField so that we do not get null on getting the selectedDate and also the datefield does not clear out.

But the problem i am facing now is whenever the user changes the date the text in the datefield shifts left for no good reason and the date text is not readable. i have to again focus in the field to make it readable. Please suggest a workaround.

Aaah !!! i finally managed to fix the date field width issue by setting the width to 75 i.e. just set the width=”75″ or greater and the value will not shift to left.