자습서 5: 커스텀 트리거 및 액션 생성하기

TouchGFX Designer에서는 커스텀 트리거와 액션을 사용하여 나만의 인터랙션 구성요소를 정의할 수 있습니다. 애플리케이션의 각 화면에는 TouchGFX Designer 내에서뿐만 아니라 코드에서도 호출할 수 있는 액션 컬렉션(C++의 void 메소드에 해당함)이 포함될 수 있으며, 커스텀 컨테이너에는 애플리케이션이 반응할 수 있는 트리거 컬렉션(C++의 콜백에 해당함)도 포함될 수 있습니다.

이 자습서에서는 이 기능을 살펴보면서 더욱 깔끔하고 동적인 TouchGFX 애플리케이션을 생성할 수 있는 방법에 대해 알아볼 것입니다.

이 자습서는 TouchGFX를 처음 사용하는 사용자에게는 적합하지 않습니다. 신규 사용자는 이 자습서를 나중에 살펴보는 것이 좋습니다.

화면에 커스텀 액션 추가하기

이 섹션에서 다룰 주제:

• 배경 박스와 버튼으로 새로운 애플리케이션을 생성하기
• 애플리케이션에 커스텀 액션 추가하기
• 버튼을 눌렀을 때 커스텀 액션을 사용하여 배경 색상 변경하기

먼저 크기가 480x272인 빈 애플리케이션(예: STM32F746 또는 시뮬레이터)을 새로 생성하고 배경으로 사용할 상자(이하 “배경”)와 버튼(이하 "버튼")을 삽입하겠습니다. 그러면 아래 이미지와 비슷한 모습이 될 것입니다.

흰색 배경 상자와 버튼 추가하기

이제 화면에 커스텀 액션을 추가하겠습니다. 화면의 Properties 탭에서 화면을 선택한 다음 "Actions"(위에서 1번) 그룹에 있는 + 버튼을 누르면 이 작업을 수행할 수 있습니다. 액션 이름을 "setBackgroundColor"로 지정한 후 설명(예: "Sets the background color")을 입력합니다. 이 액션의 Type은 설정하지 않습니다.

화면에 새 커스텀 액션 추가하기

F4 키를 눌러 프로젝트의 코드를 생성합니다. 이렇게 하면 TouchGFX/generated/gui_generated/include/gui_generated/screen1_screen/Screen1ViewBase.hpp에 setBackgroundColor()라고 하는 가상 메소드가 생성됩니다.

Screen1View.cpp 파일의 사용자 코드에서 메소드를 재정의하거나 TouchGFX Designer를 통해 인터랙션을 생성하는 방법으로 이 메소드에 기능을 추가할 수 있습니다. 후자의 방법으로 화면의 Interactions 탭으로 이동하여 버튼을 클릭할 때 새로운 메소드를 호출하는 인터랙션을 추가해보겠습니다.

버튼 클릭 시 setBackgroundColor 호출하기

이제 setBackgroundColor 호출 시 실제 액션을 지정해야 합니다. 이 작업을 수행하려면 새로운 커스텀 액션(1)을 다른 인터랙션의 트리거로 사용하면 됩니다. 먼저 "Change box color" 액션(2)을 사용하여 "setBackgroundColor is called" 트리거 발생 시 배경 상자 색상을 검은색으로 설정합니다.

커스텀 액션 setBackgroundColor에 대한 기능 구현하기

이제 시뮬레이터를 실행하고 버튼을 누르면 배경이 검은색으로 바뀝니다. 첫 번째 커스텀 액션이 성공적으로 생성되었습니다.

버튼을 누르면 배경이 검은색으로 바뀜

이제 TouchGFX/generated/gui_generated/src/screen1_screen/Screen1ViewBase.cpp에 setBackgroundColor 메소드를 위한 코드가 생성된 것을 확인할 수 있습니다.

커스텀 액션에게 값 전달하기

이 섹션에서는 방금 생성한 애플리케이션을 기반으로 다음과 같이 커스텀 액션의 개념을 확장해 보겠습니다.

• setBackgroundColor 커스텀 액션에 매개변수 추가하기
• setBackgroundColor에 임의의 색상 전달하기
• 커스텀 액션을 사용하여 버튼을 눌렀을 때 배경을 임의의 색상으로 변경하기

이 애플리케이션을 좀 더 흥미롭게 만들기 위해 setBackgroundColor 커스텀 액션에 값을 전달하여 동적 효과를 높여 보겠습니다.

Screen의 Interactions 탭으로 이동합니다. 새로운 인터랙션을 설정할 것이므로 각각의 인터랙션에 대해 x 버튼을 눌러 현재 두 개의 인터랙션을 삭제합니다.

Screen의 Properties 탭에서 setBackgroundColor라는 커스텀 액션으로 이동하고 유형에 대한 확인란을 선택한 후 액션에 전달할 매개변수의 유형으로 “colortype”을 입력합니다(colortype은 색상을 설명하기 위한 유형으로, TouchGFX에서 기본적으로 제공됨). 매개변수는 이름을 지정할 수 없습니다. 대신 "value"라는 이름이 지정됩니다.

커스텀 액션에 대한 매개변수 설정하기

다음으로, 새로 추가된 매개변수 값을 사용하는 인터랙션을 설정해 보겠습니다. 이를 위해 "setBackgroundColor is called" 트리거와 "Execute C++ code" 액션을 사용하겠습니다. 새로운 매개변수를 사용해 배경 박스의 색상을 설정해야 하므로 실행할 코드는 다음과 같습니다.

background.setColor(value);
background.invalidate();

두 번째 줄은 배경을 새 색상으로 다시 그리도록 강제합니다.

전달된 값을 사용하여 배경 색상 변경하기

트리거에 매개변수의 이름과 유형이 "value : colortype"로 표시되는 것을 확인할 수 있습니다.

다음으로, 버튼이 클릭될 때 실제로 setBackgroundColor를 호출하는 인터랙션을 설정하겠습니다. "Button is clicked"라는 트리거와 "Call Screen1 setBackgroundColor"라는 액션으로 또 다른 인터랙션을 추가합니다. 그러면 값 속성에 예상되는 유형도 표시되는 것을 알 수 있습니다. stdlib.h에서 난수 생성 메소드인 rand()를 활용하여 0~255 사이의 난수 3개를 얻고 이를 사용하여 색상을 지정하는 방식으로 임의의 색상을 setBackgroundColor에 전달해 보겠습니다. rand()에 대한 접근 권한을 얻으려면 이 메소드를 애플리케이션에 포함해야 합니다. 아래 예제와 같이, 화면과 커스텀 컨테이너 모두에 대해 TouchGFX Designer 내에서 자체 includes를 제공할 수도 있습니다. 화면의 Properties 탭에서 “Includes” 그룹 아래에 다음과 같이 입력합니다.

#include <stdlib.h>

stdlib를 포함하여 rand()에 대한 접근 권한 얻기

다음으로, Value(1) 속성에 대해 다음과 같이 입력합니다.

touchgfx::Color::getColorFromRGB(rand()%256, rand()%256, rand()%256)

버튼이 클릭될 때의 임의의 색상 값 전달하기

이제 시뮬레이터를 실행하여 버튼을 여러 차례 눌러 봅니다. 배경이 임의의 색상으로 바뀌는 것을 볼 수 있을 것입니다.

버튼 클릭 시 바뀌는 임의의 색상

커스텀 컨테이너에서 커스텀 트리거 사용하기

마지막으로, Custom Container는 커스텀 트리거의 컬렉션도 정의할 수 있습니다. 따라서 이 섹션에서는 다음과 같은 방법으로 애플리케이션을 확장하겠습니다.

• ColorEmitter라는 새 커스텀 컨테이너 생성
• ColorEmitter에 "colorChanged"라는 커스텀 트리거 추가
• colorChanged 트리거를 사용하여 버튼을 눌렀을 때 애플리케이션에 임의의 색상 신호 보내기
• colorChanged 트리거를 수신하도록 화면에서 인터랙션 설정
• ColorEmitter가 보내는 색상을 사용하여 배경 상자의 색상 설정

커스텀 트리거를 사용하여 애플리케이션의 일부 이벤트에 신호를 전송해 보겠습니다. 버튼 인터랙션이 임의의 색상을 setBackgroundColor에 전달하는 대신, 커스텀 컨테이너가 임의의 색상을 화면으로 전송하여 화면이 커스텀 컨테이너가 전달한 값을 사용하도록 설정해 보겠습니다. 이것은 애플리케이션에서 서로 다른 UI 구성요소가 서로 통신하여 더 작고 재사용 가능한 구성요소를 만드는 것에 대한 간단한 예제가 될 것입니다.

먼저 새로운 커스텀 컨테이너를 생성한 후 이름을 "ColorEmitter"라고 지정합니다. 버튼을 삽입하고 이름을 "button"이라고 지정합니다. 그러면 아래 이미지와 비슷한 모습이 될 것입니다.

ColorEmitter 커스텀 컨테이너

이제 버튼을 클릭할 때마다 ColorEmitter가 임의의 색상을 전체 환경에 적용하도록 만들어 보겠습니다. 그러면 누구나 이 발산을 수신하고 해당 색상을 사용하도록 결정할 수 있습니다. 여기서는 해당 색상을 배경 색상으로 설정하여 앞에서 했던 동작을 그대로 따라해 보겠습니다.

커스텀 컨테이너가 색상을 발산하도록 하려면 먼저 커스텀 트리거를 생성해야 합니다. 커스텀 컨테이너의 Properties 탭에서 "Triggers" 그룹(1)에 있는 + 버튼을 누릅니다. 트리거의 이름을 "colorChanged"로 지정한 후 Description에 "The color has changed"를 입력하고 Type에 "colortype"을 입력합니다.

커스텀 컨테이너에 커스텀 트리거 추가하기

다음으로, 커스텀 컨테이너의 Interactions 탭으로 이동하여 새 인터랙션을 생성합니다. "Button is clicked" 트리거와 "Emit colorChanged" 액션을 사용합니다. 이제 임의의 색상을 전달해야 하므로 앞에서 사용한 코드와 동일한 코드를 Value 속성에 사용합니다.

touchgfx::Color::getColorFromRGB(rand()%256, rand()%256, rand()%256)

커스텀 트리거 발산하기

그러나 touchgfx::Color 네임스페이스가 커스텀 컨테이너에 자동으로 포함되지 않기 때문에 처음에는 작동하지 않습니다. 따라서 이전과 마찬가지로 커스텀 컨테이너에 대해 자체 include를 입력해야 합니다. 커스텀 컨테이너의 Properties 탭으로 이동하고 "Includes" 그룹(1) 아래에 다음과 같이 입력합니다.

#include <touchgfx/Color.hpp>

추가 includes 입력하기

이제 이전 버튼을 방금 생성한 ColorEmitter 커스텀 컨테이너로 바꿔보겠습니다. Screen1을 선택하고 여기에 있는 버튼을 삭제합니다. 그러면 이 버튼을 사용하던 인터랙션에서 도메인 오류가 발생합니다. ColorEmitter에 대한 새 인터랙션을 생성할 때 해당 인터랙션도 삭제합니다. 이제 Screen1에 ColorEmitter의 인스턴스를 삽입하고 Screen1에서 새 인터랙션을 생성합니다. 그러면 Trigger에 "ColorEmitter colorChanged happens"라는 옵션이 보일 것입니다. 이 옵션을 선택하고 Action에 "Call Screen1 setBackgroundColor"를 사용합니다. 이 문서의 앞부분에서 설명한 것처럼, 이제 colorChanged 발산의 값을 사용해야 합니다. 이 값은 항상 "value"라고 지정됩니다. 따라서 Value 속성에 "value"를 입력합니다.

colorChanged 커스텀 트리거를 수신하도록 인터랙션 설정하기

이제 시뮬레이터를 실행하고 버튼을 다시 눌러 봅니다. 배경은 임의의 색상으로 바뀌지만 동작은 동일하게 나타날 것입니다. 지금까지 우리는 화면에서 모든 기능을 구현하는 대신 화면과 더 작고 재사용 가능한 일부 구성요소(즉, 간단한 ColorEmitter) 사이에 자체 통신을 성공적으로 만들었습니다.

버튼이 클릭될 때 임의로 지정되는 색상