Tree Component

Description

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

Syntax

<v:tree 
        id="id" 
        binding="control binding"
        suggestedItemsMethod="backend bean callback method" 
        value="Bean"/>
<v:tree selectable="true" 
		defaultImageURL="images/folderClosed.gif" 
		defaultExpandedImageURL="images/folderOpened.gif" 
		hideRootExpandSign="true">
	<v:treeNode itemLabel="Mes documents récents" itemValue="recent" imageURL="images/recent.gif"/>
	<v:treeNode itemLabel="Bureau" itemValue="desk" imageURL="images/desk.gif"/>
</v:tree>

Instructions