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

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

# はじめに
第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__]を選択する。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/21c377b6-e618-ce4f-44b8-5c06b21efb54.png)
下図にあるようなポップアップが表示されるので、__Namespace__と__Name__を入力する。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/335b4fc4-054f-acab-0e50-ab1ab43060e5.png)
標準的なフォームと同じ用にウィジェットを配置。
コンポーネントのコントローラまたはフォームのウィジェットアクションにコードを追加。
Contractによりコンポーネントのプロパティ、イベントおよびメソッドを管理。
![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/a4df3e68-4e74-1fd6-8f83-f3ec095c199b.png)


●「w/o Contract」でコンポーネントを作成
下図のようにProject Explorerの[__Templates__]タブを選択、[__Components__]の右クリックメニューから[__New__]->[__w/o Contract__]を選択する。
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/3f7d15a4-29cd-b9eb-b1c8-0af61bde5596.png)
下図にあるようなポップアップが表示されるので、__Namespace__と__Name__を入力する。
![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/fda5bf7a-b121-f2f6-1c23-9139e41af8e9.png)
標準的なフォームと同じ用にウィジェットを配置。
コンポーネントのコントローラまたはフォームのウィジェットアクションにコードを追加。

# コンポーネントの追加方法
__コンポーネントのインポート__
下図のようにProject Explorerの[__Templates__]タブを選択、[__Components__]の右クリックメニューから他のプロジェクトからコンポーネントを直接インポートすることが可能です。
正確なURLを選択して、コンポーネントをプロジェクトにインポートします。
![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/50247fe5-9067-ff86-05f2-726ce495ee57.png)

●コンストラクタを使用してコンポーネントを設定する
下図のようにコードを書くことによってフォームにコンポーネントを直接設定できる。
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/b165727a-70e6-7649-db28-b7f8bc6ce73d.png)

```javascript:コンポーネントの設定
var 変数名 = new コンポーネントNamespace.コンポーネントName(basicConf, layoutConf, pspConf)
```
・basicConf: 基本的なプロパティを持つオブジェクト
・layoutConf: レイアウトのプロパティを持つオブジェクト
・pspConf: プラットフォーム固有のプロパティを持つオブジェクト

●ドラッグ&ドロップ
下図のようにコンポーネントの右クリックメニューから[__Add to Collection_]->[__New Library__]を選択します。
![図7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/65844cea-d5a9-0702-431b-f0b8b29ac94f.png)

__Library Name__と__Collection Name__を入力し[__Add__]をクリックします(Descriptionの編集も可能)。
![図8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/1a90ef13-b7fd-587a-a902-6d1ed2e419c2.png)

コンポーネントが下図の左下の__My Library__に表示されるので、設定したいフォームにドラック&ドロップで追加することができます。
![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/d75db47a-d700-6d71-f363-93ac4fa1dd48.png)

# プロパティ・メソッド・イベントの共有
__プロパティの共有__
●pass throughの場合
Kony Visualizer右側のプロパティにある__Component__から__Manage Properties__を選択する。
![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/a8ad37f9-1bff-6b81-2c08-d32c4635ce45.png)
下図のようなポップアップが表示されるので、上部タブの__pass through__を選択し、各プロパティを選択・設定し[__Apply__]をクリック。
![図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/7ccbff1f-4147-cc54-d1a3-b5e30eb61a5d.png)
(※1)各プロパティの詳細は後述
下図のようにフォームにコンポーネントの通常のプロパティとともに共有されたプロパティが表示されます。
![図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/a6ce6573-f6eb-f110-b199-966ff1c85271.png)

●customの場合
Kony Visualizer右側のプロパティにある__Component__から__Manage Properties__を選択する。
![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/a8ad37f9-1bff-6b81-2c08-d32c4635ce45.png)
下図のようなポップアップが表示されるので、上部タブの__custom__を選択し、カスタムプロパティ名を入力と各プロパティを選択・設定し[__Apply__]をクリック。
![図14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/0ecbd8f2-76bc-ee02-13fb-e4dd496cefab.png)
(※1)各プロパティの詳細は後述
下図のようにフォームにコンポーネントの通常のプロパティとともに共有されたプロパティが表示されます。
![図15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/a5dc922f-e361-57f9-96c1-d3b59b07cda6.png)

※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__を選択する。
![図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/abc67465-f808-3b6a-febd-0f43007a474d.png)
下図のようなポップアップが表示されるので、上部タブの__pass through__を選択し、各ウィジェットとメソッドを選択・設定し[__Apply__]をクリック。
![図17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/a72f107e-9768-029e-067c-9b6a97daa1ad.png)
(※2)各プロパティの詳細は後述
共有されたメソッドは親フォームのコントローラで使用できます。
![図18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/57efe3d5-5525-9015-ec71-606e2ab6303e.png)

●customの場合
Kony Visualizer右側のプロパティにある__Action__から__Manage Methods__を選択する。
![図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/abc67465-f808-3b6a-febd-0f43007a474d.png)
下図のようなポップアップが表示されるので、上部タブの__custom__を選択し、各ウィジェットとメソッドを選択・設定し[__Apply__]をクリック。
![図19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/391e16de-cfd5-155b-6b06-07464bf2df62.png)
(※2)各プロパティの詳細は後述
共有されたメソッドは親フォームのコントローラで使用できます。
![図18.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/86704e0b-c2fa-b641-6ecb-3ddfe7356f70.png)!

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

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

__イベントの共有__
●pass throughの場合
Kony Visualizer右側のプロパティにある__Action__から__Manage Events__を選択する。
![図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/abc67465-f808-3b6a-febd-0f43007a474d.png)
下図のようなポップアップが表示されるので、上部タブの__pass through__を選択し、各ウィジェットとイベントを選択・設定し[__Apply__]をクリック。
![図20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/29802f74-d4b1-e036-b550-e755af5376f6.png)
(※3)各プロパティの詳細は後述
共有されたイベントはコンポーネントのイベントに表示されます。
![図22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/df565d2a-8af0-f41c-42e6-61052c0df325.png)

●customの場合
Kony Visualizer右側のプロパティにある__Action__から__Manage Events__を選択する。
![図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/abc67465-f808-3b6a-febd-0f43007a474d.png)
下図のようなポップアップが表示されるので、__custom__->__Manage Events__を選択し、イベント名を入力し[__Apply__]をクリック。
![図23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/78e379fb-b895-1be3-99fe-240c61fd2e9b.png)
![図24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/21622a89-178d-13cf-9c6e-9414d86593c2.png)
(※3)各プロパティの詳細は後述
共有されたイベントはコンポーネントのイベントに表示されます。![図25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/14ec4735-1425-3d84-a223-46321ebf9e63.png)

※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/items/1f20ddcbc4610105b97a)

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


# 参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/C_CreatingComponent.htm