Titanium에서 JSS(javascript style sheet) 사용법

Titanium에서 1.5버전부터 JSS (javascript style sheet)을 지원하기 시작했다.
jss란 무엇인가? html에 스타일을 적용할 때 CSS(Cascading Style Sheets)를 쓰는 것 처럼 javascript를 기반으로 style을 다룰 때 사용하는 방식이다.

js파일에 해당하는 jss만들기
app.js에 적용할 jss파일은 동일한 이름으로 같은 디렉토리에 생성하면 된다. (app.js 와 app.jss)

jss에 스타일 정의하기
css에서는 id, class, dom element 3가지 방법으로 스타일을 정의하고 적용할 수 있다. Titanium에의 JSS도 이와 유사하다. 다음과 같은 3가지 방법을 제공한다.

ID-based Style : #id로 형태로 선언하고 ui component 생성시 id를 지정한다.

// file : app.js
var styleWindow = Titanium.UI.createWindow({
id:'styleWin',
title:'스타일 적용 할 윈도우'
});
/* file : app.jss */
#styleWin {
background-color:#2A2623;
}

Type-based Style : component type이름으로 선언만하면 해당 component에 적용된다.

// file : app.js
var styleWindow = Titanium.UI.createWindow({
title:'스타일 적용 할 윈도우'
});
/* file : app.jss */
window { //app.js의 모든 window에 기본적으로 적용된다.
background-color:#2A2623;
}

Class-based Style :  .class 형태로 ui component 생성시 className을 지정한다.
(css의 경우 하나의 dom 엘러먼트에 여러개의 class지정하여 사용하나 jss에서는 아직 지원 안하는 모양이다.^^)

// file : app.js
var styleWindow = Titanium.UI.createWindow({
className:'style_win',
title:'스타일 적용 할 윈도우'
});
/* file : app.jss */
.style_win {
background-color:#2A2623;
}

3가지를 전부 정의 했을 때는 다음과 같은 우선 순위를 갖는다.

ID-based styles > type-based styles > class-based styles

이 순서를 확인도 할겸 예제 파일을 만들어 보았다.

p.s. 모든 js파일에 자동적용되는 공통적인 jss는 global.jss에 정의하면 된다고 나와있으나 실제 해보면 적용이 되지 않았다. 하지만 기본적인 css에서 사용하는 import로 공통적으로 사용하는 jss를 불러와서 사용할 수 있다.
따라서 공통적으로 쓸 jss의 경우 base.jss와 같이 독립된 파일을 만들고 base.jss가 필요한 jss에서 import를 시켜 사용하면 편리하다.

/* file : base.jss */
window {
barColor:#2A2623;
backgroundColor :#000;
}
/* file : app.jss */
@import url('./base.jss');
app {
background-color:#000;
}

reference
http://wiki.appcelerator.org/display/guides/Designing+the+User+Interface#DesigningtheUserInterface-CrossplatformlayoutusingJSS

Advertisements