[原] 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: , ,

sixteen 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
entretien menager montreal

a garantie d’un résultat irréprochable pour le
bien être de vos salariés, le confort de vos clients et l’image de marque de votre entreprise.

Depuis plusieurs années, les prestations de nettoyage commercial de G.E.M Ménage emportent l’adhésion de nos clients.
Nos agents de services formés et compétents, ainsi que nos technologies modernes et respectueuses de l’environnement sont les bases de notre succès.compagnie de menage rive sud, service de femme de ménage
Professionnelle de l’entretien, notre dynamique entreprise saura réaliser pour
vous l’ensemble des travaux ménagers.
G.E.M. s’engage sur une prestation de qualité !
Notre équipe de spécialistes chevronnés accomplira un travail à la fois soigné,
rapide et économique.
De plus, nous utilisons exclusivement des produits écologiques et hautement performants, issus des toutes
dernières technologies.
La vie moderne véhicule aussi de lourdes menaces. D’apparence inoffensive, meubles, appareils ménagers, matériaux de construction,
jouets ou objets familiers peuvent dégager des phtalates ou
autres redoutables composés chimiques.
G.E.M Ménage s’adapte.

Choisissez le jour à votre convenance.

Le choix le plus populaire est une fois par semaine.
Toutefois, vous êtes libre de déterminer votre fréquence moindre, toutes les deux semaines, une fois par mois….
G.E.M MÉNAGE s’adapte à votre besoin et à votre budget.

Nous individualisons le service de nettoyage. Notre expérience nous a enseigné que chaque immeuble
ou maison est unique, comme les gens qui y vivent.

Le prix pour nettoyer un immeuble ou une maison est basée sur plusieurs facteurs.
La taille du lieu et la fréquence de nettoyage sont pris en compte.

Cependant, nous intégrons également dans notre analyse, les surfaces à
nettoyer et à désinfecter, la présence ou non d’animaux de compagnie, l’encombrement du lieu.

Pour vous proposer un devis qui conviendra à votre budget, G.E.M MÉNAGE vous rencontre chez vous afin de prendre connaissance du
lieu et mieux comprendre vos besoins et exigences de nettoyage.Si beaucoup
pensent que le nettoyage de bureaux se résume à passer l’aspirateur,
nettoyer les vitrines et vider les poubelles,
En faisant appel à une entreprise telle que G.E.M Québec, vous avez la garantie d’un nettoyage régulier et de qualité professionnelle.

Les prestations sont effectuées par des agents d’entretien qualifiés qui sont formés aux techniques
de nettoyage propres à vos types de locaux.

Pour satisfaire tous vos besoins en matière d’entretien ménager, G.E.M vous
offre un service d’entretien et de nettoyage
résidentiel de haute qualité à un prix parfaitement compétitif.
Tout le ménage de votre domicile est pensé et réalisé dans ses moindres détails.

Lorsque vous remettez l’entretien de votre maison aux mains méticuleuses
de G.E.M, rien n’est laissé au hasard.

Chaque pièce est importante, et ce dans ses moindres recoins.
Non seulement nous allions notre savoir-faire à une efficacité qui dépassera vos attentes,
mais chaque entretien ménager est effectué avec la
plus grande discrétion.Service d’entretien et de nettoyage résidentielune
entreprise de nettoyage industriel spécialisée dans la propreté de
vos locaux professionnels (immeubles, bureaux, locaux industriels).L’équipe est composée d’agents de nettoyage qualifiés prêts à intervenir
sur tous les types de chantiers,, après l’élaboration d’un devis de nettoyage complet et précis, qu’il s’agisse d’une intervention de nettoyage particulier ou d’un nettoyage de locaux professionnels.De l’entretien courant
des sols, vitres et meubles – au nettoyage très spécifique de matériel professionnel ;
G,E.M prend en charge l’intégralité de votre entretien ménager.

Que ce soit pour vos bureaux, hôtels et surfaces de ventes qui demandent un entretien méticuleux car représentants de votre enseigne ou espaces communs d’immeubles qui connaissent un fort taux de passage, G.E.M MÉNAGE répond à vos besoins.

propose des prestations avec une équipe hautement qualifiée
ainsi que du matériel de nettoyage répondant à tous les besoins de nettoyage dans les bureaux.Les prestations sont effectuées par des agents d’entretien qualifiés qui sont formés aux
techniques de nettoyage propres à vos types de locaux.

Il est important de noter que les intervenants sont employés directement par g.e.m
et non par vos soins
Si beaucoup pensent que le nettoyage de bureaux se résume à passer l’aspirateur, nettoyer les vitrines et vider les
poubelles,entretien ménager résidentiel
Franchise de Nettoyage Résidentiel et Commercial, service de femme de ménage ,entretien ménager commercial,
entretien ménager commercial, ménage résidentiel, service d’entretien ménager
Nous aidons les personnes désireuses d’être propriétaires d’entreprises prospères à devenir des professionnels du nettoyage
commercial et de la maintenance. En rejoignant notre
réseau d’entreprises, vous bénéficierez d’un avantage concurrentiel ainsi que d’une aide apportée par un modèle d’affaires
éprouvé vous assurant de travailler avec un leader du
domaine disposant de l’expérience et la stabilité.

Vous disiez augmentez vos revenus afin d’améliorer votre quotidien ?
Faites Appel a G.E.M Ménage! service de femme de
ménage ,entretien ménager commercial,entretien ménager commercial, ménage résidentiel,
service d’entretien ménager montréal, service de femme de ménage ,entretien ménager commercial,entretien ménager commercial, ménage résidentiel,
service d’entretien ménager montréal
Franchises de Nettoyage Résidentiel et Commercial
disponible Partout A Montréal ,Rive Nord et Rive Sud.

Financement Sans Intérêt par G.E.M .
Un dépôt est obligatoire

Un Investissement de 24 000$ Vous Rapporte (4800$ et plus de Revenus par Mois)!

Matériel et formation fourni

Nous aidons les personnes désireuses d’être propriétaires d’entreprises prospères à
devenir des professionnels du nettoyage commercial et de la maintenance.

En rejoignant notre réseau d’entreprises, vous bénéficierez d’un avantage concurrentiel ainsi que d’une aide apportée par un modèle d’affaires éprouvé vous assurant
de travailler avec un leader du domaine disposant de l’expérience
et la stabilité.

G.E.M Ménage vous offre l’opportunité de travailler
pendant la journée de lundi a vendredi .

G.E.M Vous propose des contrats d’entretien ménager avec des horaires souples et un revenu garanti.

Pour les personnes libres,les nouveaux arrivants ou les sans-emplois G.E.M peut favoriser votre accès au marché du travail !

G.E.M vous propose des contrats stables et rémunérateurs!

Dans le secteur résidentiel idéal pour un couple, ou un homme seul
dans le secteur commercial
Vous débuter des maintenant

Des techniques et méthodes de travail éprouvées.

Une aide à la constitution ou à l’enregistrement de leur entreprise.

Des territoires d’exercice protégés.
Entreprise clés en main.
Un garantie qui protège votre investissement

Exigences de l’entrée de notre réseau :
Les demandes sont examinées attentivement et une enquête relative à la candidature est menée.

Les candidats doivent passer une entrevue de sélection.
Avant tout début d’activité, les candidats doivent assister à des sessions
de formation.

Au G.E.M. nous nous assurons que nos franchisés puissent offrir à leurs clients un service professionnel d’une qualité supérieure à celle de la concurrence.

Franchise disponible au résidentiel et commercial

N’hésitez pas à nous contacter
469 Jean-Talon Ouest Suite # 222
Montreal QC

entretien menager montreal, - 23-04-’18 04:56
(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.