주요 내용으로 건너뛰기

커스텀 트리거 및 액션

TouchGFX Designer에서는 커스텀 트리거 및 액션을 사용해 자신만의 상호작용 구성요소를 정의할 수 있습니다. 애플리케이션에서 각 스크린마다 액션 그룹(C++에서 간단한 void 메소드)을 추가한 후 TouchGFX Designer는 물론이고 코드에서도 호출하여 사용할 수 있습니다. 또한 커스텀 컨테이너에서도 애플리케이션이 반응하는 트리거 그룹(C++에서 콜백과 동일)을 구성할 수 있습니다. 이 섹션에서는 이러한 기능을 살펴보면서 보다 매끄럽고 동적인 TouchGFX 애플리케이션을 제작하는 방법에 대해 알아보겠습니다.

커스텀 트리거

커스텀 트리거는 커스텀 컨테이너에서 생성됩니다. 이는 C++ 콜백 형태로 생성되며, 상호작용 시스템 또는 사용자 코드에서 실행되거나 반응을 일으키기도 합니다.

커스텀 트리거 추가하기

커스텀 트리거 추가는 아래 이미지와 같이 커스텀 컨테이너의 Properties 탭에서 Triggers 섹션에 있는 “+” 버튼을 클릭하여 수행됩니다.

커스텀 트리거 추가하기

커스텀 트리거가 생성되면 아래 이미지와 같이 사용할 수 있는 옵션이 추가됩니다.

커스텀 트리거 편집하기

Name
여기서 지정된 이름은 상호작용 시스템에서, 그리고 생성된 코드 파일에서 참조 목적으로 사용되며, 코드 예제는 아래와 같습니다.

CustomContainer1Base.hpp
class CustomContainer1Base : public touchgfx::Container
{
public:
CustomContainer1Base();
virtual ~CustomContainer1Base() {}
virtual void initialize();

/*
* Custom Trigger Callback Setters
*/
void setTrigger1Callback(touchgfx::GenericCallback<>& callback)
{
this->trigger1Callback = &callback;
}

protected:
FrontendApplication& application() {
return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
}

/*
* Custom Trigger Emitters
*/
virtual void emitTrigger1Callback()
{
if (trigger1Callback && trigger1Callback->isValid())
{
this->trigger1Callback->execute();
}
}

private:

/*
* Custom Trigger Callback Declarations
*/
touchgfx::GenericCallback<>* trigger1Callback;

};
CustomContainer1Base.cpp
CustomContainer1Base::CustomContainer1Base() :
trigger1Callback(0)
{
setWidth(250);
setHeight(250);
}

void CustomContainer1Base::initialize()
{

}

Description
여기에 입력하는 텍스트는 상호작용 시스템에서 사용되며, 상호작용 시스템에서 트리거를 선택할 때 마우스 커서를 트리거 위로 가져가면 표시됩니다. 설명을 입력하지 않으면 상호작용에서 커스텀 트리거 실행하기 섹션에 나와 있는 것처럼 표준 설명이 생성됩니다.

Type
Type을 활성화하면 특정 유형으로 지정된 값을 반환하는 트리거를 생성할 수 있습니다. 유형은 목록에서 선택하거나, 혹은 원하는 유형을 직접 작성하여 선택할 수 있습니다. 아래는 bool 선택 시 생성되는 코드입니다.

CustomContainer1Base.hpp
class CustomContainer1Base : public touchgfx::Container
{
public:
CustomContainer1Base();
virtual ~CustomContainer1Base() {}
virtual void initialize();

/*
* Custom Trigger Callback Setters
*/
void setTrigger1Callback(touchgfx::GenericCallback<bool>& callback)
{
this->trigger1Callback = &callback;
}

protected:
FrontendApplication& application() {
return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
}

/*
* Custom Trigger Emitters
*/
virtual void emitTrigger1Callback(bool value)
{
if (trigger1Callback && trigger1Callback->isValid())
{
this->trigger1Callback->execute(value);
}
}

private:

/*
* Custom Trigger Callback Declarations
*/
touchgfx::GenericCallback<bool>* trigger1Callback;

};

상호작용에서 커스텀 트리거 실행하기

커스텀 트리거는 상호작용 시스템을 사용해 실행할 수 있습니다. 커스텀 트리거가 속한 커스텀 컨테이너의 Interaction 탭에서 새로운 상호작용을 생성한 후 아래 이미지와 같이 커스텀 트리거를 액션으로 선택하면 됩니다.

상호작용에서 커스텀 트리거 실행하기

위 이미지와 같이 커스텀 컨테이너에 추가된 버튼을 클릭할 때마다 커스텀 트리거가 실행됩니다.

커스텀 트리거에서 Type이 활성화되어 있으면 아래 이미지와 같이 파라미터 값, 즉 변수를 지정해야 합니다. 여기에서는 bool이 Type으로 지정되었습니다.

상호작용에서 실행할 커스텀 트리거의 매개변수 지정하기

사용자 코드에서 커스텀 트리거 실행하기

커스텀 트리거는 생성된 커스텀 컨테이너에서 상속되는 사용자 코드 클래스 파일에서도 실행됩니다. 생성된 커스텀 컨테이너에서 이름이 "trigger1"인 커스텀 트리거에 대해 아래 메소드를 생성합니다.

CustomContainer1Base.hpp
virtual void emitTrigger1Callback(bool value)
{
if (trigger1Callback && trigger1Callback->isValid())
{
this->trigger1Callback->execute(value);
}
}

이 함수는 상속되는 사용자 코드 클래스 파일에서 덮어쓰거나 호출할 수 있습니다.

상호작용에서 커스텀 트리거에 반응하기

커스텀 트리거가 포함된 커스텀 컨테이너를 스크린에 추가하면 커스텀 트리거를 아래 이미지와 같이 스크린의 상호작용에 있는 트리거로 사용할 수 있습니다.

상호작용에서 트리거로 선택할 때 커스텀 트리거의 이름을 지정하는 규칙은 다음과 같습니다. <Custom Container Name> <Custom Trigger name> happens.

상호작용에서 커스텀 트리거를 트리거로 선택하기

트리거를 선택한 후 커스텀 트리거가 동일하게 포함된 커스텀 컨테이너 인스턴스가 여러 개인 경우에는 해당 구성요소를 선택해야 합니다. 하지만 인스턴스가 하나 밖에 없다면 자동으로 선택됩니다.

사용자 코드에서 커스텀 트리거에 반응하기

아래 코드 예제와 같이 콜백을 구현하면 사용자 코드에서도 커스텀 트리거에 반응할 수 있습니다. 여기에서 커스텀 트리거 이름이 "trigger1"인 커스텀 컨테이너가 스크린에 추가되었습니다. 스크린으로 부터 상속된 사용자 코드 클래스 파일에서 강조 표시된 라인들은 콜백/커스텀 트리거를 구현하기 위해 추가된 것입니다.

Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
virtual ~Screen1View() {}
virtual void setupScreen();
virtual void tearDownScreen();

private:
/*
* Callback Declarations
*/
touchgfx::Callback<Screen1View> customContainer1Trigger1Callback;

/*
* Callback Handler Declarations
*/
void customContainer1Trigger1CallbackHandler();
};

Screen1View.cpp
#include <gui/screen1_screen/Screen1View.hpp>

Screen1View::Screen1View():
customContainer1Trigger1Callback(this, &Screen1View::customContainer1Trigger1CallbackHandler)
{
customContainer1.setTrigger1Callback(customContainer1Trigger1Callback);
}

void Screen1View::setupScreen()
{
Screen1ViewBase::setupScreen();
}

void Screen1View::tearDownScreen()
{
Screen1ViewBase::tearDownScreen();
}

void Screen1View::customContainer1Trigger1CallbackHandler()
{
//Your code here.
}

커스텀 액션

커스텀 액션은 스크린과 커스텀 컨테이너에서 생성됩니다. 이는 가상 C++ 메소드 형태로 생성되며, 상호작용 시스템 또는 사용자 코드에서 실행됩니다. 커스텀 액션의 구현 및 동작은 상호작용 시스템에서 구성하거나, 혹은 사용자 코드 클래스 파일에서 생성된 C++ 메소드를 덮어써서 구성할 수 있습니다.

커스텀 액션 추가하기

커스텀 트리거 추가는 아래 이미지와 같이 스크린 또는 커스텀 컨테이너의 Properties 탭에서 Actions 섹션에 있는 “+” 버튼을 클릭하여 수행됩니다.

커스텀 액션 추가하기

커스텀 액션이 생성되면 아래 이미지와 같이 사용할 수 있는 옵션이 추가됩니다.

커스텀 액션 편집하기

Name
여기에 지정된 이름은 상호작용 시스템에서, 그리고 생성된 코드 파일에서 추가로 참조하는 데 사용되며, 코드 예제는 아래와 같습니다.

CustomContainer1Base.hpp
class CustomContainer1Base : public touchgfx::Container
{
public:
CustomContainer1Base();
virtual ~CustomContainer1Base() {}
virtual void initialize();

/*
* Custom Actions
*/
virtual void action1();

protected:
FrontendApplication& application() {
return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
}

private:

};
CustomContainer1Base.cpp
CustomContainer1Base::CustomContainer1Base()
{
setWidth(250);
setHeight(250);
}

void CustomContainer1Base::initialize()
{

}

void CustomContainer1Base::action1()
{

}

Description
여기에 입력하는 텍스트는 상호작용 시스템에서 사용되며, 상호작용 시스템에서 액션을 선택할 때 마우스 커서를 액션 위로 가져가면 표시됩니다. 설명을 입력하지 않으면 상호작용에서 커스텀 트리거 실행하기 섹션에 나와 있는 것처럼 표준 설명이 생성됩니다. Call <Name> on <Screen or Custom Container Name>.

Type
Type을 활성화하면 특정 유형으로 지정된 파라미터가 필요한 액션을 생성할 수 있습니다. 유형은 목록에서 선택하거나, 혹은 원하는 유형을 직접 작성하여 선택할 수 있습니다. 아래는 bool 선택 시 생성되는 코드입니다.

CustomContainer1Base.hpp
/*
* Custom Actions
*/
virtual void action1(bool value);
CustomContainer1Base.cpp
void CustomContainer1Base::action1(bool value)
{

}

상호작용에서 커스텀 액션 호출하기

커스텀 액션이 생성되면 상호작용 시스템에서 생성된 액션을 실행할 수 있습니다. 액션을 커스텀 컨테이너에서 생성한 후 커스텀 컨테이너를 스크린에 추가했다면 아래 이미지와 같이 스크린의 Interaction 탭에서 액션을 실행할 수 있습니다.

상호작용에서 커스텀 액션 실행하기

액션을 선택한 후 동일한 커스텀 컨테이너 인스턴스가 여러 개인 경우에는 해당 구성요소를 선택해야 합니다. 하지만 인스턴스가 하나 밖에 없다면 자동으로 선택됩니다.

커스텀 액션에서 Type이 활성화되어 있으면 파라미터 값, 즉 변수를 아래 이미지와 같이 지정해야 합니다. 여기에서는bool Type으로 지정되었습니다.

상호작용에서 실행할 커스텀 액션의 매개변수 지정하기

사용자 코드에서 커스텀 액션 호출하기

커스텀 액션은 사용자 코드에서 직접 호출할 수 있습니다. 아래 코드 예제에서는 이름이 "action1"인 커스텀 액션이 포함된 커스텀 컨테이너를 생성합니다. 이 커스텀 컨테이너를 스크린에 추가하여 아래와 같은 코드가 생성되었습니다.

Screen1ViewBase.cpp
Screen1ViewBase::Screen1ViewBase()
{

customContainer11.setXY(50, 11);

add(customContainer11);
}

void Screen1ViewBase::setupScreen()
{
customContainer11.initialize();
}

사용자 코드 클래스 파일인 Screen1View에서 아래와 같이 커스텀 액션 “action1”을 호출할 수 있습니다. 이때 사용자 코드 클래스 파일은 Screen1ViewBase에서 상속됩니다.

Screen1View.hpp
Screen1View::Screen1View()
{
customContainer11.action1();
}

void Screen1View::setupScreen()
{
Screen1ViewBase::setupScreen();
}

void Screen1View::tearDownScreen()
{
Screen1ViewBase::tearDownScreen();
}

상호작용에서 커스텀 액션에 동작 추가하기

상호작용 시스템을 사용하면 커스텀 액션에 동작을 추가할 수 있습니다. 커스텀 액션이 속한 스크린 또는 커스텀 컨테이너의 Interaction 탭에서 새로운 상호작용을 생성한 후 아래 이미지와 같이 커스텀 액션을 트리거로 선택하면 됩니다.

상호작용에서 커스텀 액션을 트리거로 선택하기

이제 커스텀 액션을 호출할 때마다 상호작용에서 정의된 모든 액션이 실행됩니다.

사용자 코드에서 커스텀 액션에 동작 추가하기

커스텀 액션은 아래 이미지와 같이 사용자 코드 클래스인 CustomContainer1에서도 액션을 덮어써서 동작을 구현할 수 있습니다. 이때 사용자 코드 클래스는 CustomContainer1Base에서 상속됩니다.

CustomContainer1.hpp
class CustomContainer1 : public CustomContainer1Base
{
public:
CustomContainer1();
virtual ~CustomContainer1() {}

virtual void initialize();

void action1();

protected:
};
CustomContainer1.cpp
CustomContainer1::CustomContainer1()
{

}

void CustomContainer1::initialize()
{
CustomContainer1Base::initialize();
}

void CustomContainer1::action1()
{
//Your code here
}