ウィジェットとコンテナ
このセクションでは、TouchGFXアプリケーションの作成で最も根幹的な概念の2つを取り上げます。それはウィジェットとコンテナです。 これらは、ユーザがUIの開発全体を通して使用する構成要素の2つです。 どちらもTouchGFXで提供される既製のコンポーネントを含むと同時に、カスタム実装の作成を十分にサポートできるようにオープンエンドになっています。
ウィジェット
TouchGFXおよびTouchGFX Designerツールは、Text Area、Button、Texture Mapperなどの多数の標準ウィジェットを提供しており、ユーザはこれを自由に使用してUIを構築することができます。 しかし、基本的なレベルでは、TouchGFXにおけるウィジェットは、スクリーン上に描かれ、相互作用することができる何かの抽象的な定義にすぎません。
Imageウィジェットをバックグラウンドに使用するButtonウィジェット
TouchGFX Designerを使用すると、ユーザは目的のウィジェットをスクリーンに追加し、各ウィジェットに固有のプロパティを使用して好きなようにカスタマイズできます。 ウィジェットは、TouchGFXから提供されるさまざまなタイプのコンテナを使用して、グループ分けすることもできます。
必要な場合は、add(widget_instance_name);関数を使用してユーザ･コードでウィジェットを追加することもできます。あるいは、コンテナ追加関数（myContainer.add(widget_instance_name);など）を使用して、ウィジェットをコンテナに追加することもできます。 ウィジェットの追加順序によって、Zオーダーが決まります。 最後に追加されたウィジェットがスクリーンの最前面に表示されます。
ウィジェットの座標は常に、ルート･コンテナ（スクリーン）またはコンテナのいずれかの親ノードを基準にします。
Further reading
コンテナ
コンテナはTouchGFXのコンポーネントで、ウィジェットやその他のコンテナなどの子ノードを格納できます。
TouchGFX Designerでは、コンテナはWidgetsタブのContainersカテゴリ下にあり、ツリー･ビューでコンテナにウィジェットをドラッグすることで、ウィジェットをコンテナに追加できます。
子のZ方向の順序は、コンテナに子が追加された順序によって決まります。最後に追加された子がスクリーンの最前面に表示されます。
TouchGFXにおけるウィジェットの位置はそれぞれの親を基準に決まるので、親のコンテナの位置を変更すると、それに合わせて子も移動します。
コンテナはビューポートとして機能します。つまり、コンテナの形状と交わる子の部分のみが表示されます。
次のアニメーションは、コンテナがビューポートとして機能する様子を示しています。 最初に表示されるのはコンテナのアウトラインで、このコンテナの子がボタンです。
ビューポートとして機能するコンテナ