Применение проверки к виджетам
Проверку можно использовать для проверки данных, которые пользователи могут вводить или выбирать в мэшапе. Проверка позволяет убедиться, что предоставленные данные имеют правильный формат и соответствуют ожидаемым требованиям приложения. Некоторые входные данные могут быть обязательными, тогда как другие должны соответствовать конкретному формату, такому как телефонные номера или адреса электронной почты. Обычно простая проверка выполняется на стороне клиента перед отправкой данных на сервер. Однако можно использовать события и сервисы для выполнения расширенной проверки на стороне сервера. Можно использовать проверку, чтобы улучшить взаимодействие с пользователем для ваших мэшапов следующими способами:
• Собирать данные с использованием правильного формата. Сервисы и функции данных могут работать неверно, если данные отсутствуют или неправильно отформатированы.
• Защищать данные пользователей, сохраняя на сервере только действительные и безопасные данные.
• Защищать мэшап от вредоносных данных, которые могут привести к повреждению приложения.
При успешном завершении проверки приложение позволяет пользователю отправлять входные данные на сервер. При сбое проверки отображается сообщение об ошибке, и пользователи могут исправлять введенные данные и повторять попытку. Свойства виджета и стиля можно использовать для конфигурирования текста, значков и стилей сообщений о критериях, успехах и сбоях. Следующие виджеты поддерживают проверку входных данных в ThingWorx 9.3.4 и более поздних версий:
• Флажок
• Ползунок
• Сетка
Дополнительные сведения о применении проверки к виджету "Сетка" см. в разделе Проверка входных данных в сетке.
При выборе одного из перечисленных виджетов во время конструирования его свойства проверки перечисляются на панели Проверка. На следующем рисунке показаны свойства виджета "Текстовое поле". Можно настроить свойства проверки, такие как сообщения MaxLength и MinLength.
Рекомендации
• Убедитесь, что в компоновке виджетов достаточно места для отображения сообщения проверки. Задание слишком малой фиксированной высоты виджета может повлиять на видимость сообщения. Рекомендуется задавать для высоты автоматическое изменение размеров.
Конфигурирование свойств проверки
Доступные свойства проверки можно использовать для выполнения следующих операций конфигурирования.
• Задавать состояние проверки программным способом, используя для свойства ValidationState одно из следующих значений:
◦ Undefined - проверка отключена (по умолчанию).
◦ Unvalidated - проверка не инициирована.
◦ Valid - проверка прошла успешно.
◦ Invalid - сбой проверки.
• Инициировать сервисы проверки функций при изменении данных виджета с помощью события Validate.
• Загружать состояние проверки с помощью свойства ValidationOutput.
• Управлять видимостью, текстом и значками в сообщениях о критериях, сбое, успехе и требуемом значении.
• Определять, требуется ли указать значение для виджета с помощью свойства ValueRequired.
Существуют дополнительные свойства, специфичные для каждого виджета. Например, можно задавать максимальное и минимальное поддерживаемое количество символов для виджета "Текстовая область".
 |
Полный список свойств каждого виджета приведен в разделах виджетов.
|
Существует два способа выполнить проверку данных:
• Мгновенно - при использовании быстрой проверки данные проверяются при их вводе пользователем. Этот метод можно использовать для обратной связи с пользователем по мере ввода. Например, можно проверять, вводятся ли в виджет "Текстовое поле" специальные символы с помощью событий Changed или EnterKeyPressed. Для этого типа проверки не требуется соединение с сервером, и проверка обычно выполняется на стороне клиента.
• Явно - данные проверяются в ответ на действия пользователя, такие как нажатие кнопки отправки или переход на другую страницу с помощью ссылки. При возникновении такого события можно выполнить сервис проверки, возвращающий значение Valid или Invalid для свойства ValidationState. Этот тип проверки можно использовать для выполнения проверки на стороне сервера, которая занимает больше времени, чем проверка на стороне клиента.
Применение проверки на стороне клиента
Этот тип проверки можно использовать для применения правил проверки, которые применяются в браузере. Использование проверки на стороне клиента повышает эффективность работы в приложении, позволяя пользователям устранять проблемы форматирования перед отправкой данных на сервер. Проверка на стороне клиента также выполняется быстрее, чем проверка на стороне сервера. Ниже приведены примеры применения проверки на стороне клиента.
• Проверка, является ли поле обязательным, т. е. должно ли оно содержать данные.
• Проверка формата почтового индекса или адреса электронной почты.
• Проверка специальных символов или последовательности.
Для проверки данных на стороне клиента перед отправкой на сервер можно использовать функции, такие как функции проверки и выражения.
Применение проверки на стороне сервера
Использование проверки на стороне клиента не гарантирует, что входные данные являются действительными и безопасными. Для выполнения расширенной проверки используйте сервисы проверки на стороне сервера. Проверку отправленных данных и на стороне сервера, и на стороне клиента необходимо выполнять в следующих случаях:
• Когда при проверке используются данные, находящиеся на сервере, или когда для проверки требуется большой объем данных. Например, когда пользователь в форме запроса обращается к базе данных, чтобы убедиться, что деталь станка доступна для заказа. При использовании проверки на стороне клиента в этом случае требуется загрузка больших объемов данных, что может повлиять на производительность.
• При работе с конфиденциальными данными. Проверка на стороне клиента не гарантирует безопасность. Пользователи все еще могут отправлять неверные или вредоносные данные на сервер. Перед отправкой на сервер убедитесь, что все входные данные были обработаны.
Ниже приведены примеры вариантов использования для проверки на стороне сервера:
• Проверка, является ли идентификатор новой детали станка уникальным, а не уже существующим.
• Проверка, существует ли наименование удаленной вещи.
• Проверка, существует ли адрес эл. почты.
• Проверка, имеются ли у пользователя необходимые разрешения для выполнения задания.
Применение проверки к виджету
Чтобы применить проверку к виджету, выполните следующие шаги:
1. В Mashup Builder выберите виджет входных данных на канве или с помощью панели Проводник.
2. На панели Проверка определите критерии проверки и сообщения:
◦ Чтобы затребовать значение, задайте для свойства ValueRequired значение true. Можно настроить отображаемое сообщение с помощью свойства RequiredMessage.
◦ Сконфигурируйте сообщения для критериев, сбоя и успешности, чтобы уведомлять пользователя о требованиях к проверке и результатах проверки.
3. При необходимости привяжите свойство виджета ValidationState к функции или сервису данных.
4. Привяжите событие Validate к функции или сервису данных в зависимости от типа проверки, которую требуется выполнить.
◦ Чтобы выполнить проверку на стороне клиента, используйте функцию.
◦ Чтобы выполнить проверку на стороне сервера, используйте сервис данных.
5. Щелкните Сохранить, а затем просмотрите мэшап.
Проверка применяется к виджету во время выполнения.
Настройка сообщений проверки
В виджетах, поддерживающих проверку, можно отобразить следующие типы сообщений:
• Критерии - отображаются перед применением проверки.
• Сбой - отображается, если проверка не прошла успешно.
• Успех - отображается, если проверка прошла успешно.
• Требуется - отображается, если отсутствует требуемое значение.
|
|
Некоторые виджеты, такие как текстовое поле, включают специальные сообщения для встроенных свойств проверки. Дополнительные сведения о доступных свойствах для каждого виджета см. в разделе для соответствующего виджета.
|
Можно показывать сообщения о критериях, чтобы информировать пользователей о требуемом для виджета формате данных и примененных правилах проверки. Чтобы показать сообщение о критериях, задайте для свойства ShowValidationCriteria значение true.
1. ValidationCriteriaIcon - задает значок, используемый для сообщения о критериях.
2. CriteriaMessage - задает сообщение о критериях, которое отображается рядом со значком критериев.
3. CriteriaMessageDetails - дополнительные отображаемые сведения о критериях проверки.
Для отображения сообщения о критериях при сбое проверки задайте для свойства ShowFailureMessage значение true.
Сообщение и подробные сведения о состоянии критериев также отображаются для состояния сбоя. Чтобы задать конкретный значок для состояния сбоя, используйте свойство ValidationFailureIcon.
Можно отображать сообщения об успешном выполнении, чтобы подтвердить правильность данных или выбор для значимого действия или задания. Чтобы показать сообщение об успехе, задайте для свойства ShowValidationSuccess значение true. Во время выполнения сообщение об успехе отображается, если для свойства ValidationState задано значение Valid.
1. ValidationSuccessIcon - задает значок, который отображается в сообщении об успешном выполнении.
2. SuccessMessage - задает сообщение, отображаемое для состояния проверки.
3. SuccessMessageDetails - дополнительные отображаемые сведения об успешной проверке.
Можно использовать свойство RequiredMessage для отображения сообщения, если требуемое значение отсутствует или не выбрано. В следующем примере показано сообщение о сбое, которое отображается, если не выбран виджет "Флажок".
В этом примере свойства TrueRequired и ShowValidationFailure включены. Показать, что выбор является обязательным можно с помощью свойств ShowValidationCriteria и CriteriaMessage.
При сбое нескольких проверок сообщения о сбое отображаются в списке. В следующем примере проверка ползунка завершается сбоем, поскольку первое значение в диапазоне меньше минимального, а второе значение больше максимально допустимого.
Сообщения о проверке стилей
По умолчанию сообщения об успешном выполнении, сбоях и критериях стилизованы с помощью красного, зеленого и синего цветов подсветки.. Стили проверки можно настраивать в теме стиля мэшапа.
1. Откройте сущность темы стиля в Composer.
2. На вкладке Стили в разделе Глобальный разверните раздел > .
3. Измените значения для цветов на Успешно и Опасно.
4. Сохраните изменения в теме стиля и предварительно просмотрите изменения в мэшапе.
Можно также использовать свойства стиля виджета на панели Свойства стиля, чтобы задать стиль шрифта, цвета и фона для каждого из этих состояний.
1. В Mashup Builder выберите поддерживаемый виджет входных данных.
2. На панели Свойства стиля разверните состояние проверки, например Valid. Будут перечислены доступные части виджета.
| | Свойства стиля виджета "Средство выбора даты и времени" перечисляются под состоянием Базовое. |
3. Разверните одну или несколько частей, а затем измените доступные свойства стиля.
4. Щелкните Сохранить, а затем щелкните Просмотр мэшапа. Стили становятся видимыми при применении проверки.