PhoneGap + Sencha Touch Quickstart (Part II)

上一篇講完了如何建立 PhoneGap 專案並且 run 在模擬器上，再來要講 Sencha Touch 這個 mobile web framework

Part II: 建立 Sencha Touch 專案

1. 下載 Sencha Touch SDK 與 Sencha Cmd

SDK 有分兩種版本 GPL 與 Commercial，目前最新版本為 2.2.1 在此下載
解壓縮開之後可以得到 touch-2.2.1 資料夾

Sencha Cmd 有 Mac 專屬版本，最新版本為 3.1.2 在此下載
下載後是個安裝檔，請指定安裝路徑。安裝後請把 sencha 執行檔的路徑加到環境變數 $PATH

試一下是否 work

$ sencha help | head -n 1
Sencha Cmd v3.1.2.342

2. 建立專案

利用 Sencha CMD 來建立專案，請指定 sdk 路徑到剛剛下載的 touch-2.2.1，HelloWorld 為專案名，"./hello"是專案建立的位置

$ sencha -sdk ~/Development/touch-2.2.1 generate app HelloWorld ./hello

產生專案資料夾 hello，裡面的 index.html 就是 app 的首頁
app.js 是程式進入點，app 資料夾依據 MVC 的分類放置自己的程式碼
resources 擺放 css, image, icon 這些檔案
touch 放置 Sencha Touch 原始碼，編譯時會引用

3. 編譯專案

夠過編譯可以將引用到的 javascript 從 source 中抽出並壓縮，SCSS 的部分也是會經過 compass 編譯壓縮

$ sencha app build package

在 hello/build/HelloWorld/package 資料夾下可以看到編譯結果

4. 測試

啓動 MacOS 內建 apache

$ sudo apachectl start

將 hello/build/HelloWorld/package copy 到 apache 預設的 document root: /Library/WebServer/Documents/hello
瀏覽網頁 http://localhost/hello/ 即可看到 demo 網站