コンポーネントの概要説明

目次

1. はじめに
2. コンポーネントの概要
3. コンポーネントの作成方法
4. コンポーネントの追加方法
5. プロパティ・メソッド・イベントの共有

はじめに

第5章からは、コンポーネントというKonyの便利な機能について紹介していきます。
よく使う機能を部品化して、汎用的に使えるようなツールとなっています。
とっても便利なので、是非活用してみてください！

コンポーネントの概要

よく使う既存の機能などを部分化したものを、コンポーネントと呼びます。
（例：Web画面等に表示されるパンくずリスト、ハンバーガーメニュー、ログイン機能等）

部品化（コンポーネント化）することで、アプリ開発の簡素化・高速化が可能になります。
またこれにより、全てのコードを記述する必要がなく、
洗練されたデジタルアプリケーションを作成することが可能です。

コンポーネントの作成方法

コンポーネントを作成する際、
with Contractまたは、w/o（without） Contractでコンポーネントを作成していきますが、
その違いについて軽く説明を行います。

「with Contract」は、
MVC(Model-View-Controller)に基づくKonyリファレンスアーキテクチャーを使用しており、
コンポーネント内のプロパティ、イベント、メソッドを、フォーム側に公開する設定ができたり、
カスタムプロパティ、イベントおよびメソッドを作成することが可能です。

一方「w/o Contract」は、
コンポーネントのプロパティ、イベントおよびメソッドのどれを公開するのかの制御や、
カスタムプロパティ、イベントおよびメソッドを作成することができません。

コンポーネントを作成し、フォーム側でテキストの値や色を変更したい場合などは、
プロパティなどの公開設定ができる、「with Contract」で作成しましょう。

●「with Contract」でコンポーネントを作成
下図のようにProject Explorerの[Templates]タブを選択、[Components]の右クリックメニューから[New]->[with Contract]を選択する。

下図にあるようなポップアップが表示されるので、__Namespace__と__Name__を入力する。

標準的なフォームと同じ用にウィジェットを配置。
コンポーネントのコントローラまたはフォームのウィジェットアクションにコードを追加。
Contractによりコンポーネントのプロパティ、イベントおよびメソッドを管理。

●「w/o Contract」でコンポーネントを作成
下図のようにProject Explorerの[Templates]タブを選択、[Components]の右クリックメニューから[New]->[w/o Contract]を選択する。

下図にあるようなポップアップが表示されるので、__Namespace__と__Name__を入力する。

標準的なフォームと同じ用にウィジェットを配置。
コンポーネントのコントローラまたはフォームのウィジェットアクションにコードを追加。

コンポーネントの追加方法

コンポーネントのインポート
下図のようにProject Explorerの[Templates]タブを選択、[Components]の右クリックメニューから他のプロジェクトからコンポーネントを直接インポートすることが可能です。
正確なURLを選択して、コンポーネントをプロジェクトにインポートします。

●コンストラクタを使用してコンポーネントを設定する
下図のようにコードを書くことによってフォームにコンポーネントを直接設定できる。

コンポーネントの設定

var 変数名 = new コンポーネントNamespace.コンポーネントName(basicConf, layoutConf, pspConf)

・basicConf: 基本的なプロパティを持つオブジェクト
・layoutConf: レイアウトのプロパティを持つオブジェクト
・pspConf: プラットフォーム固有のプロパティを持つオブジェクト

●ドラッグ&ドロップ
下図のようにコンポーネントの右クリックメニューから[_Add to Collection]->[New Library]を選択します。

__Library Name__と__Collection Name__を入力し[Add]をクリックします(Descriptionの編集も可能)。

コンポーネントが下図の左下の__My Library__に表示されるので、設定したいフォームにドラック&ドロップで追加することができます。

プロパティ・メソッド・イベントの共有

プロパティの共有
●pass throughの場合
Kony Visualizer右側のプロパティにある__Component__から__Manage Properties__を選択する。

下図のようなポップアップが表示されるので、上部タブの__pass through__を選択し、各プロパティを選択・設定し[Apply]をクリック。

(※1)各プロパティの詳細は後述
下図のようにフォームにコンポーネントの通常のプロパティとともに共有されたプロパティが表示されます。

●customの場合
Kony Visualizer右側のプロパティにある__Component__から__Manage Properties__を選択する。

下図のようなポップアップが表示されるので、上部タブの__custom__を選択し、カスタムプロパティ名を入力と各プロパティを選択・設定し[Apply]をクリック。

(※1)各プロパティの詳細は後述
下図のようにフォームにコンポーネントの通常のプロパティとともに共有されたプロパティが表示されます。

※1)各プロパティの詳細

名前	機能
Source Widget	プロパティを含むウィジェット。 Source Widget欄をクリックして、コンポーネントのウィジェットの階層一覧を表示し、ウィジェットを選択する。
Widget Property	パススループロパティとして定義したいプロパティ。 Widget Property欄をクリックしてソースウィジェットのプロパティ一覧を表示し、プロパティを選択する。
Display Name	Visualizer右側のPropertiesペインのComponentタブに表示する名前。Display Name欄をクリックし、名前を入力する。 表示名は数字以外の文字で始まる必要があり、英数字とスペースのみを含める。
Programmatic Name	コードでプロパティを識別する名前。Programmatic Name欄をクリックし、名前を入力する。 プログラマティック名は数字以外の文字で始まる必要があり、英数字とスペースのみを含める。
Group	プロパティが属するグループ。 グループを使用してVisualizer右側のPropertiesペインの独自のセクションに関連するプロパティを表示する。
Access	プロパティを有効か無効にする。Access欄をクリックし, EnableまたはDisableを選択する。
Property Name	プロパティに付ける名前。Property Name欄をクリックして名前を入力する。プロパティ名は数字以外の文字で始まる必要があり、英数字とスペースのみを含める。 プロパティ名はコードでプロパティを参照するために使用される。
Property Type	プロパティのデータ型。 Property Type欄をクリックしboolean、 List Selector、 String、 HTML、 Data Grid、またはIntegerのいずれかの値を選択する。
Value	List Selectorというデータ型が設定しているプロパティの場合、一覧を作成するキーと値のペア。 プロパティタイプの値がList Selector型で、Value欄をクリックすると、Kony VisualizerはKey Value ポップアップを表示する。 値を入力してOKをクリックする。 Boolean型の場合、Value欄は自動的にtrue / falseに設定されます。他のプロパティタイプの場合、Value欄が適用されない。
Default Value	デフォルトのプロパティ値。Default Value欄をクリックして,デフォルト値を入力する。
Read/Write	プロパティがRead-onlyか、Read/writeかを選択できる。Read/Writeの場合, Read またはWriteを選択できる。

メソッドの共有
●pass throughの場合
Kony Visualizer右側のプロパティにある__Action__から__Manage Methods__を選択する。

下図のようなポップアップが表示されるので、上部タブの__pass through__を選択し、各ウィジェットとメソッドを選択・設定し[Apply]をクリック。

(※2)各プロパティの詳細は後述
共有されたメソッドは親フォームのコントローラで使用できます。

●customの場合
Kony Visualizer右側のプロパティにある__Action__から__Manage Methods__を選択する。

下図のようなポップアップが表示されるので、上部タブの__custom__を選択し、各ウィジェットとメソッドを選択・設定し[Apply]をクリック。

(※2)各プロパティの詳細は後述
共有されたメソッドは親フォームのコントローラで使用できます。
!

※2)各プロパティの詳細

名前	機能
Source Widget	プロパティを含むウィジェット。 Source Widget欄をクリックして、コンポーネントのウィジェットの階層一覧を表示し、ウィジェットを選択する。
Method	Pass-throughメソッドとして定義するメソッド。Method欄をクリックして、ソースウィジェットのメソッドの一覧を表示し、メソッドを選択する。
Programmatic Name	コードでプロパティを識別する名前。Programmatic Name欄をクリックし、名前を入力する。 プログラマティック名は数字以外の文字で始まる必要があり、英数字とスペースのみを含める。
Group	メソッドが属するグループ。 グループを使用してVisualizer右側のPropertiesペインの独自のセクションに関連するメソッドを表示する。

イベントの共有
●pass throughの場合
Kony Visualizer右側のプロパティにある__Action__から__Manage Events__を選択する。

下図のようなポップアップが表示されるので、上部タブの__pass through__を選択し、各ウィジェットとイベントを選択・設定し[Apply]をクリック。

(※3)各プロパティの詳細は後述
共有されたイベントはコンポーネントのイベントに表示されます。

●customの場合
Kony Visualizer右側のプロパティにある__Action__から__Manage Events__を選択する。

下図のようなポップアップが表示されるので、custom->__Manage Events__を選択し、イベント名を入力し[Apply]をクリック。


(※3)各プロパティの詳細は後述
共有されたイベントはコンポーネントのイベントに表示されます。

※3)各プロパティの詳細

名前	機能
Source Widget	プロパティを含むウィジェット。 Source Widget欄をクリックして、コンポーネントのウィジェットの階層一覧を表示し、ウィジェットを選択する。
Event	Pass-throughイベントとして定義するイベント。Event欄をクリックして、ソースウィジェットのイベントの一覧を表示し、イベントを選択する。
Programmatic Name	コードでプロパティを識別する名前。Programmatic Name欄をクリックし、名前を入力する。 プログラマティック名は数字以外の文字で始まる必要があり、英数字とスペースのみを含める。
Group	イベントが属するグループ。 グループを使用してVisualizer右側のPropertiesペインの独自のセクションに関連するイベントを表示する。
Raised Event	イベントに付ける名前。 Raised Events欄をクリックして名を入力する。 イベント名は数字以外の文字で始まる必要があり、英数字とスペースのみを含める。

次の記事

次の記事では、実際にコンポーネントを作成していきましょう！
作成方法やレイアウトを変更する方法、
コンポーネントを使うメリットも記載していますので、
必ず目を通すようにしましょうね👀

▶︎コンポーネントを作ってみよう！

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

参考