Sencha Touch 2 : 安裝與使用

一.Ubuntu上開發環境安裝
1.下載Sencha Touch:sencha-touch-2.0.1.1
http://www.sencha.com/products/touch/download/2.0.1.1/
2.下載SDKTool:SenchaSDKTools-2.0.0-beta3
http://www.sencha.com/products/sdk-tools/download/
3.改為可執行檔

chmod +x SenchaSDKTools-2.0.0-beta3.run

4.執行安裝

sudo ./SenchaSDKTools-2.0.0-beta3.run

5.加入環境變數

sudo gedit .bashrc
加入PATH='/opt/SenchaSDKTools-2.0.0-beta3'

二.建立Project
1.建立工作目錄project/
建立作目錄，並將下載的sencha-touch-2.0.1.1
解壓縮到project目錄下
/project/sencha-touch-2.0.1.1/
2.建立專案
切換到sencha-touch-2.0.1.1下 執行

sencha app create 專案nameSpace ../專案目錄名稱

例
sencha app create Oz ../oz_app
會建立專案目錄
/project/oz_app
3.專案架構

app:所有要開發的程式都放在這裡
sdk:sencha touch 使用的sdk
resource:專案使用的css與圖檔放在這裡
app.json:架構上使用microloader，在這檔案設定要使用的css,js等相關路徑設定
            與專案輸出的設定
app.js:App程式進入點
packager.js:這是要將整個project package成App時的設定檔

4.app.json設定檔
基本需要設定的內容
1."js":設定要使用的js檔案路徑,以供microloader載入
預設sdk會使用sencha-touch.js，但若在專案內有用到Component
例如Select,會需要改用sencha-touch-all.js否則comonent會跑不出來

"js": [
    {
        "path": "sdk/sencha-touch.js"
    },
    {
        "path": "app.js",
        "update": "delta"
    }
]

如果還會使用到其他的js檔案要載入，在這裡可以加進去
2."css":
專案裡預設使用的css是由compass產生的css,修改請利用compass修改後產生css
如果要加載其他的css檔案可以在這裡加入

"css": [
    {
        "path": "resources/css/app.css",
        "update": "delta"
    }
]

3. "url" build的時候需注意app.json內的url需要設定index.html的路徑 若在本機上設定為 "url": "http://localhost/xxxx/index.html",
三.Build專案
當專案完成，會是由許多的js檔案組成，透過build的程序，可以將所有JS檔案
build成單一壓縮過的js檔
1.指令
進入project目錄 執行

sencha app build testing|production|package|native

2.檔案目錄
依照build設定的參數不同會在的build中產生不同的目錄

my_app_project/build/
my_app_project/build/testing/ 測試用，較方便debug
my_app_project/build/production/ 用來封裝phonegap
my_app_project/build/package/ 放到wb上直接使用
my_app_project/build/native/ 產生native App

常用的會是build成 production,所build出來的版本可以放到web上使用 也可以拿到phonegap上去封裝成APP
3.注意事項 在各個js內的Require一定要明確把有用到的Class寫進去，否則很容易發生編譯錯誤 四.使用線上 PhoneGap產生App 1.使用production來build
產生的production目錄壓縮成zip檔案
2.連線PhoneGap
https://build.phonegap.com/apps#add-application 上傳zip檔，即可線上產生App檔案

五.Delta Cache機制 在app.json裡預設我們對js與css檔案的update設定了delta機制 當有資料更新,舊資料會被放在archive目錄下 在各版本間產生delta client會下載delta資料去更新其localStorage內容讓他保持最新 當在online狀態micro-loader會去檢查資料(json type infomation)

但delta機制有可能在更新後造成app無法執行 此時只要清除localStorage即可

localStorage.clear()