보통 쇼핑몰같은 곳에 가보면 특정한 값을 선택하기 위한 도구로 슬라이더를 제공합니다.
쇼핑몰 외에도 다양한 곳에 사용되고 있습니다. 사용자가 직접 값을 입력하지 않고
대략적인 수치만으로 범위를 조정할때 사용하곤 합니다.
아쉽게도 엑스플랫폼에는 기본 컴포넌트로 제공되지 않고 있는데요.
어렵지 않게 동일한 기능을 가지는 슬라이더를 만들어볼 수 있습니다.
샘플로 만들어볼 슬라이더는 가로로 펼쳐진 슬라이더입니다.
먼저 가로막대를 배치합니다. 일반적인 용어로는 트랙이라고도 합니다.
Shape 컴포넌트를 가져다가 적당히 그려놓고
스타일 속성에서 strokepen 속성을 지정합니다.
strokepen 은 선에 대한 속성을 지정하는 항목입니다.
Shape 컴포넌트는 type 속성으로 모양을 지정하는데
기본 type이 line 입니다. 그래서 선을 그리는 경우에는 따로 type을 지정하지 않아도 됩니다.
그리고 값을 조절할 막대를 하나 만들어줍니다.
이런 막대는 썸(Thumb)이라고 합니다.
여기에서는 흰색 삼각형으로 만들어보겠습니다.
역시 Shape 컴포넌트를 가져다놓고 type을 triangle로 변경합니다.
마지막으로 상태값을 표기해줄 에디트박스를 하나 배치합니다.
기본 value 는 0으로 지정합니다.
이렇게 하면 슬라이더가 완성되었습니다. ㄷㄷ
당연한 것이겠지만 이렇게만 하고 실행을 해보면 막대가 움직이지 않습니다.
값도 당연히 변경되지 않구요.
먼저 초기 상태로 셋팅을 해야겠죠.
폼의 onload 이벤트에 초기 설정을 위한 코드를 추가해줍니다.
각 컴포넌트의 move 메소드를 사용하면 원하는 위치에 배치할 수 있습니다.
트랙은 그대로 배치하고 삼각형 막대를 꼭지점을 기준으로 배치하기 위해 아래와 같이 이동시켜줍니다.
(디자인시에 배치할 수도 있지만 나중에 초기화 등의 작업을 위해서..)
hr_thumb.move(hr_track.position.left - (hr_thumb.position.width / 2), hr_track.position.top + hr_track.position.height/2 - hr_thumb.position.height/2);
사용자의 액션은 트랙의 특정위치를 선택하는 경우입니다.
(슬라이더의 기능을 좀 더 확대하면 마우스를 누르고 막대를 끌어주는 형식이 되거나 마우스 휠 액션 등도 지원을 해야 하지만 여기서는 다루지 않습니다).
트랙을 클릭했을때에는 해당 지점으로 막대를 이동시켜주고 값을 변환시켜주는 이벤트를 처리합니다.
(정확하게는 클릭이 아니라 마우스를 눌렀을때입니다. 클릭은 마우스를 눌렀다가 떼었을때 이벤트가 발생하기 때문에
사용자에게 피드백이 가는 시점이 달라집니다).
function hr_track_onlbuttondown(obj:Shape, e:MouseEventInfo){MoveThumb(hr_track, e.clientX);}function MoveThumb(from_obj, mouse_x){hr_thumb.move(mouse_x + (hr_thumb.position.width/2), hr_thumb.position.top);}
그리고 변경된 값을 에디트박스로 넘겨주는 코드를 추가해줍니다.
var track_val = 100*(hr_thumb.position.left+(hr_thumb.position.width/2) - hr_track.position.left)/hr_track.position.width;track_val = Math.round(track_val);Edit00.value = track_val;
이렇게 하면 간단하지만 슬라이더와 비슷한 효과를 내는 폼을 만들 수 있습니다.
이제 해당 폼을 UserForm으로 만들거나 Div에서 가져와서 재활용할 수 있습니다.