Web App 行動開發 (4) – Sencha Touch 基本架構介紹

12 年前

Sencha Touch 介紹

Sencha Touch 是基於 Ext.JS 架構下的行動開發 Framework，其主要在 User Interface (使用者介面) 下了不少功夫，在核心上運用了 JavaScript + CSS3 + HTML5 等技術達成。除了擁有跨平台的特性之外，Sencha 也發展了許多附加產品（部分需要付費），像是 Sencha CMD, Touch Charts, Sencha Architect, Sencha Animator 等等。

Sencha Touch 核心函式庫是以開放原始碼 (GPLv3 License) 進行散佈。如果有購買官方收費的服務可以優先取得最新版的 Released，通常免費的版本會比較慢釋出。

Sencha Project 結構介紹

接續上一篇文章「Sencha Touch 開發環境建置」產生 Sencha Project 以後，我們先來看一下產生的檔案長什麼樣子，如下：

來介紹一下每個檔案與資料夾的功能：

<DIR> /.sencha

用來存放 Sencha Touch 的專案設定檔，其中的檔案 sencha.cfg 設定了專案編譯時需要用到的參數，後面的章節會再介紹為什麼 HTML 與 JavaScript 還需要編譯動作。基本上這個資料夾的檔案不太需要更動，除非有更改 Sencha SDK 的位置或設定。

<DIR> /app

這裡存放了 Sencha CMD 自動產生的 Application 程式碼，其中包含了基本的資料夾結構，未來我們轉寫的 js 檔都會放在這裡。

<DIR> /resources

Resources 用來存放素材檔案，專案建立後會在這裡放置 Sencha 需要用到的 CSS 與一些打包封裝需要用到的 App Icon (圖示) 與 Splash (啟動畫面) 等等。基本上這個目錄在打包的策略上是會直接複製到 App 中，未來如果有一些圖片或 CSS 需要新增都可以放在這裡。

<DIR> /touch

Sencha Touch SDK 目錄（檔案非常多），裡面放了 Ext 與 Sencha 所有的核心函式與檔案，打包時會自動抽取出需要的程式進行合併封裝，不會讓行動裝置開啟太多檔案。

<FILE> /app.js

程式的進入點，主要載入執行 Ext.Loader 與 Ext.application 這兩個類別。Ext.Loader 實作了 Class Auto Loader 可用來自動載入需要用到的 js 檔案，Ext.application 則是整的 App 的啟動器 (Launcher)。

<FILE> /app.json

App 的設定檔，是很重要的一支檔案，主要設定 App 會用到的資源與編譯參數。後面會介紹如何加入自行定義的 CSS 與 JavaScript。

<FILE> /build.xml

看到 build.xml 這支檔案就會聯想到 Java ANT (就是 Java 底下的 makefile)，沒錯這確實可以透過 ANT 進行編譯，這是 Sencha CMD 3.x 才出現的檔案，之前使用的 Sencha Tools 2.x 並沒有，但我沒有測試過。

<FILE> /index.html

index.html !? 是啊，沒什麼好介紹的，開啟這支檔案就是執行 Web App 囉。其中預設產生的 index.html 只會載入 microloader，剩下的都交給 Framework 進行管理。因次除非有特別需求，不然我們不需要更改這支檔案，避免脫離 Sencha Framework 的掌控與架構。

<FILE> /packager.json

打包封裝為 Package 需要的設定檔，在 Sencha Touch 之後的版本都可以透過 Sencha CMD 來 Cross Compile 為目的封裝檔，像是 Apple 的 IPA 或 Android APK 等等。

了解目錄結構後，接下來我們介紹一下如何修改 app.json 加入我們自定的 JS 與 CSS。

Sencha App 加入自訂 JavsScript

在使用 Sencha Framework 時難免會想要使用其他第三方 JavaScript Library，像我剛開始使用 Sencha 時仍舊對 jQuery 念念不忘，有些還學不會的功能也會偷偷用 jQuery 來實現。那我們就來介紹一下如何載入第三方 JavaScript，還記得前面介紹的 app.json 嗎？當 index.html 載入 Loader 時就會讀取 app.json 這一支檔案並且進行解析，如果我們要加入其他第三方 JS 就必須從這個檔案 (app.js) 下手，然而直接在 index.html 用 <script> TAG 載入是比較不好的方式，因為脫離了 Sencha Touch 的控管，而且在打包封裝的時候就不會進行合併與程式碼最小化。以下示範透過修改 app.json 來加入 jQuery，jQuery 檔案請自行到官方網站下載，並且存放在專案資料夾 /lib/jquery-1.9.1.min.js 對應的位置即可：

上述的程式碼，path 為指向 App 根目錄，bundle: true 表示優先載入的意思，會在 Application 開始之前就載入這隻 JavaScript，為了證實 jQuery 有沒有被正確載入，我們在 App Launcher 將 jQuery 操作符 $ 列印出來，如下：

重新載入 Sencha App 之後我們就可以在「主控台」看到被我們印出的 jQuery，畫面如下：

Sencha App 加入自訂 CSS

使用獨立的 CSS 檔案管理樣式是比較好的開發手法。如同上一單元的教學，若是要加入其他自訂的 CSS 也同樣是透過修改 app.json 來達成，我們先建立一支測試的 CSS 檔 (儲存於 /resources/css/my-css.css) 將所有的 DOM 加上醜陋的邊框，CSS 程式碼如下：

/* 套用 CSS 將所有元素加上白痴的黑框線 */
* {
    border: solid 1px #000;
}

有了 CSS File 當然少不了要修改 app.json 這個重要的設定檔，加入 CSS 的方法如下：

來看看執行後的慘狀吧，如下畫面：

如何進入 Sencha？

最後我們補充介紹一下要如何學習這個 Framework，通常我在接觸一個新的 Framework 或 Library 之前，都先大致閱讀一下 API 了解有哪些方法功能，要用到的時候才可以找，避免自行實作。Sencha Touch 的文件都是撰寫在原始碼中，透過 jsDuck 自動產生文件 API，Sencha 官方的 API Docs 畫面如下，查詢時可以直接在右上角的搜尋視窗輸入關鍵字。

除了 API Docs 之外，官方網站還提供了一些範例程式碼，像是 Kitchen Skin 可以快速地瀏覽 Sencha 提供的 UI，畫面如下：