[Titanium]#2 生成されたアプリを少しだけ修正してみる[Alloy]

作成されたコードを少しだけ修正してみる

前回はTitanium studioをインストールして、プロジェクト作成と実行を行ってみました。
今回は、前回作成したプロジェクトの中身を少し見つつ、ソースコードも少しだけ修正してみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.7.5
• Xcode : 4.6
• Titanium SDK: 3.1.2

Titanium studioのインストールとアカウントの登録はできているものとします。

ソースを修正してビルド

前回作成したプロジェクトは、次のようなディレクトリ構成になっています。

主要なファイル/ディレクトリについて説明しておきましょう。

ディレクトリ構成

app/assets
画像等のアセットファイル群を配置するディレクトリです。
アプリ内ではapp/assetsのパスなしでアクセスすることができます。

app/controllers
コントローラが配置されるディレクトリです。

app/models
今回は使用していませんが、モデルを配置するためのディレクトリです。

app/styles
ビューに対するスタイルを定義するtss(Titanium用スタイルシート)を配置するディレクトリ。

app/views
UIを定義するためのxmlが配置されるディレクトリです。

alloy.js
アプリケーションのライフサイクルの先頭でコードを実行するために使用できます。
UIコンポーネントがロードされる前に関数をオーバーライドすることが可能で、コントローラがロードされる直前に実行されます。

config.json
プロジェクトの設定ファイルです。

ファイルの修正

では、ドキュメントにしたがってファイルを修正していきましょう。
まずはassetsディレクトリにimagesディレクトリを作成し、画像を置いておきます。

次に、ビューファイル(app/views/index.xml)を修正します。さきほどの画像ファイルを表示させるためのImageViewを使用します。
ImageViewには後で定義するclickImage関数をクリックイベントに指定しています。

<Alloy>
	<Window>
		<ImageView id="imageView" onClick="clickImage"/>
		<Label id="l">Click Image of Apple Logo</Label>
	</Window>
</Alloy>

app/stypes/index.tssでスタイルの定義もしておきます。ここでImageViewに画像をバインドしていますね。

"Window": {
	backgroundColor:"white"
},

"#l":{
	bottom:20,
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color:'#999'
},
"#imageView":{
	image:"/images/apple_logo.jpg",
	width:24,
	height:24,
	top:100
}

最後に、コントローラ(controllers/index.js)を次のように修正します。
ImageViewをクリックすると、このclickImage関数が実行されてアラートが上がります。

function clickImage(e) {
	Titanium.UI.createAlertDialog({title:'Image View', message:'You clicked me!'}).show();
}

$.index.open();

プログラムの実行(CLI)

ファイルの修正ができたら、プログラムを実行してみましょう。
Titanium Studioから実行してもいいですが、今回はコンソールから実行します。
下記のように、titanium buildコマンドを使いましょう。

% cd path/your/appDir
% titanium build -p ios

起動が成功すると、シミュレータが起動します。

参考サイトなど

• Titanium公式: http://www.appcelerator.com/platform/titanium-platform/
• Alloyクイックスタート: http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start-section-34636229_AlloyQuickStart-SimpleExample