このページではカスタムコンポーネントについて説明します。

カスタムコンポーネント

カスタムコンポーネントは、複数のコントロールを組み合わせて作成したUI部品を、繰り返し利用できるようコンポーネントとして定義できる機能です。

カスタムコンポーネントとして定義する例

• ヘッダー
• サイドメニュー
• いいねカウンター

など

カスタムコンポーネントのつくり方

カスタムコンポーネントの例として「ヘッダー」を作成します。

ツリービューの[コンポーネント]タブから、[新しいコンポーネント]をクリックし、コンポーネントを作成します。

コンポーネントの名前を「Header」に変更し、[挿入]からコンポーネント内にラベルを追加、ラベルのテキストや色、コンポーネントとラベルのサイズを編集します。

最後に「左」アイコンを追加し、OnSelectにBack関数を入力すれば簡単なヘッダコンポーネントの完成です。

アプリに戻り[挿入]から[カスタム]を開くと、先ほど作成したコンポーネントが表示されるので、クリックすると、

アプリに作成したコンポーネントが追加されます。

入力プロパティと出力プロパティ

カスタムコンポーネントには入力プロパティと出力プロパティを追加することができます。

• 入力プロパティ：アプリからコンポーネントに値を渡すプロパティ
• 出力プロパティ：コンポーネントからアプリへ値を渡すプロパティ

例として先ほどのヘッダコンポーネントに対し、Title入力プロパティを追加します。

コンポーネントの編集画面に戻り、[新しいカスタムプロパティ]をクリックします。

表示名や名前、説明を入力したのち、プロパティの値として「入力」を、データ型として「テキスト」を選択し、[作成]を押下します。

カスタムプロパティに追加した「Title」プロパティが表示されるので、既定値を「タイトル」に変更します。

最後にラベルコントロールのTextプロパティに、Header（コンポーネント名）.Titleを設定し、作成完了です。

アプリ作成画面に戻ると、先ほど追加したコンポーネントにTitleを設定することができるので、ここにヘッダに表示したい文字列（例では「メイン画面」）を入力すると、ヘッダのテキストが変わります。

このように使用される場所ごとに値や見た目を変えたい場合は、入力プロパティとして定義すると、再利用しやすいコンポーネントを作成することができます。

アクセスアプリスコープ

アクセスアプリスコープをオンにしたカスタムコンポーネントは、そのアプリケーションに特化したカスタムコンポーネントになります。

作成中のアプリ以外のアプリに流用できない代わりに、以下が可能になります。

• アプリ内のグローバル変数／コレクションへのアクセス
• アプリ内のコントロールへのアクセス
• アプリ内のデータソースへのアクセス

例としてグローバル変数「glbTitle」を宣言し、

アクセスアプリスコープがオフのコンポーネントのコントロールからグローバル変数にアクセスすると、エラーが発生しますが、

コンポーネントのアクセスアプリスコープをオンにすると、エラーが消えグローバル変数へとアクセスできるようになります。

グローバル変数やコレクション、データソースへアクセスできる分、コンポーネントで様々なことができるようになりますが、ソースコードが複雑になりやすいというデメリットもあるため、使用する際は注意が必要です。