fbpx

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

Sencha-SDK-Tools-iconDevice 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'));
    }
});

執行結果如下圖:

sencha-profile

上面執行的過程中我們可以看到 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 的能力,可以大幅減少撰寫重複的程式碼,算是不錯的選擇。

系列文章

參考文件

 

發佈留言