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.
Klasse | Notwendige Komponenten / Unterelemente |
---|---|
Table | Stellt die Tabelle dar, beinhaltet die Einträge. |
TableRow | Stellt eine Tabellenzeile dar. |
TableCell | Stellt eine Tabellenzelle dar. |
TableHeader | Stellt die Zeile mit den Überschriften dar. |
TableHeaderCell | Stellt 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. |
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>
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>
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.