컴포넌트를 신호에 연결

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

특정 컴포넌트에 대해 특정 신호가 발신될 때 알림을 수신하려면, 컴포넌트 정의에서 on<Signal> 이라는 이름의 신호 핸들러를 선언해야 합니다. 여기서 <Signal> 은 신호의 이름이며, 첫 글자는 대문자로 표기합니다. 신호 핸들러에는 핸들러가 호출될 때 실행될 JavaScript 코드가 포함되어야 합니다.

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

속성의 값이 변경되면 신호가 자동으로 발생합니다. 이러한 유형의 신호를 속성 변경 신호라고 하며, 해당 신호의 핸들러는 on<Property>Changed 형식으로 작성됩니다. 여기서 <Property> 는 속성의 이름이며, 첫 글자는 대문자로 표기합니다.

예를 들어, Mouse Area 컴포넌트에는 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 표시할 텍스트를 설정합니다.

조건 추가

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

‘ 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 뷰 워크플로의 실제 사용 예시는 다음 동영상을 참조하십시오: