스크립트 에디터

이벤트 탭에서는 스크립트를 활용하여 좀 더 유연한 개발을 할 수 있습니다. 이벤트 스크립트 작성법을 모르거나 스크립트 도우미에 대한 정보가 필요하다면 해당 페이지가 도움이 될 수 있습니다.

기능 설명

스크립트 에디터

이벤트 스크립트는 이벤트 탭에서 (스크립트)버튼을 눌러 작성할 수 있습니다.

스크립트 버튼 클릭 시 아래 이미지처럼 스크립트 창이 열리게 됩니다.

스크립트 에디터 내부에는 스크립트를 활용하여 보다 유연한 개발을 할 수 있습니다. 스크립트 에디터에서는 자바스크립트와 플렉스튜디오에서 제공하는 스크립트를 활용하여 개발할 수 있습니다.

컴포넌트 제어 함수 페이지를 참고할 수 있습니다.

[이벤트]-[스크립트 버튼]으로 열리는 이벤트 스크립트(EventScript) 창은 로드 스크립트와는 다릅니다. 로드스크립트용 메서드 사용 시 정상적으로 동작하지 않을 수 있습니다.

스크립트 도우미

플렉스튜디오에서는 원활한 스크립트 작성을 위해 '스크립트 도우미 기능'을 제공합니다.

해당 기능은 토글 버튼을 통해 켜고 끌 수 있습니다.

스크립트 도우미는 다음과 같은 기능을 제공합니다.

• 메서드 리스트

❍ 메서드를 클릭하여 스크립트 에디터에 쉽게 붙여 넣을 수 있습니다.

❍ 컴포넌트용 함수(f.Component)나 자주 쓰이는 메서드 리스트를 제공합니다.

❍ 컴포넌트 함수(f.Component)의 경우 적용 가능한 컴포넌트 리스트를 제공합니다.

사진을 통한 예시는 하단에서 확인할 수 있습니다.

• 검색창

❍ 검색으로 원하는 메서드를 쉽게 찾을 수 있습니다.

❍ 컴포넌트용 함수가 적용 가능한 컴포넌트의 속성들을 검색하여 적용가능한 함수들을 빠르게 찾을 수 있습니다

예) '고양이'라는 컬렉션 키가 연결된 InutText를 검색하기 위해, 검색창에 '고양이' 입력. 해당 InputText에 적용 가능한 메서드 리스트를 찾을 수 있습니다.

사진을 통한 예시는 하단에서 확인할 수 있습니다.

함수 리스트의 활용

f.Component 함수의 경우 필요한 파라미터 값을 컴포넌트 단위로 선택할 수 있습니다.

f.Component(fid) 예시

const textComponent = f.Component().element;

f.Component(fid)는 Group, Layout, Control, StepButton과 같은 컴포넌트에 접근하여 동작하는 메서드입니다.

스크립트 에디터에서 원하는 메서드를 토글하면 적용 가능한 컴포넌트 리스트가 보입니다. 원하는 컴포넌트를 클릭하면 자동으로 파라미터가 넣어진 스크립트가 스크립트 에디터에 작성됩니다.

검색창의 활용

검색을 활용하여 원하는 메서드를 쉽게 찾을 수 있습니다.

스크립트 도우미 검색창

사자라는 컬렉션 키가 연결된 컴포넌트(InputText)에 쓸 수 있는 메서드를 빠르게 찾으려고 합니다.

검색 목표인 컴포넌트

검색창에 '사자'를 입력합니다.

이미지와 같이 '사자'를 컬렉션 키로 지정한 InputText를 쓸 수 있는 모든 컴포넌트용 메서드가 나타나게 됩니다.

원하는 스크립트 하위의 요소를 클릭하여 스크립트를 넣습니다.

예시

자바스크립트와 플렉스튜디오에서 제공하는 스크립트를 활용한 예시입니다.

// Some code
const animal = ['고양이','비둘기','사자'];

for(let i=0; i<animal.length; i++){
    const ani = `${animal[i]}`
    f.Collection.addSector({'이름' : ani},'동물');
}

자바스크립트 반복문, 배열과 플렉스튜디오의 스크립트를 활용하여 섹터를 추가하는 예시입니다.

디버거에서 스크립트가 실행되는 모습

값이 의도대로 컬렉션에 반영된 것을 볼 수 있습니다.