ArticlesTutorialsInterview Questions & AnswersCertificationsFree Books & Sample ChaptersTechnical Discussions  Your Account | Advertise with us | Feedback |
Tomahawk Tree2

 t:tree Tomahawk Tag Home t:treeCheckbox 



  1. Introduction
  2. Tag Attributes
  3. Example


The Tree2 component renders a tree representation of your data with a HTML table. The tree is dynamic: nodes are expanded or collapsed when the user clicks them. The component supports both client side interaction through JavaScript, and server side interaction. In the latter case, each user click results in a request/response cycle, which re-renders the tree in the new view state.

Note that in the latter case only the visible (expanded) data is sent to the client. In the first case (client side tree), the entire tree is sent to the browser with every HTML response. Each node of the tree carries a sizable amount of HTML code with it (think 200 characters on average, depending on the amount of information you want to show in for a node), and this information is sent to the browser also for nodes that are not visible to the end user when the page is rendered, because one of their ancestor nodes is collapsed.

If you have a tree, e.g., 4 levels deep, with 10 children on average for each node, you will transmit 10 + 102 + 103 + 104 = 11 110 nodes of 200 characters, or 2 222 000 characters, or roughly 2MB of data. This example should make clear that, although the client side tree gives a very good user experience, you could grow a bandwith problem very rapidly, so be aware. This tree is fit for small trees, or medium sized trees on an intranet or over a broadband connection. For large trees, or when you need to take into account low-bandwidth connections, you should use the server side tree.

Note :

  • Define your data inside a backing bean
    • TreeNode (Interface)
    • TreeNodeBase (Implementation class)
  • Define your layout in a JSF page via facets
  • Navigation via CommandLink component
  • You can choose between client-side or server-side interaction with the clientSideToggle attribute. <t:tree2 clientSideToggle="false" ... gives you the servers-side interaction. true (client-side interaction) is the default for this attribute

Tag Attributes

AttributeDescription   Type    
binding The value-binding expression linking this component tag to a backing bean property (of type UIComponent or appropriate subclass) String
clientSideToggle The clientSideToggle attribute expects a boolean value that, when true, indicates that client-side toggling should be used for this tree String
id The component identifier for this component. This value must be unique within the closest parent component that is a naming container.String
imageLocation The imageLocation attribute specifies the location of images for this component. String
javascriptLocation The javascriptLocation attribute defines the location of JavaScript files for this component. String
preserveToggle The preserveToggle attribute expects a boolean value that, when true, indicates that the tree should preserve its toggled state between JSF requests. String
rendered A value-binding expression that evaluates to a Boolean condition indicating if this component should be rendered. String
showLines The showLines attribute attribute expects a boolean value that, when true, indicates that lines should be shown in the tree. String
showNav The showNav attribute expects a boolean value that, when true, indicates that plus/minus navigation handles should be shown beside each node in the tree.  
showRootNode The showRootNode attribute expects a boolean value that, when true, indicates that the root node of the tree should be displayed.  
styleLocation The styleLocation attribute defines the location of Cascading Style Sheets for this component.  
value(required) The value attribute takes a value-binding EL expression (e.g.,"#{myBean.myProperty}") that identifies the object or literal String value (e.g.,"foo") to assign to the alias.String
var The var attribute sets the name of a request-scope attribute exposing the data for each iteration over the rows in the underlying data model for this table  
varNodeToggler The varNodeToggler attribute defines the name of a server-side object that controls expanding and collapsing of nodes in the tree.  


Check this example and this too.

 t:tree Tomahawk Tag Home t:treeCheckbox 


About Us | Our Mission | Terms of use | Author Terms |    Search        | Contact Us | Advertise With Us | Link to Us | Sitemap
Copyright © 2016 developersBOOK.COM. All rights reserved.