Manual

52.2
Mapping of complex components
52.2.1
Mapping of Comboboxes

Comboboxes mostly consist of textfields or buttons. If the user clicks that component a list of items is shown. The user can then select an item. In this case you need to resolve the combobox and its textfield and its button. Besides those components you need to map the list and its items. The recording will then record a click to open the selection list as well as a list which selects the item in the list.

HTML SELECT node will be mapped to ComboBoxes automatically. The selection of the list item will be recorded as 'Selection' node.

Class Description
ComboBox Container component which contains a textfield and the button.
Button:ComboBoxButton Optional: Represents the button opening the selection list.
TextField:ComboBoxTextField Optional: Represents the textfield receiving text input and showing the selected item.
List:ComboBoxList Represents the List component, contains all list entries.
Item:ComboBoxListItem Represents the individual list entry.
CheckBox:ComboBoxListItemCheckBox Optional: Represents a checkbox inside the list entry.
Icon:ComboBoxListItemIcon Optional: Represents an icon inside the list entry.
Table 52.7:  Mapping of ComboBoxes

It's sufficient to use the standard mappings for list items for the the selection list. See subsection 52.2.2.

52.2.2
Mapping of Lists

In order to resolve List components correctly, it's necessary to map the component containing all list entries i.e the list itself as well as the components which represent the individual list entries.

Class Description
List Represents the List component, contains all list entries.
Item:ListItem Represents the individual list entry.
CheckBox:ListItemCheckBox Optional: Represents a checkbox inside the list entry.
Icon:ListItemIcon Optional: Represents an icon inside the list entry.
Table 52.8:  Mapping of Lists

In case of comboboxes you could use specific combobox classes, like List:ComboBoxList and Item:ComboBoxListItem.

52.2.3
Mapping of TabPanels and Accordions

In order to resolve TabPanels or Accordions correctly, it's 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 Description
TabPanel Represents the TabPanel component, contains all tabs.
Item:TabPanelItem Represents an individual tab.
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 52.9:  Mapping of TabPanels

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

52.2.4
Mapping of Tables and TreeTables

In order to resolve Table components correctly, it's necessary to map the component containing all entries i.e the table itself as well as the components which represent the individual rows of a table and the individual table cell entries. Furthermore it could be quite useful to map the row containing all headings as well as the specific heading entries.

Class Description
Table Represents the Table component, contains all rows and cells.
TableRow Represents one table row, could contain multiple cells.
TableCell Represents one table cell.
TableHeader Represents one row for headings, could contain multiple headings.
TableHeaderCell Represents one heading cell.
CheckBox:TableCellCheckBox Optional: Represents a CheckBox in table cell.
Icon:TableCellIcon Optional: Represents an Icon in a table cell.
CheckBox:TableCellHeaderCheckBox Optional: Represents a CheckBox of a table header cell.
Icon:TableCellHeaderIcon Optional: Represents an Icon of a table header cell.
Table 52.10:  Mapping of Tables

In case of TreeTables, simply replace Table with TreeTable.

52.2.5
Mapping of Trees

In order to resolve Tree components correctly, it's necessary to map the component containing all entries i.e the tree itself as well as the components which represent the individual tree entires. Furthermore it could be quite useful to map toggler button, which opens and closes a tree node.

Class Description
Tree Represents the Tree component, contains all tree nodes.
TreeNode Represents one tree node.
Expander:TreeNodeExpander Represents the toggling component which is used to open and close the tree node.
Spacer:TreeNodeSpacer Optional: Represents the spacing object used to create the level of the tree node.
CheckBox:TreeNodeCheckBox Optional: Represents a CheckBox of a tree node.
Icon:TreeNodeIcon Optional: Represents a CheckBox of a tree node.
Table 52.11:  Mapping of trees

In case of TreeTables, simply replace Tree with TreeTable.