블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total324,763
Today0
Yesterday2

[참고문서]

http://docs.sencha.com/touch/2-0/#!/guide/apps_intro



[Intro to Applications with Sencha Touch 2]

Sencha Touch 2는 멀티 플랫폼에서의 앱 빌드에 최적화 되어 있습니다. 가능한 간단하게 앱을 작성하기 위해서, MVC 패턴에 기반한 간단하면서도 강력한 앱 아키텍쳐를 제공합니다. 이러한 접근법은 코드가 깔끔하고, 테스트가 가능하며, 유지보수가 용이하도록 합니다. 그리고 앱 작성시에 여러가지 장점을 제공합니다.

  • History Support : 앱 내부와 앱이 링크될 수 있는 어느 부분에서 백 버튼 완벽 지원
  • Deep Linking : 앱에서 화면을 여는 deep link에 대한 공유.
  • Device Profiles : 폰, 태블릿 등 커먼 코드를 공유하는 그밖의 디바이스에 대해서 쉬운 UI 커스터마이징



[Anatomy of an Application]

앱은 Model, View, Controller, Store, Profile, 그밖에 추가적인 메타데이터(아이콘, 실행 이미지등을 명시한)의 집합입니다.

  • Model : 앱에서 오브젝트의 타입을 나타냅니다. 예를 들어, 전자 상거래 앱에서 사용자, 상품, 주문에 대한 모델을 가질 수 있습니다.
  • Views : 사용자에게 데이터를 보여주며 Sencha Touch의 빌트인 컴포넌트를 사용합니다.
  • Controllers : 사용자의 탭, 스와이프 등의 동작을 핸들링하며 앱과의 인터랙션을 처리합니다.
  • Stores : 데이터를 앱으로 로딩하여 List나 DataView와 같은 컴포넌트를 사용할 수 있도록 합니다.
  • Profiles : 코드를 가능한 많이 공유하면서 디바이스에 따라 UI를 커스터마이징 할 수 있도록 합니다.

Sencha Touch 앱에서 일반적으로 Application이 가장 먼저 정의되며, 아래와 같은 형태입니다.

Ext.application({

    name: 'MyApp',

    models: ['User', 'Product', 'nested.Order'],

    views: ['OrderList', 'OrderDetail', 'Main'],

    controllers: ['Orders'],


    launch: function() {

        Ext.create('MyApp.view.Main');

    }

});

name은 모든 Model, View, Controller 등 모든 클래스를 포함한 전체 앱을 위한 글로벌 네임스페이스를 생성하는데 사용됩니다. 예를 들어, MyApp 앱은 MyApp.model.User, MyApp.controller.Users, MyApp.view.Main과 같은 패턴을 따르는 구성 클래스를 사용해야 합니다. 이러한 방식은 앱이 페이지의 다른 코드와 충돌 할 확률을 최소화 합니다.

앱은 클래스들을 앱으로 로드하기 위해 Model, View, Controller 설정을 사용합니다. 이를 위해 파일 구조에 대한 간단한 규칙을 따릅니다 - Model은 app/model 디렉토리에 위치하며, Contorller는 app/controller 디렉토리, View는 app/view 디렉토리에 위치합니다 - 예를 들어, app/model/User.js, app/controllers/Orders.js, app/view/Main.js와 같은 형태가 됩니다.

우리가 정의한 Model 중 하나다 나머지와 다른 것을 볼 수 있습니다 - 풀 클래스 명으로 ("MyApp.model.nested.Order")를 명시하였습니다. 설정에 대하여 네이밍 규칙을 다르지 않을 경우, 풀 클래스 명을 명시할 수 있습니다. 커스텀 의존성을 명시하는 방법에 대해서는  Dependencies section of the Ext.app.Application docs에 자세히 나와 있습니다.



[Controllers]

Controller는 앱을 하나로 합치는 역할을 합니다. UI에 의한 이벤트 발생시 그에 대한 액션을 취합니다. 이는 코드의 가독성을 높여주며, View 로직과 Control 로직을 분리시킵니다.

예를 들어, 로그인 폼을 통해서 사용자가 로그인하는 과정이 필요하다고 합시다. 이 경우의 View는 모든 필드와 콘트롤을 포함한 폼이 됩니다. Controller는 submit 버튼의 tap 이벤트를 감지해서 인증을 수행해야 합니다. 데이터나 상태를 조작하는 경우, View가 아닌 Controller가 그러한 변화를 활성화해야 합니다.

Controller는 작지만 강력한 기능들을 가지고 있으며 간단한 규칙을 따릅니다. 각 Controller는 Ext.app.Controller의 서브클래스 입니다 (이미 존재하는 Controller의 서브클래스를 만들 수도 있지만, 동시에 Ext.app.Controller를 상속해야 합니다).

모든 Controller가 Ext.app.Controller의 서브클래스라고 하더라도, 각 Contorller는 Application이 로드될 때 한번만 객체화 됩니다. Controller는 하나의 객체만이 있으며, Controller 객체 집합은 Application이 내부적으로 관리합니다. Application의 Controller 설정을 사용하여 모든 Controller를 로드하고 객체화 합니다.



[Stores]

Store는 Sencha Touch의 중요한 부분이며 대부분의 data-bind 위젯을 동작시킵니다. 간단하게 말하면, Store는 Model 객체의 배열입니다. List나 DataView와같은 data-bind 컴포넌트는 Store의 Model 객체를 렌더합니다. Store 이벤트가 발생하여 Store에서 Model 객체가 추가되거나 삭제되면, data-bind 컴포넌트는 이벤트를 감지하여 업데이트 합니다.

Store가 무엇이며 앱에서 컴포넌트와 연동되는지에 대한 정보는 Store guide에 더 많은 정보가 있지만, 반드시 알아야 할 Application 객체와의 통합 지점들이 있습니다.



[Device Profiles]

Sencha Touch는 다양한 디바이스의 화면 사이즈에 맞게 동작합니다. 태블릿에서 잘 동작하는 UI가 폰에서 동작하지 않을 수도 있고, 반대의 경우가 될 수도 있기 때문에 다양한 디바이스 타입에 따라 커스터마이징 된 뷰를 제공하는 것이 좋습니다. 하지만 다른 UI를 제공하기 위해 앱을 여러번 작성하는 것을 원하지 않습니다 - 가능한 코드를 공유하는 것이 좋습니다.

Device Profile은 앱에서 지원할 디바이스 타입과 어떻게 처리되어야 하는지를 정의할 수 있는 간단한 클래스 입니다. 처음에는 Device Profile 없이 개발했다가 나중에 추가할 수도 있고, 전혀 사용하지 않아도 됩니다. Profile은 현재 디바이스에서 사용될 경우 true를 리턴하는 isActive 함수와 추가적으로 로드할 Model, View, Controller를 정의합니다.

앱의 Profile을 사용하기 위해서는 Application에 Profile에 대해 알려주어야 하며 Ext.app.Profile의 서브클래스를 생성해야 합니다.

Ext.application({

    name: 'MyApp',

    profiles: ['Phone', 'Tablet'],


    //as before

});

위와 같이 Profile을 정의함으로써 Application은 app/profile/Phone.js와 app/profile/Tablet.js를 로드하게 됩니다. 태블릿 버전은 추가적인 기능을 가진다고 합시다. 아래는 태블릿 Profile을 정의에 대한 예제입니다.

Ext.define('MyApp.profile.Tablet', {

    extend: 'Ext.app.Profile',


    config: {

        controllers: ['Groups'],

        views: ['GroupAdmin'],

        models: ['MyApp.model.Group']

    },


    isActive: function() {

        return Ext.os.is.Tablet;

    }

});

isActive 함수는 앱이 실행되는 동안 Sencha Touch가 태블릿에서 실행되고 있는지를 리턴합니다. 디바이스의 모양과 사이즈가 다양해지면서 폰과 태블릿의 경계가 불명확해지고 있기때문에 이것은 약간 주관적인 판정이 될 수 있습니다. 디바이스가 태블릿인지 폰인지 판단할 간단한 방법이 없기때문에, iPad에서 실행될 때는 Sencha Touch의 Ext.os.is.Tablet이 true로 set되고 나머지 경우에는 false로 set됩니다. 섬세한 제어가 필요한 경우 isActive 함수 내부에 구현을 추가하는 것이 가장 쉬운 방법입니다.

단 하나의 Profile만이 isActive 함수에서 true를 리턴하는 것을 보장해야 합니다. 하나 이상의 Profile이 true를 리턴하는 경우, 최초의 Profile이 적용되며 나머지는 무시됩니다. 최초의 Profile은 앱의 currentProfile로 set되며, 어느때나 사용될 수 있습니다.

currentProfile이 추가적인 Model, View, Controller, Store를 정의한 경우 앱은 자동으로 로드 합니다. 하지만, 풀 클래스 명이 제공되지 않는 경우 Profile에 정의된 의존성은 Profile 명과 결합됩니다. 예를 들어,

  • views: ['GroupAdmin']app/view/tablet/GroupAdmin.js를 로드합니다.
  • controllers: ['Groups']app/controller/tablet/Groups.js를 로드합니다.
  • models: ['MyApp.model.Group']app/model/Group.js를 로드합니다.

대부분의 경우에 Profile은 추가적인 Controller, View, Model, Store를 정의하기만 합니다. Profile에 대한 상세한 논의는 device profiles guide에서 볼 수 있습니다.



[Launch Process]

Application은 launch 함수를 정의할 수 있다. launch 함수는 앱의 모든 클래스가 로드되어 실행될 준비가 되었을 때 호출됩니다. 일반적으로 메인 뷰 생성 등 앱의 스타트업 로직을 집어넣기에 최적의 위치입니다.

launch 함수 이외에도 스타트업 로직을 추가할 수 있는 두개의 위치가 있습니다. 먼저 각 Controller는 init 함수를 정의할 수 있습니다. init 함수는 launch 함수가 실행되기 전에 호출됩니다. 다음으로 Device Profile을 사용하는 경우, Profile은 launch 함수를 정의할 수 있습니다. Profile의 launch 함수는 Controller의 init 함수가 실행되고 Application의 launch 함수가 실행되기 전에 호출됩니다.

활성화 된 Profile만이 launch 함수가 호출됨을 알아둡시다. 예를 들어, 폰과 태블릿에 대한 Profile을 정의하여 태블릿 앱이 실행되었다면, 태블릿 Profile의 launch 함수만이 호출됩니다.

  1. Controller#init 함수 호출
  2. Profile#launch 함수 호출
  3. Application#launch 함수 호출
  4. Controller#launch 함수 호출

각 Profile은 스타트업 시 생성되어야하는 View 집합을 가지기 때문에, Profile을 사용할 때는 부트업 로직을 Profile의 launch 함수에 위치하는 것이 일반적입니다. 



[Routing and History Support]

Sencha Touch 2는 Routing과 History에 대해서 완벽히 지원합니다. SDK 예제에서 History 지원을 사용하여, 백버튼을 사용하고 스크린간 전환을 편리하게 합니다 - 안드로이드에서 유용합니다.

History 지원에 대한 문서가 있습니다. Kitchen Sink 예제에서 배울 수 있으며, Routing과 상태 복원에 대한 문서는 History 지원을 필요로 합니다.

Posted by ssun++

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함