컴포넌트를 신호에 연결하기

신호 및 핸들러 메커니즘을 사용하면 컴포넌트가 신호로 표시되는 애플리케이션 이벤트에 응답할 수 있습니다. 신호가 발생하면 해당 신호 핸들러가 호출되어 핸들러에 배치된 스크립트나 기타 작업을 사용하여 이벤트에 응답합니다.

특정 컴포넌트에 대해 특정 신호가 발생했을 때 알림을 받으려면 컴포넌트 정의에서 <신호>라는 이름의 시그널 핸들러를 선언해야 하며, 여기서 <신호>는 신호의 이름이고 첫 글자는 대문자로 표시해야 합니다. 시그널 핸들러에는 시그널 핸들러가 호출될 때 실행될 자바스크립트 코드가 포함되어야 합니다.

컴포넌트에는 사용자가 애플리케이션과 상호작용할 때 방출되는 사전 정의된 신호가 있습니다. 예를 들어 마우스 영역 컴포넌트에는 영역 내에서 마우스를 클릭할 때마다 발생하는 clicked 신호가 있습니다. 신호 이름은 clicked 이므로 이 신호를 수신하는 신호 핸들러의 이름은 onClicked 입니다.

프로퍼티 값이 변경되면 신호가 자동으로 발생합니다. 이러한 유형의 신호는 프로퍼티 변경 신호이며 이러한 신호에 대한 신호 핸들러는 on<Property>Changed 형식으로 작성되며 여기서 <프로퍼티>는 프로퍼티의 이름이며 첫 글자는 대문자로 표시됩니다.

예를 들어 마우스 영역 컴포넌트에는 pressed 프로퍼티가 있습니다. 이 프로퍼티가 변경될 때마다 알림을 받으려면 onPressedChanged 이라는 신호 핸들러를 사용합니다.

신호 및 신호 핸들러에 대한 자세한 내용은 신호 및 핸들러 이벤트 시스템을 참조하세요.

연결 만들기

컨텍스트 메뉴를 사용하여 선택한 컴포넌트를 액션에 연결하는 신호에 연결할 수 있습니다:

1. Navigator 또는 2D 보기에서 연결하려는 컴포넌트를 선택합니다.
2. 컨텍스트 메뉴에서 Connections > Add New Connection 을 선택한 다음 사용 가능한 신호, 액션 및 액션 속성을 선택합니다.

연결 추가하기

Connections 보기의 Connections 탭에서 연결을 추가할 수도 있습니다.

컴포넌트를 사용 가능한 신호에 연결하려면 다음과 같이 하세요:

1. Navigator 또는 2D 보기에서 연결하려는 컴포넌트를 선택합니다.
2. Connections 보기의 Connections 탭으로 이동합니다.

   

3. (Add)를 선택하여 연결 편집기에서 연결을 만듭니다.

신호와 액션 연결

신호를 동작에 연결하려면 다음과 같이 하세요:

1. 연결을 선택하거나 만들어 연결 편집기를 엽니다.

   

   연결 편집기를 엽니다.

2. Target 에서 컴포넌트를 선택합니다.
3. Signal 에서 방출할 신호를 선택합니다.
4. Action 에서 신호가 방출될 때 적용할 동작을 선택합니다.

연결 속성은 선택한 동작에 따라 달라집니다:

• Call Function 호출할 함수를 설정합니다.
• Assign 소스 및 대상 속성을 설정합니다.
• Change State 상태 그룹 내에서 대상 상태를 설정합니다.
• Set Property 컴포넌트 속성을 설정합니다.
• Print Message 표시할 텍스트를 설정합니다.

조건 추가

연결 편집기를 사용하여 조건이 있는 액션에 대한 자바스크립트 표현식을 만듭니다. 액션은 컴포넌트를 신호에 연결하는 반면, 조건은 다른 컴포넌트에서 속성 값을 가져와서 서로 비교합니다. 그런 다음 자바스크립트 표현식을 사용하여 컴포넌트를 변경할 수 있습니다.

Add Condition 을 선택하여 선택한 액션에 로직을 추가합니다.

else 문을 포함하려면 Add Else Statement 을 선택합니다.

복잡한 조건문을 사용하려면:

1. {} 을 선택하여 Action Editor 을 엽니다.
2. JavaScript 문을 입력합니다.
3. 대화 상자를 닫아 변경 사항을 적용합니다.

조건식을 구성하는 데 사용할 수 있는 논리 연산자에 대한 자세한 내용은 논리 연산자 요약을 참조하세요.

JavaScript 표현식 만들기

연결 편집기에서 동작에 대한 JavaScript 표현식을 만들려면 다음과 같이 하세요:

• 컴포넌트 신호를 동작에 연결합니다.

  

• {} 을 선택하여 Action Editor 보기를 열고 컴포넌트 및 논리 표현식을 사용하여 JavaScript 표현식을 작성합니다.

  

코드로 이동하기

Code 보기의 코드로 이동하려면 연결 편집기에서 (Jump to the code)를 선택합니다.

연결 제거하기

연결을 삭제하려면 Connections 에서 연결을 선택한 다음 (Remove)을 선택합니다.

실제 연결 보기

Connection 보기 워크플로우의 실제 예제를 보려면 이 동영상을 참조하세요: