Some questions about the relationship between panel and tab

Question

I'd like to create a dialog, which have two sets of panel. For each panel, it will have 2 tabs. Let's assume the tab names of the first panel is Info and Tools. The tab names of the second panel is Settings and Tools. Inside the tab of Tools, there is a button to switch between two sets of panel.

But it seems that panel and tab are at the same level. Is that possible to achieve my requirements?

Answer 1

The key thing to realize is that UI elements in dialogs can be nested. In other words, groups, boxes, panels, and tabs, can contain items that also include any of these types. Specifically for your case, the panels of a top-level panel list may contain tab lists. The panels associated with the nested tabs may contain UI elements that reference the top-level panels.

I find that the easiest and conceptually clearest way to do this is via a subclass of UIFrame that specifies the UI layout and creates and displays the dialog in an override of the Init method. The subclass then adds further methods to handle the action and change events of the specified UI elements. The example below illustrates one way to do this. Note the use of the member variable topLevelPanelListSpecto enable top-level panel selection in the action methods of the tab panel buttons.

class NestedTabPanelUI : UIFrame
{
    TagGroup topLevelPanelListSpec;
    
    Object Init(Object self)
    {
        // Create the top-level panel list, each panel will contain a tab list
        topLevelPanelListSpec = DLGCreatePanelList();
        
        // Add the first top level panel
        TagGroup topLevelPanelOneSpec = topLevelPanelListSpec.DLGAddPanel();        
        TagGroup topLevelPanelOneItems = topLevelPanelOneSpec.DLGGetItems();
        
        // Add a tab list, with tabs 1A and 1B, to the first top level panel
        TagGroup topLevelPanelOneTabListSpec = DLGCreateTabList();
        topLevelPanelOneItems.DLGAddElement(topLevelPanelOneTabListSpec);
        
        // Add UI elements to the tab 1A panel
        TagGroup panelOneTabAItems = topLevelPanelOneTabListSpec.DLGAddTab("Tab 1A");
        panelOneTabAItems.DLGAddElement(DLGCreateLabel("Tab 1A", 20));
        
        // Add UI elements to the tab 1B panel
        TagGroup panelOneTabBItems = topLevelPanelOneTabListSpec.DLGAddTab("Tab 1B");
        panelOneTabBItems.DLGAddElement(DLGCreateLabel("Tab 1B", 20));
        panelOneTabBItems.DLGAddElement(DLGCreatePushButton("Top panel 2", "DoPanelTwoButton"));
        
        // Add the second top level panel
        TagGroup topLevelPanelTwoSpec = topLevelPanelListSpec.DLGAddPanel();        
        TagGroup topLevelPanelTwoItems = topLevelPanelTwoSpec.DLGGetItems();
        
        // Add a tab list, with tabs 2A and 2B, to the second top level panel
        TagGroup topLevelPanelTwoTabListSpec = DLGCreateTabList();
        topLevelPanelTwoItems.DLGAddElement(topLevelPanelTwoTabListSpec);
        
        // Add UI elements to the tab 2A panel
        TagGroup panelTwoTabAItems = topLevelPanelTwoTabListSpec.DLGAddTab("Tab 2A");
        panelTwoTabAItems.DLGAddElement(DLGCreateLabel("Tab 2A", 20));
        
        // Add UI elements to the tab 2B panel
        TagGroup panelTwoTabBItems = topLevelPanelTwoTabListSpec.DLGAddTab("Tab 2B");
        panelTwoTabBItems.DLGAddElement(DLGCreateLabel("Tab 2B", 20));
        panelTwoTabBItems.DLGAddElement(DLGCreatePushButton("Top panel 1", "DoPanelOneButton"));
        
        // Create the dialog specification, adding the entire nested panel and tab specification
        String dialogTitle = "Nested Tab Panels";
        TagGroup dialogSpec = DLGCreateDialog(dialogTitle);
        TagGroup dialogItems = dialogSpec.DLGGetItems();
        dialogItems.DLGAddElement(topLevelPanelListSpec);

        // Create and display the dialog
        self = self.super.Init(dialogSpec);
        self.Display(dialogTitle);
        
        return self;
    }
    
    void DoPanelOneButton(Object self)
    {
        topLevelPanelListSpec.DLGValue(0);
    }
    
    void DoPanelTwoButton(Object self)
    {
        topLevelPanelListSpec.DLGValue(1);
    }
}

void main()
{
    Object nestedTabPanelDialog = Alloc(NestedTabPanelUI).Init();
}

main();