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 設定即可,如下:

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

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

執行結果如下圖:

sencha-profile

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

Phone 使用的 View 與 Controller

 Tablet 使用的 View 與 Controller

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

系列文章

參考文件