In order to resolve Tree components correctly, it's necessary to map the component
containing all entries i.e the tree itself
as well as the components which represent the individual tree entires.
Furthermore you need to map the toggler button, which opens and closes a tree node.
|
Class |
Required components and sub items |
Tree |
Represents the Tree component, contains all tree nodes. |
TreeNode |
Represents a tree node. |
Expander:TreeNodeExpander |
Represents the toggling component used to open and close the tree node. |
|
Optional sub items |
Spacer:TreeNodeSpacer |
(Optional) Represents the spacing object used to create the level of the tree node. |
CheckBox:TreeNodeCheckBox |
(Optional) Represents a CheckBox of a tree node. |
Icon:TreeNodeIcon |
(Optional) Represents an Icon in a tree node. |
|
| | Table 46.2: Mapping of trees | |
In case of TreeTables, simply replace Tree with TreeTable, i.e.
TreeTable
instead of Tree
,
TreeTableNode
instead of TreeNode
,
Expander:TreeTableNodeExpander
instead of Expander:TreeNodeExpander
etc.
Example:
The WebCarConfigurator demo
(qftest-5.2.3/demo/carconfigWeb/carconfigWeb_de.qft
)
contains a tree. Please open the specials dialog via the
menu »Options«-»Specials...«,
select a model and click the Button 'Details'.
When you have a look at the css classes recorded by QF-Test or analyse the
web page with the developer tool of a browser (cf. subsection 46.1.2)
you will find the following HTML structure (slightly simplifies and shortened):
|
<table id="DetailsTree" class="tree">
<tbody>
<tr class="treenode even">
<td>Information</td>
<td></td>
</tr>
<tr class="treenode odd>
<td>
<span>
<span class=treenodespacer"> </span>
<span class="treetoggler">
<img src="include/collapse.png" onclick="javascript: ..."></img>
</span>
<span>Zubehör</span>
</span>
</td>
</tr>
<tr class="treenode odd>
<td>
<span>
<span class=treenodespacer"> </span>
<span>Zentralverriegelung</span>
</span>
</td>
</tr>
</tbody>
</table> |
|
| | Example 46.2: HTML Tree | |
In the CarConfigurator demo test-suite you will find the mapping for the tree
in the procedure call to qfs.web.ajax.installCustomWebResolver
.
It is located in the test-set 'Usage of CustomWebResolver', first test-case,
first test-step.
In the value field of the parameter 'genericClasses' the
following entries map the tree:
|
|
|
installCustomWebResolver |
Parameters |
resolver |
custom
|
version |
|
genericClasses |
tree=Tree,
treenode=TreeNode,
treetoggler=Expander:TreeNodeExpander,
treenodespacer=Spacer:TreeNodeSpacer
|
|
|
|