Titanium에서 xhr에 HTTP Basic Authentication 사용하기

Titanium에서 createHTTPClient를 이용할 때 HTTP Authentication 사용하려면 아래와 같이 하면 된다.

var xhr = Titanium.Network.createHTTPClient();
xhr.setTimeout(20000);
xhr.onload = function()
{
Ti.API.info(this.responseText);
};
// open the client
xhr.open('GET','http://your.destination.url');

authstr = 'Basic ' +Ti.Utils.base64encode("yourUserName"+':'+"yourPassword");
xhr.setRequestHeader('Authorization', authstr);
xhr.send();

참고 URL : http://developer.appcelerator.com/question/20951/how-to-do-a-http-put-with-http-basic-authentication

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

Android Device로 Titanium App 넣을때 R.java Error

Titanium에서 안드로이드 앱을 설정 한다는 것은 쉬운 일이 아닌 것 같다. 설정해줘야 할 것도 생각 보다 많고 설정하다가 안되는 경우도 많았다.

어렵게 설정을 다해 성공을 했는데 나중에 다시 새로운 프로젝트를 만들고 안드로이드 폰에 넣으려고 하니 R.java 에러가 날때가 있다. Resource 안의 폴더를 지웠다가 다시 실행도 해보고 새로운 프로젝트도 생성해서 해봤지만 소용 없었다.

결국, 찾은 해답은 App ID의 문제 였다. App ID에 최소한 하나의 ‘.’ (dot) 이 중간에 들어가야 한다. 이를 지키지 않으면 다음과 같은 에러가 나더라.

[ERROR] Error generating R.java from manifest

이런 error 때문에 고생한다면 appid 를 확인해보자!

p.s. Apple의 앱 아이디의 경우 apple에서는 domain을 거꾸로 적은 형태의 id를 권한다.( com.yomybaby.c ) 하지만 ‘test’ 와 같은 일반적인 텍스트 형태를 넣어도 Titanium에서는 문제 없이 돌아간다.
App ID는 말 그대로 앱을 나타내는 고유의 ID 이며 app을 구분하는데 쓰인다. push notification을 사용하기 위해서는 *와 같은 id를 쓰지 않고 com.domain.www 형태 이어야 한다.