Design Tab Host

Hosts and manages Design Tabs for the selected node, providing a dynamic, tabbed interface for configuration, testing, and management within the Design Page.

Remarks

The Design Tab Host is a central UI component on the Design Page, presenting a tabbed interface that adapts to the currently-selected node in the Tree Viewer. It automatically displays the most relevant set of Design Tabs for the node, allowing users to switch between configuration, testing, and management tools.

Purpose and Functionality

• Dynamic Tab Selection:
  The control determines which Design Tabs are applicable to the selected node and displays them in a consistent order. Tabs are context-sensitive and may differ for each node type.
• Tab Persistence:
  Remembers the last selected tab for each node type, restoring your preferred view when you revisit a node.
• Seamless Navigation:
  Allows rapid switching between tabs. If you have unsaved changes in a tab, navigation is prevented until changes are saved or canceled, ensuring data integrity.
• Integration with Node Hierarchy:
  Supports advanced scenarios where derived node types or overridden tabs provide custom interfaces, always showing the most specific and relevant tab.

UI Components

• Tab List:
  A horizontal row of buttons, each representing a Design Tab. The active tab is visually highlighted.
  • Click a tab button to switch views.
  • Hovering over a tab displays a tooltip describing its purpose.
• Tab Content Area:
  Displays the content of the currently active Design Tab. Each tab provides a specialized interface for editing properties, running tests, or performing node-specific actions.

Example

The following diagram illustrates the layout of the Design Tab Host:

┌──────────────────────────────────────────────────┐
│ {General} {Fields} {Rules} {Test} {Events}       │
├──────────────────────────────────────────────────┤
│                                                  │
│                 Active Tab Panel                 │
│                                                  │
└──────────────────────────────────────────────────┘

Usage Tips

• Click a tab to view and edit its contents.
• If a tab contains unsaved changes, you must save or cancel before switching tabs.
• The set of available tabs will change depending on the type of node selected in the Tree Viewer.

The Design Tab Host streamlines complex configuration tasks, making it easy to access the right tools for each node in your Grooper repository.

Child Controls

┌───────────────────────────────────────────────┐
│ {General} {Fields} {Rules} {Test} {Events}    │
└───────────────────────────────────────────────┘

Used By

Design Page