Sencha Touch 2 類別定義

原本想找看看有沒有比較好的 Sencha Touch 2 的教學或書籍, 後來發現官方的文件已經足夠。這裡的記錄純粹是個人備忘, 以下內容皆參考 How to Use Classes in Sencha Touch。

Sencha Touch 2 的類別定義承襲 ExtJS 的做法, 使用 Object 來設定。

Ext.define('類別名', 設定用物件);

類別寫法:

Ext.define('lin.shinder.Animal', {
    config: {
        name: null
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    speak: function() {
        alert('grunt');
    }
});

• 套件名稱和類別名稱直接在 define() 第一個參數裡設定。
• constructor 顧名思義為建構函式
• config 用來設定公開屬性

Sencha Touch 2 初體驗

使用過 jQuery Mobile 後，其缺點很容易就看出來。在比較複雜的情況，jQuery Mobile 並不好使，所以尋找較佳的解決方案，看了看就看到 Sencha Touch。個人沒用過 ExtJS，當然對 Sencha Touch 也沒什麼概念，不過其 example 倒是很吸引人。

Sencha Touch 承襲了 ExtJS 的風格，MVC 全部以 code 的方式來呈現，並以 JSON style 的方式撰寫。一開始看還真的很不習慣。

參考 Getting Started with Sencha Touch 2

開發所需工具（在 Mac 上）：

• Web server: MAMP
• Webkit browser: Google Chrome
• Text editor: Sublime Text 2 （看自己偏好）
• Sencha Touch SDK （2.1.1 目前商業版依然免費）
• Sencha Cmd （3.0.2 需要 JRE 或 JDK）

Sencha Touch SDK 解壓縮後目錄 touch-2.1.1 放在 Document Root (htdocs)。

Sencha Cmd 安裝在 /Users/USER/bin 內。

以 Command line 建立專案：

htdocs shinder$ cd touch-2.1.1/
touch-2.1.1 shinder$ sencha generate app GS ../GS
Sencha Cmd v3.0.2.288
[INF] ...  

等跑完後，即完成專案的建立。查看 app/view/Main.js 的內容。

取得 PhoneGap 裝置資訊

承上篇 PhoneGap 在 Android 平台的第一步

使用 for/in 查看 device 全域物件

  function onDeviceReady() {
   var str = "";
   for(var s in device) {
    str += s + ":" + device[s] + "\n";
   }
   document.getElementById("textarea").value = str;
  }

以下是用 Android 4.1 模擬器得到的資訊:

• available: true
• platform: Android
• version: 4.1
• name: sdk
• uuid: 7b11cbcedb0f6b41
• cordova: 2.4.0
• model: sdk
• overrideBackButton: Device.overrideBackButton() is deprecated. Use App.overrideBackbutton(true).
• resetBackButton: Device.resetBackButton() is deprecated. Use App.overrideBackbutton(false).
• exitApp: Device.exitApp() is deprecated. Use App.exitApp().
• getInfo: function

其中比較重要的是 uuid 和 platform。platform 常見的值為: Android, Blackberry, iPhone, WinCE。

PhoneGap 在 Android 平台的第一步

PhoneGap 被 Adobe 買下來之後, 核心的部份捐給了 Apache, 目前為 Apache Cordova 專案。以下為使用 PhoneGap 開發 Android App 的初步設定:

1. Eclipse ( 目前為 4.2 ) 開發環境要先裝好 Android SDK, Android ADT plugin ( Android SDK Manager, Android Virtual Device Manager )。

2. 下載 PhoneGap ( Cordova 目前為 2.4 ), 並解壓縮檔案。

3. 建立 Android Application Project, 設定專案名稱為 Phonegap-hellohell 。標的版本設為 Android 4.1, 官方的範例可以使用 Android 2.1 以上。

4. 將 Phonegap 解壓縮後, 複製 phonegap-2.4.0\lib\android 裡的 cordova-2.4.0.jar 到  Phonegap-hellohell 專案的 libs 目錄內。複製後, 右擊  libs/cordova-2.4.0.jar , 點選 Build Path → Add to Build Path。

5. 複製 phonegap-2.4.0\lib\android\xml 目錄 ( 裡面只有一個 config.xml 檔案 ) 到  Phonegap-hellohell 專案的 res 目錄內。

6. 在 Phonegap-hellohell 專案的 assets 目錄裡建立 www 目錄, 並複製 phonegap-2.4.0\lib\android 裡的 cordova-2.4.0.js 到此目錄, 往後所有 HTML 相關的檔案都放在此目錄內。