Sencha Touch 2 Tutorial - View - 02

Using Views in your Applications 02

Custom Configurations and Behavior

Sencha Touch 2는 예측 가능한 API들을 제공하고 깔끔한 코드와 쉬운 테스트가 가능하도록 하하기 위해 configuration system에 extensive를 사용합니다. 개발자들에게도 클래스를 만들 때 같은 방식으로 만들기를 강하게 권장합니다.

이미지를 tap했을 때 이미지에 대한 정보가 팝업으로 뜨는 이미지 뷰어를 한번 만들어 봅시다. 우리의 목표는 이미지 url, title 그리고 description이 있을 수 있는 재사용 가능한 뷰를 만드는 것입니다. 그리고 이 이미지를 tap했을 때 title과 description을 표시해 줄 겁니다. 이 모든 기능을 재사용 가능하도록 하는 클래스를 만들어 보겠습니다.

이미지를 표시하기 위해서는 Ext.Img 컴포넌트를 사용해야 합니다. 아래처럼 subclass를 만들어 보겠습니다.

Ext.define('MyApp.view.Image', {
    extend: 'Ext.Img',

    config: {
        title: null,
        description: null
    },

    //sets up our tap event listener
    initialize: function() {
        this.callParent(arguments);

        this.element.on('tap', this.onTap, this);
    },

    //this is called whenever you tap on the image
    onTap: function() {
        Ext.Msg.alert(this.getTitle(), this.getDescription());
    }
});

//creates a full screen tappable image
Ext.create('MyApp.view.Image', {
    title: 'Orion Nebula',
    description: 'The Orion Nebula is rather pretty',

    src: 'http://apod.nasa.gov/apod/image/1202/oriondeep_andreo_960.jpg',
    fullscreen: true
});

이 소스를 보시면 우리의 클래스에 두개의 configuration들을 달았습니다. 이 두개는 null로 정의했습니다. 이 새 클래스의 인스턴스를 생성할 때 title과 description config를 pass 할 겁니다.

초가화와 onTap 함수가 일어날 때 어떤 동작들을 하게 됩니다. initialize 함수는 컴포넌트가 instant될 때 불려 집니다. 그러니까 이 위치는 이벤트 리스너와 같은 behavior를 셋업하기 아주 좋은 장소 입니다. 첫번째로 우리가 해야 할 일은 이 initialize 함수를 사용하는 것 입니다. (역자주:자바의 생성자가 연상되네요.) callParent(인수) 는 initialize 함수를 부른 superclass 입니다. 이 부분은 아주 중요합니다. 이것을 빼먹으면 여러분의 component는 정확하게 동작하지 않을 겁니다.

callParent를 한 다음에 tap 리스너를 달았습니다. 이 리스너를 단 객체를 tap 하게 되면 onTap 함수가 call 될 겁니다. Sencha Touch 2이 모든 컴포넌트들은 이런 식으로 DOM 객체나 styling을 추가하거나 제거할 때 또는 Ext.dom.Element에서 하는 일반적인 작업들에 대한 이벤트를 listen하기위해 사용할 수 있는 한개의 element property 가 있습니다.

onTap 함수는 아주 간단합니다. 이 함수를 부시면 이 이미지에 대한 정보를 pop up으로 보여주기 위해 Ext.Msg.alert을 사용했습니다. 여기서 title과 description 두개의 config들을 봅시다. 둘 다 getter 함수를 receive 받습니다. (getTitle, getDescription) 이렇게 되면 setter 함수(setTitle, setDescription)도 generate 되게 됩니다.


Advanced Configurations

클래스에 새 configuration option을 생성할 때 getter와 setter 함수들이 생성됩니다. 그래서 아래 코드에서 border는 자동적으로 getBorder와 setBorder 함수를 받게 됩니다.

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

    config: {
        border: 10
    }
});

var view = Ext.create('MyApp.view.MyView');

alert(view.getBorder()); //alerts 10

view.setBorder(15);
alert(view.getBorder()); //now alerts 15

getter와 setter만 생성되는 것은 아닙니다. applyBorder와 updateBorder도 같이 생성이 됩니다.

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

    config: {
        border: 0
    },

    applyBorder: function(value) {
        return value + "px solid red";
    },

    updateBorder: function(newValue, oldValue) {
        this.element.setStyle('border', newValue);
    }
});

우리의 applyBorder함수는 border configuration이 세팅되거나 바뀔 때 내부적으로 불려지게 됩니다. 여기에 유저가 (혹은 앱 실행중에) 값을 바꿀 때 어떤 변화를 주는 동작을 넣기에 아주 좋습니다. 이 예제에서는 border 의 width를 받아서 CSS border specification string에 전달을 해 줄 겁니다.

예를 들어 border 가 10dl ehlaus applyBorder 함수는 10픽셀의 빨간 선으로 만들어 줄 겁니다. 이 apply 함수는 선택사항입니다. 여기에는 반드시 return 값이 있어야 됩니다. 그렇지 않으면 아무 동작도 일어나지 않습니다.

updateBorder 함수는 applyBorder 함수가 값을 변경하고 나서 불려집니다. 이것은 대개 DOM을 수정하고 AJAX request를 send 할 때 혹은 다른 프로세스 종류를 수행하기 위해 사용됩니다. 이 예제에서는 단지 view의 element를 get 해서 setStyle을 이용해서 border style을 업데이트 할 겁니다. 그러면 setBorder가 call 될 때마다 우리의 DOM은 새로운 스타일을 반영하기 위해 즉시 업데이트 될겁니다.

아래 예제가 있습니다.
화면 위에 border의 width를 변경할 수 있도록 +,- spinner button을 달았습니다. Spinner의 spin 이벤트를 받아서 우리가 만든 view의 새로운 setBorder 함수를 call 할 겁니다.

//as before
Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',

    config: {
        border: 0
    },

    applyBorder: function(value) {
        return value + "px solid red";
    },

    updateBorder: function(newValue, oldValue) {
        this.element.setStyle('border', newValue);
    }
});

//create an instance of MyView with a spinner field that updates the border config
var view = Ext.create('MyApp.view.MyView', {
    border: 5,
    fullscreen: true,
    styleHtmlContent: true,
    html: 'Tap the spinner to change the border config option',
    items: {
        xtype: 'spinnerfield',
        label: 'Border size',
        docked: 'top',
        value: 5,
        minValue: 0,
        maxValue: 100,
        incrementValue: 1,
        listeners: {
            spin: function(spinner, value) {
                view.setBorder(value);
            }
        }
    }
});

Usage in MVC

애플리케이션을 만들 때 MVC 모델을 따를 것을 권장합니다. 그러면 이 애플리케이션의 코드는 잘 구성되고 재사용하기 쉽도록 만들어 지게 될 겁니다. 그리고 위에서 사용했듯이 naming을 잘 사용하면 아주 심플하게 사용하기 쉽습니다.

위의 MyApp.view.MyView 클래스는 app/view/MyView.js 에 작성 되어야 합니다. 이래야지 어플리케이션이 자동적으로 이 클래스를 찾아서 로드를 할 수 있습니다. MVC 기반의 Sencha Touch 앱의 파일 구조에 익숙하지 않으시더라고 간단히 배울 수 있습니다. Sencha Touch app은 단지 하나의 html 파일과 하나의 app.js 파일이 있고 model과 view 그리고 controller들이 있게 됩니다. 이 세 요소들은 app/model, app/view 그리고 app/controller 디렉토리에 있게 됩니다.

index.html
app.js
app/
    controller/
    model/
    view/
        MyView.js
       
여러분은 여러분이 만들고 싶은 만큼의 view를 만들 수 있고 이 파일을 app/view 디렉토리에 넣으시면 됩니다. 그리고 이 것을 app.js안에 specifying 하시면 이것들은 자동적으로 로드 될 겁니다.

//contents of app.js
Ext.application({
    name: 'MyApp',
    views: ['MyView'],

    launch: function() {
        Ext.create('MyApp.view.MyView');
    }
});

이 간단한 view naming convention을 따름으로서 우리는 애플리케이션 안에 우리가 만든 뷰 클래스들의 인스턴스를 쉽게 로드하고 생성할 수 있게 됩니다. 위에 있는 예제들이 이 convention을 따랐습니다. 어플리케이션의 launch 함수에서 MyView 클래스를 로드하고 인스턴스를 생성했습니다. Sencha Touch 의 MVC 앱에 대해 좀 더 많은 것을 알고 싶으시면 intro to apps guide를 보세요.