블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total314,893
Today21
Yesterday23

[참고문서]

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



[Using Views in your Applications]

사용자의 관점에서 Application은 단순히 View의 집합으로 볼 수 있습니다. Model과 Controller도 많은 역할을 하지만, View는 사용자와 직접 인터렉션합니다. 이 가이드에서는 View를 생성하여 Application 생성하는 방법을 살펴 볼 것입니다.



[Using Existing Components]

View를 생성하는 가장 쉬운 방법은 이미 존재하는 Component로 Ext.create를 사용하는 것입니다. 예를 들어, 내부에 HTML이 포함된 간단한 Panel을 생성하려면 아래와 같이 할 수 있습니다.

Ext.create('Ext.Panel', {

    html: 'Welcome to my app',

    fullscreen: true

});

이 소스는 HTML이 포함된 Panel을 생성하여 화면에 fit 시킵니다. 이러한 방식으로 기존의 Component를 생성할 수도 있지만, 가장 좋은 방법은 서브클래스를 작성하여 생성하는 것입니다.

Ext.define('MyApp.view.Welcome', {

    extend: 'Ext.Panel',


    config: {

        html: 'Welcome to my app',

        fullscreen: true

    }

});


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

결과는 동일하지만, 어느때나 생성할 수 있는 새로운 Component를 가지게 되어습니다. 앱을 생성하는데 있어서 이러한 방법이 권장됩니다 - 기존 Component의 서브클래스를 작성하여 그 인스턴스를 생성합니다. 소스에서 바뀐 부분을 살펴봅시다.

  • Ext.define으로 기존 클래스를 상속하여 새로운 클래스를 생성할 수 있습니다. (이경우 Ext.Panel) 
  • 새로운 View 클래스는 MyApp.view.MyView와 같은 형식을 따릅니다. 물론 자유로운 네이밍이 가능하지만 규약을 따르기를 권장합니다.
  • 새로운 클래스의 config 객체 내부에 config 설정이 가능합니다.

Ext.Panel에서 가능한 config 옵션은 새로운 클래스의 config 블럭에서 명시하거나 새로운 객체 생성 시 명시 가능합니다. 서브클래스를 정의할 때 config 객체를 사용하도록 합니다.

예를 들어, Ext.create 호출 시 config만 추가한 코드를 봅시다.

Ext.define('MyApp.view.Welcome', {

    extend: 'Ext.Panel',


    config: {

        html: 'Welcome to my app',

        fullscreen: true

    }

});


Ext.create('MyApp.view.Welcome', {

    styleHtmlContent: true

});



[A Real World Example]

우리 트위터 앱의 View 클래스 입니다.

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라는 클래스를 생성하였고, Ext.Toolbar 클래스를 상속합니다. layout이나 items와 같은 Config 옵션을 넣어주었습니다.

이번에 두가지 새로운 옵션을 사용했습니다.

  • requires - items 배열에서 searchfield를 사용하고 있기 때문에, View에 Ext.field.Search 클래스가 필요함을 알려야 합니다. 동적 로딩 시스템이 xtype으로 명시한 클래스를 찾지 못할 때 의존성을 직접 정의해야 합니다.
  • xtype - 새로운 클래스에 xtype을 명시하면 config 객체를 통해서 쉽게 생성할 수 있습니다. (위에서 searchfield 생성하듯이)

이를 통해서 새로운 View의 인스턴스를 2가지 방법으로 생성할 수 있습니다.

//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'

        }

    ]

});



[Custom Configurations and Behavior]

Sencha Touch 2는 config 시스템을 활용하여 예측가능한 API를 만들고, 코드를 깔끔하고 테스트하기 쉽게 합니다. 직접 작성하는 클래스에서도 동일한 방식을 따르기를 권장합니다.

탭할 때 이미지에 대한 정보를 팝업으로 보여주는 이미지 뷰어를 생성하려고 한다고 해봅시다. 우리의 목적은 이미지 url, 타이틀, 설명, 탭했을 때 보여줄 타이틀, 설명을 설정할 수 있는 재사용 가능한 View를 생성하는 것입니다.

이미지 출력 관련된 작업은 Ext.Img 컴포넌트를 사용하여 할 수 있습니다.

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

});

두가지 config를 추가하였습니다 - title과 description - 둘 다 null로 시작합니다. 새로운 클래스에 대한 객체를 생성할 때 다른 config를 설정하듯이 title과 description을 설정합니다.

새로운 동작은 initialize와 onTap 함수에서 발생합니다. initialize 함수는 컴포넌트가 객체화 될 때 호출되기때문에, 이벤트 리스너 설정과 같은 설정을 하기에 좋은 위치입니다. 가장 먼저 한 것은 this.callParent(arguments)를 호출하여 상위 클래서의 initialize 함수를 호출 한 것입니다. 이것은 매우 중요하며, 이 라인을 생략할 경우 컴포넌트가 정상적으로 동작하지 않을 수 있습니다.

callParent 이후, 탭 리스너를 컴포넌트의 엘리먼트에 추가하였습니다. 엘리먼트가 탭 될 때 onTap 함수가 호출 될 것입니다. Sencha Touch 2의 모든 컴포넌트는 element 속성을 가지고 있습니다. DOM 오브젝트에서 이벤트 감지, 스타일 적용 등 Ext.dom.Element에 어떠한 동작을 하기 위해서 element 속성을 사용할 수 있습니다.

onTap 함수 자체는 아주 단순합니다. Ext.Msg.alert를 사용하여 이미지에 대한 정보를 팝업으로 보여줄 뿐입니다. 새로운 config 2개를 주목합시다 - title 과 description - 둘 다 getter 함수(getTitle, getDescription)와 setter 함수(setTitle, setDescription)를 갖게 됩니다.



[Advanced Configurations]

클래스에 새로운 config를 생성할 때, getter와 setter 함수가 생성됩니다. 'border'라는 config에 대해서 자동으로 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가 설정되거나 변경될 때 내부적으로 호출됩니다. 입력값을 변형하기 위한 코드가 위치하기 좋은 위치입니다. 이 경우 border width를 전달받아 CSS 문자열로 리턴합니다.

View의 border를 10으로 set 할 때, applyBorder 함수는 '10px solid red'로 값을 변형합니다. apply 함수는 전적으로 옵션이지만 반드시 값을 리턴해야하며 그렇지 않을 때는 아무 동작도 발생하지 않을 것입니다.

updateBorder 함수는 applyBorder 함수가 값을 변형한 뒤에 호출되며, DOM을 수정하거나 AJAX 요청을 보내는 등의 동작을 하는데 사용됩니다. 위의 경우에는 setStyle을 사용하여 View 엘리먼트의 border 스타일을 업데이트 하였습니다. setBorder가 호출될 때 DOM이 새로운 스타일을 즉시 적용하게 됩니다.



[Using in MVC]

코드가 잘 구성되어 재사용성을 높이기 위해 Sencha Touch 앱이 MVC 규약을 따르기를 권장합니다. MVC에서 "V"로써, View 또한 이런 구조에 적합합니다. View에 관련된 규약은 매우 간단하며 위에서 사용한 것과 같은 네이밍 규약을 따릅니다.

MyApp.view.MyView 클래스는 app/view/MyView.js 파일 내부에 정의되어야 합니다 - 이것은 Application이 클래스를 자동으로 찾아서 로딩할 수 있도록 합니다. Sencha Touch 앱의 MVC 기반 파일 구조에 익숙하지 않아도 이것은 아주 단순합니다 - 앱은 단순히 html 파일, app.js 그리고 Model, View, Controller의 집합입니다.

index.html

app.js

app/

    controller/

    model/

    view/

        MyView.js

View는 원하는 만큼 생성하여 app/view 디렉토리에 넣을 수 있습니다. app.js에 Application View를 명시함으로써 자동으로 로드되게 할 수 있습니다.

//contents of app.js

Ext.application({

    name: 'MyApp',

    views: ['MyView'],


    launch: function() {

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

    }

});

간단한 네이밍 규칙을 따름으로써 View 클래스를 쉽게 로드하고 객체를 생성할 수 있습니다. 위의 예제는 정확히 그렇습니다 - MyView 클래스를 로드하여 launch 함수 내부에서 객체를 생성합니다. Sencha Touch에서 MVC 앱 작성에 대해서 더 찾아보기 위해서는 intro to apps guide를 참고하기 바랍니다.

Posted by ssun++

댓글을 달아 주세요

  1. 2012.12.03 22:27  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2013.01.29 14:07  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

최근에 달린 댓글

최근에 받은 트랙백

글 보관함