jsコードを外部化すべし!

あたらしいTitaniumの本が登場しました

Titanium SDK API 解説書ページを表示する


jsコードを外部化すべし!資料
2012-01-09改訂
TS_Android_3.pdf
PDFファイル 805.4 KB

Window内記述の外部化

ここまでの完成ソース

■ app.js


// 画面の背景色
Titanium.UI.setBackgroundColor('#000');

// TabGroupの作成
var tabGroup = Titanium.UI.createTabGroup();

// win1の作成(Tab作成の前に作成する)
var win1 = Titanium.UI.createWindow({
        title: 'タブ1',
        backgroundColor: '#fff',
        url: 'win1.js'
});

// tab1の作成
var tab1 = Titanium.UI.createTab({
        title: 'タブ1',
        window: win1
});

// win2の作成
var win2 = Titanium.UI.createWindow({
        title: 'タブ2',
        backgroundColor: '#fff',
        url: 'win2.js'
});

// tab2の作成
var tab2 = Titanium.UI.createTab({
        title: 'タブ2',
        window: win2    
});

// TabをTabGroupに追加
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// TabGroupをオープン
tabGroup.open();

■ win1.js


// win1の内容を記述 

var win = Ti.UI.currentWindow;

// label1の作成
var label1 = Titanium.UI.createLabel({
        color: '#999',
        text: 'ハロー!文字を表示するラベルです。'
});

// win1にlabel1を追加する
win.add(label1);

// Menuの設定
win.activity.onCreateOptionsMenu = function(e) {
        var menu = e.menu;
        var login = menu.add({ title: 'Login' });
        var logout = menu.add({ title: 'Logout' });
}

■ win2.js


// win2の内容を記述

var win = Ti.UI.currentWindow;

// view2の作成
var view2 = Titanium.UI.createView({
        backgroundColor: 'blue',
        height: 200
});

// label2の作成
var label2 = Titanium.UI.createLabel({
        color: '#fff',
        text: 'ビューに追加されたラベルです。'
});

view2.add(label2);
win.add(view2);

// Menuの設定
win.activity.onCreateOptionsMenu = function(e) {
        var menu = e.menu;
        var login = menu.add({ title: 'Login' });
        var logout = menu.add({ title: 'Logout' });
}


共通項目の外部化

ここまでの完成ソース

■ common.js


// 共通の定義

var win = Titanium.UI.currentWindow;

// メニュー設定
win.activity.onCreateOptionsMenu = function(e) {
        var menu = e.menu;
        var login = menu.add({ title: 'Login' });
        var logout = menu.add({ title: 'Logout' });
}

■ win1.js


// win1の内容を記述

Ti.include('common.js');

// label1の作成
var label1 = Titanium.UI.createLabel({
        color: '#999',
        text: 'ハロー!文字を表示するラベルです。'
});

// win1にlabel1を追加する
win.add(label1);

■ win2.js


// win2の内容を記述

Ti.include('menu.js');

// view2の作成
var view2 = Titanium.UI.createView({
        backgroundColor: 'blue',
        height: 200
});

// label2の作成
var label2 = Titanium.UI.createLabel({
        color: '#fff',
        text: 'ビューに追加されたラベルです。'
});

view2.add(label2);
win.add(view2);

見栄えプロパティの外部化

 

[JSSによるプロパティ定義の注意点]

最近のAppceleratorのサポートレベルや将来的な予測、バグ状況から、jssでのプロパティ定義の使用はお勧めできません。Web制作者にとっては、よい機能なのですが。。。

(2012.08.27 SHUU)

 

[Titanium Mobile SDK 1.8のjssに関する変更点]

2011年12月下旬に、Titanium Mobile SDK が1.7から1.8にバージョンアップされました。

このバージョンアップにより、jssに関する取扱いが一部変更されたようです。

1.7までは、jsファイル内に関するプロパティは、同名のjssファイルに定義する必要があり、自動的にリンクされていました。

1.8からは、app.jssにすべてのプロパティを定義することができ、app.jssのみ自動的にリンクされます。

よって、jssファイルを複数作成した場合、app.jssに他のjssファイルをロードする必要があります。


[jssファイルのロード]
@import 'jssファイル名';
※app.jssの冒頭に定義

映像は1.7での定義ですので、1.8以降で実施する場合は、win1.jss, win2.jss を作成時に、app.jssに各jssをロードする指定が必要になります。

詳しくは、下の完成ソース「■ app.jss(Titanium Mobile SDK 1.8以降)」のコードを参照してください。

(2012.01.09 SHUU)

完成ソース

■ app.js


// 画面の背景色
Titanium.UI.setBackgroundColor('#000');

// TabGroupの作成
var tabGroup = Titanium.UI.createTabGroup();

// win1作成(Tab作成の前に作成する)
var win1 = Titanium.UI.createWindow({
        className: 'win',
        title: 'タブ1',
        url: 'win1.js'
});

// tab1の作成
var tab1 = Titanium.UI.createTab({
        title: 'タブ1',
        window: win1
});

// win2の作成
var win2 = Titanium.UI.createWindow({
        className: 'win',
        title: 'タブ2',
        url: 'win2.js'
});

// tab2の作成
var tab2 = Titanium.UI.createTab({
        title: 'タブ2',
        window: win2
});

// TabをTabGroupに追加
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// TabGroupをオープン
tabGroup.open();

■ app.jss


.win {
        background-color: #FFF;
}

■ app.jss(Titanium Mobile SDK 1.8以降)


@import 'win1.jss';
@import 'win2.jss';

.win {
        background-color: #FFF;
}

■ common.js


// 共通の定義

var win = Titanium.UI.currentWindow;

// メニュー設定
win.activity.onCreateOptionsMenu = function(e) {
        var menu = e.menu;
        var login = menu.add({ title: 'Login' });
        var logout = menu.add({ title: 'Logout' });
}

■ win1.js


// win1の内容を記述

Ti.include('common.js');

// label1の作成
var label1 = Titanium.UI.createLabel({
        id: 'label1',
        text: 'ハロー!文字を表示するラベルです。'
});

// win1にlabel1を追加する
win.add(label1);

■ win1.jss


#label1 {
        color: #999;
}

■ win2.js


// win2の内容を記述

Ti.include('common.js');

// view2の作成
var view2 = Titanium.UI.createView({
        id: 'view2'
});

// label2の作成
var label2 = Titanium.UI.createLabel({
        id: 'label2',
        text: 'ビューに追加されたラベルです。'
});

view2.add(label2);
win.add(view2);

■ win2.jss


#view2 {
        background-color: blue;
        height: 200px;
}

#label2 {
        color: #FFF;
}

コメントをお書きください

コメント: 5
  • #1

    勉強中 (火曜日, 15 11月 2011 13:22)

    とてもわかりやすく勉強させて頂いております。
    これからも楽しみにしてます。

  • #2

    tt (火曜日, 03 1月 2012 13:33)

    今回の内容も、すんなり理解できました。
    これまで色々な場面で学んできたはずのことですが、ここでの解説を聞いて初めて、腑に落ちた感じがします。

    要望ですが、PDFの資料がとてもわかりやすくて、印刷したいのですが、背景(薄い水色)が設定されていると、インクがもったいない気がしますので、背景の無しでお願いできませんか?

    今後とも期待しています。

  • #3

    toCtoC (火曜日, 15 5月 2012 11:37)

    勉強になりました。
    ありがとうございました。

  • #4

    coc (火曜日, 29 5月 2012 17:40)

    分かりやすく勉強になりました。

  • #5

    Raynard (日曜日, 22 7月 2012 02:48)

    Hi there! This post couldn�t be written much better! Reading through this article reminds me of my previous roommate! He always kept preaching about this. I most certainly will forward this post to him. Fairly certain he�ll have a good read. Thank you for sharing!