User:Tonytrihoang@yahoo.com

How to display Tree2 node description/content in a separate frame

Prerequisites: - Some knowledge of JSP/JSF - Some knowledge of MyFaces Tree2 - Familiar with HTML/Javascript

Solution: 1)Define TreeView and NodeDetails frameset 2)Define TreeView JSP 3)Define NodeDetails JSP 4)Use HTML .onload event to update NodeDetails frame's content

Other notes: - .onload is a HTML/Javascript clientside event, implies that a node has been selected - NodeDetails JSP can handle the case where no node selected i.e. first time the frameset loaded - both frames shares the same session, and have access to the same backend bean (e.g. treebacker)

Code sample: 1)Separate Tree and NodeDetails views into separate frames e.g.       "          name="TreeView" scrolling="auto">     "            name="NodeDetails" scrolling="auto">

2)Define Tree view in TreeView frame e.g. result-folders.jsp                                                                                                <h:commandLink action="nodeClicked" styleClass="#{t.nodeSelected ? 'documentSelected':'document'}" actionListener="#{StatusTreeHandler.processAction}" value="#{node.description}" immediate="true"> </h:commandLink>

</h:panelGroup> </f:facet> 3)Define Node Details View in NodeDetails frame e.g. folder-details.jsp    <h:panelGroup>       <h:panelGroup>         <h:outputText style="font-size: 12pt; font-wight: bold; text-align: top"                       value=<%=label%>/>         <h:outputText rendered="#{StatusTreeHandler.folderSelected}"                       value="#{StatusTreeHandler.selectedFolder}"/>       </h:panelGroup>       <h:dataTable id="resultList" width="100%"          columnClasses="col1, col2"          rowClasses="row1, row2"          rendered="#{StatusTreeHandler.resultSelected}"          value="#{StatusTreeHandler.results}"          var="result"          border="1">         <h:column>           <f:facet name="header">             <h:outputText style="font-size: 12pt; font-wight: bold" value="Name"/>           </f:facet>           <h:outputText value="#{result.name}"/>         </h:column>         <h:column>           <f:facet name="header"> <h:outputText style="font-size: 12pt; font-wight: bold" value="Value"/> </f:facet> <h:outputText value="#{result.value}"/> </h:column> </h:dataTable> </h:panelGroup>