移行先サイト
JSS = JavaScript Style Sheets
ウィンドウやボタンなどのUI部品を作成するときに多くのプロパティを設定する必要がありますが、 そのほとんどはUIのデザイン部分に関連することなのでHTMLとCSSの関係と同じように、 JSSというCSSスタイル記法のファイルにプロパティを分けることができます。
特徴
UI定義を分離するということだけであれば他に方法はいろいろありますが、 お手軽さという点でJSSを個人的には使って行きたいので各種の不明瞭な動きを克服する方法を考えてみました。
JSSは組み込まれたときからその挙動(悪い意味)で有名ですが2.0.2でもうまく動かないようです。 特にAndroidとiOSで動きが異なることに一番悩まされます。
あと正式なドキュメントがクロスプラットフォームのところに少し書かれているものしか発見できないのですが、 他にあるのでしょうか。
理想となる挙動
app.jss,global.jssについて書かれた正式ドキュメントが見つけられなかったので噂程度ですがこういうふうに動くらしい。(動くとうれしいな)
実際の挙動(エミュレータ)
環境 | ① | ② | ③ |
---|---|---|---|
Android | OK | NG | OK |
iOS | NG | OK | NG |
①-③のどれかでそろえばいいかなと思っていましたが、見事に1つもそろいませんでした。
global.jssでなくても評価されるかもしれないなど検証ポイントはまだたくさんありますが、今回はとりあえずこれだけです。 jssの変更が反映されないことが多いのでcleanをしているつもりでもかかっていなかったりするかもしれません。 よってテスト結果は正確ではありません。
A.android.jssは評価されますがA.iphone.jssは評価されませんでした。(A.jssはもちろんおいていない) これは正式ドキュメントにものっていますし、いくつかのサンプルがあるようなので動きそうなものですが。 cleanしてからテストしたつもりですが抜けがあったのかもしれません。
Androidのapp.jssはapp.jsには効くかグローバルには効いていないようです。
個人的なソリューション
個別のjsに個別のjssを関連付けるのはあきらめました。 よって以下が個人的なソリューションです。
これでandroid,iosともにグローバル指定でclassが扱えるようになります。(もちろんidもglobal.jssに書けますが適切ではないでしょう) Androidの場合app.jsに対して2度評価がかかるかもしれませんが、今回はもういいです。
タスク:ソースを読む
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
* -------------------------------------------- */