読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

Titanium MobileのAlloy開発 その2

Hellow,Worldが表示されたら
画面繊維ができるようにしたいと思います

今のままだと
1ページしかない状態なので
ページ遷移先を作ります

プロジェクトの一番上を選択して
Alloy Controllerを選択します

f:id:masalib:20131215130716p:plain
f:id:masalib:20131215130831p:plain

コントローラー名を入力します
今回はtest1とします
(画面ではtestpage1となっていますが・・・・・・)

f:id:masalib:20131215130956p:plain

コントローラーとビューとTSSのファイルができて
いることが確認できます

viewのindex.jsにボタンを追加します

<Alloy>
	<Window class="container">
		<Label id="label" onClick="doClick">Hello, World</Label>
		<Button id='Button1' onClick="movie1" >TestPage movie</Button>
	</Window>
</Alloy>

styleのindex.tssにボタンのスタイルを追加します

".container": {
	backgroundColor:"white"
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
} 
//以下追加内容
,
"#Button1":{
	bottom:100,
	height: 50,
	color: "#000",
	backgroundColor:"red",
	borderRadius:10	
	//borderRadiusは角をまるにする	
}

index.jsのコントローラーに下記を追加する

function movie1(e) {
	var test1 = Alloy.createController('test1').getView();
	test1.open();
}

test1.jsのコントローラーに下記を追加する

function doClick(e) {  
    alert($.label.text);
}
$.test1.open();

doClickの関数を削除するとなぜかエラーになる
原因がわからないのでそのままに。。。

画面遷移したことがわかるように
test1.jsの内容を変更する

<Alloy>
	<Window class="container">
		<Label id="label" onClick="doClick">test1</Label>
	</Window>
</Alloy>

実際の画面は以下のとおりです
f:id:masalib:20131215161904p:plain

↓ボタンを押すと
f:id:masalib:20131215161929p:plain

切り替わっていることが確認できました