Tree widget == Description == These markups implement //Trees// in HOP documents. A //tree// acts as a list that can be interactively //folded// and //unfolded//. ~~ Note: ,( :style { font-weight: bold; color: red } [ The markups presented in this page are not yet supported on client side programming. They are only supported on server side.]) == Synopsis == === Server === ( arg ...) ( arg ...) ( arg ...) ( arg ...) === Client === (tree-close tree) (tree-open tree) (tree-toggle tree) (tree-reset! tree) (tree-selection tree) (tree-select-all! tree) === Requirements === Client codes using //Trees// need to load the script ++hop-tree.js++. They also need to load the ++hop-tree.css++ style sheet. Hence, documents using //Trees// must include in their header, the following statement: ( :include "hop-tree") == Examples == == Server Definitions == === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | :open | boolean | ++#f++ | is the tree starts open? | | :multiselect | boolean | ++#f++ | does the tree supports multi-selection? | | :onselect | function | _ | a function to invoke on selection. | | :onunselect | function | _ | a function to invoke on unselection. | | :onopen | function | _ | a function to invoke on opening. | | :onclose | function | _ | a function to invoke on closing. | | :value | string | ++""++ | a string denoting the value of the tree. | | :history | obj | _ | enables history recording. | | :visible | boolean | //#t// | is the tree node visible? | | :inline | boolean | ++#t++ | enable/disable image icon inlining. | | :iconopen | obj | _ | the image representing the open folder. | | :iconclose | obj | _ | the image representing the close folder. | | :icondir | string | _ | an alternate directory for misc. icons. | | body | element | empty | the body. | This function creates a //tree//. Its first child has to be a ++++ and its second child a ++++. The ++:iconopen++ and ++:iconclose++ arguments can either be: * ++#t++ (the boolean true value). In such a case the default icon is used. * a file name holding the image content. * a client side expression denoting the image content. The ++:icondir++ argument, when provided, is the name of a directory containing images for representing tree connection lines. Unless you know what you are doing, you should not provide a value for this argument! The argument ++:history++ controls whether an history event is associated with selected a tab. When history is enabled, the //back button// of the browser restores previously selected tabs. The history is disabled if ++:history++ is ++#f++. It is enabled if ++:history++ is ++#t++ or if it is not ++#f++ and an ++:id++ value is provided. The event handlers ++:onselect++ and ++:onunselect++ are expression that are evaluated the a tree node is selected (respec. unselected). The ++this++ object points to the tree. The ++value++ field of that object denotes the currently selected node value. === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | body | element | empty | the body. | This function creates an optional //tree// header. === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | body | element | empty | the body. | As for ++++s, tree bodies may be delayed using ++++ markups. Delayed tree bodies are evaluated each time the tree is open. === ++++ === ^ attributes ^ type ^ default ^ short description ^ | :id | string | //random// | element identifier. | | :value | string | ++""++ | a string denoting the value of the leaf. | | :inline | boolean | ++#t++ | enable/disable image icon inlining. | | :icon | obj | _ | the image representing the leaf. | | body | element | empty | the body. | The ++:icon++ argument can either be: * ++#t++ (the boolean true value). In such a case the default icon is used. * a file name holding the image content. * a client side expression denoting the image content. == Client Definitions == === ++(tree-close tree)++ === tree-close ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Closes the ++tree++. === ++(tree-open tree)++ === tree-open ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Opens the ++tree++. === ++(tree-toggle tree [history])++ === tree-toggle ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Opens the ++tree++ if closed. Otherwise, closes it. === ++(tree-reset! tree)++ === tree-reset! ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Resets the ++tree++ selection. === ++(tree-selection tree)++ === tree-selection ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Returns a vector filled with the current tree selection. === ++(tree-select-next! tree)++ === tree-select-next! ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Select the next element of the tree. === ++(tree-select-previous! tree)++ === tree-select-previous! ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Select the previous element of the tree. === ++(tree-select-all! tree)++ === tree-select-all! ^ arguments ^ type ^ short description ^ | tree | tree | the tree. | Select all the rows of a tree. == Style == == See also == , tree-