木
03
11月
2011
jsコードを外部化すべし！
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);
見栄えプロパティの外部化
[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;
}
トラックバック・コメントは下をクリックしてください。
印刷用