Exercise -Segment編-

このExerciseでは、データの受け渡しをするフォームを作っていこうと思います！

#目次
1.演習の目標
2.作成手順
3. Buildして動作の確認を行いましょう

#はじめに
ここでは、これまで学習した内容を元に演習を行い、実際にアプリを作成します。
Exercise -Widget編-も実装してみましょう。

#1.演習の目標
1.レイアウトを作成すること。
2.Form内のウィジェットにアクションをつけるためのイベントを作成する。
3.Buildして動作の確認を行いましょう。

#2.作成手順
レイアウトを作成する
演習のSampleとして、２つのセグメントのKonyレイアウトに使用していきます。
今回はResponsive Web/DeskTopのFormにて作成しています。
ウィジェットの置き方についてはこちらを参照ください。

Form内のウィジェットにアクションをつける₊イベントを作成する。
•HomeController.jsのonPreShow関数にセグメントに表示するデータを設定します。
※PreShowActionはフォームが表示されるたびに実行されます。

onPreShow : function(){
    var segHeader = {
        lblHeader:'Clty code'
    }
};
this.view.segLeft.wigdetDataMap.lblRow = this.view.segRight.wigdetDataMap.lblRow = 'cityName';
var dataClone = JSON.parse(JSON.stringify(segment[0].city));
var rowData = dataClone.map(function(item){
    item.flex = {kin : 'rowNormal'};
    return item;
});
var rowRightData = JSON.parse(JSON.stringify(segment[0].city)).map(function(item){
    item.flxRow = {skin:'rowNormal',isVisible: false};
    return item;
});

this.view.segLeft.setData([[segHeader,rowData]]);
this.view.segRight.setData([[setData]]);

セグメント内のアイテムにonClickのイベントを作成すること
•onRowClickの関数では、セグメントアイテムのスキンを変更する。
•また、この関数では、ダブルクリックイベントもトリガーされる。
(_isDBClick()がダブルクリックを判定するFunction(後に詳細説明あり))

onRowClick : function(seguiWidget,sectionIndex,rowIndex){
    var rowSelected = seguiWidget.data[sectionIndex][1][rowIndex],
        sectionData = seguiWidget.data[sectionIndex],
        CurrentSelectedArr = (seguiWidget.id === 'segLeft') ? this.selectedKeys : this.rSelectedKeys,
        i = CurrentSelectedArr.indexOf(rowIndex),
        self = this;

    if(rowSelected.flxRow.skin === this.blockedSkin){
        return
    }

    if(this._isDBClick(rowIndex)){
        return seguiWidget.id === 'segLeft' ? this.onCClickToRight():this.onCClickToLeft();
    }

    if(rowSelected.flxRow.skin === this.selectedSkin){
        rowSelected.flxRow.skin = this.normalSkin;

        if(i! == -1){
            CurrentSelectedArr.splice(i,1);
        }
    }else{
        CurrentSelectedArr.push(rowIndex);
        rowSelected.flxRow.skin = this.selectedSkin
    }

    sectionData[1][roeIndex] = rowSelected;
    seguiWidget.setSectionAt(sectionData,sectionIndex);

    setTimeout(fucntion(){
        self.clickTime = 0;
    },300);
}

「>>」ボタンにOnClickイベントを作成すること
•期待結果：「>>」ボタンをタップすると選択したアイテムをsegLeftからsegRightに移動される。
•「 >>」ボタンウィジェットを選択し、OnClickのアクションを編集する。
Invoke functionを選択し、HomeController.jsでonClickToRight関数を選択する。

onClickToRight : function(){
    var self = this;
    var rightSegData = this.view.segRight.data[0];
    var leftSegData = this.view.segLeft.data[0];

    rightSegData[1].map(function(item,index){
        if(self.selectedKeys.indexOf(index) !== -1){
            item.flxRow.isVisible = true;
        }
        return item;
    });

    leftSegData[1].map(function(item,index){
        if(self.selectedKeys.indexOf(index) !== -1){
            item.flxRow.skin = self.blockedSkin;
        }
        retunr item;
    });

    this.view.segRight.setData([rightSegData]);
    this.view.segRight.setData([leftSegData]);
    self.selectedKeys = [];
}

「<<」ボタンにOnClickイベントを作成すること
•期待結果：「<<」ボタンをタップすると選択したアイテムをsegRightからsegLeftに移動される。
•「 << 」ボタンウィジェットを選択し、OnClickのアクションを編集する。
•Invoke functionを選択し、HomeController.jsでonClickToLeft関数を選択する。

onClickToLeft : function(){
    var self = this;
    var rightSegData = this.view.segRight.data[0];
    var leftSegData = this.view.segLeft.data[0];

    rightSegData[1].map(function(item,index){
        if(self.rSelectedKeys.indexOf(index) !== -1){
            item.flxRow.isVisible = false;
            item.flxRow.skin = self.normalSkin;
        }
        return item;
    });

    leftSegData[1].map(function(item,index){
        if(self.rSelectedKeys.indexOf(index) !== -1){
            item.flxRow.skin = self.normalSkin;
        }
        return item;
    });

    this.view.segRight.setData([rightSegData]);
    this.view.segLeft.setData([leftSegData]);
    self.rSelectedKeys = [];
},

##ダブルクリックイベントをトリガーする方法
•最初のクリックを保存して次のクリックが300ミリ秒未満かどうかを確認する変数を作成する。 300ミリ秒未満の場合、それはダブルクリック判定となります。
•スライド8のようにもう一度ビルドをして、スライド2動画のように動いていたら完成！

_isDBClick : function(rowIndex){
    var dbCLick = false;
    if(this.rowClicked !== rowIndex){
        this.rowClicked = rowIndex;
    }else{
        dbCLick = true;
    }

    var nextClick = 0;
    if(this.clickTime === 0){
        this.clickTime = new Date();
    }else{
        nextClick = new Date();
    }

    var diff = nextClick - this.clickTime;

    return diff < 300&&diff > 0&&dbCLick ? true : false;
}

ページでセグメントデータを表示しデータの挿入を行う
•Homeというフォームを選択し、右側のActionタブでPreShow－＞Editを選択する。
•「Invoke Function」を選択し、コントローラーでonPreShow関数を選択する。
※スライド3の関数を書いていない場合、FunctionNameの欄に出てこないので注意

セグメント内のアイテムにonClickのイベントを作成すること
•セグメント内のデータを押した時、スキンを変える
•segLeftウィジェットを選択 -> 右側のActionタブでonRowclickのEditをクリックする。（「segRight」を選択した場合も同じ。同様にActionを設定してください。）
• 「Invoke function」を選択し、HomeController.js内のonRowClick関数を選択する。

「>>」「<<」にonClickTo~のイベントを作成すること
•「>>」「<<」を押した時、セグメント内のデータを移動させるのが目的です。
•「>>」「<<」ウィジェットを選択 -> 右側のActionタブでonRowclickのEditをクリックする。
• 「Invoke function」を選択し、HomeController.js内のonRowClickTo~関数を選択する。

開いているページでセグメントデータを作成しデータの挿入
•Visualizer上のProductタブクリック－＞Clean and build を選択

Buildして動作の確認を行いましょう。
下記画像のDESKTOP欄－＞Responsive WebのHTML SPAを選択
チェックがついたらBuildを選択

#3.Buildして動作の確認を行いましょう。
Build後, このようになっているとここまでは成功。
•その後最初に挙げた動画のようにデータを移動させることができれば演習完了です。

Build後のアプリ pic.twitter.com/LcXMLR8fgy

— Kony (@Kony12763790) March 30, 2020