Für das Mappen von TabPanels bzw. Accordions ist es wiederum notwendig sowohl
die Hauptkomponente selbst, diejenige, die alle Einträge enthält,
wie auch die einzelnen Elemente zu mappen.
|
Klasse |
Notwendige Komponenten / Unterelemente |
TabPanel |
Stellt das TabPanel dar, beinhaltet die Einträge. |
Item:TabPanelItem |
Stellt einen Tab dar. |
|
Optionale Unterelemente |
Panel:TabPanelContent |
(Optional) Stellt ein Panel dar, das den Inhalt des angezeigten Tabs enthält. |
Closer:TabPanelCloser |
(Optional) Stellt einen Closer Button innerhalb des Tabs dar. |
CheckBox:TabPanelCheckBox |
(Optional) Stellt eine CheckBox unter einem Listeneintrag dar. |
Icon:TabPanelIcon |
(Optional) Stellt ein Icon unter einem Listeneintrag dar. |
|
| | Tabelle 46.5: Mapping von TabPanels | |
Im Falle von Accordions lauten die Klassen entsprechend Accordion, Item:AccordionItem etc.
Beispiel:
Der folgende HTML Code bildet ein TabPanel ab. Wie man auch in vielen
Implementierungen von Webseiten findet, sind etliche zusätzliche
Ebenen eingezogen, die für die Funktionalität der Tabs völlig irrelevant sind.
Einige der Ebenen haben Merkmale, die man für die Zuweisung nutzen kann, für
alle TabPanel-Elemente sogar redundant. Sie finden im Anschluss daher
zwei Aufrufe der Prozedur installCustomWebResolver
, die völlig
unterschiedlich parametrisiert sind, für die Komponentenaufnahme bei QF-Test
jedoch das gleiche Ergebnis liefern.
|
<div role="tab-container">
<div class="tabs">
<div>
<div>
<ul>
<div class="tab-bar">
<div>
<li>
<div type="tab">Tab1</div>
</li>
<li>
<div type="tab">Tab2</div>
</li>
<li>
<div type="tab">Tab3</div>
</li>
</div>
</div>
</ul>
<div class="content">
<div role="tab-content" id="Tab1">
<label>Dies ist das erste TabPanel</label>
</div>
</div>
<div class="content">
<div role="tab-content" id="Tab2">
<label>Dies ist das zweite TabPanel</label>
</div>
</div>
<div class="content">
<div role="tab-content" id="Tab3">
<label>Dies ist das dritte TabPanel</label>
</div>
</div>
</div>
</div>
</div>
</div> |
|
| | Beispiel 46.5: HTML TabPanel | |
|
|
|
installCustomWebResolver |
Parameter |
resolver |
custom
|
version |
|
genericClasses |
tabs=TabPanel,
content=Panel:TabPanelContent
|
attributesToGenericClasses |
type=tab=Item:TabPanelItem
|
tagsToGenericClasses |
|
ignoreTags |
DIV,SPAN,UL,LI
|
|
|
|
Der zweite Aufruf ist zwar anders parametriesiert, bewirkt aber die gleiche
Komponentenaufnahme seitens QF-Test:
|
|
|
installCustomWebResolver |
Parameter |
resolver |
custom
|
version |
|
genericClasses |
|
attributesToGenericClasses |
role=tab-container=TabPanel,
role=tab-content=Panel:TabPanelContent
|
tagsToGenericClasses |
LI=Item:TabPanelItem@::ancestor=TabPanel
|
ignoreTags |
DIV,SPAN,UL
|
|
|
|