You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

On this Page:
In general Tabs are used to break up content into multiple sections within one screen to be able to save space on a page. Each section contains its own content e.g. forms. The switching between each tab is done by clicking on the tabs label.

Example File (Builder project Advanced Modeling/UI):

<your example path>\Advanced Modeling\UI\uml\uiTabs.xml

Figure: Tabbed Pane Runtime

Tabbed Pane Widget Specifications

The actual Tabbed Pane element is needed as a main template organizing the single tabs and their order and position. It is later assigned to the <<UITabState>>. The way the tabs are organized is defined in the tabbed panes specifications.

Figure: Tabbed Pane Main UI Element

Figure: Tabbed Pane Specifications

PropertyDescription
NameName of the Tabbed Pane container
Active TabDefines which tab is initially active when the page is loaded.

Tabbed Pane Navigation

Figure: Main Tabbed Pane Navigation

The E2E Compiler enforces some rules when creating a Tabbed Pane Navigation (<<UITabState>>

  • There must be exactly one start bubble within the <<UITabState>>
  • A <<UITabTransition>> can only have one target state.
  • The <<UITabState>> needs a template defined to be able to validate whether all positions could be found.
  • No labels