Site icon Soul & Shell Blog

Web App 行動開發 (6) – Sencha Touch 初探 Application

SJ

Sencha Touch Application 介紹

在 Sencha Touch 中，每一個 App 就是代表一個 Application，概念和 ExtJS 是一樣的。下圖是 Application 得基本架構：

由 Application 延伸出五項元素，Model, View, Controller 這三個顧名思義就是 MVC 架構，Sencha 採用了 ExtJS 4 的 MVC 架構。我們先來介紹一下這五種主要的 Application 構成元素：

Model - 資料模型

Model 用來定義資料結構，概念像是 Database (資料庫) 中的 Table Schema。實際在運作時會將 Model 實體化，Model 也能夠處理資料的轉換或驗證。

View - 畫面視圖

View 主要用來設計畫面的顯示，也是最接近使用者的 UI 實作。

Controller - 邏輯控制

Controller 負責業務邏輯，在 Sencha 中 View 收到使用者的操作後會發出 Event，每個 Component 所實作的 Event 可以在 API Document 中進行查詢。當 View 發出 Event 後， Controller 則會在接收到 Event 後進行動作，也是典型的 Event Listener Pattern 實作。

Store - 儲存體

Store 聽起來就比較陌生了，很多擁有 MVC 架構的 Framework 沒有這項概念，其實 Store 是用來承載實體化 Model 的容器。如果拿資料庫的概念來說明 Model Instance 就像 Row，Store 就像是 Table，但如果 Store 只是用來存放 Model 那也太無聊了，其實 Store 還有另一個主要的能力，就是 Data Binding。Store 能夠與 Data View 進行整合，自動將 Store 中輕易地將資料同步到 View 中。

Profile - 多重組態

這 Profile 中文實在不知道怎麼進行翻譯，Profile 實際的功能是針對不同型態的行動裝置進行差異處理的機制，像是平板 Pad 與手機 Phone 由於畫面大小不同，因此需要設計不同的介面。藉由 Application Profile 的設計可以將 MVC 進行切割，將差異性分別實作，而將同質性統一實作，這樣的架構在維護上是有幫助的。透過 Profile 的設計我們可以輕易地將 Pad 與 Phone App 進行整合，透過簡單的判斷就可以呈現不同的使用者介面。

基礎 Ext.application() 介紹

在我們利用 Sencha CMD 產生專案之後，我們可以看到 app.js 產生了最基本的程式碼，如下：

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'MyApp': 'app'
});
//</debug>

Ext.application({
    // App 名稱
    name: 'MyApp',

    requires: [
        'Ext.MessageBox'
    ],

    // 指定 View, Main 表示為 MyApp.view.Main 這個 Class
    views: ['Main'],

    launch: function() {
        // 關閉 Sencha 預設的讀取畫面
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));
    },

    onUpdated: function() {
        // 當 Production 更新時會執行
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

Ext.application 等同於 Ext.app.Application，在上面的程式中我們可以透過 views, controllers, models, stores, profiles 指定 Application 擁有的五大元素，而名稱可以使用縮寫，實際的 Class 會對應設定的 name 來載入，但我個人不是很喜歡這種設計，容易搞混。若是我們有設定並使用 Profiles 的機制，載入時就會針對 Profile 中的設定來載入MVC。當 Application 執行時，是遵照以下流程來啟動的：

    1. Controller#init functions called - 呼叫 Application 指定的 Controller 中的 init function
    2. Profile#launch function called - 呼叫被執行的 Profile 中的 launch function
    3. Application#launch function called - 呼叫 Application 中的 launch function
    4. Controller#launch functions called - 依序呼叫 Controller 中的 launch function

了解執行順序後未來在追蹤程式碼才會比較有概念，在 Sencha Touch 中所有的 Class 都是會被實體化的，這點我們也要注意。

系列文章

參考資料

Exit mobile version