Author: atsebro Date: 2009-03-24 13:03:25 -0400 (Tue, 24 Mar 2009) New Revision: 13147 Added: trunk/test-applications/realworld2/doc/tree_build_descr.xhtml trunk/test-applications/realworld2/doc/tree_click_descr.xhtml Log: Added: trunk/test-applications/realworld2/doc/tree_build_descr.xhtml =================================================================== --- trunk/test-applications/realworld2/doc/tree_build_descr.xhtml (rev 0) +++ trunk/test-applications/realworld2/doc/tree_build_descr.xhtml 2009-03-24 17:03:25 UTC (rev 13147) @@ -0,0 +1,85 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + 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"> + +<h1> The &lt;rich:tree&gt; component</h1> +<p>The component is designed for hierarchical data presentation and is applied for building a tree structure. The component also uses built-in drag and drop.</p> + +<p>The <rich:tree> component in the PhotoAlbum application helps to represent and realize inherently the �Shelves�Albums�Photos� paradigm. Shelf is the highest possible level in the tree hierarchy. Shelfs are used to group thematic albums and may contain as many albums as needed. Photos are not represented in the tree because of their possible big quantities, which can make tree clumsy. Photos by themselves are rendered in the center of the screen (hereinafter referred to as watching area).</p> + +<p>Implicitly, the <rich:tree> components takes one of the main position in the PhotoAlbum and bounded with many application logic. There are several ways to realize the <rich:tree>. In the current application the <rich:tree> is realized using model tag <rich:treeNodesAdaptor>.</p> + +<p>Using the <rich:treeNodesAdaptor> means that the typical hierarchical tree structure is built on page straight in the component tree. The code snippet below shows the idea of how the tree can be built on the page with the help of adaptors:</p> + +<BLOCKQUOTE> +<rich:tree> + <rich:treeNodesAdaptor> + <rich:treeNode /> + + <rich:treeNodesAdaptor> + <rich:treeNode /> + + <rich:treeNodesAdaptor> + <rich:treeNode /> + + <rich:treeNodesAdaptor> + <rich:treeNode /> + </rich:treeNodesAdaptor> + + </rich:treeNodesAdaptor> + </rich:treeNodesAdaptor> + </rich:treeNodesAdaptor> +</rich:tree> +</BLOCKQUOTE> + +<p>The NodesAdaptors completely repeat the tree hierarchy that takes place in an application. Adaptors may be nested one into another as deeply as needed. </p> + +<p>When using <rich:treeNodesAdaptor> component there is no need to specify the "value" and "var" attributes for the <rich:tree>. The values for nodes to be rendered are passed directly into the corresponding adaptor and the component do all the necessary iterative job. </p> + +<p>The realization of the <rich:tree> in the application is very close to the model shown above. The <rich:treeNodesAdaptor> component has �nodes� attribute. This attribute accepts collections that may include lists, arrays, maps, XML NodeList and NamedNodeMap either as single objects. The top <rich:treeNodesAdaptor> in the application responses for shelfs rendering. It �nodes� attribute refers to getShelfs() method of ShelfManager class and gets the collection of shelfs associated with the current user and all the shared shelfs in the system. Take a look at this method:</p> + +<BLOCKQUOTE> + public List<Shelf> getShelfs(){ + if(shelfs == null){ + shelfs = shelfAction.getShelfs(user); + } + return shelfs; + } +</BLOCKQUOTE> + +<p>After the �nodes� attribute of �shelf� <rich:treeNodesAdaptor> receives the collection of shelfs, it switches to the nested �album� <rich:treeNodesAdaptor>, which �nodes� attribute refers in it turn to albums field of the Shelf class and takes the collection of all albums associated with the current shelf. The <rich:treeNodesAdaptor> renders all the albums that belongs to current iterating shelf and switches back to the �shelf� adaptor to render and iterate the next shelf in the received earlier collection. Here is how it looks in the webapp/includes/index/tree.xhtml file:</p> +<BLOCKQUOTE> +<rich:tree id="tree" ...> + <rich:treeNodesAdaptor nodes="#{shelfManager.getShelfs()}" ...> + <rich:treeNode reRender="mainArea" ...> + <rich:dropSupport id="shelfDND" .../> + <ui:include src="/includes/contextMenu/CMForShelf.xhtml" > + <ui:param name="shelf" ... /> + </ui:include> + <h:outputText value="#{shelf.name}" /> + <h:outputText value=" :: " /> <strong>#{shelfManager.getCountUnvisitedImages(shelf)} + </strong> new + <a4j:support reRender="tree, mainArea" .../> + <a4j:support reRender="tree, mainArea" .../> + </rich:treeNode> + <rich:treeNodesAdaptor var="album" ...> + <rich:treeNode reRender="mainArea" ...> + <ui:include src="/includes/contextMenu/CMForAlbum.xhtml" > + <ui:param name="album" ... /> + </ui:include> + <rich:dndParam name="label" ... /> + <h:outputText value="#{album.name}" /> + <h:outputText value=" :: " /> + <strong>#{albumManager.getCountUnvisitedImages(album)}</strong> new + <rich:dropSupport id="php" .../> + <a4j:support reRender="tree, mainArea" .../> + <a4j:support reRender="tree, mainArea" .../> + </rich:treeNode> + </rich:treeNodesAdaptor> + </rich:treeNodesAdaptor> +</rich:tree> +<BLOCKQUOTE> +</ui:composition> \ No newline at end of file Added: trunk/test-applications/realworld2/doc/tree_click_descr.xhtml =================================================================== --- trunk/test-applications/realworld2/doc/tree_click_descr.xhtml (rev 0) +++ trunk/test-applications/realworld2/doc/tree_click_descr.xhtml 2009-03-24 17:03:25 UTC (rev 13147) @@ -0,0 +1,11 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + 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"> + +<h1> How the tree built</h1> +<h1> What happens when click on tree node</h1> +<BLOCKQUOTE> +</ui:composition> \ No newline at end of file