[原] Flex4.5.1 spark tree

the latest and pure spark tree

I found sparkTree does not work under Flex4.5.1 when I use XML as the dataprovider. After research, I work out a Flex4.5.1 spark tree base on the sparkTree. I hope my work can help someone!

Demo1 using XML as dataProvider(note: tree.selectedItem is TreeItem, the related Object is changed  to tree.selectedItem.source)

You can download swf file: http://www.smithfox.com/myopensource/sparktree/test13.swf

Demo2 using business Object as dataProvider (note: I set allowItemDisSelection property as true to prevent disk be selected)

You can download swf file: http://www.smithfox.com/myopensource/sparktree/test12.swf

Under Flex4.5.1, the sparkTree throw more Error. Most of Error are from the class  TreeDataProvider's getItemAt(xxx) function.

After my research, I find that the root cause is the $FLEX_HOME\frameworks\projects\framework\src\mx\controls\treeClasses\DefaultDataDescriptor.as class's getChild function has difference behaviar on difference SDK.

The DefaultDataDescriptor use a Dictionary to remap the parent and childrenList relationship for XMLList. I know that's XML can not support stict equals(===), so XML(XMLList) can not directly be as the Dirctionay's key.

Then DefaultDataDescriptor use XMLCollection as the Dictionary key, and same XMLList, reuse the exist XMLCollection object, then XMLCollection be regarded as an XML node's identify.

The same solution be found the third component spark Tree's Tree class.

OK, Let's review the root cause: When use XML(XMLCollection) as the Tree dataprovider, tree can not stictly keep the mapping of business tree(XML data)'s node to Tree's display's node(itemrenderer) since the XML does not support ===.

the DefaultDataDescriptor's solution is not stable!!!

Sereral months ago, I saw a article that introduce to presentation model(PM) concept.

Maybe, we need a separate PM class for the tree component, so I define TreeItem and TreeItemList.

The two class can guarantee correctly mapping to itemrenderer, and also can prevent the some weird change of business data.

OK, the next issue is that how to mapping the business model(BM) to the PM. the key of the issue that how to identify the BM node.

Both mx:Tree and sparkTree do the work in the component. but I think it is not the best solution. Mybe we can open some API to the developer user of the Tree.

Actually, I find all of my BM's node has a natural identify: xxId, for example: diskId, volumeId, userId, roomId.

That greatly encourage me! Then I learn from the labelField and labelFunction, added a itemIdentifyField and itemIdentifyFunction to the Tree compoent.

if disk has id property, and volume(a volume contain more disks) also have id property, then we can set the "@id" as the itemIdentifyField.

Wait!! What to do if a disk's id is same whith a volume's id?  You can use labelFunction which you can return "nodeType"+id  as the node's identify.

To completly solution the Dictionary issue, I decide do NOT use any Dictionary, instead it with Object. (There is also some performance consideration!)

So the itemIdentifyFunction ONLY can return int(Number) or String.

Last week I also find another Tree comonent on github: https://github.com/wasbridge/flex-4-tree

The component use ITreeItem interface, if you want to use the Tree, your BM must implements the interface.  It can NOT give an example to show how to ues XMLCollection as the dataprovider because XMLCollection is not the user's class. Yes we can write a wrapper Class to do that. But I do not like being forced to implements some interface, It is very like Java!!

We are using a dynamic language AS3, so I will try to avoid to use any Interface.

We can make an agreement with the user of Tree:

The user is in charge of keeping BM node's unique of identify(using itemIdentifyFeidl or itemIdentifyFunction), and can give some label(using labelField or labelFunction), if you want show the leaf node as  a branch, you can add isBranch:Boolean property, if you want to custom the icon, you can add icon:Class. your BM's node should have childrens property.

The user have two choice: making a use-leve's tree PM, and PM has a member variable which reference toBM.

anthoer is that: merging the Tree's aspect(identify, isBranch, label, icon) into BM class.

After about a week work, I give a swc that can work.

Here, I list some change and design thinking:
1. Remove dependence of mx.swc's class

remove all mx:Tree's classes: DefaultDataDescript, ITreeDataDescriptor2, ITreeDataDescriptor2, IMenuDataDescriptor, HierarchicalCollectionView, HierarchicalViewCursor.

2. Do NOT use Dictonary as Map data container.

3. Do not  use interface

4. change of Tree class:

  remove mx:Tree style initinazation for mx:Tree
  add identify code 
  change some tree's default's icon

5. change of TreeProvider:
  remove all cache objects(include some Dictionaries), TreeItem and TreeItemList take the responsibility of saving the level, open, son-parent-relationship.

  I know that the Class is very important, that fixed more bugs, so I try to keep the logic and architecture of the the class, only replace those cache object.

  Because bring TreeItem and TreeItemList, all of item Object paramters in TreeProvider's function is TreeItem, and brach became TreeItemList.

6. TreeItem's souce is the original's end-user's data node, itemId property save the source's identify.

childrens:TreeItemList is the treeNode's children. The TreeItemList's source is an ICollectionView wrapper of the original BM's childrens, and the TreeItemList add an high prioirty COLLECTION_CHANGE event listener on the source to watch the data change of the BM's data change. Then the event handle will convert BM's node to TreeItem object.

7. TreeItemCollection is a important class to convert BM to PM(TreeItem).

TreeItemCollection has an cache:Object.  BM.identify is the map key, and TreeItem is the map value.

Once BM node come, firstly try to get the identify, and then try to find in the cache, if exists return, if not new TreeItem and add to cache.

I have tested the flex4.5.1_sparktree in myself project. 

It work well :)

Download the revised sparkTree swc and source . (version: 2011/17/29)

 Note: please use it under SDK

smithfox | Thursday 30 June 2011 at 10:36 am | | UI        | Used tags: , ,

fifteen comments



zrong, (URL) - 30-06-’11 11:43

fix a bug caused by build script.
the bug result: tree can not fire IndexChangeEvent

smithfox, (URL) - 01-07-’11 09:14
Maxim Kachurovskiy

Great research, thank you. Seems that I should create a separate branch for the Spark Tree for Flex 4.5.1 on GitHub.

Maxim Kachurovskiy, (URL) - 05-07-’11 20:39

add handle to process COLLECTION_CHANGE.RESET event. version: 2011/17/29

smithfox, (URL) - 29-07-’11 16:51
Maxim Kachurovskiy

Dear Smithfox,

I’ve tried to use Spark Tree with XML data via XMLListCollection http://snipt.org/xmQh and it works smooth.

Maxim Kachurovskiy, (URL) - 01-08-’11 19:29

Dear Maxim Kachurovskiy,

the example snip code you provide only has 2 depth level XML dataProvider, you can try more depth level XML data.

You also can see my another blog to see how to duplicate the issue!


smithfox, (URL) - 01-08-’11 20:20
Michal Wroblewski

Hi Smithfox,

Great work! Any ideas how to run it under 4.5.0? What parts should be changed?


Michal Wroblewski, (URL) - 10-08-’11 16:25

Hi Michal Wroblewski,

I did not test it under Flex SDK 4.5.0, But I think there is not API change between 4.5.0 and 4.5.1

If you want to try the flex4.5.1_sparktree, you can recompile it under 4.5.0 :)

smithfox, (URL) - 11-08-’11 09:16
Michal Wroblewski

Thanks, will check it out and let you know.

Michal Wroblewski, (URL) - 11-08-’11 16:40

Hi,I have a problem using this component,could you help me?
I want something like a folder and subfolder solution.I downloaded your source and changed it a little bit. Trying to add a DiskGroup under a DiskGroup node. here is what I did:
var vri2:DiskGroup = new DiskGroup(“RAID22”, i*100+j);

and I got an exception :undefined at com.sparkTree::TreeItemList/get length() at com.sparkTree::TreeDataProvider/closeEmptyExpandedItem()[/Users/longyu/hgroot/herplib/src/com/sparkTree/TreeDataProvider.as:712]

What should I do to implement folder and subfolder like solution??
Thanks in advance.

Larry, - 27-11-’11 16:30

How do I specify my own TreeItem? It is not clear how anyone would use this for a data set that does NOT have a “children” property in each node. I see a static method on the TreeItem but it is not apparent how to override and get the parsing I desire.

pixels4nickels, - 02-03-’12 06:30

Why not just enable view source on your demo?

George, - 29-08-’12 21:41
LV iPhone 6 plus cases

The overall approach to these two tablets is perhaps similar in that they attempt to offer an excellent overall user experience, and package it up in a fairly mobile device

LV iPhone 6 plus cases, (URL) - 20-04-’15 17:21
replica chanel handbags

There’s something about the simplicity of a classic black bag that appeals to me; there is no standout pattern or try-hard graphics to serve as social icebreakers, but the elegance of a perfect rectangle, chain-link strap and quilt detail are just as captivating as any statement purse, if not more

replica chanel handbags, (URL) - 06-07-’15 18:00
Yeezy Boost 750 Replica

The East Coast’s answer to the almighty Coachella, Governors Ball is New York’s annual extravaganza that always has something for everyone.

Yeezy Boost 750 Replica, (URL) - 01-06-’16 14:32
(optional field)
(optional field)
为阻止垃圾广告, 请在提交评论前, 回答一个简单问题(Please answer an simple question)
Remember personal info?
Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.