Manual
 

TopTable of contentsPrevious Chapter: 49.1.3 'CustomWebResolver' – Tables and TreeTablesNext Page: 49.1.5 'CustomWebResolver' – ListsNext Chapter: 49.1.5 'CustomWebResolver' – ListsChapter Overview: 49.1 Improving component recognition with a CustomWebResolverPDF versionQF-Test
Version 7.0.1
'CustomWebResolver' – Tree and TreeTable

In order to resolve Tree components correctly, it's necessary to map the component containing all entries, which is the tree itself, as well as the components which represent the individual tree entries. Furthermore, you need to map the toggle button which opens and closes a tree node.

ClassRequired components and sub-items
TreeRepresents the Tree component, contains all tree nodes.
TreeNodeRepresents a tree node.
Expander:TreeNodeExpanderRepresents 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 indentation 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 49.2:  Mapping of trees

In case of tree tables, 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-7.0.1/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 analyze the web page with the subsection 5.12.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">&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>Zentralverriegelung</span>
        </span>
      </td>
    </tr>
  </tbody>
</table>
Example 49.15:  HTML Tree

In the CarConfigurator demo test suite you will find the mapping for the tree in the 'Install CustomWebResolver' node. It is located in the procedure startStop.start in the last sequence, Install CustomWebResolver.

WebCarConfig
Figure 49.7:  WebCarConfigurator

The following 'CustomWebResolver' configuration entries map the tree: 

genericClasses:
- Tree: tree
- TreeNode: treenode
- Expander:TreeNodeExpander: treetoggler
- Spacer:TreeNodeSpacer: treenodespacer
Example 49.16:  HTML tree
TopTable of contentsPrevious Chapter: 49.1.3 'CustomWebResolver' – Tables and TreeTablesNext Page: 49.1.5 'CustomWebResolver' – ListsNext Chapter: 49.1.5 'CustomWebResolver' – ListsChapter Overview: 49.1 Improving component recognition with a CustomWebResolverPDF versionLast update: 5/31/2023
Copyright © 1999-2023 Quality First Software GmbH

We use "Matomo" cookies to anonymously evaluate your visit to our website. For this we need your consent, which is valid for twelve months. A revocation, so-called opt-out, is possible at any time on our privacy page.

accept
configuration
Cookie configuration

1. Functional cookies

We use functional cookies to ensure the basic functionality of the website.

2. Performance and statistic cookies

We use Matomo for analyzing and optimizing our website. Cookies permit an anonymous collection of information that help us offering you a clear and user-friendly visit of our web pages.

Confirm selection

Cookie details