4 Replies Latest reply on Jul 16, 2009 5:18 AM by Matt Kohanek

    need help having selecting a tree node change a ui:define ar

    Matt Kohanek Novice

      I have my tree working and showing ownership (finally), and now I have been trying to get it to change what shows up in my content pane when a node is clicked on. There is only one example I have found and it doesn't fit what Im doing at all.

      So I have a page that has a bunch of ui:define areas, most of them are always the same on each page, but the main one is "content" that changes regularly. In my "project_explorer" ui:define area I have a rich:tree like this:

      <rich:tree>
       <rich:treeNodesAdaptor nodes="#{nodesBean.projects}" var="project">
       <rich:treeNode>
       <h:outputText value="#{project.projectName}" />
       </rich:treeNode>
       <rich:recursiveTreeNodesAdaptor roots="#{project.devicesList}" var="device">
       <rich:treeNode>
       <h:outputText value="#{device}" />
       </rich:treeNode>
       </rich:recursiveTreeNodesAdaptor>
       </rich:treeNodesAdaptor>
       </rich:tree>


      Im not sure how I should handle this. I can change each node there to an h:outputLink instead of h:outputText, and possibly have the page it directs you to populate data depending on which node is selected. That is my idea of how to handle this, but still I need to figure out how to tell my jva code which node is selected.

      I started trying to do something very simple, first doing java code that set a String variable to "name":

      ...
      private String nodeTitle;
      
       public void selector(NodeSelectedEvent event){
       nodeTitle="Name";
       }
      
      ...


      Then adding doing something like this for the rich:Tree:

      <rich:treeNode nodeSelectListener="#{treeClickBean.selector}">
       <h:outputText value="#{project.projectName}" />
       </rich:treeNode>


      all I added to it was nodeSelectListener="#{treeClickBean.selector}" hoping that when that node was clicked on it would invoke the selector method and set nodeTitle to "name"
      Then on the jsf pages "content" pane I put:

      <h:outputText escape="false" value="Selected Node: #{treeClickBean.nodeTitle}" />


      I figured this was the simplest way to start, hoping that when a node was clicked on the content pane would display "Selected Node: name"

      But this didnt happen unfortunately. Ive tried a few different variations but havent had any luck.

      So I need some advice on how to handle this. Should clicking on a node send you to a different page altogether, or should I have it change the ui:define "content" area only. Are there any good (simple) samples out there, I really didnt find any.

      Any advice at all on this would be great. I looked at http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?tab=model&cid=1805529 but that didnt seem to help me much

      BTW here is the entire jsf page so you can see the different ui:define areas if it helps:

      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:ui="http://java.sun.com/jsf/facelets">
      
      <ui:composition template="/pages/layout.xhtml">
      
       <ui:define name="banner">
       <h:form>
       <h:graphicImage value="/images/NILogo.jpg" width="800" height="50" />
       </h:form>
       </ui:define>
      
       <table>
       <tr>
      
       <td>
       <ui:define name="top_menu">
       <h:form>
       <h:outputLink value="/NI/pages/first.jsf">MDN PROJECT EXPLORER</h:outputLink><h:outputText value=" | " />
       <h:outputText value=" | " /><h:outputText value=" | " /><h:outputText value=" | " />
       <h:panelGroup>
       <h:outputLink value="/NI/top_menu/charts.jsf" >CHARTS</h:outputLink><h:outputText value=" | " />
       <h:outputLink value="/NI/top_menu/map.jsf" >MY MAP</h:outputLink><h:outputText value=" | " />
       </h:panelGroup>
       <hr/>
       </h:form>
       </ui:define>
       </td>
      
      
       </tr>
       </table>
      
      
       <table>
       <tr>
      
       <td style="max-width: 20%; float: left">
       <ui:define name="project_explorer">
       <h:form>
      
       <rich:tree>
       <rich:treeNodesAdaptor nodes="#{nodesBean.projects}" var="project">
       <rich:treeNode>
       <h:outputText value="#{project.projectName}" />
       </rich:treeNode>
       <rich:recursiveTreeNodesAdaptor roots="#{project.devicesList}" var="device">
       <rich:treeNode>
       <h:outputText value="#{device}" />
       </rich:treeNode>
       </rich:recursiveTreeNodesAdaptor>
       </rich:treeNodesAdaptor>
       </rich:tree>
      
       </h:form>
       </ui:define>
       </td>
      
       <td style="width:85%; float: right">
       <ui:define name="content">
       <h:form>
      
       </h:form>
       </ui:define>
       </td>
      
       </tr>
       </table>
      
      </ui:composition>
      
      </html>