JSS = JavaScript Style Sheets

ウィンドウやボタンなどのUI部品を作成するときに多くのプロパティを設定する必要がありますが、 そのほとんどはUIのデザイン部分に関連することなのでHTMLとCSSの関係と同じように、 JSSというCSSスタイル記法のファイルにプロパティを分けることができます。

特徴

• 2.0.2でも挙動がわかりずらい
• ドキュメントが少ない
• エラーの場合に原因の特定が難しい
• 上記の理由により恐らく使っている人が少ない → 情報が少なく、不具合が残る

UI定義を分離するということだけであれば他に方法はいろいろありますが、 お手軽さという点でJSSを個人的には使って行きたいので各種の不明瞭な動きを克服する方法を考えてみました。

JSSは組み込まれたときからその挙動(悪い意味)で有名ですが2.0.2でもうまく動かないようです。 特にAndroidとiOSで動きが異なることに一番悩まされます。

あと正式なドキュメントがクロスプラットフォームのところに少し書かれているものしか発見できないのですが、 他にあるのでしょうか。

理想となる挙動

• ①A.jsファイルと同じ階層にA.jssファイルを作成するとA.jsファイルと関連付けられる
• ②app.jssは全てのjsファイルから関連付けられる
• ③global.jssは全てのjsファイルから関連付けられる

app.jss,global.jssについて書かれた正式ドキュメントが見つけられなかったので噂程度ですがこういうふうに動くらしい。(動くとうれしいな)

実際の挙動(エミュレータ)

①-③のどれかでそろえばいいかなと思っていましたが、見事に１つもそろいませんでした。

global.jssでなくても評価されるかもしれないなど検証ポイントはまだたくさんありますが、今回はとりあえずこれだけです。 jssの変更が反映されないことが多いのでcleanをしているつもりでもかかっていなかったりするかもしれません。 よってテスト結果は正確ではありません。

A.android.jssは評価されますがA.iphone.jssは評価されませんでした。(A.jssはもちろんおいていない) これは正式ドキュメントにものっていますし、いくつかのサンプルがあるようなので動きそうなものですが。 cleanしてからテストしたつもりですが抜けがあったのかもしれません。

Androidのapp.jssはapp.jsには効くかグローバルには効いていないようです。

個人的なソリューション

個別のjsに個別のjssを関連付けるのはあきらめました。 よって以下が個人的なソリューションです。

• idレベルで指定していたことはjsファイルに書く。
• global.jssに全てのclassを書く。 ⇒ Android OK
• app.jsの先頭で@import 'global.jss'でglobal.jssを読み込む。 ⇒ iOS OK

これでandroid,iosともにグローバル指定でclassが扱えるようになります。(もちろんidもglobal.jssに書けますが適切ではないでしょう) Androidの場合app.jsに対して２度評価がかかるかもしれませんが、今回はもういいです。

タスク：ソースを読む

• 式は評価されない
  • 例： style: Titanium.UI.iPhone.TableViewStyle.GROUPED;
• jssに関連づけると　jss記載されていないパラメータも変わる(?)
  • 例：top:0; としか記述されていないclassに関連づけたtableViewの背景色が変化。関連を解くともとに戻る。

JSSファイル記述方法

一般的なCSSの記法ですが制限はまだよくわかっていないのでとりあえず下記は動作します。

.window_class{
	background-color: '#fff';
	top:0;
	left:0;
	width:'100%';
	height:'100%';
}
 
#view_id{
        background-color: '#fff';
}

JSファイル記述方法

//Class
    var win = Ti.UI.createWindow({
            className: 'window_class'            
    });
//ID
    var view = Ti.UI.createView({
        id: 'view_id'
    });

CSSと同じで/* と */の間がコメントなります。

私の区切りコメント

/* --------------------------------------------
 *                 Home Window
 * -------------------------------------------- */