The so-called Tree released with 0.9 was actually a Forest, in the sense that it displayed multiple top level nodes. Consider the example in test_Tree.html where it displays a list of nodes for each continent, and sub nodes for countries:
What I think most people want is a top level node marked "Continents" to contain those children:
As you might suspect, the geography data store doesn't contain an item labeled "Continents", since "continents" is just a word, not the name of a place. But we do want it in the tree. So I've changed the API to tree to specify a label for the top node:
There are some other reasons for the change too, like to be able to display an "empty" tree in a user-friendly way, or to have some place to drop top level (ie, children of the root) nodes in the tree.
This change does have it's complications (and I'm open to suggestions). The biggest complication is that we now have a node without a corresponding item, which means that (for example) if you click the root node the onClick(item) handler will be called, but with item==null. I don't like that but I don't see a good way around it, since (as I tried to explain above) it seems unreasonable to expect the datastore to contain and item for "Continents".
By the way, tree has come a long way since 0.9, largely thanks to Dustin. We now have icons, dynamic updates, and drag&drop.
Don't display root node
I can think of several instances where having a root node would be great as well as several instances where it wouldn't be. A good implementation of tree would not require a root node. Keep the root node, but give them an option to not display the root node, thus giving the same affect. The root node would be always expanded, just make sure the +/- icon looks correct.
so I thought
I imagined someone might say that. I'm trying to avoid getting 75 pages of tree code like in 0.4 but we can still add what features are necessary.
What examples are you thinking of? And how would you deal with drag & drop (well specifically "drop") of a element into the top level?
showroot="false"
Well, based on my experience, tree must have roots. But the display widget should have a showroot option, which should be false by default (I don't think that your "Continent" example is correct, as, in the real world, such tree would probably be displayed into a panel that would have "Continents" as the title. This would have several advantages:
* It does not use more screen space (total list is still 7 lines)
* It does not waste 20 pixels at the beginning of lines 2 through 7
* The first level is always visible, which is what users wants
If dojo tree API don't have a root node in the data, then, maybe, you should change that, as it makes things much simpler for everybody, as handling the drop at the top level is just a add to the root node.
I think that needing the root node to be displayed is rare occurrence (it would mean that the user need to interact with that node, to select it, drag it, or maybe to rename it, or to use some sort of pull down. Or maybe if there are extra information displayed in the node title -- for instance, the disk space used in a directory browser. All in all, quite an advanced use, IMO).
For a canonical example of a tree with hidden root, look at the bookmarks from Firefox bookmark pane. The same tree has its root visible in the "Organize Bookmarks..." panel. This shows the simple/advanced user interaction models. And I think simple things should be simple to do.
Just to back up the parent
Just to back up the parent post, I think fstark hit the nail on the head ;)
I also have a need for a root-less tree. I will admit that a root-less tree is mostly aesthetic, but I will say that from experience, all the real-estate you can save is good in a tree. Our UI's typically are put in some sort of pane, e.g. TabPane, that already have the equivalent of a tree-root label, so having the same content in a root node is simply redundant.
More examples of Tree controls that have showroot="false" functionality, the eclipse SWT tree has this directly and I know you can do it in Swing, though I don't recall how off the top of my head.
agreed
Agreed, those are good examples are "rootless" trees. Also, Firefox's "organize bookmarks" window is a good example of when you want to display a root.
As far as graphics goes, I did notice that if there is no root node shown, then all the first level children are not connected by a vertical line (see the bookmarks sidebar in firefox for an example), so maybe that's the thing that was bugging me.
So OK, let me try make that optional. It's got some annoying a11y issues, handling the case when no nodes are shown and thus there is nothing to focus on, but can deal with those.
Thanks!
Thanks bill! I also do want to say that I am really enjoying the 0.9 tree control a lot, especially the use of the stores to back up the tree's data. I know some think it adds complexity, but once you start using stores and understanding them, they really are dead simple to use. Especially when you have one store that drives many different views of the data (I know, I know, it's MVC all over again :P, but it's all good stuff!)
reinventing the wheel
> I know, I know, it's MVC all over again :P, but it's all good stuff!
Yup, as a wise man once said to me, we'll always all have jobs because we keep reinventing the wheel and employing ourselves to build it again.
Please allow the root node to be hidden
If there is no "label" in the constructor just assume that I didn't want a root node (this was the default behaviour in .9, why break it?). It is nice to have, but also nice to hide.
Thanks.
graphics
Well, one of the reasons was that the graphics in 0.9 are messed up. There's a horizontal line extending upwards from the first tree in the forest, and also a line connecting all the trees together (both of which are strange). If I add the ability to hide the root node then I guess I need to hide the vertical lines on the second level altogether.
What situation are you doing where you don't want a root node?
Handle the first row different
Isn't it possible to handle the first row different? Draw no horizontal line (or a different horizontal line) at the first node and all graphics problems are gone.
Need rootless tree
I also need a rootless tree, or at least one where the root is specified by the top level item from the datastore. I have a case where I have hierarchical data that I want to display as a tree. This comes from the datastore and I want the root node to be a particular top level item from the datastore. The tree widget puts a root node above that one, so it looks wrong. I agree there needs to be a configuration attribute on the tree that controls wether a root node is displayed or not. Maybe the attribute could identify which item from the datastore is the root node. This might also help with the issue of all reference items that are top level items also being rendered as top level tree nodes when they are actually children of the root level item. So they appear twice in the tree, once as children of the real root node item and again because they are top level datastore items.
Trust the Data Store
If the data store is single rooted, have a singly rooted widget. Otherwise have a multiply rooted widget. IMHO, having the widget mirror the datastore makes it easier to configure and makes it easier to handle events on the root node without special case code.
I do not generally find singly rooted trees to be particularly useful since they add a superfluous click to the user's workflow.
see top post
I think I answered that in my original post. It's because you might want a "continents" root node even though there is no such item in the data store. Remember that you may not control the data store.
Anyway, the change is checked in so that you can make that pseudo-root node or not (well actually it always makes the node, but hides it if label is not defined).
Regarding your comment "I do not generally find singly rooted trees to be particularly useful since they add a superfluous click to the user's workflow.", that's only true if the single root starts out closed rather than open, which is not the case for the dijit tree.
What happened to the events?
I was looking at the new code and noticed that the only event the tree was publishing was "execute". The events "afterTreeCreate" and "beforeTreeDestroy" are pretty handy. Are they going to be supported?
BTW, I agree, trust the data store. If the data store is single rooted, have a singly rooted widget. It will be easier to configure and manage events.
George
connect
You can get notification about when the tree has been creating by connecting to Tree.postCreate() or maybe Tree.startup(). I'm not sure why a topic is more useful than that.
I guess there's no easy way to get notification before the tree is destroyed, since we no longer have "before" advice.
The other thing is that I don't see any reason to build events specific to the tree for these things, since all widgets are created and destroyed.
Thanks
Thanks, connect on Tree.postCreate() works fine. Currently I have context menus on the nodes. The menus are specific to the node type. To bind the menus to the correct nodes, I do a dojo.connect( myTree, "addChild", initMenu); When I get the events I bind the appropriate menu to the node. I call the connect when the tree is created and disconnect when the tree is deleted. Is there an easier way?
Regards,
George
Good news
Great to hear that the tree is coming along. Any examples of drag&drop ?
examples
yes, look in the test directory. you should be able to find it.
Missing code
In Tree.js, Your refactor code (changeset 10580) has override some code from changeset 10569.
Following is patch file that bring back the missing code.
http://trac.dojotoolkit.org/changeset/10580
http://trac.dojotoolkit.org/changeset/10569
Index: Tree.js =================================================================== --- Tree.js (revision 10716) +++ Tree.js (working copy) @@ -45,6 +45,9 @@ // set icon based on item dojo.addClass(this.iconNode, this.tree.getIconClass(this.item)); + // set label class based on item + dojo.addClass(this.labelNode, this.tree.getLabelClass(this.item)); + if(this.isExpandable){ dijit.wai.setAttr(this.labelNode, "waiState", "expanded", this.isExpanded); }bug database
OK, I updated that. In the future please file bugs in trac.dojotoolkit.org (login as guest/guest) and attach patches with the "attach file" button.
So when are you going to "Trush the datastore"?
The majority of people who commented have stated they want the tree the way it was. Just trust the datastore. If I want a "rootless" tree let me have it - that is what the datastore says. If I have a root in my datastore, the tree will show it. Simple.
When will the tree be switched back? Thanks.
Thanks
Great, I see that the change has been made. Cheers.
Agreed
testing///ok
50 cent lyrics
Works like a charm
Just tested this tree-implementation, and it works like a charm to me! Thanks, seems I´m loosing my focus on working with ASP.NET Ajax because of dojo - so rich, so nice - I´m amazed
Tagesgeld
thanks
It's works! Thank you.
Usher Mp3
well
It's really cool! Big thanks.
order cheap levitra
In Tree.js, Your refactor
In Tree.js, Your refactor code (changeset 10580) has override some code from changeset 10569.
Following is patch file that bring back the missing code.
http://trac.dojotoolkit.org/changeset/10580
http://trac.dojotoolkit.org/changeset/10569
Index: Tree.js
===================================================================
--- Tree.js (revision 10716)
+++ Tree.js (working copy)
@@ -45,6 +45,9 @@
// set icon based on item
dojo.addClass(this.iconNode, this.tree.getIconClass(this.item));
+ // set label class based on item
+ dojo.addClass(this.labelNode, this.tree.getLabelClass(this.item));
+
if(this.isExpandable){
dijit.wai.setAttr(this.labelNode, "waiState", "expanded", this.isExpanded);
}
Nice Music site means mp3bravo
Want music then log on here
For ipod download of music come and enjoy
Want to kn
Following is patch file that
Following is patch file that bring back the missing code.
http://trac.dojotoolkit.org/changeset/10580
http://trac.dojotoolkit.org/changeset/10569
Index: Tree.js
===================================================================
--- Tree.js (revision 10716)
+++ Tree.js (working copy)
@@ -45,6 +45,9 @@
// set icon based on item
dojo.addClass(this.iconNode, this.tree.getIconClass(this.item));
+ // set label class based on item
+ dojo.addClass(this.labelNode, this.tree.getLabelClass(this.item));
+
if(this.isExpandable){
dijit.wai.setAttr(this.labelNode, "waiState", "expanded", this.isExpanded);
The same one as before????
----------------------------------
Email - labs.beanz[at]gmail.com
AIM - dolphinlabz
Yahoo - zubu1980
Petition Example