Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Basic example

The tree control displays a tree which is generated from application data. The key features are:
  • Attributes control the rendering of the tree.
  • The possibility to define the tree as "single" or "multiselect", i. e. select one or multiple nodes of the tree.
  • Editing mode for simple handling of tree structures inside the application.
Furthermore there is a TreeListbox Control, which can be described as a vertical tree. This is handy for categorization actions.

A classic tree can created with the <tc:tree/> tag. Tobago knows two more presentations of a tree. As a menu and as a list.

Tag Library Documentation: <tc:tree/> | <tc:treeNode/> | <tc:treeIndent/> | <tc:treeLabel/> | <tc:treeIcon/>

Basics

The tree tag has two attributes, value and var. The attribute value contain a DefaultMutableTreeNode, which represent the tree. The var attribute is the name of the variable, to get specific content.

<tc:tree value="Node name=Category id=root" var="node">

In every tree, a <tc:treeNode/> has to be added. A <tc:treeNode/> can contain several tags to describe the node. In this example, two tags are used.
The <tc:treeIndent/> tag, which add an indent besides a node and <tc:treeLabel value="#{node.userObject.name}"/>, which contain the String for the label. Notice that 'node' is the value of the var attribute from the tree tag.

Icon

An icon can be added to a node with <tc:treeIcon value="image/feather-leaf.png" closed="image/feather-closed.png" open="image/feather-open.png"/>. In this case, the targeted image is 'feather-leaf.png'. It is displayed for leaf nodes. For open or closed folder there are explicit attributes. If these attributes are not used, defaults are used.

Additional Attributes

In this example, some boolean attributes can be activated and deactivated in the right boxes for <tc:tree/> and <tc:treeIndent/>.

<tc:tree/>

<tc:treeIndent/>
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.