Manual | Tutorial | Standard Library | Release Notes

Manual

Version 5.0.1

45.1.9

Mapping of TabPanels and Accordions

In order to resolve TabPanels or Accordions correctly, it is necessary to map the component containing all entries i.e the TabPanel itself as well as the components which represent the individual TabPanel entries.

Class	Required components and sub items
TabPanel	Represents the TabPanel component, contains all tabs.
Item:TabPanelItem	Represents an individual tab.
	Optional sub items
Panel:TabPanelContent	(Optional) Represents a panel containing the actual content of a selecting tab.
Closer:TabPanelCloser	(Optional) Represents the Closer button of one tab.
CheckBox:TabPanelCheckBox	(Optional) Represents the CheckBox of one tab.
Icon:TabPanelIcon	(Optional) Represents the Icon of one tab.

Table 45.5: Mapping of TabPanels

In case of Accordion components you can map the classes to Accordion, Item:AccordionItem etc.

Sample:

The following HTML code represents a TabPanel. As with many implementations of web pages there are a lot of additional levels, completely irrelevant for the functionality of the tabs. Some of the levels have attributes which could be used for the mapping. For all TabPanel elements even reduntantly. Therefore, we will show you below two differents ways of how to configure the call to the procedure installCustomWebResolver, leading to exactly the same result.

<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>

Example 45.5: HTML TabPanel


`installCustomWebResolver`
Map a TabPanel - Version 1.
Parameters
`resolver`	custom
`version`
`genericClasses`	tabs=TabPanel, content=Panel:TabPanelContent
`attributesToGenericClasses`	type=tab=Item:TabPanelItem
`tagsToGenericClasses`
`ignoreTags`	DIV,SPAN,UL,LI

The second procedure call is parameterized differently. QF-Test will record the same component as above.


`installCustomWebResolver`
Map a TabPanel - Version 2.
Parameters
`resolver`	custom
`version`
`genericClasses`
`attributesToGenericClasses`	role=tab-container=TabPanel, role=tab-content=Panel:TabPanelContent
`tagsToGenericClasses`	LI=Item:TabPanelItem@::ancestor=TabPanel
`ignoreTags`	DIV,SPAN,UL