GUI example 02

A groups of tabs, or pages is called a uigroup.

A GUI can be designed to have uigroups which are within other tabs/pages. 

This example will show:
  • A main page which is split in to two re-sizeable panels (resized by mouse)
  • The left hand panel has 3 sub tabs A.1, B.1 and C.1 which have individual controls.
  • The right hand side has individual pages which are "linked" to the left hand tabs.
    • When the user selects tabs A.1, B.1 or C.1 the framework changes the GUI in the left panel, and since the tabs are linked the right hand tab (or page) also refreshes with the appropriate GUI.
  • The right hand pages have titles which have close buttons.
  • One right hand page has a "help" button (provides a callback to your own code).
The image below is an animated GIF which shows what happens when the user clicks on the left hand tabs - you may need to click on the image to see the animation.

The code to create this example is shown below the image (21 lines)



function [obj] = example2
 hFig = dialog ( 'windowstyle', 'normal', 'name', 'Matpi Website Example 2',     'resize', 'on' );
 % initialise the main GUI (this allows the left and right tabs to be resizeable
 obj = matpigui ( hFig, 'position', [0 0 1 1] );
 % Add a main tab and turn the buttons off
 obj.addTab ( 'Main Tab', 0.2, 'enable', 'on' )
 obj.toggleButtons ( 'off' );
 % split the main tab into 2 sub panels which can be resized*
 obj.split ( 'Main Tab', [1 2], { 'A', 'B' }, [0.3], [], 'on' );
 % Create the left hand control tab and uicontrols
 obj.addUIGroup ( 'A', 'CtrlTab' );
 obj.childTab.CtrlTab.addTab ( 'A.1', 0.33 )
 obj.childTab.CtrlTab.addTab ( 'B.1', 0.34 )
  obj.childTab.CtrlTab.addTab ( 'C.1', 0.33 )
  obj.childTab.CtrlTab.addUIC ( 'A.1', 'exText', 'text', 'string', 'UI control on A.1', 'pos', [0 .8 1 0.1] );
  obj.childTab.CtrlTab.addUIC ( 'B.1', 'exText', 'checkbox', 'string', 'UI control on B.1', 'pos', [0 .8 1 0.1] );
  obj.childTab.CtrlTab.addUIC ( 'C.1', 'exText', 'edit', 'string', 'UI control on C.1', 'pos', [0 .8 1 0.1] );
% Create the right hand tab(pages), hide the buttons and create uicontrols
  obj.addUIGroup ( 'B', 'HiddenTab' );
  obj.childTab.HiddenTab.addTab ( 'A.2', 0.33, 'titlebar', 1, 'incCloseButton', 1 )
  obj.childTab.HiddenTab.addTab ( 'B.2', 0.34, 'titlebar', 1, 'titleBarColour', 'green', 'incCloseButton', 0 )
  obj.childTab.HiddenTab.addTab ( 'C.2', 0.33, 'titlebar', 1, 'titleHelp', @(a,b)MyDynamicHelp, 'incCloseButton', 1 )
% Add the uicontrols to the hidden tab

  obj.childTab.HiddenTab.addUIC ( 'A.2', 'exText', 'text', 'string', 'UI RHS A.2', 'pos', [0 .8 1 0.1] );
  obj.childTab.HiddenTab.addUIC ( 'B.2', 'exText', 'text', 'string', 'UI RHS B.2', 'pos', [0 .8 1 0.1] );
  obj.childTab.HiddenTab.addUIC ( 'C.2', 'exText', 'text', 'string', 'UI RHS C.2', 'pos', [0 .8 1 0.1] );
  obj.childTab.HiddenTab.toggleButtons ( 'off' );
  % Link the tabs -> so when left tab changes the right tab also changes
  % The link is done by index.
  obj.linkTabs ( 'CtrlTab', 'HiddenTab' )
  function MyDynamicHelp
     h = dialog('windowstyle', 'normal');
   pause(0.5);
   delete ( h );

   end
end