'CustomWebResolver' – Tabelle

Für das Zuweisen von Tabellen ist es notwendig sowohl die Hauptkomponente selbst, also diejenige, die alle Einträge enthält, wie auch die Tabellenzeilen, welche einzelne Zellen enthalten und die Tabellenzellen zu mappen. Darüber hinaus muss sowohl die Zeile, welche die Überschriften enthält, als auch die einzelnen Überschriften generischen Klassen zugewiesen werden.

KlasseNotwendige Komponenten / Unterelemente
TableStellt die Tabelle dar, beinhaltet die Einträge.
TableRowStellt eine Tabellenzeile dar.
TableCellStellt eine Tabellenzelle dar.
TableHeaderStellt die Zeile mit den Überschriften dar.
TableHeaderCellStellt eine Überschrift dar.
 Optionale Unterelemente
CheckBox:TableCellCheckBox(Optional) Stellt eine CheckBox unter einer Tabellenzelle dar.
Icon:TableCellIcon(Optional) Stellt ein Icon unter einer Tabellenzelle dar.
CheckBox:TableCellHeaderCheckBox(Optional) Stellt eine CheckBox unter einer Tabellenüberschrift dar.
Icon:TableCellHeaderIcon(Optional) Stellt ein Icon unter einer Tabellenüberschrift dar.
Tabelle 50.1:  Mapping von Tabellen

Zusätzlich zu dem folgenden Beispiel finden Sie ein ausführliche Beschreibung zum Mappen einer Tabelle in Klassenzuweisung für komplexe Komponenten wie Tabellen.

Beispiel:

Die folgenden HTML-Befehle definieren zwei Tabellen, eine Datentabelle und eine weitere für die räumliche Anordnung von Buttons:

<div role="datatablecontainer">
    <table>
        <th type="header">
            <td class="datacell">Form</td>
            <td class="datacell">Farbe</td>
        </th>
        <tr>
            <td class="datacell">Quadrat</td>
            <td>Rot</td>
        </tr>
        <tr>
            <td class="datacell">Raute</td>
            <td class="datacell">Blau</td>
        </tr>
    </table>
</div>
<table>
     <tr>
        <td>
            <div class="button">Speichern</div>
            <div class="button">Abbrechen</div>
        </td>
    </tr>
</table>
Beispiel 50.20:  HTML Table

Nachfolgende CustomWebResolver-Konfiguration mappt nur die Datentabelle auf eine Tabellekomponente von QF-Test, nicht aber die Tabelle, die für die Anordnung der Buttons verwendet wird:

genericClasses:
- Button: button
- TableCell:
    css: datacell
    ancestor: TableRow
- Panel:myTablePanel: role=datatablecontainer
- TableHeader:
    attribute: type
    attributeValue: header
    tag: th
- Table:
    tag: table
    ancestor:
      type: parent
      className: Panel:myTablePanel
- TableHeaderCell:
    tag: td
    ancestor: TableHeader
- TableRow:
    tag: tr
    ancestor: Table
ignoreTags:
- <DIV>
- <SPAN>
- <TABLE>
Beispiel 50.21:  HTML Table

In der Zuweisung von Panel:myTablePanel wurde der Klassentyp myTablePanel frei "erfunden". Damit ist das DIV-Element eindeutig definiert und kann in der Spezifizierung der Tabelle mit ancestor: Panel:myTablePanel verwendet werden.

Beachten Sie Zuweisung für die Spaltenüberschriftenzeile TableHeader. Dies ist wie folgt zu lesen: Das Attribut type mit dem Wert header wird der generischen Klasse TableHeader zugewiesen, aber nur, wenn der HTML-Tag-Name gleich TH ist.

Um sicher zu gehen, dass die Zuweisungen der weit verbreiteten Tags TR und TD an anderen Stellen nicht zu Problemen führen, wird ancestor: hinzugefügt.

HTML-Elemente mit dem Tag TABLE, die keiner QF-Test Tabelle zugewiesen wurden, sollen nicht in der QF-Test Komponentenhierarchie erscheinen. Daher der Eintrag TABLE in der Kategorie ignoreTags, zusätzlich zu den Standardeinträgen <DIV> und <SPAN>, die bewirken, dass nicht zugewiesene DIV- und SPAN- Elemente die Komponentenhierarchie nicht unnötig aufblähen.