title: Primefaces tree - selection not updated in <p:layout /> with <ui:include/>
body: <p>I'm experimenting using a navigation tree with a <code>&lt;p:layout /&gt;</code> and an <code>&lt;ui:include /&gt;</code>, which I want to dynamically update the <code>&lt;ui:include /&gt;</code> when I click on a tree node.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.prime.com.tr/ui"&gt;
  &lt;f:view contentType="text/html"&gt;
  &lt;h:head&gt;&lt;/h:head&gt;
  &lt;h:body&gt;
  &lt;p:layout fullPage="true"&gt;
     &lt;p:layoutUnit position="left" width="200" resizable="true" collapsible="true"&gt;
        &lt;h:form&gt;
           &lt;p:tree expanded="true" nodeSelectListener="#{menutree.onTreeNodeClicked}" id="tree"
                 value="#{menutree.menuTree}" var="node" update="test,tree"
                 selection="#{menutree.selectedNode}" selectionMode="single"&gt;
              &lt;p:treeNode&gt;
                 &lt;h:outputText value="#{node}" /&gt;
              &lt;/p:treeNode&gt;
           &lt;/p:tree&gt;
        &lt;/h:form&gt;
     &lt;/p:layoutUnit&gt;
         &lt;p:layoutUnit position="center" resizable="true" collapsible="false"&gt;
        &lt;h:panelGroup id="test" layout="block"&gt;
           &lt;ui:include src="${menutree.selectedNode.name}.xhtml" /&gt;
        &lt;/h:panelGroup&gt;
     &lt;/p:layoutUnit&gt;
  &lt;/p:layout&gt;
  &lt;/h:body&gt;
  &lt;/f:view&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The backing bean looks like this:</p>
  
  <pre><code>@SessionScoped
  public class MenuTreeBean implements Serializable
  {
      private final Log logger = LogFactory.getLog(getClass());
  
      private final TreeNode root;
  
      private TreeNode selectedNode;
  
      public MenuTreeBean()
      {
          root = new DefaultTreeNode("root", null);
  
          CustomTreeNode aaRoot = new CustomTreeNode("welcome", "Widgets", root);
  
          new CustomTreeNode("1", "Editor", aaRoot);
          new CustomTreeNode("2", "Calendar", aaRoot);
  
          setSelectedNode(aaRoot);
      }
  
      public TreeNode getMenuTree()
      {
          return root;
      }
  
      public TreeNode getSelectedNode()
      {
          logger.info("Selected: " + selectedNode);
          return selectedNode;
      }
  
      public void setSelectedNode(TreeNode selectedNode)
      {
          logger.info("Selected: " + selectedNode);
          this.selectedNode = selectedNode;
      }
  
      public void onTreeNodeClicked(NodeSelectEvent e)
      {
          logger.info("Clicked: " + e.getTreeNode());
          selectedNode = e.getTreeNode();
      }
  }
  </code></pre>
  
  <p>Correspondingly, there are few more little pages, which contain nothing more than a Primefaces widget - or simply HTML.</p>
  
  <p>This gives such layout in the web browser:</p>
  
  <pre><code>------------------------------------
  | Widget      |                    |
  |   Editor    |                    |
  |   Calendar  |                    |
  |             |                    |
  |             |                    |
  |             |                    |
  |             |                    |
  |             |                    |
  |             |                    |
  ------------------------------------
  </code></pre>
  
  <p>The problem I have is</p>
  
  <ul>
  <li>when I click on the Editor node above, it gets selected and highlighted, and the <code>&lt;ui:include /&gt;</code> loads the page/chunk I requested</li>
  <li>when I click on the Calendar node above, it gets selected and highlighted, and the <code>&lt;ui:include /&gt;</code> loads the page/chunk I requested</li>
  <li>when I click back on the Editor node above, it did not get selected, but the <code>&lt;ui:include /&gt;</code> still loads the page/chunk I requested; the Calendar node was still highlighted</li>
  </ul>
  
  <p>If I turn off the update attribute at <code>&lt;p:tree /&gt;</code>, tree node selection and highlight is working as expected; except I miss the dynamic <code>&lt;ui:include /&gt;</code> which I needed.</p>
  
  <p>As for the logging traces above, Widgets is set to be selected initially. Then, when I clicked Editor, the sequence of the methods are</p>
  
  <pre><code>2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
  INFO: Selected: Widgets
  2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
  INFO: Selected: Widgets
  2011/05/24 23:06:25 com.foo.bar.MenuTreeBean setSelectedNode
  INFO: Selected: Editor
  2011/05/24 23:06:25 com.foo.bar.MenuTreeBean onTreeNodeClicked
  INFO: Clicked: Editor
  2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
  INFO: Selected: Editor
  </code></pre>
  
  <p>But when I clicked Calendar, the sequence became</p>
  
  <pre><code>2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
  INFO: Selected: Editor
  2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
  INFO: Selected: Editor
  2011/05/24 23:07:15 com.foo.bar.MenuTreeBean setSelectedNode
  INFO: Selected: Editor
  2011/05/24 23:07:15 com.foo.bar.MenuTreeBean onTreeNodeClicked
  INFO: Clicked: Calendar
  2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
  INFO: Selected: Calendar
  </code></pre>
  
  <p>I wonder if I miss anything out so that when I click the tree nodes, the <code>&lt;ui:include /&gt;</code> will load, and the tree node gets highlighted?</p>
  
  <p>Thanks in advance.</p>