title: Wicket - Tree + jquery-treeview
body: <p>I'm a newb in wicket and jquery, i'd like a simple tree in my wicket page, linked to jquery-treeview. ("simple", i mean one root, some children having may be some children, ...).</p>
  
  <p>Every node contains a label with its name and some links or buttons.</p>
  
  <p>Everything i found looks really hard....
  I like the example 'RecursivePanel' but i can't make it work with jquery-treeview.</p>
  
  <p>What do you think of the solution below. I don't like a lot the fact that is splitted in two components but i didn't find any good solution.</p>
  
  <p>So the tree is composed of 2 components.</p>
  
  <ul>
  <li>The NodePanel, containing the name of the node and a NodeChildrenPanel into a &lt;li&gt;.</li>
  <li>The NodeChildrenPanel, containing a label if it is a leaf or a NodePanel again for each child.</li>
  </ul>
  
  <p>NodePanel.html</p>
  
  <pre><code>&lt;wicket:panel&gt;
    &lt;li&gt;
      &lt;span wicket:id="name"&gt;&lt;/span&gt;
      &lt;span wicket:id="children"&gt;&lt;/span&gt;
    &lt;/li&gt;
  &lt;/wicket:panel&gt;
  </code></pre>
  
  <p>NodePanel.java</p>
  
  <pre><code>class NodePanel extends Panel {
      Node(String id, Node node) {
          super(id);
  
          setRenderBodyOnly(true);
  
          add(new Label("name", node.getName()));
          add(new NodeChildrenPanel("children", node));
      }
  }
  </code></pre>
  
  <p>NodeChildrenPanel.html</p>
  
  <pre><code>&lt;wicket:panel&gt;
    &lt;ul&gt;
      &lt;li wicket:id="children"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/wicket:panel&gt;
  </code></pre>
  
  <p>NodeChildrenPanel.java</p>
  
  <pre><code>class NodeChildrenPanel extends Panel {
      public NodeChildrenPanel(String id, Node node) {
          super(id);
  
          setRenderBodyOnly(true);
  
          if (node.isLeaf()){
              Label l = new Label("children");
              l.setVisible(false);
              add(l);
          } else {
              RepeatingView rv = new RepeatingView("children");
  
              for (Node child : node.getChildren()){
                  if (child.isLeaf()){
                          rv.add(new Label(rv.newChildId(), child.getName()));
                  } else {
                          rv.add(new NodePanel(rv.newChildId(), child));
                  }
              }
  
              add(rv);
          }       
   }
  </code></pre>
  
  <p>}</p>
  
  <p>In the page, </p>
  
  <p>The root node is created into a &lt;ul&gt;</p>
  
  <pre><code> &lt;ul id="my_tree_ul"&gt;
      &lt;div wicket:id="my_tree"&gt;&lt;/div&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>add(new NodePanel("my_tree", getSession().getMyRootNode());
  </code></pre>
  
  <p>And the &lt;ul&gt; is linked to jquery-treeview.</p>
  
  <pre><code>public void renderHead(IHeaderResponse response) {
      String js = "$(document).ready(function(){ $(\"#my_tree_ul\")
                       .treeview({animated: \"fast\",       
                            });
                   });");
  
      response.renderJavaScript(js, null);
  }
  </code></pre>
  
  <p>Is there any better solution?</p>