위젯 및 컨테이너
이 섹션에서는 TouchGFX 애플리케이션을 빌드할 때 가장 기본적인 두 가지 개념인 위젯과 컨테이너에 대해 알아보겠습니다. 위젯과 컨테이너는 UI를 개발할 때 사용하는 두 가지 빌딩 블록입니다. 둘 다 TouchGFX에서 제공하는 사전 구성요소가 포함되어 있지만 동시에 개방성도 있기 때문에 커스텀 구현체를 작성하는 기능을 지원합니다.
위젯
TouchGFX와 TouchGFX Designer 도구는 텍스트 영역, 버튼, 텍스처 매퍼 등 사용자가 UI를 빌드할 때 자유롭게 사용할 수 있는 수많은 표준 위젯을 제공합니다. 하지만 기본적으로 TouchGFX의 위젯은 스크린에 그리거나 인터랙션이 가능한 것에 대한 추상적 정의일 뿐입니다.
이미지 위젯을 배경으로 사용하는 Button 위젯
TouchGFX Designer 사용자는 원하는 위젯을 스크린에 추가한 후 각 위젯별 속성을 통해 위젯을 원하는 대로 구성할 수 있습니다. TouchGFX에서도 제공하는 각종 컨테이너를 사용하여 위젯을 그룹으로 지정할 수도 있습니다.
또한 원한다면 사용자 코드에서 add(widget_instance_name); 함수를 사용하거나, 혹은 myContainer.add(widget_instance_name);와 같은 컨테이너 add 함수를 사용하여 컨테이너에 위젯을 추가할 수 있습니다. 이때 위젯을 추가하는 순서에 따라 z-순서가 결정됩니다. 따라서 마지막에 추가되는 위젯이 스크린 맨 앞에 표시됩니다.
위젯의 좌표는 항상 루트 컨테이너(스크린)든 컨테이너든 상관없이 상위 노드를 기준으로 합니다.
Further reading
컨테이너
컨테이너는 TouchGFX에서 위젯이나 기타 컨테이너 같은 하위 노드를 포함할 수 있는 구성요소입니다.
TouchGFX Designer에서 컨테이너는 Widgets 탭의 Containers 카테고리에 있으며, 위젯을 트리 뷰에 있는 컨테이너로 드래그하면 추가됩니다.
하위 노드의 z-순서는 하위 노드가 컨테이너에 추가되는 순서에 따라 결정되므로, 마지막에 추가된 하위 노드가 스크린에서 맨 앞에 표시됩니다.
TouchGFX에서 위젯의 위치는 상위 노드를 기준으로 정의되기 때문에 상위 컨테이너의 위치를 변경하면 하위 노드의 위치도 바뀌게 됩니다.
컨테이너는 뷰포트와 같은 역할을 합니다. 다시 말해서 하위 노드에서 컨테이너의 기하 형상과 교차하는 부분만 표시됩니다.
아래 애니메이션에서는 컨테이너의 뷰포트 종횡비가 어떻게 작용하는지 알 수 있습니다. 먼저 버튼이 하위 노드인 컨테이너의 윤곽선이 보입니다.
뷰포트 역할을 하는 컨테이너