.

MATLAB R2022a provides app developers more control over user navigation through app components using the keyboard's Tab key.

Part 1. The new focus function: programmatically set keyboard focus to a UI component

Part 2. Modify focus order of components

Today we'll review Part 2. See yesterday's Community Highlight for Part 1.

-------------------------------------------------------------------------------------------------

Well-designed apps have an obvious flow through interactive fields and, as we learned yesterday, using the Tab key to move the focus to the next UI component is faster and more efficient than using a mouse. Here we'll learn how to read and set the tab order of UI components in an app.

Understanding tab and stacking order

By default, tab order in MATLAB apps is controlled by the stacking order in the Component Browser. Initially, the stacking order within the component browswer is based on the sequence in which the objects were added to the container object within the app. MATLAB R2020b gave us control to edit the stacking order by selecting a component and using either the Reorder tool from the Canvas toolstrip or by right-clicking the component and selecting Reorder from the context menu [1]. Tab order flows from bottom to top through the Component Browswer hierarchy for objects that are focusable. Sending a component backward within the stack sets its tab order to earlier relative to other components.

Setting tab focus order in R2022a

Three additional tab order features were added in MATLAB R2022a that make it easier to control app navigation with the Tab key.

1. Sort and Filter by Tab Order : Instead of using the Reorder tool which lists components in reverse tab-order and includes components that are not focusable, filter the list by focusable components and sort them by tab-order using the View dropdown menu within the Component Browser (label 1 in image below). From here, you can drag and drop components to set their tab (and stacking) order.

2. Auto Tab Order : To automatically sort focusable components within your app so that the tab order is from left-to-right and then top-to-bottom, in App Designer, from Design View, select the Canvas tab > Tab Order button > Apply Auto Tab Order (label 2 in image below). Alternatively, you can apply auto tab order to components within a container such as a uipanel or uitab by right-clicking on the container within the Component Browser and selecting Apply Auto Tab Order.

3. Visualize Tab Order : You no longer have to read and interpret the handle names in the component browser to understand the current tab order of UI components. Instead, view an animation of tab order within App Designer. From Design View, select the Canvas tab > Tab Order button > Visualize Tab Order (label 3 in image below).

.

Contextual focus control: the power of combining focus() with setting tab order

Yesterday's Community Highlight showed how to programmatically set UI component focus using the focus(c) function. This, combined with control of tab order, allows app developers to implement contextual focus control. For example, when a radio button is selected in the GIF below, the corresponding UI Tab is selected programmatically and the keyboard focus is set to the first component within the UI Tab thus allowing the user to smoothly continue keyboard navigation. This is achieved by a callback function that responds to changes in the Button Group that sets the SelectedTab property of the TabGroup and uses the new focus() function. For details, see the attached focusAndTabOrderDemo.mlapp.

-------------------------------------------------------------------------------------------------

Stay tuned

Follow Community Highlights to get notifications for new content.

Let us know what interests you in the new MATLAB R2022a release in the comment section below.

See also

• MATLAB documentation: Modify Tab Focus Order of Components
• Release notes: Modify tab focus order
• R2021a Highlight: keyboard shortcuts for UI Components
• Download the latest release of MATLAB

Footnotes

[1] R202b release notes: change the stacking order of UI components

This Community Highlight is attached as a live script.