Tree incubating / since 0.8.5

Use b:tree to obtain a Tree component with basic functionalities. It's based on the Bootstrap treeview written by Jon Miles, which is available under an Apache V2 license.

The Tree component needs a backend model to provide the UI structure. This means you must provide a value of type net.bootsfaces.component.tree.model.Node.

Currently, the Tree component does not mantain its state so, if you refresh the page, the tree resets to its initial state. This happens because the component is rendered only client-side.

Basic usage


Know bugs and limitations

We will try to solve this limitation in the future version of the component.

This component is also not yet able to maintain it's state also after a page refresh (expansion level and checked items).

Advanced usage

In this case, we have defined a nodeSelectionListener that listen to selection and check events


To manage selection, check and expand events, you need to implement in your bean, the TreeNodeEventListener interface. This interface exposes some methods to manage the events in the backend. For example:

Last server-side events:             
                                         
            

Nodes with hyperlinks

If you click on one of the nodes in the example above, the page reloads. That's not a bug. It only shows what happens if you enable hyperlinks (enableLinks="true") without provided an href attribute in the tree model. The node called "child 4" has an hyperlink pointing to the Italian Google search. The other nodes simply generate a default href="#", causing the page to reload.

Limiting the height of the tree

Trees tends to become large if fully expanded. You can limit the height of the tree using an CSS class or an CSS inline style:

Reference section

Attribute Default value Description
border-color
borderColor (alternative writing)
#DDDDDD Hex value of border color (default #DDDDDD)
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
collapse-icon
collapseIcon (alternative writing)
(none) Glyphicons of collapse.
color (none) Hex value of text color.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
enable-links
enableLinks (alternative writing)
false Boolean value to specify if enable href link. Only useful if you set the href attribute in every node of the tree model.
expand-icon
expandIcon (alternative writing)
(none) Glyphicons of expand.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
hover-color
hoverColor (alternative writing)
(none) Hex value of hover color.
id (none) Unique identifier of the component in a namingContainer.
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
node-selection-listener
nodeSelectionListener (alternative writing)
(none) Selection listener called on selection changed.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
render-root
renderRoot (alternative writing)
true Boolean value to specify if the root node must be rendered.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
selected-color
selectedColor (alternative writing)
(none) Hex value of selected color.
show-border
showBorder (alternative writing)
false Boolean value to specify if tree items has to display the border.
show-checkbox
showCheckbox (alternative writing)
false Boolean value to specify if checkbox is rendered or not.
show-icon
showIcon (alternative writing)
false Boolean value to specify if icons are rendered or not.
show-tags
showTags (alternative writing)
false Boolean value to specify if tags was show or not.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
tabindex (none) Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
update (none) Component(s) to be updated with ajax.
value (none) Tree model value. Requires a java.util.List<net.bootsfaces.component.tree.model.Node> to work.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.