I would like to craft a GWT CellTree with an optional pop-up menu triggered on click of a TreeNode.
So I’ve crafted a CustomTreeModel. Here it is:
public class CustomTreeModel implements TreeViewModel {
/**
* Save visited URL. We'll use it later to determine if tree node needs to be opened.
* We decode the query string in URL so that token has a chance of matching (e.g., convert %20 to space).
*/
private final String url = URL.decodeQueryString(Window.Location.getHref());
private final NavNode navNode;
private final TokenService<MainEventBus> tokenService;
/**
* A selection model shared across all nodes in the tree.
*/
private final SingleSelectionModel<NavNode> selectionModel = new SingleSelectionModel<NavNode>();
public CustomTreeModel(NavNode navNode, TokenService tokenService) {
this.navNode = navNode;
this.tokenService = tokenService;
}
@Override
public <T> NodeInfo<?> getNodeInfo(T value) {
DefaultNodeInfo<NavNode> result = null;
if (value == null) {
// LEVEL 0.
// We passed null as the root value. Return the immediate descendants.
result = new DefaultNodeInfo<NavNode>(getDataProvider(navNode), getCell(), selectionModel, null);
} else if (value instanceof NavNode) {
// all other levels
// We pass a node, return its immediate descendants.
// select node if URL contains params in node's target or one of node's option's target
NavNode currNode = (NavNode) value;
if (isSelected(currNode)) {
selectionModel.setSelected(currNode, true);
}
if (currNode.hasOptions()) { // add pop-up menu to this node if it has options
result = new DefaultNodeInfo<NavNode>(getDataProvider(currNode), getCell(), selectionModel, new NodeSelectionEventManager(currNode), null);
} else {
result = new DefaultNodeInfo<NavNode>(getDataProvider(currNode), getCell(), selectionModel, null);
}
}
return result;
}
@Override
public boolean isLeaf(Object value) {
boolean result = true;
if (value == null) {
if (navNode.hasChildren()) {
result = false;
}
} else if (value instanceof NavNode) {
NavNode currentNode = (NavNode) value;
if (currentNode.hasChildren()) {
result = false;
}
}
return result;
}
// Create a data provider that contains the immediate descendants.
private ListDataProvider<NavNode> getDataProvider(NavNode node) {
return new ListDataProvider<NavNode>(node.getChildren());
}
// Create a cell to display a descendant.
private Cell<NavNode> getCell() {
Cell<NavNode> cell = new AbstractCell<NavNode>() {
@Override
public void render(Context context, NavNode value, SafeHtmlBuilder sb) {
if (value != null) {
sb.appendEscaped(value.getName());
}
}
};
return cell;
}
private boolean isSelected(NavNode node) {
boolean selected = false;
if (node != null) {
if (url.contains(tokenService.getToken(node))) {
selected = true;
} else {
for (NavOption option: node.getOptions()) {
if (url.contains(tokenService.getToken(option))) {
selected = true;
break;
}
}
}
}
return selected;
}
class NavNodeSelectionHandler implements SelectionChangeEvent.Handler {
private final VerticalPanel optionsContainer;
private final DecoratedPopupPanel optionsPopup;
public NavNodeSelectionHandler() {
optionsPopup = new DecoratedPopupPanel(true);
optionsContainer = new VerticalPanel();
optionsContainer.setWidth("125px");
// TODO provide a debug id... this will most likely necessitate generation of a unique key
optionsPopup.setWidget(optionsContainer);
}
@Override
public void onSelectionChange(SelectionChangeEvent event) {
NavNode node = selectionModel.getSelectedObject();
for (NavOption option: node.getOptions()) {
optionsContainer.add(new Hyperlink(option.getName(), tokenService.getToken(option)));
}
// Reposition the popup relative to node
UIObject source = (UIObject) event.getSource();
int left = source.getAbsoluteLeft() + 25;
int top = source.getAbsoluteTop();
optionsPopup.setPopupPosition(left, top);
// Show the popup
optionsPopup.show();
}
}
class NodeSelectionEventManager implements CellPreviewEvent.Handler<NavNode> {
private final VerticalPanel optionsContainer;
private final DecoratedPopupPanel optionsPopup;
public NodeSelectionEventManager(NavNode node) {
optionsPopup = new DecoratedPopupPanel(true);
optionsContainer = new VerticalPanel();
optionsContainer.setWidth("125px");
for (NavOption option: node.getOptions()) {
optionsContainer.add(new Hyperlink(option.getName(), tokenService.getToken(option)));
}
// TODO provide a debug id... this will most likely necessitate generation of a unique key
optionsPopup.setWidget(optionsContainer);
}
@Override
public void onCellPreview(CellPreviewEvent<NavNode> event) {
// Reposition the popup relative to node
UIObject source = (UIObject) event.getDisplay();
int left = source.getAbsoluteLeft() + 25;
int top = source.getAbsoluteTop();
optionsPopup.setPopupPosition(left, top);
// Show the popup
optionsPopup.show();
}
}
}
I’m using a generic bean (NavNode) to help me determine when I have a leaf and when I have an option (NavOption) or options that contain a target used for Hyperlink construction.
I want, when I click on a node (TreeNode) in the CellTree, that a pop-up menu (DecoratedPopupPanel) appears, but only for those nodes that have options.
I have tried to employ either of the inner Handler implementations (on construction of a DefaultNodeInfo) to no success. Hopefully from the above code sample you can see what I’m trying to do.
Here’s a variant that adds a SelectionChangeEvent.Handler to SingleSelectionModel
if (currNode.hasOptions()) { // add pop-up menu to this node if it has options
selectionModel.addSelectionChangeHandler(new NavNodeSelectionHandler());
result = new DefaultNodeInfo<NavNode>(getDataProvider(currNode), getCell(), selectionModel, null);
}
What’s happening is that the attempt to cast the Event fails with a ClassCastException.
I want to get a handle on an UIObject so I can position the popup. I think I need a handle on a TreeNode, but cannot see how to do it.
The CellTree, TreeViewModel, SelectionModel and friends are some of the most obtuse API I’ve come across.
Would really appreciate some help from a GWT expert!
A smart colleague of mine was able to sleuth a solution.
Here’s what we wound up with:
}
Note the TreeCell overrides the onBrowserEvent. From here we can get a handle on the node and position the pop-up. The pop-up is instantiated with a callback. Weird!
NavNodeUtil does some magic where it counts the children and adds A,B,C…Z categorical headings for a node’s children that exceed a certain threshold.