Exercise -Widget編- 


このExerciseでは、名前・ID・電話番号を入力するフォームを作っていこうと思います！
#目次
1. フォームレイアウトを作成しよう
2. フォームコントローラに実際にソースコードを書いてみよう
3. 完成画面

#1. フォームレイアウトを作成しよう
Kony Visualizerを立ち上げ、下図にあるようにメニュータブから
[__File__]->[__New Project__]を選択してプロジェクトを新規作成します。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/17cafe3c-09f0-7986-d4d6-1c1608042bac.png)

下図にあるようなポップアップが出てきたら[__Create Custom App__]を選択します。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/ebeaee80-e095-e871-ba19-75b0ec16e3b6.png)

下図の[__Project Name__]に任意のプロジェクト名を設定(例「KonyExercise1」)。
また今回は下図の[__Kony Reference Architecture__]を選択します。
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/948db2c3-ff53-2080-1c9f-0b7195ca0aae.png)

Visualizer画面左のメニュー内(下図)の[__Responsive Web/Desktop__]の下の[__Forms__]上で右クリックで[__New Form__]を選択し、新しいフォームを作成します(__Form1__が作られればOK！)。
![図28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/b4a4cdf9-08db-b7d6-fdc4-dc729ca9b3ec.png)

上図のメニューの下にある__Default Library__タブの中の、[__Flex Container__]を先ほど作成した__Form1__の画面上にドラッグ＆ドロップすると、下図のように__Form1__の下に新たなFlex Containerが作成されればOKです。
![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/cfa82d33-15e4-7029-00e4-743d48d78671.png)

ただこのままだと、このFlexContainerをソース上で指定する時など様々な場面で不便になるので
Visualizer画面右側(下図)の__Properties__の__Look__で__ID__の変更を行います。
※命名規則はプロジェクトなどに則った形で！！(今回は「flxExercise」)
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/0160c9fd-37dc-823a-5f49-ba1e3c60d723.png)
また上図のような設定にすることでFlexContainerが画面いっぱいに広がっていることが確認できると思います(「flxExercise」を選択すると下図のようにFlexContainerの縁が青くなります)。
![図7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/e723602d-2a8d-e5de-c30e-c8d21e1ef694.png)

続いて、先ほど作成した__flxExercise__の下層にウィジェットを設置していきます。
下図のようにFlexContainerの下層に更に小さなFlexContainerを設置し、
さらに下層に・・・・・という感じです。
![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/8424128a-8fb0-b41d-4085-f13b0f5e09ce.png)

そうして、下図のような画面を作ってみましょう。
![図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/f96e8167-1294-81ad-255d-ab8cba432643.png)
各ウィジェットの階層関係は下図のようになるので参考にしてみてください。
![図31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/b376c6a1-01fe-8d40-6af2-0629fb194f12.png)

更に各ウィジェットの__skin__を設定することで
ユーザーが見やすく使いやすいUIの作成を目指しましょう！！
skinを設定するコツは
__同じデザインのウィジェットには同じskinを使うこと__
です。
3つウィジェットがあるからといって、必ずしも３つskinを作る必要はないのです。

この調子で__Form2__(下図)も作っていきましょう。
![図17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/426788bb-50a7-811c-af90-1b5d588a95ad.png)

フォーム(画面)の作成ができたら、今度はコントローラにソースコードを書いていきましょう。

#2. フォームコントローラに実際にソースコードを書いてみよう
まずここまで作成した2つの画面でどのような動きをさせたいかをまとめてみましょう。
●Form1で必要なこと
・Name、IDが入力されているかの必須チェック
・必須チェックが有効な欄にに入力がある場合「Add」ボタンを活性化させる
・入力にErrorがある場合のみError表示させる
・Form2から戻った時にテキストボックスの中を空にする
●Form2で必要なこと
・Form1で入力した値を受け取り、Nameの値をLabelに表示させる

Form1のコントローラに下記のようなソースコードを書いていきます。

```javascript:Form1コントローラーその1
onPreShow : function(){
  this.view.lblErrorId.isVisible = false;
  this.view.lblErrorName.isVisible = false;
  this.view.btnAdd.setEnabled(false);
  this.view.btnAdd.skin = "sknBtnDisable";
  this.view.txtName.text = "";
  this.view.txtId.text = "";
},
```
こちらはForm1が表示された時に動作するfunctionです。
ただコントローラにソースコードを書くだけでは正常に動作しません。
functionを設定したいFormやウィジェットを選択し、Visualizer右側のPropertiesにある__Action__(下図)からFormやウィジェットにfunctionを設定します。
![図23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/6b45b483-df0e-8f3f-5afc-fb21a486b1a6.png)
[__Edit__]を押すことで下図のような画面に移りますので、今回は左メニューから__invoke function__を選択し__Function Name__から先ほどコントローラに書いたfunctionを選択します。
![図24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/f4827230-c704-170d-677a-32381c6d6de9.png)

同様に他のfunctionもForm1のコントーローラに書いていきましょう。

```javascript:Form1コントローラーその2
checkName : function(){
  var name = this.view.txtName.text;
  if(name ==="" || name.length ===0){
    this.view.lblErrorName.isVisible = true;
    this.view.lblErrorName.text = "Error Name";
    this.view.forceLayout();
    return false;
  }else{
    this.view.lblErrorName.isVisible = false;
    return true;
  }
},

checkId : function(){
  var Id = this.view.txtId.text;
  if(Id === "" || Id.length === 0){
    this.view.lblErrorId.isVisible = true;
    this.view.lblErrorId.text = "Error Id";
    this.view.forceLayout();
    return false;
  }else{
    this.view.lblErrorId.isVisible = false;
    return true;
  }
},

checkInput : function(){
  if(this.checkName() && this.checkId()){
    this.view.btnAdd.setEnabled(true);
    this.view.btnAdd.skin = "defBtnNormal";
  }else{
    this.view.btnAdd.setEnabled(false);
    this.view.btnAdd.skin = "sknBtnDisable";
  }
},

submit : function(){
  var MoveName =this.view.txtName.text;
  new kony.mvc.Navigation("Form2").navigate(MoveName);
}
```
checkName、checkIdはそれぞれNameとIDの入力チェックのfunction、checkInputsはNameとIDに入力が確認された時に「Add」ボタンが活性化するfunctionです。
submitはForm2に遷移ならびにデータを送信するfunctionです。
Form1の動作に必要なソースはこれで完了です。
続いてForm2のコントローラに移りましょう。

Form2のコントローラには下図のようなソースコードを書いていきます。

```javascript:Form2コントローラー
onNavigate : function(name)
  this.view.lblName.text = name;
},

backForm1 : function(){
  new kony.mvc.Navigation("Form1").navigate();
}
```
Form2のラベルウィジェットにForm1で渡した値(入力した名前)を受け取りたいので、そんな時はこの__onNavigate__というfunctionを使います。
これでForm2の「Labelさん」の「Label」の部分に入力した名前を入れることで、その名前を表示することができます。

また__backForm1__というfunctionを作成し、Form1に戻る動作も作ります。
こちらはForm1で作った__submit__と同じ動きです。
ただsubmitとの違いはデータの受け渡しを行なわないので、渡すデータは必要ないという点です。

#3. 完成画面
これで一通りの実装は終了です。
一度ビルドしてみて動きを確かめてみましょう。
下図は実際にビルドしてみたもののスクリーンショットです。参考にしてみてください。
<img width="1440" alt="スクリーンショット 2020-03-12 11.01.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/872b850a-2d4a-44f7-2aff-5e598efaa5e0.png">
↑「Name」と「ID」に入力がないので「Add」ボタンが非活性になっています。「Phone」は任意の入力にしています。
<img width="1440" alt="スクリーンショット 2020-03-12 11.02.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/05443523-487a-972c-d2d9-d72bbb4b7493.png">
↑入力すると「Add」ボタンが活性化し、Form2に遷移できるようになります。
<img width="1440" alt="スクリーンショット 2020-03-12 11.03.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598032/f94aaa09-a4ac-c012-a584-826c25d881ce.png">
↑Form2に遷移するとForm1の「Name」に入れた値が表示されています。下の「Button」でForm1に戻ります。