Konyでグローバル変数を設定する方法

 

### 目次

1. はじめに
2. 実装方法
3. まとめ

 

### はじめに

この記事では、Konyでグローバル変数を追加する方法をご紹介します。
まずはKonyでのグローバル変数について説明していきます。

**グローバル変数**とは、以下のような様々な場所からアクセスできる変数です。


●      アプリケーション内のすべてのコンテナ
●      各Module
●      ActionのEditor
●      MappingのEditor 


また、グローバル変数には2つのタイプがあります。
●      **Simple：単一の値を含む変数**
●      **Collection：複数の値を含む変数**

本記事では、この2つのグローバル変数にユーザ情報を定義して、その値をセグメントに表示するサンプルを作成していきます。セグメントの表示/非表示の契機にはボタンを使用します。

### 実装方法
##### 1.Widgetの用意
まずは、以下のように **Button Widget** と、**Segment Widget** を用意してください。
**Segment Widget** の**Row Template** には、ユーザの名前を表示するための**Label Widget** を設置します。
![image005.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/04d8a56d-1f3a-b57e-a6d8-0773248ab5aa.gif)


 

 
##### 2. グローバル変数の追加

###### 2−1. Simple : グローバル変数の追加
まずは 「**name**」という**Simpleグローバル変数**を作成します。以下の手順で追加することができます。

1. Visualizer で、**[Edit]** メニューをポイントし、**[Global Variables]** をクリックすると、変数設定用のダイアログが開きます。
![image001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8fa38794-105a-8448-44e1-0976704854a3.png)

2. Type リストボックスで、Simple を選択します。Simple変数には、**文字列**、**数値**、または**真偽値**のいずれかを指定できます。文字列の場合は``` " " ```で囲む必要があります。

3. **Variable**の欄に、変数の名前を入力します。アプリケーション内で固有の名前かつ、他の変数に使用されない名前を入力してください。
4. **Default Value**の欄に、変数の初期値を入力します。

5. 変数を複数追加したい場合には、**+**アイコンをクリックします。追加した変数を削除するには、行を選択して赤いXアイコンをクリックします。変数の順序を変更したい場合は、必要に応じて上矢印と下矢印のアイコンをクリックします。



###### 2−2. Collection : グローバル変数の追加
次に「**listUser**」という**Collectionグローバル変数**を作成します。以下の手順で追加することができます。

1. Visualizer で、**[Edit]** メニューをポイントし、**[Global Variables]** をクリックすると、変数設定用のダイアログが開きます。

2. Type リストボックスで、Collection を選択します
![image003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/571f135d-7c17-8c26-a3cd-45117bbb4be8.png)
3. **Variable**の欄に、変数の名前を入力します。アプリケーション内で固有の名前かつ、他の変数に使用されない名前を入力してください。
4. 右側では、変数に設定したい値または関数の呼び出しをJSON形式で入力します。
5. 変数を複数追加したい場合には、**+**アイコンをクリックします。追加した変数を削除するには、行を選択して赤いXアイコンをクリックします。変数の順序を変更したい場合は、必要に応じて上矢印と下矢印のアイコンをクリックします。

右側は以下のようになっています。

```json-doc
listUser = [
  {
    name: “Messi”
  },
  {
    name: “Neymar”
  },
  {
    name: “Zidane”
  }
]
```


##### 3. 処理を追加

それでは実際にFromControllerに処理を記述して、グローバル変数をSegment Widgetにセットしていきましょう。記述したソースは以下になっています。

```js:Form1Controller.js

define({
  users : [
    { lblName : name },
    { lblName : listUser[0].name },
    { lblName : listUser[1].name },
    { lblName : listUser[2].name }
  ],

  isVisibleSeg: false,

  onClick: function(){
    this.isVisibleSeg = !this.isVisibleSeg;
    this.view.segListUser.setData(this.users);

    if(this.isVisibleSeg){
      this.view.segListUser.isVisible = true;
      this.view.btnShow.text = "Hide List";
    }else{
      this.view.segListUser.isVisible = false;
      this.view.btnShow.text = "Show List";
    }
  }
});
```
それでは解説していきます。

* まずは先ほど作成したグローバル変数からユーザ情報を取得して、**users**という変数に格納します。

```js:Form1Controller.js
  users : [
    { lblName : name },
    { lblName : listUser[0].name },
    { lblName : listUser[1].name },
    { lblName : listUser[2].name }
  ],
```
name : Simple グローバル変数
listUser : Collection グローバル変数

* 次に、ボタンクリック時にセグメントの表示/非表示を切り替える処理を追加します。


```js:Form1Controller.js
isVisibleSeg: false,

onClick: function() {
    this.isVisibleSeg = !this.isVisibleSeg;
    this.view.segListUser.setData(this.users);

    if(this.isVisibleSeg) {
      this.view.segListUser.isVisible = true;
      this.view.btnShow.text = "Hide List";
    }else {
      this.view.segListUser.isVisible = false;
      this.view.btnShow.text = "Show List";
    }
}
```

``.setData(data)``
セグメントにデータをセットする際に使用するメソッドです。パラメータのdataには、配列を指定します。
配列の形式についてはこちらをご覧ください。
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/content/Segment_Properties.htm#data

``.isVisible``
セグメントの表示/非表示を設定するプロパティです。trueのときは表示され、falseの時は表示されません。


* 最後に、作成したonClick関数をボタンのアクションに紐付けます。
**Button Widget**を選択し、画面右側の**Action** > **onClick**横の**Edit**をクリックします。
**Invoke Function**を選択して、画面下で作成した**onClick**を選択します。
![image006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6460f54e-179c-2044-8363-87aee79077c4.png)

 

* ビルドした結果は以下になります。

 
![image008.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9239854a-8abd-251d-28c3-8d0c73629dc7.gif)


##### ワンポイント

以下のように、グローバル変数と同じ名前の共通ファイルがある場合、問題が生じてしまいます。例を見ていきましょう。
![image009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5bb7aa73-bf9e-bc8f-204d-864b6418225c.png)

**Module**の中に同じ名前でグローバル変数: listUserを持つファイルを作成し、それをForm1Controllerで使用しました。

![image011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a07e0da0-e452-e58c-2c97-132215eee73e.png)

結果は、以下のようなエラーが発生してしまいます。

![image013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d9d24718-e28a-8265-a133-1f2aaaecedaa.png)
このように、共通のファイルに同じ名前の変数を設定することはできません。そのため、どちらか一方だけを選択するか、グローバル変数を別の名前で設定する必要があります。

 

### まとめ

今回は、Konyでグローバル変数を追加する方法を解説しました。
Visualizer上で簡単に追加することができましたね。こちらの記事が参考になれば幸いです！