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.
<h:form /> tag. That's because
it's able to perform AJAX calls.prependId="false". Otherwise, the tree isn't styled correctly.
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).
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:
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.
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:
| Attribute | Default value | Description |
|---|---|---|
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| 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. |