Customize Tabbing Behavior in a Programmatic GUI

How Tabbing Works

A GUI's tab order is the order in which components of the GUI acquire focus when a user presses the keyboard Tab key. Focus is generally denoted by a border or a dotted border.

Tab order is determined separately for the children of each parent. For example, child components of the GUI figure have their own tab order. Child components of each panel or button group also have their own tab order.

If, in tabbing through the components at one level, a user tabs to a panel or button group, then the tabbing sequences through the components of the panel or button group before returning to the level from which the panel or button group was reached. For example, if a GUI figure contains a panel that contains three push buttons and the user tabs to the panel, then the tabbing sequences through the three push buttons before returning to the figure.

    Note   You cannot tab to axes and static text components. You cannot determine programmatically which component has focus.

Default Tab Order

The default tab order for each level is the order in which you create the components at that level.

The following code creates a GUI that contains a pop-up menu with a static text label, a panel with three push buttons, and an axes.

fh = figure('Position',[200 200 450 270]);
pmh = uicontrol(fh,'Style','popupmenu',...
           'String',{'peaks','membrane','sinc'},...
           'Position',[290 200 130 20]);
sth = uicontrol(fh,'Style','text','String','Select Data',...
           'Position',[290 230 60 20]);
ph = uipanel('Parent',fh,'Units','pixels',...
           'Position',[290 30 130 150]);
ah = axes('Parent',fh,'Units','pixels',...
           'Position',[40 30 220 220]);
bh1 = uicontrol(ph,'Style','pushbutton',...
           'String','Contour','Position',[20 20 80 30]);
bh2 = uicontrol(ph,'Style','pushbutton',...
           'String','Mesh','Position',[20 60 80 30]);
bh3 = uicontrol(ph,'Style','pushbutton',...
           'String','Surf','Position',[20 100 80 30]);

You can obtain the default tab order for a figure, panel, or button group by looking at its Children property. For the example, this command gets the children of the uipanel, ph.

ch = ph.Children
ch = 

  3x1 UIControl array:

  UIControl    (Surf)
  UIControl    (Mesh)
  UIControl    (Contour) 

The default tab order is the reverse of the child order: Contour, then Mesh, then Surf.

    Note   Displaying the children in this way shows only those children that have their HandleVisibility property set to 'on'. Use allchild to retrieve children regardless of their handle visibility.

In this example, the default order is pop-up menu followed by the panel's Contour, Mesh, and Surf push buttons (in that order), and then back to the pop-up menu. You cannot tab to the axes component or the static text component.

Try modifying the code to create the pop-up menu following the creation of the Contour push button and before the Mesh push button. Now execute the code to create the GUI and tab through the components. This code change does not alter the default tab order. This is because the pop-up menu does not have the same parent as the push buttons. The figure is the parent of the panel and the pop-up menu.

Change the Tab Order in the uipanel

Get the Children property of the uipanel, and then modify the order of the array elements. This code gets the children of the uipanel and stores it in the variable, ch.

ch = ph.Children
ch = 

  3x1 UIControl array:

  UIControl    (Surf)
  UIControl    (Mesh)
  UIControl    (Contour)

Next, call the uistack function to change the tab order of buttons. This code moves the Mesh button up one level, making it the last item in the tab order.

uistack(ch(2),'up',1);

The tab order of the three buttons is now Contour, then Surf, then Mesh.

This command shows the new child order.

ph.Children
ans = 

  3x1 UIControl array:

  UIControl    (Mesh)
  UIControl    (Surf)
  UIControl    (Contour)

    Note   Tab order also affects the stacking order of components. If components overlap, those that appear higher in the child order, display on top of those that appear lower in the order.

Was this topic helpful?