Hello World

Ti本 34p〜

その1 空プロジェクトを作り実行

Titanium Studioのメニューで、File -> New -> Titanium Mobile Project

Project name: 適当な英語名
App Id: com.example.test01 など

その2 見た目を変更

app.js の label1を変更

var label1 = Titanium.UI.createLabel({
	backgroundColor: "#fcc",
	color:'#999',
	text:'I am Window 1',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	top: "100px",
	left: "100px",
	width: "100dp",
	height: "50dp"
});

その3 色々変えてみる

上記の色や文字などを適当に変更してみる

createLabelをcreateButtonや、createTextFieldに変更してみる。

Titanium.UI.createLabel({ text: ….
Titanium.UI.createButton({ title: ….
Titanium.UI.createTextArea({ value: ….
Titanium.UI.createTextField({ value: ….
Titanium.UI.createSlider({ min: 0, max: 100, value: 50 ….

パラメータは、下記の物を参考にしてください。

その4 ボタンとイベント

ボタンを加え、クリックすると「クリックされました」とダイアログを出す

test01a-app.js

その5 時計をタブ2に表示

下記のコードを適当な所へ挿入してください。

win2.addEventListener('open', function () {
    setInterval(function() {
       var d = new Date();
       label2.text = String.format("%d:%d:%d", d.getHours(), d.getMinutes(), d.getSeconds());
    }, 1000);
});

test01b-app.js

その6 3つめのタブを追加

まずは、空のタブを一つ追加。タイトルは"Web"

var win3 = ....;
var tab3 = ....;
〜〜〜
tabGroup.addTab(tab3);

その7 3つめのタブにWebViewを追加

win3に下記の様なオブジェクトを追加

Titanium.UI.createWebView({
    url: "http://appcelerator.com"
});

test01c-app.js

その8 ディレクトリ解説

プロジェクトのディレクトリ解説

その9 tiapp.xml

アプリの設定を行う

読み込み専用Twitter client

Ti本 65p〜

その1 TiTweets プロジェクトを作る

その2 先にTableView解説

Ti本 76p〜

app.jsのvar label1 〜 win1.add(label1)を削除

var tableView = Titanium.UI.createTableView({
	data: [
		{title: "1行目"},
		{title: "2行目"}
	]
});

win1.add(tableView);

その3 Twitterの情報を取得

下記の行を適当な所に追加

var http = Titanium.Network.createHTTPClient();
http.open("GET", "http://masuidrive.jp/tmp/appc.json");
http.onload = function() {
	var json = JSON.parse(http.responseText);
	json.forEach(function(tweet) {
		Titanium.API.info(tweet.text);
	});
};
http.send();

会場では、Twitter APIの制約のため、URLは http://masuidrive.jp/tmp/appc.json を使用すること。

本来は、 http://api.twitter.com/1/statuses/user_timeline.json?screen_name=appcelerator_ja などを使う。

その4 TableViewにTweetsを表示する

var http = Titanium.Network.createHTTPClient();
http.open("GET", "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=appcelerator_ja");
http.onload = function() {
	var json = JSON.parse(http.responseText);
	tableView.data = json.map(function(tweet) {
	    return({title: tweet.text});
	});
};
http.send();

test02b-app.js

その5 行をクリック