コンポーネント

このガイドで学べること

このガイドでは、再利用可能なUIコンポーネントを作成するための視覚的コンポーネントの作成方法について学びます。これは、後ほど学ぶデータに接続された動的なユーザーインターフェイスを作成するために不可欠です。

視覚的コンポーネントの作成

視覚的コンポーネントは、再利用可能なユーザーインターフェイスの一部です。新しい視覚的コンポーネントは、コンポーネントパネルを使用して作成します。

次に、それに名前を付けると、コンポーネントリストと視覚的キャンバスに表示されます。新しく作成された視覚的コンポーネントには、単一のルートグループノードのみが含まれています。コンポーネントの作成が完了したら、すでに学んだように作業を開始するか、再利用可能にしたい他のコンポーネントからUI要素をカットアンドペーストすることができます。

コンポーネントが完成したら、コンポーネントパネルからドラッグして、アプリケーションのユーザーインターフェイスのどこにでも再利用することができます。

好みに応じて、ノードピッカーでもコンポーネントを見つけることができます。

コンポーネントの入力と出力

それはかなり便利なテクニックです。これで、自分自身の再利用可能なUIコンポーネントを作成することができます。しかし、それらをテンプレートに変えて、作成するUIコンポーネントのインスタンスごとにいくつかのことを変更できるようにすると、さらに強力になります。ここでコンポーネント入力が登場します。これは、コンポーネント内のいくつかのノードの特定の入力を、コンポーネントインスタンスの入力として公開できる概念です。これはコンポーネント入力ノードを使用して行われます。

このノードのプロパティを編集すると、ポートを追加できることがわかります。各ポートは、アプリケーションでコンポーネントを使用するときに、コンポーネントインスタンスの入力（およびプロパティ）になります。この例では、ラベルとボタンカラーという2つのポートを作成します。

それが完了したら、コンポーネント入力ノードから、各ポートを接続したい入力に接続を行うことができます。

• ラベルポートはテキストノードのテキスト入力に接続したいです。
• ボタンカラーポートはボタンノードの背景色に接続したいです。

新しいコンポーネント入力が配置されると、ポートがコンポーネントインスタンスのプロパティとして表示され、個別にカスタマイズすることができます。

これは、コンポーネントの出力についても同様に機能し、代わりにコンポーネント出力ノードを使用するだけです。これは、UIコントロールを介して何らかのユーザー入力を受け入れるUIコンポーネントを作成するときに非常に便利です。

コンポーネントの入力と出力、およびこれらに接続することは、再利用可能なUIコンポーネントを作成するためだけでなく、データをユーザーインターフェイスに接続し、動的なデータ駆動型アプリ

ケーションを作成する上でのコアコンセプトでもあります。これについては、データの操作セクションで詳しく見ていきます。

シート

アプリケーションが成長するにつれて、ますます多くのコンポーネントが作成され、やがてビジュアルキャンバスが混雑してくることがあります。このような場合は、アプリケーションをシートに整理するとよいでしょう。各シートは、より多くのコンポーネントを配置できる新しい空のビジュアルキャンバスです。新しいシートを作成するには

コンポーネントをシート間で移動するには、コンポーネントパネルからドラッグして、移動したいシートにドロップするだけです。