텍스트 영역 위젯
텍스트 영역 위젯을 사용하면 매쉬업 사용자가 매쉬업에 여러 줄 텍스트를 입력할 수 있습니다.
 |
텍스트 영역 위젯은 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. 두 버튼을 표시하는 정적 컨테이너
별도의 컨테이너를 사용하여 위젯을 표시하면 더 많은 반응형 레이아웃을 만들 수 있습니다. 다음 이미지에서는 매쉬업에 더 많은 공간을 사용할 수 있을 때 이전 양식을 보여줍니다. 텍스트 영역은 해당 컨테이너와 함께 증가하고 텍스트 필드의 크기는 동일하게 유지됩니다.
텍스트 영역 위젯 크기 조정
AllowResize 속성을 활성화하면 사용자가 런타임 시 텍스트 영역 위젯의 크기를 조정할 수 있습니다. 이 속성을 true로 설정하면 위젯의 크기를 조정할 수 있으므로 사용자가 입력 공간을 더 잘 제어할 수 있습니다.
위젯의 크기를 어떻게 조정할지 정의하려면 ResizeDirection 속성을 사용합니다. 가로, 세로 또는 양방향으로 크기를 조정할 수 있습니다. 기본 설정은 둘 다입니다. 사용자가 텍스트 영역의 너비와 높이를 조정할 수 있습니다. 이렇게 하면 특히 사용자가 긴 텍스트를 입력하거나 편집해야 할 때 유용성이 향상됩니다.
위젯 속성
텍스트 영역 위젯의 속성은 다음과 같습니다.
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부 (Y/N)
|
로컬리제이션 가능 여부 (Y/N)
|
|---|---|---|---|---|---|
|
Text
|
텍스트 영역에 표시되는 텍스트입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
Label
|
텍스트 영역의 레이블로 표시되는 텍스트입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
Counter
|
텍스트 영역에 입력되는 문자의 수를 세고 표시합니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
MaxNumberOfCharacters
|
텍스트 영역에 허용되는 최대 문자 수를 설정할 수 있습니다.
|
NUMBER
|
100
|
Y
|
N
|
|
HintText
|
필드에 입력해야 하는 내용에 대해 설명하는 자리 표시자 텍스트를 표시합니다.
|
STRING
|
해당 없음
|
N
|
Y
|
|
Disabled
|
이 속성을 사용하면 매쉬업에서 위젯을 비활성화할 수 있습니다. 위젯이 매쉬업에 표시되지만 클릭할 수는 없습니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ReadOnly
|
텍스트 영역을 읽기 전용으로 설정하면 포함된 텍스트를 사용자가 편집할 수 없습니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
TextAlignment
|
텍스트를 왼쪽 또는 오른쪽에 정렬할 수 있습니다.
|
STRING
|
Left
|
N
|
N
|
|
LabelAlignment
|
레이블을 왼쪽, 오른쪽 또는 가운데에 정렬할 수 있습니다.
|
STRING
|
Left
|
N
|
N
|
|
TabSequence
|
사용자가 Tab 키를 누를 때 위젯이 강조 표시되는 순서입니다.
|
NUMBER
|
해당 없음
|
N
|
N
|
|
CustomClass
|
위젯의 최상위 div에 CSS를 정의할 수 있습니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
AllowResize
|
사용자가 런타임에 텍스트 영역의 크기를 조정할 수 있는 컨트롤을 추가합니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
ResizeDirection
|
텍스트 영역의 크기 조정 방향을 제어합니다. 가로, 세로 또는 양방향으로 영역의 크기를 조정할 수 있습니다.
|
STRING
|
둘 다
|
N
|
N
|
|
Changed
|
데이터가 수정될 때 트리거되는 이벤트입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
ResetToDefaultValue
|
이 위젯에 대한 입력을 기본값으로 재설정합니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
Width
|
위젯의 너비입니다.
ThingWorx 9.3.2 이상에서는 하나 이상의 위젯이 있는 컨테이너에 위젯을 추가하지 않으면 이 속성이 숨겨집니다.
|
NUMBER
|
273
|
N
|
N
|
|
Height
|
위젯의 높이입니다. 기본적으로 자동 계산됩니다. 고정 높이를 설정하려면 속성 패널에 값을 입력하거나 캔버스에서 위젯의 크기를 조정합니다. ThingWorx 9.3.2 이상에서는 하나 이상의 위젯이 있는 컨테이너에 위젯을 추가하지 않으면 이 속성이 숨겨집니다.
|
NUMBER
|
자동 크기 조정
|
N
|
N
|
|
MinWidth
|
ThingWorx 9.3.2 이상에서 반응형 컨테이너에 위젯이 추가될 때 해당 위젯의 최소 너비를 설정합니다.
|
NUMBER
|
해당 없음
|
N
|
N
|
|
TextChanged
|
위젯 값을 업데이트한 후 위젯 외부의 영역을 클릭할 때 트리거되는 바인딩 가능한 이벤트입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
TooltipField
|
위젯을 마우스로 가리킬 때 표시되는 도구 설명 텍스트를 설정합니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
TooltipIcon
|
위젯의 도구 설명에 대한 아이콘 이미지를 설정합니다.
이미지를 추가하거나 이미지 URL 경로를 지정할 수 있습니다.
|
미디어 엔티티
|
해당 없음
|
N
|
N
|
위젯 데이터 유효성 검사
공통 유효성 검사 속성 외에도 MaxLength 및 MinLength 속성을 사용하여 텍스트 영역 위젯 내 문자 수의 유효성을 검사할 수 있습니다.
MaxLengthFailureMessage 및 MinLengthFailureMessage 속성을 사용하여 기본 실패 메시지를 사용자 정의할 수 있습니다. ${value} 매개 변수를 사용하여 최대값 및 최대값이 메시지 내에 표시됩니다.
공통 유효성 검사 속성 사용에 대한 자세한 내용은 위젯에 유효성 검사 적용을 참조하십시오.
다음 표에는 유효성 검사 패널에서 사용할 수 있는 유효성 검사 속성이 나와 있습니다.
|
속성
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부(Y/N)
|
로컬리제이션 가능 여부(Y/N)
|
|---|---|---|---|---|---|
|
CriteriaMessage
|
유효성 검사 조건 및 유효성 검사 실패 시 표시할 메시지입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
CriteriaMessageDetails
|
유효성 검사 조건 및 실패 메시지에 대해 표시할 세부 정보입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
MaxLength
|
텍스트 영역 값의 최대 길이입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
MaxLengthFailureMessage
|
현재 값이 최대 문자 길이를 초과할 때 표시할 메시지입니다.
|
STRING
|
${value} characters is the maximum
|
Y
|
Y
|
|
MinLength
|
텍스트 영역 값의 최소 길이입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
MinLengthFailureMessage
|
현재 값이 최소 문자 길이 미만일 때 표시할 메시지입니다.
|
STRING
|
${value} characters is the minimum
|
Y
|
Y
|
|
RequiredMessage
|
필수 값이 true로 설정되고 항목이 선택되지 않았을 때 표시할 메시지입니다.
|
STRING
|
값은 필수입니다.
|
Y
|
Y
|
|
ShowValidationCriteria
|
텍스트 영역을 편집할 때 필수 입력에 대한 힌트 메시지를 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationFailure
|
입력한 값이 유효성 검사에 실패할 때 실패 메시지를 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationState
|
사용자가 런타임에 위젯과 상호 작용하기 전에 유효성 검사 상태를 표시할 수 있는 바인딩 가능한 서비스입니다. 기본적으로 유효성 검사 상태는 사용자 상호 작용 후에만 표시됩니다.
|
서비스
|
해당 없음
|
내부
|
N
|
|
ShowValidationSuccess
|
입력한 값이 유효성 검사에 성공할 때 성공 메시지를 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
SuccessMessage
|
유효성 검사에 성공했을 때 표시할 메시지입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
SuccessMessageDetails
|
유효성 검사 성공 메시지에 관한 추가 정보를 표시하는 보조 메시지입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
Validate
|
위젯 값이 변경될 때 트리거되는 바인딩 가능한 이벤트입니다. 이 이벤트를 서비스 또는 함수에 바인딩하여 유효성 검사 패턴 또는 식을 적용합니다.
|
event
|
해당 없음
|
Y
|
N
|
|
ValidationCriteriaIcon
|
유효성 검사 조건에 대해 힌트 메시지 내에 표시할 SVG 아이콘을 선택합니다.
|
IMAGELINK
|
info
|
N
|
N
|
|
ValidationFailureIcon
|
유효성 검사에 실패했을 때 상태 메시지 내에 표시할 SVG 아이콘을 설정합니다.
|
IMAGELINK
|
error
|
N
|
N
|
|
ValidationOutput
|
위젯 유효성 검사의 출력을 검색합니다. 반환된 값은 Undefined, Unvalidated, Valid 또는 Invalid입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
ValidationState
|
유효성 검사 상태를 설정하는 바인딩 가능한 속성입니다. 이 속성을 Undefined, Unvalidated, Valid, Invalid로 설정할 수 있습니다.
|
STRING
|
Undefined
|
Y
|
N
|
|
ValidationSuccessIcon
|
유효성 검사에 성공했을 때 상태 메시지 내에 표시할 SVG 아이콘을 선택합니다.
|
IMAGELINK
|
success
|
N
|
N
|
|
ValueRequired
|
목록에서 항목을 선택해야 합니다.
|
BOOLEAN
|
False
|
Y
|
N
|