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

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

    meghiddo Jul 15, 2009 3:35 PM

      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>


      • 1577 Views
      • Tags: