このExerciseでは、名前・ID・電話番号を入力するフォームを作っていこうと思います！

1. フォームレイアウトを作成しよう

Kony Visualizerを立ち上げ、下図にあるようにメニュータブから
[File]->[New Project]を選択してプロジェクトを新規作成します。

下図にあるようなポップアップが出てきたら[Create Custom App]を選択します。

下図の[Project Name]に任意のプロジェクト名を設定(例「KonyExercise1」)。
また今回は下図の[Kony Reference Architecture]を選択します。

Visualizer画面左のメニュー内(下図)の[Responsive Web/Desktop]の下の[Forms]上で右クリックで[New Form]を選択し、新しいフォームを作成します(Form1が作られればOK！)。

上図のメニューの下にあるDefault Libraryタブの中の、[Flex Container]を先ほど作成したForm1の画面上にドラッグ＆ドロップすると、下図のようにForm1の下に新たなFlex Containerが作成されればOKです。

ただこのままだと、このFlexContainerをソース上で指定する時など様々な場面で不便になるので
Visualizer画面右側(下図)のPropertiesのLookでIDの変更を行います。
※命名規則はプロジェクトなどに則った形で！！(今回は「flxExercise」)

また上図のような設定にすることでFlexContainerが画面いっぱいに広がっていることが確認できると思います(「flxExercise」を選択すると下図のようにFlexContainerの縁が青くなります)。

続いて、先ほど作成したflxExerciseの下層にウィジェットを設置していきます。
下図のようにFlexContainerの下層に更に小さなFlexContainerを設置し、
さらに下層に・・・・・という感じです。

そうして、下図のような画面を作ってみましょう。

各ウィジェットの階層関係は下図のようになるので参考にしてみてください。

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

この調子でForm2(下図)も作っていきましょう。

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

2. フォームコントローラに実際にソースコードを書いてみよう

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

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

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を設定します。

[Edit]を押すことで下図のような画面に移りますので、今回は左メニューからinvoke functionを選択しFunction Nameから先ほどコントローラに書いたfunctionを選択します。

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

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のコントローラには下図のようなソースコードを書いていきます。

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との違いはデータの受け渡しを行なわないので、渡すデータは必要ないという点です。

これで一通りの実装は終了です。
一度ビルドしてみて動きを確かめてみましょう。
下図は実際にビルドしてみたもののスクリーンショットです。参考にしてみてください。

↑「Name」と「ID」に入力がないので「Add」ボタンが非活性になっています。「Phone」は任意の入力にしています。

↑入力すると「Add」ボタンが活性化し、Form2に遷移できるようになります。

↑Form2に遷移するとForm1の「Name」に入れた値が表示されています。下の「Button」でForm1に戻ります。

Exercise -Widget編-

目次

1. フォームレイアウトを作成しよう

2. フォームコントローラに実際にソースコードを書いてみよう