Rev. 2.73

앱셀러레이터 타이타니움에서 여러 화면으로 구성된 앱을 구축할 때 화면전환에 사용되는 코드를 크게 두 가지로 방법으로 작성할 수 있습니다. 하나의 큰 덩어리로 작성하거나, 전환될 화면 단위로 기능들을 모듈화하는 방법입니다. 큰 덩어리로 작성하면 시스템 메모리를 조금더 효율적으로 관리하도록 신경써야하고 경우에 따라서는 앱의 로딩시간이 길어질 수도 있습니다. 반면 공통으로 사용되는 함수나 변수를 다루기가 수월합니다. 모듈화하는 방법은 모듈간 변수를 공유하는 것이 다소 까다롭고, 사용자가 기능을 실행할 때에 해당 모듈이 발동되는 구조이기 때문에 다소 버벅이는 느낌을 줄 수 있지만 앱의 기본 로딩시간이 단축됩니다. 이들간의 속도차이는 중/소규모 앱에서 아주 근소한 차이이기 때문에 일반 사용자가 알아채기 힘든 수준입니다. 자신이 작성할 앱의 규모에 따라서 두가지 방법중 하나를 선택하면 되겠습니다.

IMG_0570 사본.png

아래 코드는 하나의 파일에 무뚱그려 작성한 예입니다. 윈도에 edit 버튼이 위치하고 탭하면 cancel 버튼이 토글되도록 하는 기능을 수행합니다.

var window = Ti.UI.createWindow({title: userName});

//  create edit/cancel buttons for nav bar
var cancel = Ti.UI.createButton({title: 'Cancel'});
cancel.addEventListener('click', function() {
  window.setRightNavButton(edit);
  tableView.editing = false;
});

var edit = Ti.UI.createButton({title: 'Edit'});
edit.addEventListener('click', function() {
  window.setRightNavButton(cancel);
  tableView.editing = true;
});

window.setRightNavButton(edit);

아래는 윈도에서 작동할 기능이 들어있는 해당 파일을 윈도우 속성에 지정하여 구분하는 예입니다.

var window = Ti.UI.createWindow({url: '/modules/ui.js', title: userName})

ui.js에 edit와 cancel 버튼이 토글되는 기능이 담긴 코드입니다. Ti.UI.currentWindow를 통하여 상위 윈도 객체로 접근할 수 있습니다.

var currentWindow = Ti.UI.currentWindow;

//  create edit/cancel buttons for nav bar
var edit = Ti.UI.createButton({title: 'Edit'});
edit.addEventListener('click', function() {
  currentWindow.setRightNavButton(cancel);
  tableView.editing = true;
});

var cancel = Ti.UI.createButton({title: 'Cancel'});
cancel.addEventListener('click', function() {
  currentWindow.setRightNavButton(edit);
  tableView.editing = false;
});

currentWindow.setRightNavButton(edit);

저야 당연히 후자쪽이 쉽게 확장할 수 있고 효율적일 것이라 판단하고 여러 단위의 모듈들을 구분했습니다. 역시나 여기에서 첫 번째 난관에 봉착하게 되는데 그것은 서로 다른 모듈간의 변수를 전달하는 것이었습니다. 예를 들면 부모화면에서 만들어진 데이터를 자식화면으로의 전달하는 것입니다. 이 경우 변수를 전달 할 수 있는 방법은 크게 세 가지가 있는데 첫 번째는 Custom Event를 이용한 변수 전달 방법이고 두 번째는 Current Window 속성을 이용하는 방법 그리고 세 번째는 Include를 이용하여 변수 또는 함수를 공유하는 방법입니다. 첫 번째와 두 번째는 구현 용도에 따라 구분할 수 있는데, 이벤트를 이용하는 것은 사용자가 어떠한 행동이나 데이터 푸시 등 비동기식으로 발생하는 이벤트 헨들러에 의해 데이터가 전달되는 경우 또는 자식이 부모에게 데이터를 전달하는 용도로 사용됩니다.

다음은 부모에 커스텀 이벤트를 리스닝 하도록 하는 예입니다.

// Custom Events

Titanium.App.addEventListener('event_one', function(e) {
  alert('app.js: event one, array length = ' + e.data.length);
});

Titanium.App.addEventListener('event_two', function(e) {
  alert('app.js: event two, name = ' + e.name);
});

다음은 자식이 커스텀 이벤트를 호출하면서 변수를 전달하는 예입니다.

// Fire Custom Events

Titanium.App.fireEvent('event_one', {data: ['1','2','3']});
Titanium.App.fireEvent('event_two', {name: 'Foo', city: 'Palo Alto'});

다음으로 Current Window 속성을 이용하는 방법은 단순히 부모가 가진 데이터를 자식에게 전달할 때 사용합니다. 아래 코드는 상위에서 변수를 윈도의 속성으로 정의하는 예입니다.

var userName = "Firejune";
var window = Ti.UI.createWindow({url: '/modules/ui.js', title: userName})

자식에 해당하는 ui.js에서는 다음과 같은 방법으로 윈도의 속성으로 지정된 변수에 접근할 수 있습니다.

var currentWindow = Ti.UI.currentWindow;
var title = currentWindow.title; // => Firejune

끝으로 세 번째 include는 여느 프로그래밍에서 사용하는 것과 같은 일반적인 공통 함수나 변수를 끌어다 쓰는 것이기 때문에 엄밀히 말해 변수를 전달 한다기 보다는 공유하는 것입니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar