2013/08/31

Embedded Sencha Touch Demo Code in My Blog

今天在思考怎麼在我的 blog 嵌入 Sencha Touch 的 library，之後寫 demo code 就可以看到 preview了！


首先選擇必要的 library

Sencha Touch 專案預設是用 micro-loader 載入設定在 app.json 的 js / css 檔，不過檔案太零碎需要發很多 request，若透過 internet 會拖慢速度，SDK 內同時也有提供整合的版本：
  • sencha-touch.js 131KB
  • sencha-touch-debug.js 514KB
  • sencha-touch-all.js 671KB
  • sencha-touch-all-debug.js 2.7M

各版本的用途可以參考 Using and Creating Builds，由於我需要使用到 widget，所以要選 all 的版本，sencha-touch-all.js (671KB) 雖然壓縮過了還是好肥大...

CSS 的部分，SDK 內也提供不同組的 theme 可以套：
  • base.css 230KB
  • bb10.css 184KB BlackBerry
  • sencha-touch.css 258KB
  • wp.css 194KB Windows Phone

閱讀更多 »
張貼者： 於 沒有留言:
標籤： , , , , , ,

2013/08/28

Sencha Touch AJAX 跨網域存取 (Cross Domain Request)

通常為了省麻煩，我們會把『提供網頁的 server』與『提供資料的 API server』放在同一個網域下，除非是存取第三方的 server，但現在大多走 OAuth 配合 token 在做存取...


那為何我會遇到跨網域問題？

是這樣的，使用 PhoneGap 開發 app 時，若要跟 API server 要資料也屬於跨網域存取，不過 PhoneGap 的 webkit 設計不像我們平常在用的 browser，所以不會有此限制。

只是開發過程我們會直接利用 browser debug，不會每次都把網頁放到 PhoneGap 內，然後 build、deploy 到 mobile device... 這實在太花時間了，這就是為何我需要解決 cross domain 的原因。

閱讀更多 »
張貼者： 於 沒有留言:
標籤： , , , , ,

2013/08/26

PhoneGap 開發：Android back button 事件處理

使用 PhoneGap 開發 app 時，在 Android 平台上，預設按下 back button 的處理方式是關閉程式，這應該會讓使用者崩潰。PhoneGap 有提供對應的 backbutton 事件可以註冊，這樣就可以照自己的方式來處理。


這邊的處理方式是呼叫原生的 confirm 對話框，詢問 user 是否離開： 
// Register event for back button
document.addEventListener("backbutton", function() { 
    navigator.notification.confirm(
        '你確定要離開程式嗎？', 
        onConfirmQuit, 
        '關閉', 
        ['確定', '取消']
    );
}, true);

function onConfirmQuit(button) {
    if (button == "1") {
        // Leave app
        navigator.app.exitApp(); 
    }
}


身為一個 Sencha Touch 的使用者，用客制化的視窗也是可以 OK 的 
document.addEventListener("backbutton", function() { 
    Ext.Msg.confirm("關閉", "你確定要離開程式嗎？", function(buttonId) {
        if (buttonId == 'yes')
            navigator.app.exitApp();
    });
}, true);

更進階的做法就是讓使用者按下 back 時可以回到上一層的畫面，不過這邊我也還沒試過，目前的想法是啓用 location hash，按下 back 時就像瀏覽器回到上一頁一樣。參考：History Support - Touch 2.2.1 - Sencha Docs
張貼者： 於 沒有留言:
標籤： , , ,

利用 ImageMagick 製作 App 所需的 icon size

以下是 Android / iOS 兩種平台的 icon 開發指南，裡面有條列解析度/機型對應的 icon size


在此我是利用 PhoneGap 建立 mobile 專案，預設就有一組 icon，我們只要準備相同解析度的圖片覆蓋過去就可以了

Android 各解析度 icon 分別放置在不同的資料夾底下
  • res/drawable/logo.png 96x96
  • res/drawable-xhdpi/logo.png 96x96
  • res/drawable-hdpi/logo.png 72x72
  • res/drawable-mdpi/logo.png 48x48
  • res/drawable-ldpi/logo.png 36x36

iOS 擺放 icon 的位置在專案資料夾底下的 {project-name}/Resources/icons/
  • icon-72.png 72x72
  • icon-72@2x.png 144x144
  • icon.png 57x57
  • icon@2x.png 114x114


利用 ImageMagick 搭配 shell script 就可以一次轉出所有解析度的 icon

安裝 ImageMagick 目前最新版本 6.8.6-8
$ ./configure --with-png=yes
$ make && make install

轉換解析度 
$ convert logo-src.png -resize 72x72 logo-72.png

批次轉換 script: convert.sh
#/bin/sh

res=(144 114 96 72 57 48 36)
for i in "${res[@]}"
do
    echo "convert icon for ${i}x${i}"
    convert logo-src.png -resize ${i}x${i} logo-${i}.png
done

記得 icon 的來源檔案解析度至少要大於144，轉出來才不會糊掉

張貼者： 於 1 則留言:
標籤： , , , , ,

2013/08/19

PhoneGap + Sencha Touch Quickstart (Part III)


透過前兩篇(Part I, Part II)我們分別建立的 PhoneGap 專案與 Sencha Touch 專案，再來就是將他們合併，也就是讓 Sencha Touch 透過 PhoneGap run 在模擬器上



Part III：Sencha Touch 與 PhoneGap 的結合


1. 把 Sencha Touch web page 複製到 PhoneGap

我們可以把 PhoneGap 想像成一個載體 (webview)，上面運行著 Sencha Touch web page，而透過 javascript 可以和底層的 device 溝通。

所以最快的方式就是把 build 出來的 Sencha Touch package 複製到 PhoneGap 底下的 www 資料夾，然後重新 build PhoneGap，再重新 build 各平台的專案。
(在此為了簡化示範流程，才會用手動的方式複製，真正在開發時應該使用 ST project 內的 build.xml 去描述此步驟)

編譯出來的 ST 程式碼
 
Copy 到 PhoneGap 的www
注意來源跟目的，一個是 ST 一個是 PhoneGap。
另外原本在 www 裡面的 config.xml 要留著，編譯時會用到！
$ cp -a SenchaTouch/hello/build/HelloWorld/package/* PhoneGap/hello/www/
$ phonegap build ios
$ phonegap build android

按照 Part I 的方式分別編譯 ios/android 並運行
Good! It works.


2. 加入 PhoneGap deviceready event

由於 Sencha Touch demo 程式中並未使用到 PhoneGap 提供的 API，為了證明它可以work，所以我們要修改 Sencha Touch project 中的 index.html，加入很簡單的程式碼：當 deviceready event 觸發時就在 debug window 印出 deviceready (註：device ready 就表示 API 可以呼叫了)
加在 <head></head>之間，include "touch/microloader/development.js" 之後
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', function() {
  console.log('deviceready');
}, false);
</script>

重新編譯 Sencha Touch project 後產生 package，將其 copy 到 PhoneGap ... (重複步驟1)
還記得編譯 ST 的指令嗎
$ sencha app build package

若看到 demo 網頁出現，同時 console 也跑出 deviceready 字眼，表示我們成功結合 Sencha Touch 與 PhonaGap 了！

iOS 訊息
2013-08-19 23:51:55.016 HelloWorld[71208:c07] deviceready
Android 訊息 
I/Web Console( 1291): deviceready at file:///android_asset/www/index.html:61

註：
ios 的 debug window 在 Xcode 裡面
android 可以透過下面指令觀看整個系統的 log
$ adb -s emulator-5554 logcat

張貼者： 於 沒有留言:
標籤： , , , , , , ,

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

張貼者： 於 沒有留言:
標籤： , , , , , , ,

PhoneGap + Sencha Touch Quickstart (Part I)


PhoneGap + Sencha Touch 這是跨平台 mobile app 開發的一種組合，在開發速度與效能都能接受的情況下，我近期都投入在這個 framework。在此要與大家分享如何快速建立一個 mobile app，系列文章包含三部分：

基本需求

開發環境 MacOS
PhoneGap 3.0.0
SenchaTouch 2.2.1


Part I：建立 PhoneGap 專案


1. 安裝 Mobile SDK

PhoneGap 支援的 mobile 平台有很多種，在這邊只針對 iOS 與 Android 做說明。
iOS 需要安裝 Xcode，可以從 app store 下載，目前我使用的版本是 4.6.3。
而 Android 的部分請參照 Android Platform Guide 下載 ADT，裡面包含了 Eclipse 編輯器與 SDK，SDK 的路徑必須加到環境變數 $PATH，日後 command line 會使用到。


2. 安裝 PhoneGap

PhoneGap 3.0.0 開始的 command line tool 改由 npm 套件管理程式來維護，所以我們要先安裝 node。Node.js官方網站有提供 Mac 專屬的.pkg可以下載，不過我習慣抓 source code 下來編譯，node 安裝好之後自然也會有 npm 指令可以用

利用 npm 來安裝 phonegap 
$ sudo npm install -g phonegap
$ phonegap -v
3.0.0-0.14.3


3. 建立 PhoneGap 專案

$ phonegap create hello com.example.hello HelloWorld
產生 hello 資料夾，裡面包含 merges, platforms, plugins, www
platform 擺放各 mobile 平台的專案，plugins 存放提供你存取 device-level API 的 plugin，而 www 就是 app 主程式，平時就是編譯這一份檔案，預設會有基本的 demo 程式在裡面

剛建立好的 phonegap project 是不包含任何 mobile 平台支援，我們要加入 ios, android 
$ phonegap build ios
$ phonegap build android
可以看到 hello/platform/ 之下有這兩個平台的專案資料夾

再來我們安裝 device-level API 支援，在此僅安裝最基本的 console plugin，至少可以拿來 debug，其它像是 camera, geolocation... 日後都可以依需求再安裝 
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git


4. 編譯 PhoneGap 專案

PhoneGap 提供 command line 的方式可以編譯與運行，在此我則採用自己的方式
$ phonegap build
下達此指令後，PhoneGap 會從 hello/www 去建立各平台的必要資源，包含 app 原始碼與 plugin，可以在下面資料夾看到編譯結果
hello/platform/ios/www
hello/platform/android/assets/www


5. 編譯各平台的專案並運行

iOS 的部分，用 Xcode 開啓 hello/platform/ios/HelloWorld.xcodeproj，按下左上角的編譯就可以在模擬器上面運行了。同時間在 console window 也可以看到 deviceready 的字眼


Android 的部分程序比較多，請先參照 Android Platform Guide 設定模擬器並開啓

編譯 android 專案
$ cd platform/android
$ ant debug

列出可用的模擬器
$ adb devices
List of devices attached
emulator-5554   device

安裝到模擬器
$ adb -s emulator-5554 install -r bin/HelloWorld-debug.apk
337 KB/s (1579758 bytes in 4.565s)
        pkg: /data/local/tmp/HelloWorld-debug.apk
Success

張貼者： 於 沒有留言:
標籤： , , , , , , ,
訂閱： 文章 (Atom)