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


Sencha-SDK-Tools-iconSencha 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 以後,我們先來看一下產生的檔案長什麼樣子,如下:

sencha_dir

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

<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 對應的位置即可:

sencha_3

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

 sencha_4

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

sencha_5

Sencha App 加入自訂 CSS

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

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

sencha_6

來看看執行後的慘狀吧,如下畫面:

sencha_7

如何進入 Sencha?

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

sencha_8

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

sencha_9

系列文章

參考文件

Facebook 留言

廣告

樂樂童鞋