Поделиться через


Функция SetFocus

Применимо к: приложениям на основе холста приложениям на основе модели

Устанавливает фокус ввода на конкретный элемент управления.

Description

Функция SetFocus дает элемент управления, который находится в фокусе ввода. Затем клавиши, нажатые пользователем, передаются этому элементу управления, что позволяет пользователю вводить текст в элемент управления ввода текста или использовать клавишу ВВОД, чтобы выбрать кнопку. Пользователь также может использовать клавишу TAB, касание, мышь или другой жест, чтобы переместить фокус ввода самостоятельно. Поведение клавиши TAB контролируется свойством TabIndex.

Используйте функцию SetFocus для установки фокуса, когда (каждый случай с примером ниже):

  • вновь открытый или включенный элемент управления вводом, чтобы направлять пользователя к дальнейшим действиям и быстрее вводить данные.
  • форма проверена, чтобы сфокусировать и отобразить неправильный элемент управления ввода для быстрого исправления.
  • отображается экран, чтобы сфокусировать первый элемент управления ввода со свойством OnVisibleэкрана.

Элемент управления с фокусом может визуально отличаться в зависимости от свойств FocusedBorderColor и FocusedBorderThickness.

Ограничения

Функция SetFocus может использоваться только со следующими элементами:

Невозможно задать фокус на элементы управления, которые находятся внутри элемента управления Gallery (Коллекция), Edit form (Форма редактирования) или Component (Компонент). Функция SetFocus может использоваться с элементом управления на прокручиваемом экране.

Вы не можете установить фокус на элементы управления, которые находятся в пределах элемента управления Container (Контейнер).

Вы можете установить фокус только для элементов управления на том же экране, что и формула, содержащая вызов функции SetFocus.

Попытка установить фокус на элемент управления, для свойства DisplayMode которого установлено значение Disabled, не имеет никакого эффекта. Фокус останется на прежнем месте.

В Apple iOS программная клавиатура будет отображаться автоматически, только если функция SetFocus была инициирована прямым действием пользователя. Например, при вызове из свойства OnSelect кнопки будет отображаться программная клавиатура, а при вызове из свойства OnVisible экрана она отображаться не будет.

Функцию SetFocus можно использовать только в формулах поведения.

Синтаксис

SetFocus( Control )

  • Control — обязательный аргумент. Элемент управления, которому требуется передать фокус ввода.

Примеры

Фокусировка на недавно появившемся или включенном элементе управления вводом

Многие корзины покупок позволяют клиенту использовать адрес доставки в качестве адреса выставления счета, что устраняет необходимость ввода одной и той же информации дважды. Если требуется другой адрес для выставления счета, поля ввода текста адреса для выставления счета включаются и удобно направить клиента к этим недавно включенным элементам управления для более быстрого ввода данных.

Анимация выбора использования пользовательского адреса выставления счета, в результате чего фокус перемещается на элемент управления ввода имени для выставления счета, отключая автоматическую синхронизацию с адресами доставки.

Здесь есть много формул, но та, которая смещает фокус, находится в свойстве OnUncheck элемента управления Check box (Флажок):

SetFocus( BillingName )

Клавиша TAB также может быть использована для быстрого перемещения фокуса с одного поля на другое. Чтобы лучше проиллюстрировать, клавиша TAB не была использована в анимации.

Чтобы создать такой пример, сделайте следующее:

  1. Создайте новое приложение.
  2. Добавьте элементы управления Label (Метка) с текстом "Shipping address" (Адрес доставки), "Name:" (Имя:), "Address:" (Адрес:), "Billing Address" (Адрес выставления счетов), "Name:" (Имя:) и "Address:" (Адрес:) и расположите их, как показано на анимации.
  3. Добавьте элемент управления Text Input (Ввод текста) и переименуйте его в ShippingName (Имя для доставки).
  4. Добавьте элемент управления Text Input (Ввод текста) и переименуйте его в ShippingAddress (Адрес доставки).
  5. Добавьте элемент управления Check box (Флажок) и переименуй его в SyncAddresses (Синхронизировать адреса).
  6. Задайте для свойства Text этого элемента управления формулу "Use Shipping address as Billing address":
  7. Добавьте элемент управления Text Input (Ввод текста) и переименуйте его в BillingName (Имя для выставления счетов).
  8. Задайте для свойства Default этого элемента управления формулу ShippingName:
  9. Задайте для свойства DisplayMode этого элемента управления формулу If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ): Это автоматически включит или отключит этот элемент управления в зависимости от состояния элемента управления "Флажок".
  10. Добавьте элемент управления Text Input (Ввод текста) и переименуйте его в BillingAddress (Адрес для выставления счетов).
  11. Задайте для свойства Default этого элемента управления формулу ShippingAddress:
  12. Задайте для свойства DisplayMode этого элемента управления формулу If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ): Это автоматически включит или отключит этот элемент управления в зависимости от состояния элемента управления "Флажок".
  13. Задайте для свойства Default этого флажка формулу true: По умолчанию адрес выставления счета будет использовать то же значение, что и адрес доставки.
  14. Задайте для свойства OnCheck этого флажка формулу Reset( BillingName ); Reset( BillingAddress ): Если пользователь выберет синхронизацию адресов доставки и выставления счетов, это удалит любой пользовательский ввод в полях адреса выставления счетов, позволяя свойствам Default для каждого получить значения из соответствующих полей адреса доставки.
  15. Задайте для свойства OnUncheck этого флажка формулу SetFocus( BillingName ): Если пользователь выбирает другой адрес выставления счета, это переместит фокус на первый элемент управления в адресе выставления счета. Элементы управления будут уже включены из-за их свойства DisplayMode.

Фокус на проблемах проверки

Заметка

Хотя этот пример выглядит как элемент управления Edit form (Форма редактирования), к сожалению, в функции SetFocus этот элемент управления еще не поддерживается. Вместо этого в этом примере используется прокручиваемый экран для размещения элементов управления вводом.

При проверке формы может быть полезно не только отобразить сообщение, если есть проблема, но также и перенести пользователя в поле, которое содержит ошибку. Это может быть особенно полезно, если рассматриваемое поле прокручивается за пределами экрана и не видно.

Анимация проверки формы ввода данных и отображения не только сообщения, но и установки фокуса ввода на неправильный элемент управления вводом, даже если он прокручивается за пределы экрана.

В этой анимации кнопка проверки нажимается до тех пор, пока все поля не будут заполнены правильно. Обратите внимание, что указатель мыши не перемещается вниз от верхней части экрана. Вместо этого функция SetFocus сместил фокус ввода в элемент управления, требующий внимания, с помощью этой формулы:

If( IsBlank( Name ),
        Notify( "Name requires a value", Error ); SetFocus( Name ),
    IsBlank( Street1 ),
        Notify( "Street Address 1 requires a value", Error ); SetFocus( Street1 ),
    IsBlank( Street2 ),
        Notify( "Street Address 2 requires a value", Error ); SetFocus( Street2 ),
    IsBlank( City ),
        Notify( "City requires a value", Error ); SetFocus( City ),
    IsBlank( County ),
        Notify( "County requires a value", Error ); SetFocus( County ),
    IsBlank( StateProvince ),
        Notify( "State or Province requires a value", Error ); SetFocus( StateProvince ),
    IsBlank( PostalCode ),
        Notify( "Postal Code requires a value", Error ); SetFocus( PostalCode ),
    IsBlank( Phone ),
        Notify( "Contact Phone requires a value", Error ); SetFocus( Phone ),
    Notify( "Form is Complete", Success )
)

Чтобы создать такой пример, сделайте следующее:

  1. Создайте новое пустое приложение для телефона.
  2. Из меню Вставка выберите Создать экран, затем выберите С прокруткой.
  3. В центральной части экрана добавьте элементы управления Text input (Ввод текста) и назовите их Name (Имя), Street1 (Улица1), Street2 (Улица2), City (Город), County (Округ), StateProvince (Штат/провинция), PostalCode (Почтовый индекс) и Phone (Телефон). Добавьте элементы управления Label (Метка) над каждым, чтобы идентифицировать поля. Возможно, вам придется изменить размер раздела, если он недостаточно длинный, чтобы вместить все элементы управления.
  4. Добавьте элемент управления Icon (Значок) в виде галочки в верхней части экрана, над прокручиваемым разделом.
  5. Задайте для свойства OnSelect элемента управления Icon формулу If( IsBlank( ..., приведенную выше.

Фокус при отображении экрана

Заметка

Хотя этот пример выглядит как элемент управления Edit form (Форма редактирования), к сожалению, в функции SetFocus этот элемент управления еще не поддерживается. Вместо этого в этом примере используется прокручиваемый экран для размещения элементов управления вводом.

Подобно отображению элемента управления вводом, при отображении экрана ввода данных полезно сфокусировать первый элемент управления вводом для более быстрого ввода данных.

Анимация, показывающая сравнение использования функции SetFocus и ее отсутствия при отображении экрана ввода данных.

В этой анимации экран ввода данных слева не использует функцию SetFocus. При отображении ни один элемент управления вводом не имеет фокуса, требуя от пользователя нажатия, касания, мыши или использования другого средства для фокусировки поля Name (Имя) перед тем как значение может быть введено в него.

Справа у нас точно такое же приложение, в котором свойству OnVisible экрана ввода данных задана следующая формула:

SetFocus( Name )

Это устанавливает фокус на поле Name (Имя) автоматически. Пользователь может начать печатать и переходить между полями с помощью клавиши TAB немедленно без каких-либо предварительных действий.

Чтобы создать такой пример, сделайте следующее:

  1. Создайте приложение "Фокус на проблемах проверки" выше.
  2. На этом экране задайте для свойства OnVisible формулу SetFocus( Name ).
  3. Добавьте второй экран.
  4. Добавьте элемент управления Button.
  5. Назначьте свойству OnSelect этого элемента управления формулу Navigate( Screen1 ).
  6. Предварительно просмотрите приложение с этого экрана. Нажмите кнопку. формула OnVisible будет оценена, и поле Name (Имя) будет автоматически в фокусе.