I was so excited to see that WebWork added support for Dojo’s tree widget. And then I read the WebWork Wiki’s example, and my bubble burst. The example is this:
<tree ... />
Well, as helpful as that is, I decided to find a more detailed example. Problem is, I couldn’t! I finally figured it out on my own and decided that it must be shared. Now, this example itself has a lot of “…” going on, but it isn’t glossing over the true details of the example.
The key is that you have a class that is hierarchical:
Hierarchy class(partial):
public class Content {
...
// Fields
private ArrayList childrenContentNodes;
private Integer contentId;
private String contentTitle;
// Getters and Setters
public ArrayList getChildrenContentNodes {...}
public void setChildrenContentNodes {...}
public Integer getContentId {...}
public void setContentId {...}
public String getContentTitle {...}
public void setContentTitle {...}
...
}
The action then provides public access to the root node/object.
Action (partial):
public class ContentAction {
...
public Content getMainPageContent() {
// Load the tree below this node
return contentManager.buildContentTree();
}
...
}
The tree uses the AJAX theme (I specified this explicitly because my site uses xhtml as default) and has a very basic name contentTree.
The rootNode property must resolve to the hierarchical object, of class Content, mentioned above and the childCollectionProperty refers to the property on the hierarchical object that provides the ArrayList of Content objects (childrenContentNodes).
Finally, as the tree is drawn the title is pulled from each Content object’s contentTitle field and the id of the tree node is pulled from Content object’s contentId field.
The treeNodeSelected JavaScript method is the most basic example of how to capture node selection event.
JSP (partial):
<head>
<script type="text/javascript" src="/scripts/dojo/dojo.js"></script>
</head>
<script>
function treeNodeSelected(nodeId) {
alert("Node Selected: " + nodeId);
};
dojo.event.topic.subscribe("treeSelected", this, "treeNodeSelected");
</script>
<ww:tree
theme="ajax"
name="contentTree"
rootNode="%{mainPageContent}"
childCollectionProperty="childrenContentNodes"
nodeTitleProperty="contentTitle"
nodeIdProperty="contentId"
treeSelectedTopic="treeSelected"
/>
Pretty straightforward! As I learn more (or if I find a better example), I’ll share it!