Exercise2（お題2）の解説

# ★お題2の解説　
今回のお題では初めてControllerを使いロジックを書いていきます。
上手くいかなかった人も、上手にできた人も目を通すようにしてくださいね:ok_hand_tone1:

## 画像の取り込み
ロジックを書いていく前に、まずは一覧に表示する画像を取り込んでおきましょう。

左メニューのAssetsタブを開き、
Media/Mobile/Commonを右クリックして、
「Import Images」か「Resource Location」をクリックして画像を取り込んでください。
![スクリーンショット 0004-08-03 16.00.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4290eace-73d0-70b0-f128-e92aa2c9ca52.png)

下記のようにMedia/Mobile/Commonフォルダに、
今回追加する画像が表示されたらOKです。
![スクリーンショット 0004-08-03 16.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/828dc62c-841a-dbf7-9093-f9efcc968e49.png)

## Contollerに関数を定義
素材が揃ったので早速ロジックの作成に入ります。

今回のお題では、ロジックを書いて一覧を表示していくので、
対象画面のControllerを開きましょう。

:::note
開発のポイント①
ロジックを書く時は、フォームのControllerを使おう。
言語は、Javascriptで書くことができます。

![スクリーンショット 0004-08-03 15.30.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d4f74ed0-0276-c808-cdf1-ad5b277eb417.png)

:::



デフォルトでは下記のような表示になっているため、
define以降のかっこで囲まれている中にロジックを書いていきます！
```frmCouponListController.js
define({ 

 //Type your controller code here 

 });
```

まずはダミーデータを用意します。
今回5つのデータを表示するので、それぞれキーと値を指定し、
配列の形で記載していきましょう。

キーの値（item_image等）は、
何のデータを表しているかが分かれば、下記と全く同じように記載する必要はありません。

```frmCouponListController.js
  coupon_data : [
    {
      "item_image" : "spicy_red_soup_beef_noodle_bowl_wooden_table.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "10%OFF",
      "coupon_deadline" : "2021年3月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "pork_ramen.png",
      "store_name" : "おいしいラーメン店 神田店",
      "coupon_rate" : "50%OFF",
      "coupon_deadline" : "2021年5月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "thai_ramen.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "20%OFF",
      "coupon_deadline" : "2021年8月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "spicy_red_soup_beef_noodle_bowl_wooden_table.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "10%OFF",
      "coupon_deadline" : "2021年3月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "thai_ramen.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "10%OFF",
      "coupon_deadline" : "2021年3月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
  ],

```

これでダミーデータが用意できました。
次に、セグメントに値をセットするために下記のコードを書いていきます。


```frmCouponListController.js
    preShow : function(){
    // ウィジェットとデータのマッピングを行う
    this.view.segList.widgetDataMap = {
      lblStoreName : "store_name",
      lblCouponRate : "coupon_rate",
      lblCouponDeadline : "coupon_deadline",
      lblCouponDetail : "coupon_detail_title",
      imgRamen : "item_image"
    }; 

    // データをSegmentにセットする
    this.view.segList.setData(this.coupon_data);
  }

```

`preShow`：
関数名です。
名前は何でも構いませんが、今回画面の描画前に関数を実行したいため、
preShowという名前に指定しました。

`widgetDataMap`：
この構文は、セグメントにデータをマッピングするためのものになります。
`this.view.segList`で対象のSegment WidgetのIDを指定し、
`widgetDataMap`でデータのマッピングを実行します。

{}の中では、
`"画面上のWidgetID" : "ロジック上のキー名"`（例）lblStoreName : "store_name"
を指定してあげることで、対象のWidgetにダミーデータの値がマッピングされます。
![スクリーンショット 0004-08-03 15.53.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/72a82d87-7f39-6ec0-e0c3-9df31cf1066f.png)

`widget名.setData(対象データ)`：
最後に、setDataを実行し
()内にセグメントの中にセットしたい配列データを指定してあげましょう。

:::note
開発のポイント②
セグメントWidgetを使ったデータの表示は、

・`widgetDataMap`で、WidgetID名とデータのキー名をマッピング
・`setData`で対象のセグメントWidgetにデータを指定

することで表示が可能です。
:::

これでControllerに記載するロジックは完成となります。



## アクションを設定

最後に、Controllerで定義した関数（今回はpreShow）を実行する設定を行います。

左メニューのProjectタブで、
一覧を表示する画面（frmCouponList）を表示します。

一覧を表示する画面を選択した状態で、
右メニューのActionタブを開き、preShowの「Edit」ボタンをクリックしてください。
![スクリーンショット 0004-08-03 16.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2d180205-533c-8695-fc95-baba4dbf991b.png)

アクションメニューが開きますので、
Searchボタンで「Invoke Function」を検索します。

すると、Function名を指定するプルダウンが右側に表示されるので、
先ほどControllerで定義したアクション（preShow）を選択して、「Save」をクリックしてください。
![ezgif-1-0f7cf979e2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9a7afab2-80c8-30b0-641e-243939b369a9.gif)

:::note
開発のポイント③
フォーム上のアクションの設定は、
各フォームのアクションメニューから変更が可能です。
![スクリーンショット 0004-08-03 16.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9f9e4d7a-0c71-0aaf-ba90-51bf259a4b31.png)

今回のpreShowアクション以外にも、
初期表示時やクリック時のアクションも設定ができます。
詳しくはこちらの記事もご参考ください。
▶︎[Kony Visualizerの基本的なプロパティの説明/Actionプロパティ](https://qiita.com/Kony_Team/items/2239d4bcb1d4bace8da3#5action%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)
:::
これでアクションの設定も完了しました！  

早速ビルドして確認してみましょう。

![ezgif-1-17bc2c3a6c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6f66d418-62db-7bbb-72e2-52bf7322ec6c.gif)

作成したダミーデータが表示され、
画像も指定した画像がそれぞれの列に表示されました！  


うまくできたでしょうか？
最後に開発のポイントと今回書いた全体のコードを書いておきました。

開発のポイントはしっかりと押さえておくようにしましょう⭐️


# 開発のポイント
今回の開発のポイントをまとめます！

できた人もできなかった人も、以下を念頭に置いて
今後開発を進めてくださいね:relaxed:

:::note
まとめ
**①ロジックを書く時は、フォームのControllerを使おう。**  
**②セグメントWidgetを使ったデータの表示は、
`widgetDataMap`と`setData`を使うことでデータの指定が可能。**
**③各フォーム上のアクションの設定は、アクションメニューから変更が可能。**
:::

# 参考：全体のコード

今回、一覧画面のContollerに記載した全体のコードは
以下のようになっています。

```frmCouponListController.js
define({ 

  coupon_data : [
    {
      "item_image" : "spicy_red_soup_beef_noodle_bowl_wooden_table.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "10%OFF",
      "coupon_deadline" : "2021年3月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "pork_ramen.png",
      "store_name" : "おいしいラーメン店 神田店",
      "coupon_rate" : "50%OFF",
      "coupon_deadline" : "2021年5月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "thai_ramen.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "20%OFF",
      "coupon_deadline" : "2021年8月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "spicy_red_soup_beef_noodle_bowl_wooden_table.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "10%OFF",
      "coupon_deadline" : "2021年3月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
    {
      "item_image" : "thai_ramen.png",
      "store_name" : "おいしいラーメン店 東京駅前店",
      "coupon_rate" : "10%OFF",
      "coupon_deadline" : "2021年3月31日 23:59まで",
      "coupon_detail_title" : "【初回限定】新規登録クーポン",
    },
  ],
  
    preShow : function(){
    // ウィジェットとデータのマッピングを行う
    this.view.segList.widgetDataMap = {
      lblStoreName : "store_name",
      lblCouponRate : "coupon_rate",
      lblCouponDeadline : "coupon_deadline",
      lblCouponDetail : "coupon_detail_title",
      imgRamen : "item_image"
    }; 

    // データをSegmentにセットする
    this.view.segList.setData(this.coupon_data);
  }

 });
```

是非参考にしてみてくださいね！


# 次のお題にいく
終わった方から最後のお題3に取り組んでいきましょう:runner_tone4:

▶︎[Exercise2 モバイルでクーポン一覧画面を作ってみよう/お題3](https://qiita.com/Kony_Team/items/c1bf41da1df24d7608a5#%E3%81%8A%E9%A1%8C3)