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

Last updated at 2021-03-29Posted at 2021-03-29

はじめに

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

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

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

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

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

実装方法

1.Widgetの用意

まずは、以下のように Button Widget と、Segment Widget を用意してください。
Segment Widget のRow Template には、ユーザの名前を表示するためのLabel Widget を設置します。

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

2−1. Simple : グローバル変数の追加

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

Visualizer で、[Edit] メニューをポイントし、[Global Variables] をクリックすると、変数設定用のダイアログが開きます。
Type リストボックスで、Simple を選択します。Simple変数には、文字列、数値、または真偽値のいずれかを指定できます。文字列の場合は" "で囲む必要があります。
Variableの欄に、変数の名前を入力します。アプリケーション内で固有の名前かつ、他の変数に使用されない名前を入力してください。
Default Valueの欄に、変数の初期値を入力します。
変数を複数追加したい場合には、**+**アイコンをクリックします。追加した変数を削除するには、行を選択して赤いXアイコンをクリックします。変数の順序を変更したい場合は、必要に応じて上矢印と下矢印のアイコンをクリックします。

2−2. Collection : グローバル変数の追加

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

Visualizer で、[Edit] メニューをポイントし、[Global Variables] をクリックすると、変数設定用のダイアログが開きます。
Type リストボックスで、Collection を選択します
Variableの欄に、変数の名前を入力します。アプリケーション内で固有の名前かつ、他の変数に使用されない名前を入力してください。
右側では、変数に設定したい値または関数の呼び出しをJSON形式で入力します。
変数を複数追加したい場合には、**+**アイコンをクリックします。追加した変数を削除するには、行を選択して赤いXアイコンをクリックします。変数の順序を変更したい場合は、必要に応じて上矢印と下矢印のアイコンをクリックします。

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

listUser = [
  {
    name: “Messi”
  },
  {
    name: “Neymar”
  },
  {
    name: “Zidane”
  }
]

3. 処理を追加

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

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という変数に格納します。

Form1Controller.js

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

name : Simple グローバル変数
listUser : Collection グローバル変数

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

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を選択します。
ビルドした結果は以下になります。