TitaniumのJSSという機能
1.5.1から追加された機能で、オブジェクトの外見をJavaScript StyleSheetでカスタマイズできる。
コンパイルされたファイルを消してビルドし直さないと修正が反映されないという大きな問題があったが、1.6.0で修正されている。
要はHTMLに対するCSSのようなもの。
構造とデザインを分離できるという利点がある。
でもまだ正直あんまり練れた機能ではないかも。
基本的な使い方
概要
- *.jsにあわせて*.jssファイルを作る（ex. app.js => app.jss, menu.js => menu.jss）
- *.jssでID別、クラス別、オブジェクトのタイプ別にスタイルを定義する
- *.jsでIDまたはクラスを指定してオブジェクトを作成する
- *.iphone.jssや.*.android.jssのようにプラットフォーム別にファイルを分けることができる
- global.jssを利用するとウィンドウ別ではなく全体で有効なスタイルを定義できる（らしい）
優先順位もCSSと同様で、優先順位の高い順にインライン指定、ID別、クラス別、タイプ別となる。
記法もCSS寄りで、backgroundColorはbackground-colorと指定する。
IDの指定
オブジェクトにidプロパティを設定する。
var label = Ti.UI.createLabel({id:"foo"});
クラスの指定
オブジェクトにclassNameプロパティを設定する。classNamesで複数指定することもできる。
var label = Ti.UI.createLabel({id:"foo", className:"bar"});
var label2 = Ti.UI.createLabel({id:"foo", classNames:["bar", "bar2"]});
なにはともあれサンプルコード
app.js
var window = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor: "#0f0"});
var label = Ti.UI.createLabel({id:"foo", className:"bar"});
window.add(view);
view.add(label);
window.open();
app.jss
label {
background-color: "#fff";
}
#foo {
text-align: center;
}
.bar {
width: 100px;
height: 200px;
border-color: "#f00";
border-radius: 10px;
}
app.iphone.jss
#foo {
text: "iPhone!";
}
app.android.jss
#foo {
text: "Android!";
}
こんな具合。
イマイチなところ
- JSSはビルドし直さないとリロードされない。（urlで指定したjsの方はリロードされるのに！）
- 値に定数を指定できない
- 何か間違った指定をしてしまうといきなり落ちて何が悪いのかわからない
定数は指定しても動かず。
style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN;
定数の示す値を直接書けばいける。
style: 0;
あと何か間違った指定をするとエラーメッセージに詳細が出ることもなく落ちるので原因特定が大変。
特にAndroidの場合は修正して確認するたびに動き出すまで実機でも1分以上かかるのでやってられねえ。ギャワー。
ロジックとスタイルを分離したければJavaScript内で自分で工夫した方がいいように思える。
少なくとも現段階では。
わからないこと
- app.android.medium.jssやapp.android.high.jssという指定例があるが何を意味しているのかよくわからない
- global.jssが有効にならない
- addClassでクラスを追加できるとあるが、addClassというメソッドがundefined
もしかすると初歩的な見落としかもしれませんが、深追いせずに時を待つのがいい気がしてきました。
