最近のTitanium
つい先日
デバイスごとのUIデザイン
さて,
JSS
TitaniumではUIのデザインとロジックを切り分ける方法の一つとして,
- ファイル名はwindow_
js_ .jssname - ファイルは何処にあっても上のルールが適応される
- idかclassを指定してデザインの指定を書く
- 記法はcssとほとんど同じ
ファイル名にあるwindow_
また,
table_
function updateTimeline (timeline) {
var currentData = [];
for (var i=0;i<timeline.length;i++) {
var tweet = timeline[i];
var row = Ti.UI.createTableViewRow({ id:'row' });
var imageView = Ti.UI.createImageView(
{
image: tweet.user.profile_image_url,
className: 'tweetIcon'
}
);
row.add(imageView);
var nameLabel = Ti.UI.createLabel({ id: 'nameLabel' });
nameLabel.text = tweet.user.screen_name;
row.add(nameLabel);
var commentLabel = Ti.UI.createLabel({ id: 'commentLabel' });
commentLabel.text = tweet.text;
row.add(commentLabel);
var dateLabel = Ti.UI.createLabel({ id: 'dateLabel' });
dateLabel.text = tweet.created_at;
row.add(dateLabel);
currentData.push(row);
}
tableView.setData(currentData);
//以下省略
まずは,
そして,
table_
#row {
height: 'auto';
layout: 'vertical';
}
.tweetIcon {
width: 48;
height: 48;
top: 5;
left: 5;
}
#nameLabel {
width: 120;
height: 'auto';
left: 58;
top: -48;
fontSize: 6;
fontWeight: 'bold';
color: '#2b4771';
}
cssとほぼ同様の書き方ができ,
classNameでの指定はCSSと同様に複数のクラスを指定できて便利なのですが,
端末ごとに異なるJSSを利用する
さてJSSについて紹介してきましたが,
- table_
view. android. low. jss - table_
view. android. medium. jss - table_
view. android. heigh. jss
の3つを用意することができ,
- Windowの定義が書いてあるJSのファイル名.android.サイズ.jss
というようになります。
low, medium, heighの閾値はTitanium側というよりはAndroidのAPIで規定されるもののようで,
などを参考にしてください。
また,