DOC 3. [Overview] Upgrading from Sencha Touch 1.x to 2.x

원문 : http://docs.sencha.com/touch/2-0/#!/guide/upgrade_1_to_2

번역 : 정건우 [Github:NangChun]

Sencha Touch 2 brings a number of refinements to the framework. Some of these changes require you to update parts of your application's code - this guide takes you through the changes you'll need to make.

In addition to the guide, Sencha Touch 2 comes with a backwards-compatibility build that makes the migration process easier. Note that this build does not automatically guarantee your 1.x app will work out of the box. Wherever possible, the compatibility build will figure out what your 1.x app code is trying to do and route it through to the 2.x API. Whenever it does this, the compat build will log a warning to the console telling you what you need to update.

As of Sencha Touch3 PR4 the backwards-compatibility support is baked into all builds, from beta 1 onwards you will need to use a different build to keep the compatibility intact while you migrate your app. Following the steps below and then correcting any warnings the compatibility layer informs you about should result in an application that will run on Sencha Touch 2.x.

센차터치 1.x에서 2.x로의 업그레이드

센차터치2는 프레임워크 로부터 다수의 개선된 것들을 가져옵니다. 이러한 변화 중 일부는 귀하의 응용 프로그램의 코드의 일부를 업데이트 하도록 요구합니다. - 이 가이드는 변환하기 위해 필요한 내용을 담고 있습니다.

가이드 이외에도 보다쉽게 센차터치 2 이전 프로세스가 하위 호환성 빌드와 함께 제공됩니다. 지속적으로 외부에서 이 빌드가 당신의 1.0 앱의 동작을 보장할 수 없음을 주의하십시요. 가능하다면, 호환성 빌드는 1.0 앱 코드가 2.0 API 로 통하는 경로를 알아내려 노력합니다. 언제든지, 배치된 빌드가 콘솔로 경고를 기록하며 언제 업데이트가 필요한지 말해줍니다.

센차터치 3 PR4 기준으로 하위 호환성 지원이 베타 1 부터 모든 빌드를 완성하고 있으며, 당신의 앱을 이전하는 동안 빌드를 다르게 사용하여 호환성을 그대로 유지 합니다. 다음단계에 따라서 그때마다 호환 레이어로 센차터치 2.x를 실행할 응용프로그램의 결과에 대해 알려주며 어떤 경고든 해결합니다.

Class System

When it comes to migrating your app, the biggest change you'll need to make is how classes are defined. Sencha Touch 2 uses the upgraded class system from Ext JS 4, which brings powerful new capabilities like mixins, dynamic loading and the config system.

In Sencha Touch 1.x, there were 2 main ways of defining classes - using Ext.extend or using one of the MVC-specific convenience functions like regModel and regController. In Sencha Touch 2, all classes are defined the same way using Ext.define. Let's take this 1.x class and see how we would migrate it to 2.x:

Geo.views.BillSummary = Ext.extend(Ext.Panel, {
    scroll: 'vertical',
    html: "Loading...",
    styleHtmlContent: true
    initComponent: function() {
        this.tpl = Ext.XTemplate.from('billsummary');
        Geo.views.BillSummary.superclass.initComponent.call(this);
    },

    /**
     * Get the billSummary and update the contents of the panel.
     */
    getBill: function(bill) {        
        Geo.CongressService.getBillSummary({
            bill: bill
        }, this.onBillSummaryResponse, this);
    },

    // private
    onBillSummaryResponse: function(billSummary) {
        if (Ext.isArray(billSummary.Paragraph)) {
            this.update(billSummary);
        } else {
            this.update('No Bill Summary Available');
        }

    }
});

In 2.x, we would instead write this:

Ext.define('Geo.view.BillSummary', {
    extend: 'Ext.Panel',

    config: {
        scroll: 'vertical',
        html: 'Loading...',
        styleHtmlContent: true
    },

    initialize: function() {
        this.callParent(arguments);

        this.tpl = Ext.Template.from('billsummary');
    },

    /**
     * Get the billSummary and update the contents of the panel.
     */
    getBill: function(bill) {        
        Geo.CongressService.getBillSummary({
            bill: bill
        }, this.onBillSummaryResponse, this);
    },

    // private
    onBillSummaryResponse: function(billSummary) {
        if (Ext.isArray(billSummary.Paragraph)) {
            this.setHtml(billSummary);
        } else {
            this.setHtml('No Bill Summary Available');
        }
    }
});

The first thing to notice is that we've swapped out Ext.extend for Ext.define. All of the old constituent parts are still present, we've just shuffled them around to use the new syntax. Notice that in 2.x all of the class names are string based. This is what enables the dynamic loading system to automatically load those classes onto the page if they are not already present. See the class system guide for more details.

The next thing we did is to move all of the configuration options into a config object. The configuration options for each class can be found in the its class documentation. Anything found in the configuration section of a class should be placed into the config object of the class when defining it.

The config system provides some key benefits, primarily a guarantee of API consistency. For example, the html config option guarantees that we can call getHtml and setHtml at any time, removing the guesswork from figuring out which functions to call. Every single config option has getter and setter functions that follow the same pattern as getHtml and setHtml. We use this to our advantage in the onBillSummaryResponse function, where we replaced the old 'update' function with the clearer setHtml function.

Finally, we replaced initComponent with initialize. In 1.x, initComponent was only available on Component classes, which excludes all of the other classes like Models, Controllers and utilities. In 2.x, every class has an initialize function that you can implement if you want some logic to be performed on instantiation. The other detail to note here is that you no longer need the ugly Geo.views.BillSummary.superclass.initComponent.call(this); - instead you can always call this.callParent(arguments) to call the superclass function.

클래스 시스템

앱을 이전해오게되면, 커다란 변화로 인해 클래스가 정의된 방식에 대한 확인이 필요할 것 입니다. 센차터치 2는 EXT 4 로부터의 업그래이드된 클래스 시스템, mixins와 같은 새롭고 강력한 기능을 기능을 제공하는, 동적로딩 및 config 시스템을 사용합니다.

센차터치1에서, 2가지 방법으로 클래스 정의를 했었습니다 - Ext.extend이나 regModel 및 regController 같은 MVC 고유의 편리한 기능 중 하나를 사용합니다. 센차터치 2에서는, 모든 클래스는 Ext.define을 사용하는 것과 동일한 방식으로 정의됩니다. 클래스 1.x과 2.x로 어떻게 이주할 것 인지를 보십시오:

Geo.views.BillSummary = Ext.extend(Ext.Panel, {
    scroll: 'vertical',
    html: "Loading...",
    styleHtmlContent: true
    initComponent: function() {
        this.tpl = Ext.XTemplate.from('billsummary');
        Geo.views.BillSummary.superclass.initComponent.call(this);
    },

    /**
     *  billSummary를 가져와 패널의 내용을 업데이트 합니다.
     */
    getBill: function(bill) {        
        Geo.CongressService.getBillSummary({
            bill: bill
        }, this.onBillSummaryResponse, this);
    },

    // private
    onBillSummaryResponse: function(billSummary) {
        if (Ext.isArray(billSummary.Paragraph)) {
            this.update(billSummary);
        } else {
            this.update('No Bill Summary Available');
        }

    }
});

2.x에선, 이렇게 대신 작성합니다.

Ext.define('Geo.view.BillSummary', {
    extend: 'Ext.Panel',

    config: {
        scroll: 'vertical',
        html: 'Loading...',
        styleHtmlContent: true
    },

    initialize: function() {
        this.callParent(arguments);

        this.tpl = Ext.Template.from('billsummary');
    },

    /**
     *  billSummary를 가져와 패널의 내용을 업데이트 합니다.
     */
    getBill: function(bill) {        
        Geo.CongressService.getBillSummary({
            bill: bill
        }, this.onBillSummaryResponse, this);
    },

    // private
    onBillSummaryResponse: function(billSummary) {
        if (Ext.isArray(billSummary.Paragraph)) {
            this.setHtml(billSummary);
        } else {
            this.setHtml('No Bill Summary Available');
        }
    }
});

첫번째로 주의할 부분은 Ext.define을 위해 Ext.extend를 바꾼 적이 있다는 것입니다. 여전히 예전 구성 부분이 모두 존재합니다, 단지 새로운 문법을 여기저기 섞어 사용하였습니다. 2.x에서 클래스 이름 모두가 문자열을 기반으로 하는 것을 확인할 수 있습니다. 해당 클래스가 그때까지 존재하지 않을 경우 페이지에 자동으로 로드되도록 동적 로딩 시스템을 활성화 시킵니다. 자세한 내용은 클래스 시스템 가이드를 참조하십시요.

그 다음은 설정객체로 구성옵션을 모두 이동 하는 것 입니다. 각 클래스에 대한 구성 옵션은 클래스 설명서에서 찾을 수 있습니다. 정의할 때 클래스의 구성 섹션에 있는 것은 클래스의 구성 개체에 배치해야합니다. 정의할 때 클래스의 구성 조각에 있는 것들은 클래스의 구성 개체에 배치해야 합니다.

구성 시스템은 몇 가지 주요 이점을 제공, 주로 API 일관성을 보장합니다. 예를들어, html 구성옵션은 언제나 getHtml과 setHtml를 호출할 수 있도록 보장하며, 어림잡아 호출로 어느 함수인지 알아내어 제외합니다. 모든 단일 구성 옵션은 getHtml과 setHtml 같은 패턴을 따르는 getter 및 setter 함수를 가집니다. onBillSummaryResponse 함수에서 이익을 위해 이것을 사용하여, 그때 클리어 함수와 예전 '업데이트'함수를 대체하였습니다.

마지막으로, 초기화와 함께 initComponent를 교체 하였습니다.. 1.x에서, initComponent은 컴포넌트 클래스에서만 가능했습니다, 이것은 모델, 컨트롤러 및 유틸리티와 같은 다른 클래스는 모두 제외됩니다. 2.x에서 각 클래스는 어떤 로직이 인스턴스에서 수행하기를 원하는 경우 구현할 수있는 초기화 기능을 가지고 있습니다. 여기서 주의해야할 다른 세부사항은 더 이상 흉하게 필요 없다는 점입니다 Geo.views.BillSummary.superclass.initComponent.call(this); - 슈퍼함수 호출로 대신 언제든지 this.callParent(arguments) 호출할 수 있습니다

MVC Migration

The MVC architecture in Sencha Touch 2 is a refinement on the approach from Sencha Touch 1. Most of the concepts are the same, but some of the syntax has been improved to make the API more expressive, and your code more readable and testable.

Models

As with all of the other classes in Sencha Touch 2, Models and the rest of the data package now expect their configurations to be placed into a config block. Sencha Touch 2 also unifies the way you define all of your application's classes: Ext.regModel is no longer needed - instead a Model is just defined like any other class. Migrating your Models is very simple - where once you had a Model like this:

Ext.regModel('MyApp.model.User', {
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int'},
        {name: 'alive', type: 'boolean', defaultValue: true}
    ],

    validations: [
        {type: 'presence', field: 'age'},
        {type: 'length',   field: 'name', min: 2}
    ],
    
    sayName: function() {
        alert(this.get('name'));
    }
});

In Sencha Touch 2 the same Model would look like this:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    
    config: {
        fields: [
            {name: 'name',  type: 'string'},
            {name: 'age',   type: 'int'},
            {name: 'alive', type: 'boolean', defaultValue: true}
        ],

        validations: [
            {type: 'presence', field: 'age'},
            {type: 'length',   field: 'name', min: 2}
        ]
    },
    
    sayName: function() {
        alert(this.get('name'));
    }
});

A Model is generally migrated in 4 steps:

1. Replace Ext.regModel with Ext.define
2. Make sure your new Model class extends Ext.data.Model
3. Move all of your Model's configurations into its config block
4. Leave any custom functions (like sayName above) outside of the config block

Views

Aside from migrating to the new class system syntax, view migration is quite simple. The main thing to keep in mind is the convention around view class names. In Sencha Touch 2 and onward we recommend that your view class names follow the pattern MyApp.view.SomeViewName. Note that the 'view' is singular - this enables the class system to automatically load the view class from the file app/view/SomeViewName.js.

Application

When it comes to the Ext.application definition, you can keep most of the syntax from your 1.x app:

Ext.application({
    name: 'MyApp',
    
    icon: 'resources/images/logo.png',
    
    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

The only thing new here is that we're using Ext.create to instantiate MyApp.view.Main, which is our app's main screen.

In addition to this change though is a slight change in approach when it comes to loading the models, views, controllers and stores your application needs. In 1.x, it was common to define all of your controllers inside the Ext.application block, along with some of your models, views and stores. The rest of the dependencies could be scattered throughout your application, making it difficult to easily understand exactly what the app is composed of.

In Sencha Touch 2 we encourage you to define all of your application's dependencies inside the Ext.application block instead of placing some of them inside Controllers. An example might look like this:

Ext.application({
    name: 'MyApp',
    
    icon: 'resources/images/logo.png',
    
    models: ['User', 'Group'],
    controllers: ['Users', 'Login'],
    views: ['Main', 'Users'],
    stores: ['Users'],
    
    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

Controllers

Just like with Model, Sencha Touch 2 expects your Controllers to be defined like any other class, so the Ext.regController function is deprecated. In 1.x we might have a controller like this:

Ext.regController("searches", {
    showSomething: function() {
        alert('something');
    }
});

Which in 2.x becomes:

Ext.define('MyApp.controller.Searches', {
    extend: 'Ext.app.Controller',
    
    showSomething: function() {
        alert('something');
    }
});

As mentioned above, if your 1.x controller defines additional model, view or store dependencies you should move these into the Application instead. The compatibility build will still attempt to load those dependencies but the non-compat build will not.

Routes

In Sencha Touch 1.x, a Controller was largely just a collection of functions that could be dispatched to externally. Often this would mean that an Application would call Ext.dispatch, specifying the Controller name, which function to call and which arguments to pass in to the function. Other times, the dispatching would be automatic, triggered by a change in the url picked up by the Router.

In 2.x, the Controller becomes a lot more proactive, actively registering routes that it cares about inside its config block:

Ext.define('MyApp.controller.Searches', {
    config: {
        routes: {
            'search/:query': 'doSearch'
        }
    },
    
    doSearch: function(query) {
        alert('searching for ' + query);
    }
});

This bypasses the need for a separate routes file and allows the Controller to indicate that whenever the page url matches 'search/:query', the doSearch function will be called with the query. For example, if the page url is currently http://myapp.com/#searches/abc123, doSearch will be called with 'abc123'. If the page url later becomes '#searches/sencha', doSearch is called again with 'sencha'.

New Capabilities

Controllers gained a raft of new capabilities in Sencha Touch 2, the most powerful of which are refs and control. For more information check out the controllers guide.

MVC 이전

센차터치2의 MVC 아키텍처는 센차터치1 부터 접근하여 개선한 것입니다. 개념의 대부분은 동일하지만 구문의 일부 API가 더 표현되게 개선하고, 코드를 읽기 및 테스트할 수 있도록 되었습니다.

모델

센차터치2 에선 다른 클래스의 경우와 마찬가지로, 모델 및 데이터 패키지의 나머지는 이제 자신의 구성을 구성 블록으로 배치될 예정입니다. 센차터치2는 또한 모든 응용 프로그램의 클래스를 정의하는 방법을 통합: Ext.regModel은 더이상 필요하지 않습니다 - 대신 모델은 단지 다른 클래스처럼 정의됩니다. 모델을 이전하는것은 매우 간단합니다 - 한때 이 같은 모델을 가졌습니다 :

Ext.regModel('MyApp.model.User', {
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int'},
        {name: 'alive', type: 'boolean', defaultValue: true}
    ],

    validations: [
        {type: 'presence', field: 'age'},
        {type: 'length',   field: 'name', min: 2}
    ],
    
    sayName: function() {
        alert(this.get('name'));
    }
});

센차터치2 같은 모델은 이렇게 보일 것 입니다 :

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    
    config: {
        fields: [
            {name: 'name',  type: 'string'},
            {name: 'age',   type: 'int'},
            {name: 'alive', type: 'boolean', defaultValue: true}
        ],

        validations: [
            {type: 'presence', field: 'age'},
            {type: 'length',   field: 'name', min: 2}
        ]
    },
    
    sayName: function() {
        alert(this.get('name'));
    }
});

모델은 일반적으로 4단계로 이전 됩니다:

1. Ext.define과 Ext.regModel 교체
2. 새 모델 클래스 Ext.data.Model를 확장했는지 확인
3. 그 구성 블록으로 모델의 구성을 모두 이동
4. 구성 블록 외부의 사용자 정의 함수는 (위의 sayName 등) 남겨둡니다

뷰

이외에도 새 클래스 시스템 문법 이전에서 뷰 이전은 아주 간단합니다. 주의해야 할 중요한 것은 뷰 클래스 주위의 이름 규칙입니다. Sencha 터치 2 이후에서는 여러분의 뷰 클래스 이름 패턴 MyApp.view.SomeViewName를 수행하는 것이 좋습니다.'보기'가 단수형임을주의 - 이것은 자동으로 파일을 응용 프로그램 /보기 / SomeViewName.js에서 뷰 클래스를 로드하는 클래스 시스템을 가능하게 합니다.

애플리케이션

Ext.application 정의로 오면, 1.x 응용 프로그램 에서의 문법을 대부분 유지할 수 있습니다 :

Ext.application({
    name: 'MyApp',
    
    icon: 'resources/images/logo.png',
    
    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

여기서 새로운 것은, MyApp.view.Main 인스턴스를 Ext.create를 사용하고 있다는 것입니다, 이것은 앱의 기본 화면입니다.

모델, 뷰, 컨트롤러 및 저장된 어플리케이션 요구 사항을 읽어 오게 하여 이 변경 사항 이외에지만 접근 방법에서 가벼운 변경입니다. 1.x에서 당신의 모델, 뷰 및 점포의 * 일부 *와 함께 Ext.application 블록 안에 컨트롤러를 모두 정의하는 것이 일반적 이었습니다. 종속적으로 나머지는 응용 프로그램 곳곳에 퍼져있다 던가, 어렵게 응용 프로그램이 구성되어 정확하고 쉽게 이해하기 위해 만듭니다.

센차터치2에서 컨트롤러 내부에 그 중 일부를 삽입하는 대신 Ext.application 블록 내부의 응용 프로그램의 종속성으로 모두 정의하는 것이 좋습니다. 예제는 다음과 같습니다 :

Ext.application({
    name: 'MyApp',
    
    icon: 'resources/images/logo.png',
    
    models: ['User', 'Group'],
    controllers: ['Users', 'Login'],
    views: ['Main', 'Users'],
    stores: ['Users'],
    
    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

컨트롤러

그냥 모델에서와 마찬가지로 Sencha 터치 2 귀하의 컨트롤러가 다른 클래스처럼 정의된 것으로 예상, Ext.regController 기능이 중지되도록. 1.x에서 이런 컨트롤러를 가지고 있습니다 :

Ext.regController("searches", {
    showSomething: function() {
        alert('something');
    }
});

2.x에 알맞는 쪽입니다 :

Ext.define('MyApp.controller.Searches', {
    extend: 'Ext.app.Controller',
    
    showSomething: function() {
        alert('something');
    }
});

마찬가지로 앞서 언급한, 1.x에서 컨트롤러가 추가 모델, 뷰 또는 저장 종속성으로 정의하는 경우 하는 대신 응용 프로그램으로 이들을 이동해야합니다.

경로

센차터치 1.x에서에서 컨트롤러는 대개 단지 외부적으로 파견 수 있는 기능의 컬렉션 이었습니다. 종종 이것은 응용 프로그램 Ext.dispatch 호출한다는 뜻입니다, 컨트롤러 이름을 지정, 함수에 인자를 전달하고 함수를 호출합니다. 때로는 자동으로 파견합니다, 경로에서 포착된 url의 변화에서 계기가 됩니다.

2.x에서 컨트롤러는 훨씬 더 적극적으로 되며, 구성 블록 내부에 대해 관심이 있는지 적극적으로 등록하는 경로 입니다:

Ext.define('MyApp.controller.Searches', {
    config: {
        routes: {
            'search/:query': 'doSearch'
        }
    },
    
    doSearch: function(query) {
        alert('searching for ' + query);
    }
});

별도의 경로 파일에 대한 필요성을 무시하고 컨트롤러가 나타낼 수 있는 그 때마다 페이지 URL이 일치 '검색 / 쿼리', doSearch은 'abc123'로 불리는 것입니다. 페이지 URL은 나중에 '# searches / sencha ,'doSearch '는 sencha'로 다시 호출됩니다.

새로운 기능

센차터치2 에서 다수의 새로운 기능의 컨트롤러를 익혔으며, 가장 강력한 참조들 및 컨트롤 입니다. 더 자세한 정보는 컨트롤러 가이드 를 확인하세요.

Further Help

Once you've migrated everything you can based on this guide and updated all of your code so that there are no more console warnings, your app should be mostly functional. For any specific problems the best place to get help is on the Sencha Touch 2 Forums.

더 자세한 도움말

일단, 이 가이드를 기반으로 더 이상 콘솔 경고가 없도록 업데이트할 수 있는 코드를 모두 이전했습니다, 앱은 대부분 기능적이어야합니다. 특정 문제에 대한 도움말을 얻을 수 있는 가장 좋은 장소는 센차터치2 포럼 를 참조하십시오.