Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@VoltMX_Team(VoltMX)inKony Team

Segmentの中にあるwidgetにデータを渡し表示させる方法

Last updated at Posted at 2020-12-18

#目次

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

#はじめに
多くのデータをリストにして表示させる、という場面はアプリを作っていて多くあると思います。
そのリストも文字だけでなくアイコンで表示したり、データによってSkinを変更させたい！などもあるでしょう。
この記事はデータをKony WidgetのSegmentに渡し表示させる方法について書いていきます。

#実装方法
######1. 画面作成
例として以下のような連絡帳アプリを作ってみましょう！

  1. 連絡先を一覧表示する
  2. データの有無によってアイコンの色を変化させる
  3. アイコンをクリックする
    1. データがある場合は、メールアイコンをタップするとメールアドレスが、電話アイコンをタップすると電話番号が表示される
    2. データがない場合は、メール・電話アイコンボタンを押しても何も起こらない

最初にリストにして表示させるSegmentを配置しましょう。
まずTemplateにsegRowAddressを作成します。
segRowAddress.png
今回アイコンにはDefault LibraryにあるLabelを使用します。
このDefault Libraryを使用する時は、
使用したいアイコンをドラックアンドドロップしてフォームに設置してください。
使用アイコン.png

電話のアイコン(lblCall)をクリックできるようにしたいため、同位置にボタン(btnCall)も配置します。
メールのアイコンも同様に配置します。
この時Skinは薄いグレー(sknLblIconGray)にしていますが、連絡先が登録されている場合色付きのアイコンにさせたいのでそれぞれのSkinを作成します。

まず連絡先が登録されている時のSkinを作成します。
SkinタブのLabelからNew Skin > Skinを選択、Skin名をsknLblIconGreenにします。
Font Colorを#3e493eに設定します。
Font FamilyはFontAwesomeに設定してください。他のFontに設定すると文字化けしてしまう可能性があります。
createSkin.png

次に登録されていない時のSkinを作成します。
同様の手順で作成し、Skin名をsknLblIconGrayに命名、Font Colorを#d9d9d9に設定します。
こちらのFont FamilyもFontAwesomeに設定してください。
Skinにはこちらの記事を参考にしてください！

WidgetからSegmentを配置しpropertiesのRow Templateから作成したsegRowAddressを選択します。
frmAddressList.png

Templateに作成しておくと、他にSegmentを使う時に毎回widgetを配置する必要はなくなるのでオススメです
Segmentについてはこちらの記事を参考にしてみてください！

######2. マッピングをする

関数onPreShowの中に以下のコードを書きます。

frmAddressListController1.js
  onPreShow : function(){
    // ウィジェットとデータのマッピングを行う
    this.view.segAddressList.widgetDataMap = {
      lblName : "name",
      lblCall : "telNum",
      lblMail : "mail",
      btnCall : "btnCall",
      btnMail : "btnMail"
    };

widgetDataMapではSegmentのwidgetとそれに紐づくデータのマッピングを行います。

######3. データの用意
次にSegmentにセットするデータを準備します。
APIなどのデータでも良いですが、今回はデータを作ります。
データなしの場合は空文字とし、5人分の連絡先を作成します。
関数onPreShowの外に書いてください。

frmAddressListController2.js
define({
  // 連絡帳リスト
  address : [
    {
      "name" : "田中　花子",
      "telNum" : "090-1234-5678",
      "mail" : ""
    },
    {
      "name" : "佐藤　太郎",
      "telNum" : "080-2222-5555",
      "mail" : "sample@test.co.jp"
    },
    {
      "name" : "鈴木　美咲",
      "telNum" : "",
      "mail" : "misaki@eiyuu.co.jp"
    },
    {
      "name" : "伊藤　一",
      "telNum" : "090-1122-3344",
      "mail" : "wan@dokodoko.co.jp"
    },
    {
      "name" : "山田　五郎",
      "telNum" : "",
      "mail" : "test@zofban.co.jp"
    }
  ],

######4. アイコンクリック処理
電話アイコン・メールアイコンをクリックされた時、ポップアップにそれぞれの登録された連絡先が表示される処理を追加します。

frmAddressListController3.js
    // 電話アイコンをクリック
    const onClickCall = function(call){
      kony.ui.Alert(
        {
          message : call,
          alertType : constants.ALERT_TYPE_INFO
        },{}
      );
    };

    // メールアイコンをクリック
    const onClickMail = function(mail){
      kony.ui.Alert(
        {
          message : mail,
          alertType : constants.ALERT_TYPE_INFO
        },{}
      );
    };

alertTypeは表示されるポップアップのタイプを指定できます。それぞれのタイプは3つあります。
今回はALERT_TYPE_INFOを使用して表示させます。

alertType 説明 表示されるポップアップ
ALERT_TYPE_INFO ユーザーに情報を表示するために使用されます。
このタイプはデフォルトに設定されています。
ALERT_TYPE_CONFIRMATIONと異なりボタンはOKのみです。		 info.png
ALERT_TYPE_CONFIRMATION ユーザーに何かを確認または承認してもらいたい場合に使用されます。
YESボタンとNOボタンがあり、ユーザーはYESまたはNOボタンをクリックして続行または終了する必要があります。
(例)個人情報登録画面の確認時		 confirm.png
ALERT_TYPE_ERROR ユーザーが誤った値を入力したときに表示するために使用されます。
ALERT_TYPE_CONFIRMATIONと異なりボタンはOKのみです。
(例)ログイン画面のユーザー名またはパスワードを間違った時		 error.png

######5. アイコンの表示処理
アイコンのSkin処理(色付きorグレー)とボタンのクリック処理を書きます。

frmAddressListController4.js
    var i = 0;
    while(i < this.address.length){
      if(this.address[i].telNum === ""){
        this.address[i].telNum = {skin : "sknLblIconGray"};
      } else {
        this.address[i].btnCall = {onClick : onClickCall.bind(this, this.address[i].telNum)};
        this.address[i].telNum = {skin : "sknLblIconGreen"};
      }

      if(this.address[i].mail === ""){
        this.address[i].mail = {skin : "sknLblIconGray"};
      } else {
        this.address[i].btnMail = {onClick : onClickMail.bind(this, this.address[i].mail)};
        this.address[i].mail = {skin : "sknLblIconGreen"};
      }
      i++;
    }

whileにすることで連絡先の数だけ繰り返します。
bind()は関数に対してthisや引数を指定することができるメソッドです。
今回は登録された電話番号とメールアドレスをポップアップに表示したいので、それぞれの値を引数として指定しonClickCallとonClickMailに渡します。

######6. Segmentにデータをセットする
最後にsetData()でマッピングされたwidgetにそれぞれのデータをセットします。

frmAddressListController5.js
    // データをSegmentにセットする
    this.view.segAddressList.setData(this.address);
  }
});

######7. Actionの紐づけ
次に関数(onPreShow)と画面(frmAddressList)をActionで紐付けます。
紐づけたいFormを選択しpropertiesのActionからpreShowのEditを選択します。
InvokeFunctionを選択しドロップダウンからonPreShowを選択すれば紐づけ完了です！
image.png

######8. ソースコード全体

frmAddressListController.js
define({
  // 連絡帳リスト
  address : [
    {
      "name" : "田中　花子",
      "telNum" : "090-1234-5678",
      "mail" : ""
    },
    {
      "name" : "佐藤　太郎",
      "telNum" : "080-2222-5555",
      "mail" : "sample@test.co.jp"
    },
    {
      "name" : "鈴木　美咲",
      "telNum" : "",
      "mail" : "misaki@eiyuu.co.jp"
    },
    {
      "name" : "伊藤　一",
      "telNum" : "090-1122-3344",
      "mail" : "wan@dokodoko.co.jp"
    },
    {
      "name" : "山田　五郎",
      "telNum" : "",
      "mail" : "test@zofban.co.jp"
    }
  ],

  onPreShow : function(){
    // ウィジェットとデータのマッピングを行う
    this.view.segAddressList.widgetDataMap = {
      lblName : "name",
      lblCall : "telNum",
      lblMail : "mail",
      btnCall : "btnCall",
      btnMail : "btnMail"
    }; 

    // 電話アイコンをクリック
    const onClickCall = function(call){
      kony.ui.Alert(
        {
          message : call,
          alertType : constants.ALERT_TYPE_INFO
        },{}
      );
    };

    // メールアイコンをクリック
    const onClickMail = function(mail){
      kony.ui.Alert(
        {
          message : mail,
          alertType : constants.ALERT_TYPE_INFO
        },{}
      );
    };

    var i = 0;
    while(i < this.address.length){
      if(this.address[i].telNum === ""){
        this.address[i].telNum = {skin : "sknLblIconGray"};
      } else {
        this.address[i].btnCall = {onClick : onClickCall.bind(this, this.address[i].telNum)};
        this.address[i].telNum = {skin : "sknLblIconGreen"};
      }

      if(this.address[i].mail === ""){
        this.address[i].mail = {skin : "sknLblIconGray"};
      } else {
        this.address[i].btnMail = {onClick : onClickMail.bind(this, this.address[i].mail)};
        this.address[i].mail = {skin : "sknLblIconGreen"};
      }
      i++;
    }

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

実際にどうなっているのか確認してみましょう

5人分の連絡先がリスト表示され、登録されていない連絡先はアイコンがグレーになっていると思います。
またグレーのアイコンをクリックしてもポップアップは表示されません。

#まとめ
今回はデータによってSkinやActionを変更する方法をご紹介しました。
ぜひご活用ください！

#参考
Skinについて：
https://qiita.com/Kony_Team/items/2239d4bcb1d4bace8da3#3skin%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3
Segment Widgetについて：
https://qiita.com/Kony_Team/items/edd2f5daf74c88aa0634
widgetDataMapについて：
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Segment_Basic_Properties.htm#widgetDa
Alertについて：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.ui_functions_alert.htm
setDataについて：
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Segment_Methods.htm#setData

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?