如何将焦点放在Uifigure中的特定元素上? [英] How to set the focus on a specific element in a uifigure?

问题描述

我有一个向用户显示SVG图像的应用程序，他们需要根据显示的内容填写两个编辑字段.由于该过程需要重复很多次，因此我得出结论，如果用户交互仅需要键盘，那么这对于速度和效率来说是最好的.为此，我必须确保以下几点:

I have an application where an SVG image is presented to the user, and they need to fill in two edit fields based on what is presented. Since the process needs to be repeated many times, I concluded it would be best for speed and efficiency if user interactions required the keyboard alone. Towards that end, I must ensure several things:

1. 该人物是重点.
2. Tab⭾以正确的顺序循环元素(edit1→edit2→按钮).
3. 每当刷新图像时，正确的编辑字段就会被聚焦.

1. That the figure is in focus.
2. That Tab ⭾ cycles the elements in the correct order (edit1 → edit2 → button).
3. That the correct edit field is focused whenever the image is refreshed.

可以通过切换图形可见性来满足1 ^st 的要求，如此处所述.
2 ^nd 要求也很容易实现，仅要求按特定顺序定义图形元素，如此处(用于数字).

The 1^st requirement can be fulfilled by toggling figure visibility, as explained here.
The 2^nd requirement is also fairly simple to fulfill, and merely requires that graphical elements are defined in a specific order, as discussed here (for uifigures) and here (for figures).

我的困难在于3 ^rd 要求，特别是-我不知道如何确保在需要时集中所需的编辑字段.请考虑以下类作为参考，其中focusControl方法仅是一个占位符.

My difficulty is with the 3^rd requirement, and specifically - I have no idea how to ensure the desired edit field is focused when needed. Please consider the following class for reference, in which the focusControl method is just a placeholder.

classdef SVGAxisLimit < handle
  
  properties (GetAccess = private, SetAccess = immutable)
    hF (1,1)
    hI (1,1) matlab.ui.control.Image
    hLL (1,1) matlab.ui.control.NumericEditField
    hRL (1,1) matlab.ui.control.NumericEditField
    hDone (1,1) matlab.ui.control.Button
  end
  
  methods    
    function obj = SVGAxisLimit()
      % Create figure:
      hF = uifigure('WindowState','maximized','Color','w'); drawnow;
      
      % Create image:      
      hI = uiimage(hF, 'Position', [1,100,hF.Position(3),hF.Position(4)-100]);
      
      % Create controls:
      uilabel(hF, 'HorizontalAlignment', 'left', 'Position', [600 20 150 42],...
        'Text', 'Left Limit:', 'FontSize', 22);
     
      % Create LeftLimitEditField
      hLL = uieditfield(hF, 'numeric', 'Position', [710 20 80 42], 'FontSize', 22);

      % Create RightLimitEditFieldLabel
      uilabel(hF, 'HorizontalAlignment', 'left', 'Position', [900 20 150 42],...
        'Text', 'Right Limit:', 'FontSize', 22);

      % Create RightLimitEditField
      hRL = uieditfield(hF, 'numeric', 'Position', [1025 20 80 42], 'FontSize', 22);

      % Create DoneButton
      hDone = uibutton(hF, 'push', 'Text', 'Done', 'Position', [1200 20 80 42], ...
        'FontWeight', 'bold', 'FontSize', 22, 'ButtonPushedFcn', @(varargin)uiresume(hF));
      
      % Store handles:
      obj.hF = hF;
      obj.hI = hI;
      obj.hLL = hLL;
      obj.hRL = hRL;
      obj.hDone = hDone;
    end    
  end
  
  methods (Access = public)
    function [realLims] = showSVG(salObj, svgPath)
      salObj.hI.ImageSource = svgPath;
      % Focus left edit field
      SVGAxisLimit.focusControl(salObj.hLL);
      % Wait for a click on "done"
      uiwait(salObj.hF);
      % When resume, capture values:
      realLims = [salObj.hLL.Value, salObj.hRL.Value];
    end
  end  
  
  methods (Access = private, Static = true)
    function [] = focusControl(hObject)
      % hObject is the handle of the uicontrol which needs to be focused
      % ???
    end
  end
end

我正在使用MATLAB R2020a.

I am using MATLAB R2020a.

我决定为此使用uifigures，因为其解决方法避免了此组件的存在).

I have decided to use uifigures for this, because their uiimage component natively supports the presentation of SVGs (although workarounds avoiding this component exist).

推荐答案

看到UIFigure主要是一个网页，事实证明

Seeing how a UIFigure is mostly a webpage, it turns out that the JavaScript Web API methods of .focus() and .select() can be useful here. The only difficulty that remains is finding some way to refer to the web element (widget) in question. Fortunately, the HTML elements corresponding to edit fields in R2020a are identified by a unique id attribute, which makes it easy to refer to them using very simple DOM commands such as getElementById. In summary:

function [] = focusControl(hObject)
  % hObject is the handle of the uicontrol which needs to be focused
  [hWin, widgetID] = mlapptools.getWebElements(hObject);
  hWin.executeJS(sprintf(...
    'W = document.getElementById("%s"); W.focus(); W.select();', widgetID.ID_val));
end

在mlapptools所在的位置此处(公开:我是此书的合著者实用程序.)

Where mlapptools can be found here (disclosure: I am a co-author of this utility).

这篇关于如何将焦点放在Uifigure中的特定元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！