Site icon Soul & Shell Blog

Web App 行動開發 (7) – Sencha Touch Device Profile 實作教學

SJ
sencha

Device Profile 介紹

在前一個章節介紹的 Sencha Touch Application 中，已經大概介紹 Device Profile 的作用，Profile 主要是提供一個判斷 Device 的機制讓我們分別實作不同的 MVC 架構。接下來我們會介紹 Profile 的機制與實際的使用教學。

就如之前的介紹，Profile 可以用來區分各種不同的裝置，藉此載入不同的 MVC 設計，要設定 Profile 的方法很簡單，我們只需要在 app.js 檔案中的 Ext.application 加入 profile 設定即可，如下：

Ext.application({
    name: 'MyApp',

    profiles: ['Phone', 'Tablet']

    launch: function() {
        console.log('Application launch.');
    }
});

當有設定 profile 這個設定時，Application 在啟動時就會去尋找 MyApp.profile.Phone 與 MyApp.profile.Tablet 這兩個 Class，並且依序 invoke (呼叫) isActive Function 當回傳 true 時就表示使用這一個 Device Profile，這時就會讓 profile 中設定的 MVC 參數生效，並且 invoke launch Function。實作 Profile 必須繼承 Ext.app.Profile，使用方法如下：

/**
 * 檔案位置：{PROJECT}/app/profile/Phone.js
 */
Ext.define('MyApp.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        name: 'Phone',
        views: ['Main'],  // 指定要載入的 Views
        controllers: ['Main'] // 指定要載入的 Controllers
    },

    isActive: function() {
        // 判斷邏輯
        return Ext.os.is('Phone');
    },

    launch: function () {
        console.log('Profile launch. (Phone)');
        Ext.Viewport.add(Ext.create('MyApp.view.phone.Main'));
    }
});

偷偷測試一下，其實在 views 與 controllers 中也可使用完整的 Class Name，程式碼如下：

/**
 * 檔案位置：{PROJECT}/app/profile/Tablet.js
 */
Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        name: 'Tablet',
        views: ['MyApp.view.tablet.Main'],  // 指定要載入的 Views
        controllers: ['MyApp.controller.tablet.Main'] // 指定要載入的 Controllers
    },

    isActive: function() {
        // 判斷邏輯
        return !Ext.os.is('Phone');
    },

    launch: function () {
        console.log('Profile launch. (Tablet)');
        Ext.Viewport.add(Ext.create('MyApp.view.tablet.Main'));
    }
});

執行結果如下圖：

上面執行的過程中我們可以看到 Profile launch 是最先被呼叫的，接下來才是 Application launch 與 Controller launch。在上面這個簡單的範例中，我們定義了兩個 View 分別處理 Phone 與  Tablet 的畫面，然而也分別定義了不同的 Controller。範例程式碼如下：

Phone 使用的 View 與 Controller

/**
 * 檔案位置：{PROJECT}/app/view/phone/Main.js
 */
Ext.define('MyApp.view.phone.Main', {
    extend: 'Ext.Panel',
    config: {
        html: 'MyApp.view.phone.Main'
    }
});
/**
 * 檔案位置：{PROJECT}/app/controller/phone/Main.js
 */
Ext.define('MyApp.controller.phone.Main', {
    extend: 'Ext.app.Controller',
	launch: function () {
		console.log('Controller launch. (Phone)');
	}
});

 Tablet 使用的 View 與 Controller

/**
 * 檔案位置：{PROJECT}/app/view/tablet/Main.js
 */
Ext.define('MyApp.view.tablet.Main', {
    extend: 'Ext.Panel',
    config: {
        html: 'MyApp.view.tablet.Main'
    }
});
/**
 * 檔案位置：{PROJECT}/app/controller/tablet/Main.js
 */
Ext.define('MyApp.controller.tablet.Main', {
    extend: 'Ext.app.Controller',
	launch: function () {
		console.log('Controller launch. (Tablet)');
	}
});

其實每一個 View 都對應一個 Controller 也不是決定必要的作法，View 的 Controller 是可以共用的，後面的章節會介紹 MVC 架構，所以這裡只是先體驗一下。利用 Device Profile 實作不同裝置的 UI 區分蠻方便的，加上多利用 Ext.extend 的能力，可以大幅減少撰寫重複的程式碼，算是不錯的選擇。

系列文章

參考文件

 

Exit mobile version