컴포넌트 동적 활용(컴포넌트 아이디)

사용자의 행동이나 컴포넌트의 상태에 맞춰서 더 다양한 변화를 만들 수 있습니다. 컴포넌트 아이디를 이용하면 HTML 요소의 접근을 통해 Web에서 활용 가능한 기능들을 직접 만들어 낼 수 있습니다.

속성 설명

컴포넌트 아이디란?

시나리오 스튜디오의 는 고유한 ID 값을 갖습니다. 이를 컴포넌트 아이디라고 합니다.

컴포넌트 아이디 접근 방법

컴포넌트 종류별로 컴포넌트 아이디 접근 방법이 다릅니다.

Group, Layout

: 개발 모드(Dev)의 컴포넌트 아이디 영역을 통해 확인 가능합니다.

[그룹명] , [레이아웃명] 우측에 위치

모든 컴포넌트 (Step, Group, Layout, Controls, StepButton)

: 스크립트 도우미를 통해 접근 가능합니다.

1. 컴포넌트 아이디가 param으로 들어가는 스크립트 사용 시, 해당 컴포넌트 클릭

2. 스크립트 도우미에 의해 자동으로 컴포넌트 아이디가 param에 채워집니다.

예시

• 컴포넌트 아이디가 필요한 스크립트의 사용

f.Content("그룹/레이아웃 아이디").Scroll.offset 

• HTML 요소의 접근을 통한 유연한 개발

f.Component("컴포넌트 아이디").element이 Dom element 임을 활용한 커스텀 이벤트 예제입니다.

addEventListener로 이벤트에 따른 요소의 움직임을 구현할 수 있습니다. 아래는 해당 코드입니다.

f.Component("f_12").element로 요소 접근

const draggable = f.Component("f_12").element
_v.isDragging = false;
_v.offsetX = null;
_v.offsetY = null;

function startDrag(event) {
    _v.isDragging = true;
    const rect = draggable.getBoundingClientRect();
    _v.offsetX = event.clientX - (rect.left + rect.width / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
    _v.offsetY = event.clientY - (rect.top + rect.height / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
}

function endDrag() {
    _v.isDragging = false;
    _v.offsetX = null;
		_v.offsetY = null;
}

function drag(event) {
    if (_v.isDragging) {
        const x = event.clientX - _v.offsetX;
        const y = event.clientY - _v.offsetY;
        draggable.style.transform = `translate(${x}px, ${y}px)`;
    }
}

draggable.addEventListener('mousedown', startDrag);
draggable.addEventListener('mouseup', endDrag);
document.addEventListener('mousemove', drag);
//앱 이벤트를  위한 처리
...