2013/08/19

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 網站



沒有留言:

張貼留言