Titanium mobileの基礎11〜テキストフォームの作成

テキストフォームに文字を入力してSubmitボタンを押すと、入力した文字列をResultラベルに表示する。

ポイント

・Ti.UI.createTextFieldを使う
・getValueで値を取得する
・DBに書き込んだりファイルに書き込んだりするために用いたりする
・AndroidではgetValueはバグのため使えない
　＜Androidの場合のバグ回避策＞

  tf.getValue()->tf.value

　参考：まったりlog残し - ドットインストールの「Titanium Mobileの基礎」をAndroidで写経してみた

手順

http://dotinstall.com/lessons/basic_titanium/1918

ソース

app.js

var win = Ti.UI.createWindow({
	backgroundColor: 'blue'
});
var view = Ti.UI.createView();

// TextFormの作成
var tf = Ti.UI.createTextField({
	color: '#333333',
	hintText: 'name',
	height: 35,
	top: 10,
	left: 10,
	width: 250,
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});

// 送信ボタン
var button = Ti.UI.createButton({
	title: 'Submit',
	top: 100,
	left: 10,
	width: 100,
	height: 50
});

// 結果表示ラベル
var lbl = Ti.UI.createLabel({
	color: 'yellow',
	font: {fontSize:48},
	text: 'Result',
	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
	top: 180,
	width: 'auto',
	height: 'auto'
});

// 送信ボタン押下時の処理
button.addEventListener('click', function(e){
	// コンソールに入力値を出力
	Ti.API.info(tf.getValue());
	// 結果表示ラベルに値を設定
	lbl.text = tf.getValue();
});

// Viewに追加
view.add(tf);// TextForm
view.add(button);// 送信ボタン
view.add(lbl);// 結果表示ラベル

win.add(view);
win.open();