ファイルの分割

2011/07/05

JavaScript だけでアプリを作っていくので、必然的に行数が多くなります。 という事で、Titanium.inclue を利用してファイルを文字通り include する事ができます。

Titanium.incluel でファイル読み込み


Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();

Titanium.include('soundPlayer.js');

Titanium.include('timer.js');

Titanium.include('twitter.js');

// open tab group
tabGroup.open();

あくまでもinclude なのでクラスのような使い方はできないですが、用途別のコード整理には必須ですね。

createWindow の url でファイル指定

また、url 指定で処理をスクリプトファイルに委譲できたりもします。

読み込み側の、Titanium.UI.createWindow で読み込む url を指定します。


var twitterWindow = Titanium.UI.createWindow({
    title:'Twitter',
    backgroundColor:'#000000',
    url: 'twitterLoadTimeline.js'
});
twitterWindow.message = "Twitterの読み込み";

読み込まれる側では、Titanium.UI.currentWindw で呼び出し側の Window を取得できます。


var twitterWindow = Titanium.UI.currentWindow;

alert(twitterWindow.message);

var twitterTableView = Titanium.UI.createTableView();
twitterWindow.add(twitterTableView);

var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=yoo_yoo_yoo";
if (Titanium.Network.onLine == false) {
    alert('オフラインです');
} else {
    var xhr = Titanium.Network.createHTTPClient();
    xhr.open("GET", url, false);
    xhr.onload = function () {
        var json = JSON.parse(this.responseText);
        var tableViewData = [];
        for (var i = 0; i < json.length; i++) {
            tableViewData.push({title :json[i].text});
            //Titanium.API.info(json[i].user.screen_name);
            //Titanium.API.info(json[i].text);
        }
        twitterTableView.data = tableViewData;
    };
    xhr.onerror = function (error) {
        alert(error);
    }
    xhr.send();
}

createWindowのスコープ内のプロパティも後で設定したプロパティ取得、つまりコンテキストが受け渡されます。 これは素晴らしい!

addEventListener でイベントを利用する

さらに addEventListener を使ってイベント管理もできます。


var messageWindow = Titanium.UI.createWindow({
    url: 'messageLoader.js'
});
messageWindow.open();

var messageTab = Titanium.UI.createTab({  
    title:'Message',
    window:messageWindow
});

Titanium.App.addEventListener('showMessage', function(e) {
    alert(e.profile.name);
});

tabGroup.addTab(messageTab);

Titanium.App.fireEvent('showMessage', {
    message: 'プロフィール',
    profile: {
        name: 'yoo',
        url: 'http://yoo-s.com'
    }
});

ウィンドウ作成後に 登録した「showMessage」イベントを呼び出しています。