Für das Mappen von Bäumen ist es notwendig sowohl die Hauptkomponente selbst,
also diejenige, die alle Einträge enthält,
wie auch die einzelnen Baumknoten zu mappen. Zusätzlich müssen Sie auch den
Baumknoten Öffnen bzw. Schließen-Button mappen.
|
Klasse |
Notwendige Komponenten / Unterelemente |
Tree |
Stellt den Baum dar, beinhaltet die Einträge. |
TreeNode |
Stellt einen Baumknoten dar. |
Expander:TreeNodeExpander |
Stellt den Baumknoten Öffnen bzw. Schließen Button dar. |
|
Optionale Unterelemente |
Spacer:TreeNodeSpacer |
(Optional) Wird verwendet um die Einrückung auf die richtige Ebene zu bewerkstelligen. |
CheckBox:TreeNodeCheckBox |
(Optional) Stellt eine CheckBox unter einem Baumknoten dar. |
Icon:TreeNodeIcon |
(Optional) Stellt ein Icon unter einem Baumknoten dar. |
|
| | Tabelle 46.2: Mapping von Bäumen | |
Im Falle einer TreeTable können Sie hier statt Tree jeweils TreeTable anwenden:
Also TreeTable
anstatt Tree
,
TreeTableNode
anstatt TreeNode
,
Expander:TreeTableNodeExpander
anstatt Expander:TreeNodeExpander
etc.
Beispiel:
Im Demo für den WebCarConfigurator befindet sich ein Baum. Um diesen zu öffnen
gehen Sie über das Menü »Einstellungen«-»Sondermodelle...«, wählen ein Modell
und klicken dann auf den Button "Details". Sie
finden die dazugehörige Testsuite unter
qftest-5.2.1/demo/carconfigWeb/carconfigWeb_de.qft
Wenn Sie sich die aufgenommenen css-Klassen in QF-Test ansehen oder die Seite
mit einem beim Browser mitgelieferten Entwicklerwerkzeug analysieren
(siehe Abschnitt 46.1.2)
werden Sie folgende HTML-Struktur finden (etwas vereinfacht und gekürzt):
|
<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> |
|
| | Beispiel 46.2: HTML Tree | |
Wenn Sie dann im Testfallsatz
"Fahrzeug anlegen mit CustomWebResolver" im ersten Testfall und dort wiederum
im ersten Testschritt den Prozeduraufruf von qfs.web.ajax.installCustomWebResolver
ansehen,
sind dort unter anderem folgende Zuweisungen für das Mappen des
Baums enthalten:
|
|
|
installCustomWebResolver |
Parameter |
resolver |
custom
|
version |
|
genericClasses |
tree=Tree,
treenode=TreeNode,
treetoggler=Expander:TreeNodeExpander,
treenodespacer=Spacer:TreeNodeSpacer
|
|
|
|