슬라이더 위젯(테마 적용 가능)
슬라이더 위젯에는 사용자가 매쉬업에 숫자를 입력할 수 있는 슬라이더 요소가 표시됩니다. 사용자가 최소값과 최대값을 지정할 수 있도록 범위 선택을 활성화할 수 있습니다.
위젯 구조
다음 그림에서는 슬라이더 위젯의 다양한 부분을 보여줍니다.
1. 위젯 레이블
2. 값 레이블
3. 끌기 핸들
4. 슬라이더 트랙
5. 최소값 및 최대값 레이블
 |
슬라이더 위젯은 플랫폼에서 표준 위젯으로, SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수 있습니다.
|
범위 선택 모드 활성화
사용자가 런타임에 값 범위를 선택할 수 있도록 위젯 RangeSelection 속성을 활성화할 수 있습니다. 범위 선택을 활성화하면 슬라이더에 값 범위의 시작과 끝을 나타내는 두 개의 핸들이 사용됩니다. 위젯 Value 및 EndValue 속성을 사용하여 이러한 값을 지정할 수 있습니다. 슬라이더 값에 대한 변경 내용을 기반으로 서비스를 실행하려면 ValueChanged 및 EndValueChanged 이벤트를 매쉬업의 다른 위젯, 함수 또는 데이터 서비스에 바인딩합니다. 예를 들어, 작업 현장에서 사용 가능한 리소스에 대한 정보를 검색하는 서비스의 데이터를 필터링하는 값 범위를 정의할 수 있습니다.
단계 분할 모드 활성화
위젯 Stepping Mode 속성을 true로 설정하여 슬라이더 트랙에 대한 증가 단계 분할 모드를 활성화할 수 있습니다. 슬라이더의 증가 단계를 정의하면 사용자가 트랙 값의 배율을 파악할 수 있으며 핸들을 특정 값으로 더 쉽게 배치할 수 있습니다. 다음 방법 중 하나를 사용하여 슬라이더의 증가를 정의할 수 있습니다.
• 트랙을 증가로 분할하려면 NumberOfSteps 속성을 사용합니다.
• 단계 크기를 설정하려면 StepSize 속성을 사용합니다.
예를 들어, 매쉬업에서 데이터를 업데이트하는 데 걸리는 시간을 설정하는 슬라이더 위젯에 대해 5분 증가를 정의할 수 있습니다. 런타임에 핸들이 슬라이더 트랙을 따라 정의된 단계에 자동으로 스냅됩니다.
세로 모드 사용
위젯 VerticalSlider 속성을 true로 설정하여 세로 모드를 활성화할 수 있습니다.
편집 가능한 값 활성화
위젯 EditableValue 속성을 true로 설정하여 값 편집 모드를 활성화할 수 있습니다. 이 구성에서는 사용자가 핸들을 이동하지 않고 값 레이블에 값을 입력할 수 있습니다. 슬라이더의 값을 변경하려면 값 레이블을 두 번 클릭한 다음 값을 입력합니다. 새 값을 기준으로 핸들 위치가 자동으로 변경됩니다.
위젯 스타일 지정
스타일 속성 패널에서 스타일 속성을 편집할 수 있습니다. 서로 다른 상태에서 여러 부품의 위젯 색상, 글꼴, 형태 및 크기를 사용자 정의할 수 있습니다.
• Slider 카테고리를 사용하면 사용자가 배경, 전경 및 막대 색상을 편집할 수 있습니다.
• Thumb 카테고리를 사용하면 사용자가 슬라이더 위치 조정 컨트롤 또는 끌기 핸들의 스타일 및 색상을 편집할 수 있습니다.
• Min-Max Label 카테고리를 사용하면 사용자가 최소 최대 레이블의 레이블 스타일 및 색상을 편집할 수 있습니다.
• Track 카테고리를 사용하면 사용자가 트랙 배경의 색상을 편집할 수 있습니다.
위젯 속성
다음 표에는 슬라이더 위젯의 속성이 나와 있습니다.
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부 (Y/N)
|
로컬리제이션 가능 여부 (Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
label
|
슬라이더의 레이블에 표시되는 텍스트입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
||
|
labelAlignment
|
위젯 레이블을 왼쪽, 오른쪽 또는 가운데로 정렬합니다.
|
STRING
|
왼쪽
|
Y
|
N
|
||
|
LabelType
|
레이블 유형을 머리글, 하위 머리글, 레이블 또는 본문으로 설정합니다.
|
STRING
|
레이블
|
Y
|
N
|
||
|
Value
|
슬라이더 값을 설정하거나 바인딩합니다.
|
NUMBER
|
해당 없음
|
Y
|
N
|
||
|
CustomClass
|
위젯의 최상위 div에 대한 CSS를 정의합니다. 여러 클래스를 입력할 때는 각 클래스를 공백으로 구분합니다.
|
STRING
|
해당 없음
|
Y
|
N
|
||
|
TabSequence
|
TAB을 누를 때 위젯이 강조 표시되는 시퀀스를 설정합니다.
|
NUMBER
|
해당 없음
|
N
|
N
|
||
|
EndValue
|
범위 선택 모드에 있을 때 두 번째 핸들에 대한 슬라이더 값입니다.
|
NUMBER
|
해당 없음
|
Y
|
N
|
||
|
EndValueChanged
|
슬라이더에 대한 끝 값이 변경될 때 이벤트를 트리거합니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
||
|
Minimum
|
슬라이더에 대한 최소값을 설정합니다.
|
NUMBER
|
0
|
Y
|
N
|
||
|
Maximum
|
슬라이더에 대한 최대값을 설정합니다.
|
NUMBER
|
100
|
Y
|
N
|
||
|
SteppingMode
|
한 번 클릭할 때마다 특정 단계 수만큼 슬라이더를 이동하려면 선택합니다.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
StepSize
|
슬라이더가 이동하는 각 단계에 대한 값 변경을 설정합니다.
|
NUMBER
|
해당 없음
|
Y
|
N
|
||
|
NumberOfSteps
|
각 클릭에 대해 슬라이더가 이동하는 단계 수를 설정합니다.
|
NUMBER
|
해당 없음
|
Y
|
N
|
||
|
ValuePrecision
|
슬라이더 값에 대해 소수점 뒤에 표시할 자릿수를 설정합니다.
|
NUMBER
|
해당 없음
|
N
|
N
|
||
|
DisplayValueLabel
|
슬라이더 값 레이블에 대한 표시 옵션을 예, 아니요 또는 끌 때로 설정합니다.
|
STRING
|
예
|
N
|
N
|
||
|
EditableValue
|
사용자가 매쉬업에서 값 레이블을 편집하여 핸들을 이동할 수 있습니다.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
DisplayMinMaxLabels
|
최소값과 최대값의 레이블을 표시합니다.
|
BOOLEAN
|
True
|
N
|
N
|
||
|
HandleSize
|
핸들 크기를 픽셀 단위로 설정합니다.
|
NUMBER
|
해당 없음
|
N
|
N
|
||
|
TrackSize
|
트랙 크기를 픽셀 단위로 설정합니다.
|
NUMBER
|
해당 없음
|
N
|
N
|
||
|
TrackAlignment
|
트랙을 슬라이더의 가운데, 시작 또는 끝에 정렬합니다.
|
STRING
|
가운데
|
N
|
N
|
||
|
FullTrack
|
슬라이더 트랙을 확장하여 핸들 아이콘을 완전히 포함합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
MinValueLabel
|
최소값의 레이블을 지정합니다.
|
STRING
|
MIN
|
Y
|
Y
|
||
|
MaxValueLabel
|
최대값의 레이블을 지정합니다.
|
STRING
|
MAX
|
Y
|
Y
|
||
|
HandleIcon
|
핸들 아이콘의 형태를 없음, 원형 또는 분할로 제어합니다.
|
STRING
|
원형
|
N
|
N
|
||
|
SecondHandleIcon
|
두 번째 핸들 아이콘에 대한 미디어 엔티티를 없음, 원형 또는 분할로 선택합니다.
|
STRING
|
원형
|
N
|
N
|
||
|
MinSideIcon
|
최소 측에 대한 아이콘을 지정합니다.
|
미디어 엔티티
|
해당 없음
|
N
|
N
|
||
|
MinIconSize
|
최소값 아이콘의 크기를 제어합니다. 옵션: 작음, 중간, 큼 또는 아주 큼
|
STRING
|
중간
|
Y
|
N
|
||
|
MaxSideIcon
|
최대 측에 대한 아이콘을 선택합니다.
|
미디어 엔티티
|
해당 없음
|
N
|
N
|
||
|
MaxIconSize
|
최대값 아이콘의 크기를 제어합니다. 옵션: 작음, 중간, 큼 또는 아주 큼
|
STRING
|
해당 없음
|
Y
|
N
|
||
|
RangeSelection
|
두 번째 핸들을 추가하고 슬라이더에서 범위 선택을 활성화합니다.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
VerticalSlider
|
슬라이더 방향을 세로로 변경합니다.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ReverseMinMaxValues
|
최소값과 최대값의 위치를 반대로 바꿉니다.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ReverseLabelPosition
|
최소값과 최대값의 레이블 위치를 반대로 바꿉니다.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
OverlapHandle
|
범위 선택이 활성화된 경우 두 슬라이더 핸들 사이의 겹침을 활성화합니다.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ValueChanged
|
슬라이더 값이 변경될 때 이벤트를 트리거합니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
||
|
Increment
|
슬라이더 값을 증가시키는 바인딩 가능한 서비스입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
||
|
Decrement
|
슬라이더 값을 감소시키는 바인딩 가능한 서비스입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
||
|
IncrementSecondHandle
|
범위 선택 모드가 활성화된 경우 두 번째 핸들의 값을 증가시키는 바인딩 가능한 서비스입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
||
|
DecrementSecondHandle
|
범위 선택 모드가 활성화된 경우 두 번째 핸들의 값을 감소시키는 바인딩 가능한 서비스입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
||
|
Disabled
|
매쉬업에서 위젯을 비활성화합니다. 위젯은 계속 표시되지만 대화형이 아닙니다.
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
HandleTooltipField
|
슬라이더 핸들을 마우스로 가리킬 때 도구 설명을 표시합니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
||
|
HandleTooltipIcon
|
슬라이더 핸들의 도구 설명에 대한 아이콘 이미지를 설정합니다.
|
미디어 엔티티
|
해당 없음
|
N
|
N
|
||
|
SecondHandleTooltipField
|
두 번째 슬라이더 핸들을 마우스로 가리킬 때 도구 설명을 표시합니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
||
|
SecondHandleTooltipIcon
|
두 번째 슬라이더 핸들의 도구 설명에 대한 아이콘 이미지를 설정합니다.
|
미디어 엔티티
|
해당 없음
|
N
|
N
|
슬라이더 위젯 데이터 유효성 검사
단일 선택 또는 범위 선택을 사용할 때 최소값 및 최대값을 설정하는 데 유효성 검사 속성을 사용할 수 있습니다.
기본 실패 메시지를 구성하려면 MinValueFailureMessgae 및 MaxValueFailureMessgae 속성을 사용합니다.
공통 유효성 검사 속성에 대한 자세한 내용은 위젯에 유효성 검사 적용을 참조하십시오.
다음 표에는 유효성 검사 패널에서 사용할 수 있는 유효성 검사 속성이 나와 있습니다.
|
속성
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부(Y/N)
|
로컬리제이션 가능 여부(Y/N)
|
|---|---|---|---|---|---|
|
CriteriaMessage
|
유효성 검사 조건 및 유효성 검사 실패 시 표시할 메시지입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
CriteriaMessageDetails
|
유효성 검사 조건 및 실패 메시지에 대해 표시할 세부 정보입니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
MaxValidValue
|
사용자가 유효성 검사를 설정할 수 있는 최대 슬라이더 값입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
MaxValueFailureMessage
|
슬라이더 값이 최대 유효 값보다 높을 때 표시할 메시지입니다.
|
NUMBER
|
${value} is the maximum value
|
Y
|
Y
|
|
MinValidValue
|
사용자가 유효성 검사를 설정할 수 있는 최소 슬라이더 값입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
MinValueFailureMessgae
|
슬라이더 값이 최소 유효 값보다 낮을 때 표시할 메시지입니다.
|
NUMBER
|
${value} is the minimum value
|
Y
|
Y
|
|
ShowValidationCriteria
|
슬라이더를 편집할 때 필수 입력에 대한 힌트 메시지를 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationFailure
|
입력한 값이 유효성 검사에 실패할 때 실패 메시지를 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationState
|
사용자가 런타임에 위젯과 상호 작용하기 전에 유효성 검사 상태를 표시할 수 있는 바인딩 가능한 서비스입니다. 기본적으로 유효성 검사 상태는 사용자 상호 작용 후에만 표시됩니다.
|
Service
|
해당 없음
|
내부
|
N
|
|
ShowValidationSuccess
|
입력한 값이 유효성 검사에 성공할 때 성공 메시지를 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
SucessMessgae
|
값이 유효할 때 표시할 메시지입니다.
|
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
|