Sencha Touch 2 Tutorial - View - 01

이번주에 사무실이 이사갑니다.
짐을 다 싸 놔서 인터넷도 못하네요.

이제 봄도 되고 사무실도 새로운 곳으로 옮겨지니 새 기분으로 열심히 일 하자고 다짐해 보게 됩니다.

오늘은 Sencha Touch 2.0의 View에 대해서 공부하겠습니다.
오늘 그 내용을 다 다루지는 못하구요. 두번에 나눠서 다루겠습니다.

======= o ======= o ======= o ======= o ======= o

Using Views in your Applications

유저 입장에서 보면 어플리케이션은 단지 view의 모임들일 뿐입니다. 앱에 Model과 Controller가 아주 중요한 역할을 하지만 View가 바로 유저에게 직접 보여지는 부분입니다. 오늘은 이런 뷰를 어떻게 만드는지에 관해 공부해 보겠습니다.

Using Existing Components

View를 생성하는 가장 쉬운 방법은 Ext.create를 사용하는 겁니다. 예를 들어 HTML과 Panel을 만들기를 원한다면 아래처럼 하면 됩니다.

Ext.create('Ext.Panel', {
    html: 'Welcome to my app',
    fullscreen: true
});

예제를 보시면 HTML이 들어간 이 Panel은 전체 화면을 차지하도록 돼 있습니다. Panel이외에도 Sencha Touch에서 제공하는 모든 컴포넌트들을 이런식으로 사용하시면 됩니다. 하지만 바람직한 방법은 특별히 구현하고자하는 것을 subclass로 만들고 나서 생성하는 방법입니다. 아래 예제를 보시죠.

Ext.define('MyApp.view.Welcome', {
    extend: 'Ext.Panel',

    config: {
        html: 'Welcome to my app',
        fullscreen: true
    }
});

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

phone에 나오는 화면은 이전과 똑 같습니다. 하지만 다른 점은 새로운 컴포넌트를 가지게 됐습니다. 이 컴포넌트 안에서 여러 작업을 할 수 있습니다. 이것이 일반적으로 앱을 만들때 사용하는 패턴입니다. component가 있는 subclass를 만들고 instance는 나중에 만드는 겁니다. 그럼 어떤게 바뀌었는지 살펴 볼까요?

- Ext.define은 새로운 class를 만들 때 사용합니다. 그리고 그 안에서 extend를 이용해서 Ext.panel 같은 컴포넌트들을 불러와서 사용할 수 있습니다. (Componen에는 4가지가 있는데 Navigation, Store-bound, Form, General Components 가 있습니다. 자세한 내용은 여기 를 참고하세요.)
- MyApp.view.MyView 형식으로 새 뷰 클래스를 만들었습니다. 이 형식은 개발자 마음대로 사용하셔도 되지만 이 형식을 유지할 것을 권장합니다.
- 이 새 클래스에서 우리는 config 를 정의했습니다.
이 config는 subclass의 config block에서 정의하셔도 되고 create() 로 instance를 만들 때 정의하셔도 됩니다.

아래 예제에서는 subclass가 아니라 create() 안에서 object를 pass하는 것을 보여 줍니다.
결과 화면은 CSS가 적용되서 보기 좋은 폰트가 display 됩니다.

A Real World Example

아래 예제는 Sencha Touch 의 Twitter 앱에서 실제 사용한 view class 중 한 부분 입니다.
Ext.define('Twitter.view.SearchBar', {
    extend: 'Ext.Toolbar',
    xtype : 'searchbar',
    requires: ['Ext.field.Search'],

    config: {
        ui: 'searchbar',
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'title',
                title: 'Twitter Search'
            },
            {
                xtype: 'searchfield',
                placeHolder: 'Search...'
            }
        ]
    }
});

이 예제는 바로 전 예제와 같은 패턴을 따르고 있습니다. 새로운 클래스로 Twitter.view.SearchBar를 생성했습니다. 이 클래스는 framwork의 Ext.Toolbar 클래스를 extends 했습니다. 그리고 몇가지 configuration 옵션이 있습니다. layout하고 items array 입니다.

몇개 새롭게 나온 옵션들에 대해서 알아보죠.

: requires - items array를 위해 searchbar를 사용하기 때문에 이 새 뷰에 Ext.field.Search 클래스를 사용할거라고 알려줘야 합니다.
: xtype - 새 클래스 만의 xtype을 줍니다. 간편하게 configuration object를 생성하도록 합니다. 이렇게 함으로서 우리는 여러 방법으로 새로운 뷰 클래스의 인스턴스를 생성할 수 있습니다. 아래와 같이 이 xtype을 이용하시면 편리하게 방금 만든 새로운 클래스를 쉽게 재 사용하실 수 있습니다.

//creates a standalone instance
Ext.create('Twitter.view.SearchBar');

//alternatively, use xtype to create our new class inside a Panel
Ext.create('Ext.Panel', {
    html: 'Welcome to my app',

    items: [
        {
            xtype: 'searchbar',
            docked: 'top'
        }
    ]
});

======= o ======= o ======= o ======= o ======= o

다음 시간에 나머지 View 부분 마저 다루겠습니다.

오늘도 추천 한방씩 ~~~~~ ~~~~~ 부탁드려여...