[카테고리:] 타이타늄

타이타늄 모바일 앱의 기본 언어셋은 영어다.

이 말은 즉 특별한 한글 이름을 지정하지 않으면 영문으로 앱이름을 써야한다는 얘기도 되겠다.

그렇다면, 앱 이름은 어디서 설정하는 걸까?

먼저 tiapp.xml 파일을 뒤져보자.

<?xml version=”1.0″ encoding=”UTF-8″?>

<ti:app xmlns:ti=”http://ti.appcelerator.org”>

<sdk-version>2.0.1.GA2</sdk-version>

<id>com.miconblog.sampleapp</id>

<name>SampleApp</name>

<version>1.0</version>

…. 이하 생략

대충 살펴보니 <name> 태그가 보인다

. 그리고 이 태그에 값을 설정하면 실제 빌드되어 만들어지는 앱의 이름으로 쓰인다는 사실도 쉽게 알수있다.

그럼 이 태그에 한글을 넣으면 될까? 아마 빌드해보면 아래와 같이 에러가 날것이다.

UnicodeDecodeError: ‘utf8’ codec can’t decode byte 0xb5 in position 0: invalid start byte

그럼 도대체 어디에…???

국제화와 지역화 그리고 세계화

타이타늄 프로젝트 폴더를 보면, i18n이라는 폴더가 있다. 이 폴더가 없는 경우엔 Resouces 폴더와 동등 위치(최상위)에 만들어주면 된다. 여튼 이 폴더는 국제화(internationalization)라는 단어를 줄여서 첫글자와 마지막 글자 그리고 그 사이의 글자가 18개를 의미하는 단어다. 즉, i18n 이라는 얘기는 국제화를 의미하고, 영어권에서는 통용되는 줄임말이다.

그럼 여기서 잠깐,  l

10n은 뭘까? 이쯤되면 대충 지역화(localization)라는걸 유추해볼수있다. 그리고 g11n은 세계화(globalization)라는 것쯤은 일단 상식으로 알아두자!

다시 돌아와서, 바로 이 i18n 폴더에 국제화와 관련된 언어셋들을 정리해두면, 타이타늄이 알아서 상황에 맞게 표시해준다.

그럼 만들어보자!

한글 언어 설정

1. 먼저 i18n 폴더를 최상위에 만든다.
2. 그리고 그 하위에 ko 폴더를 만든다.
3. 그리고 그 안에 app.xml 파일을 만들자.

app.xml 파일은 아래와 같이 작성한다.

<?xml version=”1.0″ encoding=”UTF-8″?>

<resources>

<string name=”appname”>한글이름</string>

</resources>

—-

[summary]

if you want i18n

1. make i18n folder

2. make sub folder for language (ex. ko, en, etc…)

3. create app.xml file

4. write your properties

웹브라우저에서 동작하는 자바스크립트는 싱글 스레드로 동작한다. 
즉,  어떤 코드를 실행하던간에 순차적으로 실행되고, 이 순서에 따라 의존성도 생긴다.

하지만 타이타늄 모바일의 경우 두가지 방법으로 윈도우를 열수있다.

1. 싱글 스레드로 윈도우 열기 

[app.js]

var parentWin = Ti.UI.createWindow();
var button = Ti.UI.createButton();
button.addEventListener(“click”, function(e){
var childWin = Ti.UI.createWindow();
childWin.open();
});
parentWin.add(button);
parentWin.open();

위와 같이 같은 파일 안에서 윈도우를 정의할 경우 같은 스레드에서 윈도우가 열린다.

2. 멀티 스레드로 윈도우 열기 

멀티 스레드로 윈도우를 열려면, 다음과 같이 윈도우 생성시 URL 속성을 지정한다.

[app.js]

var parentWin = Ti.UI.createWindow();
var button = Ti.UI.createButton();
button.addEventListener(“click”, function(e){
var childWin = Ti.UI.createWindow({ url: “./childWindow.js” });
childWin.open();

Ti.App.fireEvent(“fooEvent”, {data:”message”});
});
parentWin.add(button);
parentWin.open();

[childWindow.js]

var win = Ti.UI.currentWindow;

Ti.App.addEventListener(“fooEvent”, function(e){
Ti.API.info(e.data + ” got it!”);
});

위와 같이 url로 지정하면 childWindow.js 파일 안에 정의된 내용은 다른 스레드로 동작한다.
따라서, 두 윈도우 사이에 데이터를 전송하려면 약간의 시차가 생길수 있다.

예를 들어, 자식 윈도우를 열고
1. childWindow.open()

바로 윈도우로 메시지를 날리면,
2.  Ti.App.fireEvent(“fooEvent”, {data:”message”});

자식 윈도우에서 메시지를 받아야하는데 받지 못한다.
3.  Ti.App.addEventListener(“fooEvent”, function(e){  Ti.API.info(e.data + ” got it!”);  });

따라서 URL을 이용해 윈도우를 열 경우엔, 스레드 생성시간만큼의 약간의 딜레이를 주어야한다.

var childWin = Ti.UI.createWindow({ url: “./childWindow.js” });

childWin.open();
setTimeout(function(){

      Ti.App.fireEvent(“fooEvent”, {data:”message”});

   }, 100); 

});