masalibの日記

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

トップ > Titanium > Titanium MobileのAlloy開発　その２

Titanium MobileのAlloy開発　その２

Titanium

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

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

プロジェクトの一番上を選択して
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

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