MATLAB Answers

How to change the order when moving components on the App Designer using the Tab key on the keyboard

5 views (last 30 days)
Kunihide Hirai
Kunihide Hirai on 27 Jul 2021
Commented: TADA on 27 Jul 2021
I added an additional component after installing the component on the App Designer, but I can't find the property that modifies the movement order when the Tab key on the keyboard is clicked.
Where in the Inspector can I modify the tab key movement order?

Accepted Answer

TADA
TADA on 27 Jul 2021
Apparently there is no straight forward way of doing that.
It seems that the tab-order is controlled by the order of adding components to the uifigure. This is further complecated by the fact that app designer won't let you edit the code that does that. This behaviour is in fact a good thing as the code is automatically generated by the designer ecah time you change something, so if you did change the code only to have your changes reverted it would be extremely annoying.
This is all quite annoying, but you can tackle this using one of two workarounds:
  1. You can cut and paste all components in the designer so that they are added to the app in the order you want them to be tabbed in runtime as described here: Modify Tab Order of App Designer GUI - MATLAB Answers - MATLAB Central (mathworks.com)
  2. You can add a startup callback function to the app, then in this function reorder the children of the UIFigure, see sample code. This workaround will probably get more complecated when panels and tab groups are used so...
classdef app1 < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
EditFieldLabel matlab.ui.control.Label
EditField matlab.ui.control.EditField
EditField2Label matlab.ui.control.Label
EditField2 matlab.ui.control.EditField
SpinnerLabel matlab.ui.control.Label
Spinner matlab.ui.control.Spinner
DropDownLabel matlab.ui.control.Label
DropDown matlab.ui.control.DropDown
Button matlab.ui.control.Button
end
% Callbacks that handle component events
methods (Access = private)
% Code that executes after component creation
function startup(app)
% get the ui figure children vector
children = app.UIFigure.Children;
%
% remove the children you want to reorder from this vector
%
children(children == app.Button) = [];
children(children == app.EditField) = [];
children(children == app.EditField2) = [];
children(children == app.Spinner) = [];
children(children == app.DropDown) = [];
%
% add the controls in the correct tab-order
% the tab order I applied makes no sense other than to show
% that it can be done.
%
% notice that the vector is flipped because the last control in
% the list will actually be tabbed first.
%
tabOrderChildren = flip(vertcat(app.Button, app.EditField, app.EditField2, app.DropDown, app.Spinner));
%
% now give the uifigure the new children vector, notice that we
% also use the vector from which we removed all the controls,
% because all the labels are there.
%
app.UIFigure.Children = vertcat(children(:), tabOrderChildren(:));
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = 'UI Figure';
% Create EditFieldLabel
app.EditFieldLabel = uilabel(app.UIFigure);
app.EditFieldLabel.HorizontalAlignment = 'right';
app.EditFieldLabel.Position = [21 419 55 22];
app.EditFieldLabel.Text = 'Edit Field';
% Create EditField
app.EditField = uieditfield(app.UIFigure, 'text');
app.EditField.Position = [91 419 100 22];
% Create EditField2Label
app.EditField2Label = uilabel(app.UIFigure);
app.EditField2Label.HorizontalAlignment = 'right';
app.EditField2Label.Position = [18 373 62 22];
app.EditField2Label.Text = 'Edit Field2';
% Create EditField2
app.EditField2 = uieditfield(app.UIFigure, 'text');
app.EditField2.Position = [95 373 100 22];
% Create SpinnerLabel
app.SpinnerLabel = uilabel(app.UIFigure);
app.SpinnerLabel.HorizontalAlignment = 'right';
app.SpinnerLabel.Position = [26 311 47 22];
app.SpinnerLabel.Text = 'Spinner';
% Create Spinner
app.Spinner = uispinner(app.UIFigure);
app.Spinner.Position = [88 311 100 22];
% Create Button
app.Button = uibutton(app.UIFigure, 'push');
app.Button.Position = [52 263 100 22];
% Create DropDownLabel
app.DropDownLabel = uilabel(app.UIFigure);
app.DropDownLabel.HorizontalAlignment = 'right';
app.DropDownLabel.Position = [14 207 66 22];
app.DropDownLabel.Text = 'Drop Down';
% Create DropDown
app.DropDown = uidropdown(app.UIFigure);
app.DropDown.Position = [95 207 100 22];
% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = app1
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.UIFigure)
% Execute the startup function
runStartupFcn(app, @startup)
if nargout == 0
clear app
end
end
% Code that executes before app deletion
function delete(app)
% Delete UIFigure when app is deleted
delete(app.UIFigure)
end
end
end
  1 Comment
TADA
TADA on 27 Jul 2021
Honestly, I would expect Mathworks to add a TabIndex property to the controls, hopefully its on their to-do list

Sign in to comment.

More Answers (0)

Products


Release

R2020a

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!