Виджет "Текстовая область"
Виджет "Текстовая область" позволяет пользователю мэшапа ввести в мэшапе многострочный текст.
 |
Виджет "Текстовая область" доступен как стандартный виджет ThingWorx Platform и как веб-компонент, который можно импортировать из SDK.
|
Размер виджета по умолчанию
Размеры виджета "Текстовая область" различаются в зависимости от используемой версии ThingWorx.
• В ThingWorx 9.3.2 и более поздних версиях виджет является адаптивным по умолчанию. При добавлении его в пустой контейнер он развертывается, чтобы заполнить все доступное пространство в контейнере.
• В более ранних версиях ThingWorx виджет имеет ширину и высоту по умолчанию, которые можно корректировать вручную с помощью свойств.
При переносе в ThingWorx 9.3.2 или более поздние версии виджеты "Текстовая область", которые отображаются как один виджет в контейнере, будут заполнять все доступное пространство в контейнере. Это изменение может повлиять на компоновку вашего мэшапа. Чтобы обновить компоновку, необходимо изменить компоновку мэшапа. Дополнительные сведения см. в следующих разделах:
Размеры виджета в ThingWorx 9.3.1 и более ранних версиях
По умолчанию "Текстовая область" отображается с использованием размеров ширины и высоты по умолчанию. Ширина задается фиксированным значением. Однако для высоты задается настройка Autosize, чтобы позволить виджету расширяться по вертикали. По мере ввода виджет увеличивается, чтобы отображать дополнительные символы, если размер текста превышает доступное пространство, пока не будет достигнуто значение, определенное в свойстве MaxNumberOfCharacters. Можно добавить дополнительные виджеты и управлять компоновкой с помощью опций выравнивание и распределение на панели Компоновка. На следующем рисунке показан виджет в компоновке мэшапа.
Компоновка разделяется следующим образом:
1. Адаптивный контейнер, который содержит четыре виджета: метку, два текстовых поля и текстовую область.
2. Фиксированный контейнер с двумя кнопками.
Ширина виджета задается как фиксированное значение. Однако для высоты задается настройка Autosize, чтобы позволить виджету развертываться по вертикали, если количество символов превышает доступное пространство. Для настройки размеров виджета можно использовать свойства Width и Height. Отображается многоточие.
Размеры виджета в ThingWorx 9.3.2 и более поздних версиях
При добавлении виджета в новый или существующий мэшап размеры по умолчанию задаются в соответствии с размером контейнера. Виджет автоматически расширяется, чтобы заполнить доступное пространство внутри контейнера. Чтобы настроить размеры виджета относительно компоновки, необходимо настроить компоновку контейнера с помощью панели Layout. Если виджет развернут в контейнере, свойства Width и Height не перечисляются на панели Свойства. При добавлении дополнительных виджетов в контейнер "Текстовая область" восстанавливаются предыдущие размеры. На следующем рисунке показан виджет в адаптивном контейнере ThingWorx Platform версии 9.3.2 или более поздней.
Компоновка разделяется следующим образом:
1. Статический контейнер с фиксированной высотой, который содержит три виджета: виджет "Метка" и два виджета "Текстовое поле". Задано направление элементов Вертикально.
2. Адаптивный контейнер с виджетом "Текстовая область".
3. Статический контейнер, отображающий две кнопки.
Использование отдельного контейнера для отображения виджета позволяет создавать более адаптивные компоновки. На следующем изображении показана предыдущая форма, когда для мэшапа доступно больше места. Обратите внимание: текстовая область расширяется вместе с контейнером, а текстовые поля остаются с теми же размерами.
Свойства виджета
Свойства виджета текстовой области перечислены ниже.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) |
|---|---|---|---|---|---|
Text | Текст, отображаемый в текстовой области. | STRING | Н/Д | Д | Д |
Label | Текст, отображаемый в качестве метки текстовой области. | STRING | Н/Д | Д | Д |
Counter | Считает и отображает число символов, введенных в текстовую область. | BOOLEAN | false | Н | Н |
MaxNumberOfCharacters | Позволяет задать максимальное допустимое число символов в текстовой области. | NUMBER | 100 | Д | Н |
HintText | Отображает текст местозаполнителя, поясняющий, что именно должно быть введено в поле. | STRING | Н/Д | Н | Д |
Disabled | Используйте это свойство, чтобы отключить виджет в мэшапе. Виджет будет отображаться в мэшапе, но не будет реагировать на нажатие. | BOOLEAN | false | Д | Н |
ReadOnly | Позволяет задать текстовую область как область, доступную только для чтения, поэтому пользователь не сможет править включенный в нее текст. | BOOLEAN | false | Н | Н |
TextAlignment | Позволяет выровнять текст по левому или правому краю. | STRING | Слева | Н | Н |
LabelAlignment | Позволяет выровнять метку: по левому краю, правому краю или центру. | STRING | Слева | Н | Н |
TabSequence | Последовательность, в которой подсвечиваются виджеты при нажатии пользователем клавиши табуляции. | NUMBER | Н/Д | Н | Н |
CustomClass | Позволяет определить CSS в верхнем разделе виджета. Можно ввести несколько классов, разделенных пробелами. | STRING | Н/Д | Д | Н |
Changed | Событие, которое инициируется при изменении данных. | Н/Д | Н/Д | Д | Н |
ResetToDefaultValue | Сбрасывает все входы для виджета до значений по умолчанию. | Н/Д | Н/Д | Д | Н |
Width | Ширина виджета. В ThingWorx 9.3.2 или более поздней версии это свойство является скрытым, если виджет не добавлен в контейнер с одним или несколькими виджетами. | NUMBER | 273 | Н | Н |
Height | Высота виджета. По умолчанию она рассчитывается автоматически. Введите значение на панели свойств или измените размер виджета на канве, чтобы задать фиксированную высоту. В ThingWorx 9.3.2 или более поздней версии это свойство является скрытым, если виджет не добавлен в контейнер с одним или несколькими виджетами. | NUMBER | Автоматический подбор размера | Н | Н |
MinWidth | Задает минимальную ширину виджета при его добавлении в адаптивный контейнер в ThingWorx 9.3.2 или более поздней версии. | NUMBER | Н/Д | Н | Н |
TextChanged | Привязываемое событие, которое инициируется, если щелкнуть область за пределами виджета после обновления значения виджета. | Н/Д | Н/Д | Д | Н |
TooltipField | Задает текст всплывающей подсказки, которая отображается при наведении указателя на виджет. | STRING | Н/Д | Д | Д |
TooltipIcon | Задает изображение значка для всплывающей подсказки виджета. Можно добавить изображение или указать URL-адрес изображения. | MEDIA ENTITY | Н/Д | Н | Н |
Проверка данных виджета
В дополнение к общим свойствам проверки можно использовать свойства MaxLength и MinLength для проверки количества символов в виджете "Текстовая область".
Можно настроить сообщения об отказе по умолчанию с помощью свойств MaxLengthFailureMessage и MinLengthFailureMessage . Максимальное и минимальное значения отображаются в сообщениях с использованием параметра ${value}.
Дополнительные сведения об использовании общих свойств проверки см. в разделе Применение проверки к виджетам.
В следующей таблице перечислены свойства проверки, доступные на панели Проверка в ThingWorx 9.3.4 и более поздних версий.
Свойство | Описание | Базовый тип | Значение по умолчанию | Доступно для связывания (Д/Н)? | Локализуемое (Д/Н) |
|---|---|---|---|---|---|
CriteriaMessage | Сообщение, отображаемое для критериев проверки и при сбое проверки. | STRING | Н/Д | Д | Д |
CriteriaMessageDetails | Подробности, отображаемые для сообщения о критериях проверки и о сбое. | STRING | Н/Д | Д | Д |
MaxLength | Максимальная длина значения текстовой области. | STRING | Н/Д | Д | Н |
MaxLengthFailureMessage | Сообщение, отображаемое, если текущее значение превышает максимальную длину в символах. | STRING | ${value} characters is the maximum | Д | Д |
MinLength | Минимальная длина значения текстовой области. | STRING | Н/Д | Д | Н |
MinLengthFailureMessage | Сообщение, отображаемое, когда текущая длина значения в символах меньше минимальной. | STRING | ${value} characters is the minimum | Д | Д |
RequiredMessage | Сообщение, отображаемое, если для опции "Требуется выбор" задано значение true, а элемент не выбран. | STRING | Требуется значение | Д | Д |
ShowValidationCriteria | Показывает сообщение с подсказкой о требуемых входных данных при правке ползунка. | BOOLEAN | false | Д | Н |
ShowValidationFailure | Показывает сообщение о сбое при сбое проверки введенных данных. | BOOLEAN | false | Д | Н |
ShowValidationSuccess | Показывает сообщение об успешном завершении при успешной проверке введенного значения. | BOOLEAN | false | Д | Н |
SuccessMessage | Сообщение, отображаемое при успешном завершении проверки. | STRING | Н/Д | Д | Д |
SuccessMessageDetails | Дополнительное сообщение, расширяющее информацию сообщения об успешной проверке. | STRING | Н/Д | Д | Д |
Validate | Связываемое событие, которое инициируется при изменении значения виджета. Привяжите это событие к сервису или функции, чтобы применить шаблон или выражение проверки. | событие | Н/Д | Д | Н |
ValidationCriteriaIcon | Выбор значка SVG для отображения в сообщении подсказки для критериев проверки. | IMAGELINK | info | Н | Н |
ValidationFailureIcon | Задает отображение значка SVG в сообщении о статусе при сбое проверки. | IMAGELINK | error | Н | Н |
ValidationOutput | Загружает выходные данные проверки виджета. Возвращаемые значения: Undefined, Unvalidated, Valid или Invalid. | STRING | Н/Д | Д | Н |
ValidationState | Связываемое свойство, которое задает состояние проверки. Для этого свойства можно задать значение Undefined, Unvalidated, Valid и Invalid. | STRING | Undefined | Д | Н |
ValidationSuccessIcon | Выбор значка SVG для отображения в сообщении о состоянии при успешном завершении проверки. | IMAGELINK | success | Н | Н |
ValueRequired | Требуется выбрать элемент в списке. | BOOLEAN | false | Д | Н |