Tree Component


The tree Component shows informations in an arborescent view. It can be compared to the tree found in most modern file explorer. It allows contextual menus ...

The tree Component has the following capabilities :

  • IDoubleClickEventCapability
  • IRequiredCapability
  • IScrollableCapability
  • IBorderCapability
  • IReadOnlyCapability
  • IMenuCapability
  • IShowValueCapability
  • IOverStyleClassCapability
  • IFilterCapability
  • ILoadEventCapability
  • IExpandEventCapability
  • IPreSelectionEventCapability
  • IDragEventCapability
  • IDraggableCapability
  • IDropEventCapability
  • IDropCompleteEventCapability
  • IDroppableCapability
  • ICheckableCapability
  • ICheckCardinalityCapability
  • ICheckEventCapability
  • ICheckedValuesCapability
  • IClientCheckFullStateCapability
  • ISelectableCapability
  • ISelectionCardinalityCapability
  • ISelectionEventCapability
  • ISelectedValuesCapability
  • IClientSelectionFullStateCapability
  • IPreloadedLevelDepthCapability
  • IExpandableCapability
  • IExpandedValuesCapability
  • ICheckComponent
  • ISelectionComponent
  • IComponentValueTypeCapability

The default tree renderer is linked to the f_tree javascript class. f_tree extends f_component, fa_readOnly, fa_disabled, fa_immediate, fa_subMenu, fa_selectionManager, fa_checkManager, fa_itemClientDatas, fa_scrollPositions, fa_overStyleClass, fa_filterProperties, fa_droppable, fa_draggable, fa_autoScroll, fa_autoOpen

Table of component style classes:

Style Name Description
f_tree Defines styles for the wrapper DIV element
f_tree_body Defines styles for the wrapper UL element
f_tree_parent Defines styles for the wrapper LI element of the parent nodes
f_tree_depth Defines styles for the DIV element of the depth node
f_tree_node Defines styles for the DIV element of the node

Screen Shot


        binding="control binding"
        suggestedItemsMethod="backend bean callback method" 
<v:tree selectable="true" 
	<v:treeNode itemLabel="Mes documents r├ęcents" itemValue="recent" imageURL="images/recent.gif"/>
	<v:treeNode itemLabel="Bureau" itemValue="desk" imageURL="images/desk.gif"/>