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