★お題3の解説
お題3では一覧画面の項目をタップし詳細画面に遷移する実装をしていきます。
画面間のデータの受け渡しは、
よく実装される内容ですのでしっかり学んでいきましょう！
では早速解説に入っていきます！
1. データの用意
まず詳細画面に表示している内容を見てみると、
一覧画面では表示していないデータが存在します。
| 一覧画面 | 詳細画面 |
|---|---|
 |
 |
赤枠で囲ったデータが詳細画面にだけ存在していることがわかります。
このデータを表示するために、
お題2で作成したスタブデータにデータを加えていきましょう。
今回は以下のように作成しています。
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" : "【初回限定】新規登録クーポン",
"coupon_details" : "期間限定で対象のラーメンが10%OFF！！この機会にお好きなラーメンをご注文ください。" //追加データ
},
{
"item_image" : "pork_ramen.png",
"store_name" : "おいしいラーメン店 神田店",
"coupon_rate" : "50%OFF",
"coupon_deadline" : "2021年5月31日 23:59まで",
"coupon_detail_title" : "【紹介割】お友達クーポン",
"coupon_details" : "安いよ！安いよ！この機会に食べてみて！" //追加データ
},
{
"item_image" : "thai_ramen.png",
"store_name" : "おいしいラーメン店 東京駅前店",
"coupon_rate" : "20%OFF",
"coupon_deadline" : "2021年8月31日 23:59まで",
"coupon_detail_title" : "【期間限定】10周年記念クーポン",
"coupon_details" : "美味しいラーメンいかがですか？" //追加データ
},
{
"item_image" : "spicy_red_soup_beef_noodle_bowl_wooden_table.png",
"store_name" : "おいしいラーメン店 東京駅前店",
"coupon_rate" : "50%OFF",
"coupon_deadline" : "2022年10月31日 23:59まで",
"coupon_detail_title" : "【リピーター様向け】特別割引クーポン",
"coupon_details" : "長らくご愛顧いただいているお客様限定のお得なクーポンです！この機会に新しい味に挑戦してみてください！" //追加データ
},
{
"item_image" : "thai_ramen.png",
"store_name" : "おいしいラーメン店 東京駅前店",
"coupon_rate" : "10%OFF",
"coupon_deadline" : "2022年9月31日 23:59まで",
"coupon_detail_title" : "【初回限定】新規登録クーポン",
"coupon_details" : "美味しいラーメン！" //追加データ
},
]
既存のデータにcoupon_detailsというキーを追加しました。
ここに詳細画面の詳細データ部分に表示するデータを加えたら、
データの用意は完了です！
2. 一覧画面のロジック作成
画面遷移・データ渡しロジック作成
次に、一覧画面の項目をタップし、
詳細画面に遷移・データを渡すロジックを書いていきましょう！
画面遷移は、
Navigationメソッドを使うことで実装可能です。
一覧画面のControllerに以下のような関数を追加しましょう。
onClickList : function(){
var param = this.view.segList.selectedRowItems;
kony.print("_______" + JSON.stringify(param));
var x = new kony.mvc.Navigation("frmCouponDetail");
x.navigate(param);
}
以下のメソッドを使い""内にフォーム名を入れることで、
該当の画面に遷移することができます。
また、x.navigate()の()内に次の画面に渡したいデータを入れると、
次の画面にそのデータを渡すことができます。
var x = new kony.mvc.Navigation("FormName");
x.navigate();
開発のポイント①
画面遷移ロジックは、Navigationメソッドを使おう！
()内にデータを入れると、次の画面にデータを渡すことができるよ
次に、次の画面に渡したいデータを指定します。
セグメント名.selectedRowItemsと書くことで、
選択したセグメントのデータを取得することができます。
例えば、1で作成したデータを使いセグメントの一番上の項目をタップすると、
配列形式で以下のようなデータが取得可能です。
[
{
"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": "【初回限定】新規登録クーポン",
"coupon_details": "期間限定で対象のラーメンが10%OFF！！この機会にお好きなラーメンをご注文ください。",
}
]
開発のポイント②
選択したセグメントのデータを取得する時は、
selectedRowItemsを使おう！
配列形式でデータが取得できるよ
最後に、これは書かなくても動作に直接関係ないですが、
kony.print();を使うと、デバッグが可能です。
例えば、kony.print("____This is a test message.");など書くと、
コンソール上に()内に書いた文字が表示されるようになります。
・画面遷移する前のデータが期待するデータとなっているか
・どんな形式で取得できるのか（配列かオブジェクトか）
等を確認することができるので、
うまく動かない時の原因を探す時にとっても便利です
よく使う機能なので覚えておきましょう！
開発のポイント③
kony.print()を使うとデータの確認ができる！
データの確認や処理の順番を確認する時に使うと便利だよ
アクション設定
一覧をクリックした時のロジック作成ができたので、
アクションの設定をしていきます。
セグメントWidgetを選択した状態で、
右メニューのPROPERTIES->Actionタブをクリックし、
onRowClickの「Edit」ボタンをクリックします。
アクションメニューが表示されたら、
Controllerで定義したアクションを選択し、Saveを押したら完了です！
これで一覧画面の画面遷移ロジック作成は完了となります。
次に詳細画面でデータを受け、
画面に表示するロジックを追加していきましょう！
3. 詳細画面のロジック作成
データ受けロジック作成
まずは先ほど一覧画面から渡すように設定した、データを受けるロジックを書いていきます。
onNavigate : function(params) {
kony.print("_______param" + JSON.stringify(params));
}
onNavigateを定義し()内に値を書くことで、
前の画面から渡されたデータを受けることができます。
このアクションはアクションメニューで設定する必要なく、
アクションを起こすことができます。
一度この状態でビルドをし一覧画面の項目をタップしてみると、
onNavigateが実行され、データが渡ってきているのがわかるかと思います。
データが正常に渡されていることが確認できたので、
詳細画面の各Widgetにデータをセットしていきましょう！
開発のポイント④
Navigationメソッドで渡ってきたデータは、
onNavigateアクションでデータを受けることができる！
アクションメニューで設定しなくても自動的に実行されるよ
Widgetにデータをセット
onNavigateの関数にそのままロジックを追加していきます。
onNavigate : function(params) {
kony.print("______________param" + JSON.stringify(params));
var data = params[0];
this.view.imgFood.src = data.item_image;
this.view.lblStoreName.text = data.store_name;
this.view.lblCouponRate.text = data.coupon_rate;
this.view.lblCouponTime.text = data.coupon_deadline;
this.view.lblCouponName.text = data.coupon_detail_title;
this.view.lblCouponDetail.text = data.coupon_details;
},
デバッグで確認した通り、配列形式でデータが渡ってくるため、
まず、var data = params[0];で配列の一番目をdataという変数に入れておきます。
次にデータを表示したい各Widget（imgFood,lblStoreName等）を指定し、
右側にデータのキーを各々設定していきます。
例：this.view.imgFood.src = data.item_image;
※画像を表示したい場合は、Widgetの後に.src
テキストを表示したい場合は、.textをつけることを忘れないようにしましょう👀
うまくデータが表示されない時などは、
先述したkony.printを活用し取得したデータを適宜確認しながら進めてくださいね！
これでデータの受け渡しロジックが完成しました
戻るアクション設定
最後に、詳細画面の左上の戻るボタンで
一覧画面に戻りたいので、Navigationメソッドを使って画面遷移ロジックを書きましょう。
onClickReturn : function(){
var x = new kony.mvc.Navigation("frmCouponList");
x.navigate();
}
戻る場合は、何もデータを渡さなくて良いため、
()内には空のままでOKです。
戻るボタンとして設定したWidgetを選択した状態で
ActionタブのonClickのEditをクリックします。
これまで同様アクションメニューで該当のアクションを設定しSaveを押したら完了です！
全ての実装が完了しましたので、
実際の動きがどうなったかみてみましょう！
一覧画面で選択した各データが詳細画面に表示されるようになりましたね！
うまくできたでしょうか？
最後に開発のポイントをまとめていますので、必ず覚えていきましょう⭐️
開発のポイント
今回の開発のポイントをまとめます！
できた人もできなかった人も、以下を念頭に置いて
今後開発を進めてくださいね！
まとめ
①画面遷移ロジックは、Navigationメソッドを使おう
（）内にデータを入れるとデータも一緒に渡すことが可能
②選択したセグメントのデータを取得する時は、selectedRowItemsを使おう
③kony.print()を使うとデータの確認ができる
④onNavigateアクションでデータを受けることができる
アクションメニューを設定しなくても自動的に実行が可能
参考：全体のコード
一覧画面ロジック
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" : "【初回限定】新規登録クーポン",
"coupon_details" : "期間限定で対象のラーメンが10%OFF！！この機会にお好きなラーメンをご注文ください。",
},
{
"item_image" : "pork_ramen.png",
"store_name" : "おいしいラーメン店 神田店",
"coupon_rate" : "50%OFF",
"coupon_deadline" : "2021年5月31日 23:59まで",
"coupon_detail_title" : "【紹介割】お友達クーポン",
"coupon_details" : "安いよ！安いよ！この機会に食べてみて！",
},
{
"item_image" : "thai_ramen.png",
"store_name" : "おいしいラーメン店 東京駅前店",
"coupon_rate" : "20%OFF",
"coupon_deadline" : "2021年8月31日 23:59まで",
"coupon_detail_title" : "【期間限定】10周年記念クーポン",
"coupon_details" : "美味しいラーメンいかがですか？",
},
{
"item_image" : "spicy_red_soup_beef_noodle_bowl_wooden_table.png",
"store_name" : "おいしいラーメン店 東京駅前店",
"coupon_rate" : "50%OFF",
"coupon_deadline" : "2022年10月31日 23:59まで",
"coupon_detail_title" : "【リピーター様向け】特別割引クーポン",
"coupon_details" : "長らくご愛顧いただいているお客様限定のお得なクーポンです！この機会に新しい味に挑戦してみてください！",
},
{
"item_image" : "thai_ramen.png",
"store_name" : "おいしいラーメン店 東京駅前店",
"coupon_rate" : "10%OFF",
"coupon_deadline" : "2022年9月31日 23:59まで",
"coupon_detail_title" : "【初回限定】新規登録クーポン",
"coupon_details" : "美味しいラーメン！",
},
],
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);
},
onClickList : function(){
var param = this.view.segList.selectedRowItems;
kony.print("_______" + JSON.stringify(param));
var x = new kony.mvc.Navigation("frmCouponDetail");
x.navigate(param);
}
});
詳細画面ロジック
define({
//Type your controller code here
onNavigate : function(params) {
kony.print("______________param" + JSON.stringify(params));
var data = params[0];
this.view.imgFood.src = data.item_image;
this.view.lblStoreName.text = data.store_name;
this.view.lblCouponRate.text = data.coupon_rate;
this.view.lblCouponTime.text = data.coupon_deadline;
this.view.lblCouponName.text = data.coupon_detail_title;
this.view.lblCouponDetail.text = data.coupon_details;
},
onClickReturn : function(){
var x = new kony.mvc.Navigation("frmCouponList");
x.navigate();
}
});
最後に
これで全てのお題が完了となります！
お疲れ様でした
今回の問題のサンプルプロジェクトを以下リンクに添付していますので、
参考にしたい方は是非確認してみてくださいね！
▶︎Exercise2 モバイルでクーポン一覧画面を作ってみよう/答え