Tree.widgettree

The <tree class="widgettree" is a addon, not a formwidget. To use it, you need to include WidgetTree.css in your source as well.

It allows you to edit the contents of a treecell in a tree by doubleclicking on it. It only works for contenttrees. It should at least have one <treewidgets element, inside the tree tag, after the treechildren, like this: <tree class="widgettree" > <treecols> ... </treecols> <treechildren> ... </treechildren> <treewidgets> ... </treewidgets> </tree> The treewidgets element shows up as a toolbar at the bottom of the tree. If you doubleclick a cell, a formwidget - by default a textbox - appears in the toolbar. This formwidget is used to edit the content of the selected cell.

In a widgettree, a treecell has attributes value and label. treecol elements has a name attribute. The treecols name and the treecell's value and label combine into one 'seed' which is fed to the formwidget.

In a treecell, only the label is displayed, as usual, but if you specify <tree showvalues="true", the new value of a cell (after editing) is displayed as part of the new label.

custom formwidgets

You can add you own formwidgets inside the <treewidgets element. You specify which widget to use for a column with the <treecol widget="mywidget"" attribute on the column definition.

The widget should be a real formwidget, that implements harvest and seed as explained in the chapter harvest and seed. If you want it to except values for several columns with different names, don't give the widget a name, so it will except any incoming seed.

toolbar behaviour

By default, a blank toolbar is visible if the tree is inactive. If you set <treewidgets inactive="hidden", the toolbar will appear only when necessary.

If you specify <treewidgets inactive="mywidget", the widget with id "mywidget" will appear when the treewidgets element is inactive.

treecol attributes

As noted, widgettree treecols have some extra attributes like name and widget. The isindex attribute defines if a treecol is treated as an 'index column' during harvest. And if a widget returns more than one 'seed' (like a checkgroup), the treecol attributes valueseparator and labelseparator define how the seeds are stored in the treecell.

For backwards compatibility, the id attribute is required for widgettree columns, even in 1.8> versions of mozilla.

onsave sequence

After you hit the "save" button in the toolbar, the tree will try to update the selected cell's contents. It takes a few steps:

The active widget is harvested into a bucket as explained in the chapter harvest and seed. Some usefull additional seeds are added to the bucket: if there is a indexcolumn in your tree, a seed with your seeds name plus ".id" is added, with the value of the indexcolumn for the selected row. a seed with your seeds name plus ".org" is also added, with the original (previous) value and label of the selected cell.

The bucket is then sent to a handler specified by the <treewidgets onsave="blah attribute. If the method exists and returns false, submission is cancelled. Otherwise, submission continues with the bucket, which may have been altered by the handler.

After the onsave handler is called, the tree searches the treewidgets element for a formbutton. if it finds one, it uses that to send the current bucket through HTTP to a server. If the send action is sync and returns an error, submission is cancelled. Otherwise, submission continues.

Finally, the selected cell's contents are updated with the leftovers from your bucket.

Example:

<tree class="widgettree" seltype="single" flex="1"> <treecols> <treecol id="idcol" primary="true" name="myprefs" label="id" flex="1" /> <treecol id="namecol" widget="prefs" name="mypref" label="preference" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="1" properties="readonly" /> <treecell value="food" label="eating" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="2" properties="readonly" /> <treecell value="beverage" label="drinking" /> </treerow> </treeitem> </treechildren> <treewidgets> <menulist id="prefs" class="formwidget"> <menupopup> <menuitem value="food" label="eating"/> <menuitem value="beverage" label="drinking"/> </menupopup> </menulist> </treewidgets> </tree>

Tree


Additional Attributes:

Additional Properties:

Additional Methods:


TreeCol


Required Attributes:

Additional Attributes:


TreeCell


Additional Attributes:

Additional CellProperties:


TreeWidgets


Attributes:

Methods: