Using of the Tree component
|
Using of the Tree component |
|
Tree component (FacesTreeImpl) implements FacesTree interface. It has many properties responsible for tree appearance and behavior. It also has its data model, selection model and user interface manager. Data model has hierarchical structure and consists of FacesTreeItem objects. Each FacesTreeItem object implements DataModel and can include another FacesTreeItem objects. FacesTreeItem instance also has a set of properties defining behavior of single tree item.
Also this component supports Drag and Drop operations, item selection, refresh and lazy loading by AJAX operation.
You can set these properties on JSP page into <tree:tree> tag. It may contain only <tree:treeData> and <tree:treeSelection> tags.
If you use other framework than JSP you can use setter and getter methods on Tree instance
| • | individual properties |
Name |
Description |
id |
ID of tree component |
varName |
javascript component's variable name |
treeHeight |
Height of the whole tree component. Values any HTML valid values |
| • | skinning properties |
Name |
Description |
defaultTreeStyleClass |
CSS class of the Tree component |
defaultTreeItemStyleClass |
CSS class of the TreeItem component |
highlightTreeItemStyleClass |
CSS class of the higlight/select TreeItem component |
| • | look and feel properties |
Name |
Description |
bgColorHilite |
HTML color of item's background when mouse is over it |
bgColor |
HTML background color |
fontSize |
HTML font size of any tree text |
fontWeight |
HTML font weight of any tree text |
fontFamily |
HTML font family of any tree text |
fontStyle |
HTML style of any tree text |
fontColorHilite |
HTML color of item's text when mouse is over it |
fontColor |
HTML color of any tree text |
containerBg |
HTML background color of tree surrounding container |
| • | appearance properties |
Name |
Description |
rootNodeOpened |
Defines whether tree folders are showed initially when root folder is present. Must be TRUE,FALSE. Default value : FALSE |
allNodesExpanded |
Defines whether all tree folders are exposed. Must be TRUE,FALSE. Default value : FALSE |
noTreeIcons |
Defines to draw the tree without +/-/tree lines/ icons. Must be TRUE,FALSE. Default value : FALSE |
rootNodeVisible |
Defines whether to draw root node. Must be TRUE,FALSE. Default value : FALSE |
rootNodeImagePresent |
Defines whether to draw root node +/- icon. Must be TRUE,FALSE. Default value : FALSE |
multipleOpenedBranches |
The tree branch selection behavior.If FALSE – only one branch can be opened in a given moment. Must be TRUE,FALSE. Default value : FALSE |
multipleOpenedBranches |
Defines to draw the tree without +/- icons. Must be TRUE,FALSE. Default value : FALSE |
mixedStatusMode |
Defines how to show status text of folders/items. . Must be TRUE,FALSE. Default value : FALSE. If TRUE – tool tip is showed at status bar and as tool tip |
nodeStatusText |
tooltip of the +/- tree icon that is showed depending on the corresponding "mixedStatusMode" property |
header |
Any HTML content that is showed in header section of a tree component |
footer |
Any HTML content that is showed in footer section of a tree component |
textWrap |
Defines whether to wrap text of tree items. Must be TRUE,FALSE. Default value : FALSE |
frameless |
Defines whether to show tree in ordinary HTML page or in HTML frames. Must be TRUE,FALSE. Default value : FALSE |
useImageScaling |
Use HTML image scaling or use images as is. Must be TRUE,FALSE. Default value : TRUE |
advancedSelection |
Item visual selection mode : plain or not. Must be TRUE,FALSE. Default value : FALSE |
| • | item sizes |
Name |
Description |
nodeImageHeight |
Height of tree skeleton node images |
nodeImageWidth |
Width of tree skeleton node images |
| • | images |
Name |
Description |
imageHeight |
Height of folders' and items' images |
imageWidth |
Width of folders' and items' images |
itemNodeImage, itemNodeImage, itemTopNodeImage, itemLastNodeImage, verticalLineImage, rootNodeOpenedImage, rootNodeClosedImage, folderOpenedImage, folderClosedNodeImage, folderClosedTopNodeImage, folderClosedLastNodeImage, folderOpenedNodeImage, folderOpenedTopNodeImage, folderOpenedLastNodeImage, blankImage |
Tree skeleton images |
| • | load properties |
Name |
Description |
useLazyLoad |
Client side lazy loading mode indicator. Must be TRUE,FALSE. Default value : FALSE |
useServerSideLazyLoad |
Server side lazy loading mode indicator. Must be TRUE,FALSE. Default value : FALSE |
lazyLoadLevel |
The level of tree structure that is drawn at once in client side and server side lazy loading modes. Must be 1,2,3,etc. depending on tree structure. Default value : 1 |
lazyLoadTimeout |
Timeout in milliseconds used in client and server side lazy loading modes when getting content of the given folder. Default value : 1500 |
lazyLoadHideTimeout |
Timeout in milliseconds used in client and server side lazy loading modes when closing the given folder. Default value : 1500 |
whenLoadingText |
Text that is showed when tree component structure is initialized on the client side. Default value : "Building tree structure..." |
| • | behavior properties |
Name |
Description |
userOnItemSelect |
javascript user callback function called when item is clicked |
userOnClearSelection |
javascript user callback function called when tree javascript component call the method "clearSelection" of it's selection model |
userFunctionOnRightClick |
javascript function on right mouse click |
itemSelectOnRightClick |
If True then tree item selection occurs on mouse right click. False is default |
useMetaModel |
If True then the tree uses metamodel. True is default |
userAddToFolder |
javascript user callback function called when tree javascript component exploits client side lazy loading and ready to get content for the given folder when user clicks on it. Function usage : userAddToFolder(clickedFolderJsVarName). One of the possible usage is to analyze the given folder and add folder's content dynamically on the fly. |
onMouseOverExpandCollapse |
Defines expose/collapse mode of +/- tree icon. . Must be TRUE,FALSE. Default value : FALSE. If TRUE - node is exposed by pointing mouse over it and waiting "onMouseOverExpandCollapseTimeout" period of time. |
onMouseOverExpandCollapseTimeout |
Timeout period in milliseconds when onMouseOverExpandCollapse=TRUE". Default value : 500 |
serverSideOnBeforeItemSelectTrigger |
URL of servlet/jsp that will be called before tree item will be selected |
serverSideOnAfterItemSelectTrigger |
URL of servlet/jsp that will be called before tree item will be selected |
treeBranchSelectedListener |
Uses with the serverSideAction property. Class must implement TreeBranchSelectedListener interface to handle client generated event. Handler method of this class will be called only if serverSideAction set to true. Fully qualified listener class name. |
treeLeafSelectedListener |
Uses with the serverSideAction property. Class must implement TreeLeafSelectedListener interface to handle client generated event. Handler method of this class will be called only if serverSideAction set to true. Fully qualified listener class name. |
serverSideAction |
If true - server-side handling of client generated events enabled. Handler class must be set in the treeBranchSelectedListener, treeLeafSelectedListener properties. Must be TRUE,FALSE. Default value : FALSE |
| • | Progress Bar properties |
Name |
Description |
ajaxProgressShow |
True - show Progress Bar when ajax request processing. Default TRUE |
ajaxProgressTitle |
The text label of the Progress Bar |
ajaxProgressId |
Progress Bar ID. Binds stabdaloane Progress Bar to Component via Progressbar ID |