• Info
• Initial State
• View Source
• Run

Advanced VSPX programming

VX-S-4 VSPX tree control

Directory tree browser

Vertical oriented tree

To display any data which can be represented as tree hierarchy, the vspx:tree control can be used. In it's forms it may be represented as vertical or horizontal one. The following example show directory structure of the VSPX tutorials on local file system.

The vspx:tree control have three important attributes:

• root - This is a name of PL procedure which must return nodes under root of tree
• child-function - This evaluated on a node must return children nodes or empty if it's a leaf
• start-path - This expression or constant is passed to the root function

In our example the root and child functions returns a array of strings per directory or file, the '.' and '..' are omitted. In interest also are two special containers and one place-holder:

• leaf-template - the content of this template will be instantiated and rendered when current position in the tree is a leaf.
• node-template - this will be instantiated and rendered on nodes, per each node. The place of next node is designated with "node" placeholder.
• node - place-holder to mark-up place where child content must be instantiated.

In that control like as in data-set may have special button suffixed with '[name of tree control]_toggle'. This will be rendered as other submit buttons (in our case it have image appearance), but it will have special function to expand or collapse the branch.

View the source	Action
1. vx_s_4.sql	Set the initial state
2. tree.vspx	Run