Can I navigate between Edit Fields using keyboard arrow keys in MATLAB App Designer after running the app? Does anyone know the codes.?

I don't know how to start with this.

[Stephen23]

By default the TAB key cycles the UI element focus in a UIFIGURE. You do not need to do anything to enable this behavior.

See also:

https://www.mathworks.com/matlabcentral/discussions/highlights/743204-new-in-matlab-r2022a-modify-tab-focus-order-of-ui-components

Answer 1

[Dinesh]

Hi Subathra,

MATLAB App Designer does not support keyboard navigation between Edit Fields by default. However, you can create custom key press callbacks to enable this. Assign a 'KeyPressFcn' to the UIFigure and use 'focus' within the callback to set the focus to the desired field based on the key pressed.

The following is an example for right arrow navigation:

app.UIFigure.KeyPressFcn = @(src, event) switchKey(event);

function switchKey(event, app)
    if strcmp(event.Key, "rightarrow")
        editFields = {app.EditField1, app.EditField2, app.EditField3}; % List of all edit fields in order
        currentField = app.UIFigure.CurrentObject; % Get the active field        
        currentIndex = find(editFields == currentField);        
        nextIndex = mod(currentIndex, numel(editFields)) + 1; % Get the index of the next edit field
        focus(editFields{nextIndex}); % Set focus to the next edit field
    end
end

Similarly, you can implement for other arrow keys.

The following link is the documentation for the "KeyPressFcn" callback of "uifigure":

https://www.mathworks.com/help/matlab/ref/matlab.ui.figureappd-properties.html

The following link is the documentation of "focus":

https://www.mathworks.com/help/matlab/ref/matlab.ui.figure.focus.html

Answer 2

[Sreeram]

Hi Subathra,

I assume that by “navigate” you mean shifting the blue frame (focus) between components. It is possible to shift focus only between certain components in MATLAB App Designer by coding the actions that the arrow keys should perform in the window key press callback of the “UIFigure”.

Here are the steps to do it:

1. Create two private properties ‘editFields’ and ‘curEditFld’ to the class ‘app1’. The ‘editFields’ property will store the desired UI Components we want to limit the focus to. The ‘curEditFld’ property will be used to index into the desired components.

properties (Access = private) 
    editFields; 
    curEditFld; 
end

2. Initialize them in the startup function. Since it is required that the focus be limited to “EditField” components, we store them as a list in the ‘editFields’ property. For this example, there are 4 “EditField” components.

function startupFcn(app) 
    app.editFields = [app.EditField1, app.EditField2, app.EditField3, app.EditField4]; 
    app.curEditFld = -1; 
end 

3. Now in the “UIFigureWindowKeyPress“ callback of “app.UIFigure”, specify how to handle a “rightarrow” key press. Perform modular addition by '1' on the ‘curEditFld’ property and use it to index into the list of “EditField”s to get the component to be focused. In a similar way, handle cases like pressing “leftarrow” key and using the mouse to randomly set the focus on specific components.

function UIFigureWindowKeyPress(app, event)
    if strcmp(event.Key, "rightarrow") || strcmp(event.Key, "leftarrow")
        if size(event.Source.CurrentObject) ~= [0 0]
            % Handle cases where user manually changes the current
            % object through mouse click
            actualIndex = find(app.editFields == event.Source.CurrentObject);
            if(actualIndex-1~=app.curEditFld)
                app.curEditFld=actualIndex-1;
            end
        end
    
        if strcmp(event.Key, "rightarrow") % shift focus forward
            app.curEditFld = mod(app.curEditFld+1,length(app.editFields));
        else    % shift focus in reverse direction
            app.curEditFld = mod(app.curEditFld-1,length(app.editFields));
        end
    
        % Set the focus and current object to desired component
        focus(app.editFields(1+app.curEditFld))
        event.Source.CurrentObject = app.editFields(1+app.curEditFld);
    end
end 

This will “override” the default behavior of pressing “rightarrow” and “leftarrow” keys.

Please note that this might not be an intuitive approach because the default behaviour of right and left arrow keys (to move the cursor inside the “EditField” by one character) will get overridden. If you want, you may consider using modifiers such as ’alt’ or ‘control’ to the checks for arrow key press.

Please refer to the documentation links below to understand more on the properties and functions used:

• “CurrentObject”: https://www.mathworks.com/help/releases/R2023b/matlab/ref/matlab.ui.figureappd-properties.html?searchHighlight=currentObject
• “focus”: https://www.mathworks.com/help/releases/R2023b/matlab/ref/matlab.ui.figure.focus.html
• “Key” and “Modifier”: https://www.mathworks.com/help/releases/R2023b/matlab/ref/matlab.ui.figure-properties.html?searchHighlight=KeyPressFcn

I hope it helps!