Using JavaScript with a Wicket LinkTree

September 1, 2009 at 8:37 am · Filed under Techno

I have to say that so far I really like Wicket, after years of developing J2EE Web application it’s a big relief to be able to develop Web application without having to maintain reams of URL or Action mappings in XML files.

Wicket offers a programming paradigm much closer to standard Java Swing instead which makes Web development much smoother.

There are a few pitfalls unfortunately as nothing is perfect but so far it’s been great.

One problem I’ve run into is when using Wickets LinkTree component (an Ajax based explorer like tree structure) is that it assumes that I always want to do an Ajax update from the server. But what if I want to run some JavaScript or simply redirect based on the clicked node.My solution is convoluted as I will admit that I am NOT a Wicket expert (yet) but to date I have not found another work around.

The gist of the solution is to override the newNodeComponent method which allows you to substitute your own code for the creation of tree nodes and I also overrode the onNodeClicked method as I wanted to expand and collapse tree nodes if the user clicked the nodes and not just the + and – icons.

Code:

  1.  
  2.      …
  3.      _tree = new LinkTree("catalog", treeModel) {
  4.  
  5.         @Override
  6.         protected Component newNodeComponent(String id, IModelObject model) {
  7.  
  8.           // Our user object stored in each node
  9.           final CatalogItem item = (CatalogItem) ((DefaultMutableTreeNode) model.getObject()).getUserObject();
  10.  
  11.           // Is this a leaf node?
  12.           // Your own condition may be different
  13.           if (item.getItem() != null) {
  14.  
  15.             // Override standard node creation so we can setup our own component
  16.             // This kind of blows since if the standard LinkTree implementation changes we
  17.             // may be hooped, pooched, or even twaddled
  18.             final LinkIconPanel panel = new LinkIconPanel(id, model, this) {
  19.               private static final long serialVersionUID = 1L;
  20.  
  21.               @Override
  22.               protected void onNodeLinkClicked(Object node, BaseTree tree, AjaxRequestTarget target) {
  23.                 super.onNodeLinkClicked(node, tree, target);
  24.                 onNodeLinkClicked(node, tree, target);
  25.               }
  26.  
  27.               @Override
  28.               protected Component newContentComponent(String componentId, BaseTree tree, IModelObject model) {
  29.                 return new Label(componentId, getNodeTextModel(model));
  30.               }
  31.  
  32.               @Override
  33.               protected void addComponents(final IModelObject model, final BaseTree tree) {
  34.                 final BaseTree.ILinkCallback callback = new BaseTree.ILinkCallback() {
  35.                   private static final long serialVersionUID = 1L;
  36.  
  37.                   public void onClick(AjaxRequestTarget target) {
  38.                     onNodeLinkClicked(model.getObject(), tree, target);
  39.                   }
  40.                 };
  41.  
  42.                 MarkupContainer link = tree.newLink("iconLink", callback);
  43.                 add(link);
  44.                 link.add(newImageComponent("icon", tree, model));
  45.  
  46.                 // link = tree.newLink("contentLink", callback);
  47.                 // Which return an AjaxLink or we can setup our own component instead…
  48.                 link = new WebMarkupContainer("contentLink");
  49.  
  50.                 // Add our own JavaScript
  51.                 link.add(new SimpleAttributeModifier("onclick",
  52.                     "ezprint.setSku(‘" + item.getItem().getPartnerCode() + "’);return false;"));
  53.  
  54.                 // Standard node creation resumes
  55.                 link.add(newContentComponent("content", tree, model));
  56.                 add(link);
  57.               }
  58.             };
  59.  
  60.             return panel;
  61.  
  62.           } else {
  63.             // Standard node creation
  64.             return super.newNodeComponent(id, model);
  65.           }
  66.  
  67.         }
  68.  
  69.  
  70.         @Override
  71.         protected void onNodeLinkClicked(Object object, BaseTree tree, AjaxRequestTarget target) {
  72.           // Expand or collapse a node if the user clicks on a node  (in addition to the +/- signs)
  73.           final TreeNode node = (TreeNode) object;
  74.  
  75.           if (!node.isLeaf()) {
  76.             if (tree.getTreeState().isNodeExpanded(node)) {
  77.               _tree.getTreeState().collapseNode(node);
  78.             } else {
  79.               _tree.getTreeState().expandNode(node);
  80.             }
  81.             // and else here would handle your leaf node
  82.             tree.updateTree(target);
  83.           }
  84.         }
  85.       };
  86.  
  87.  

RSS feed for comments on this post

Leave a Comment

*
To prove that you're not a bot, enter this code
Anti-Spam Image