由於手頭上有正在開發手機程式 , 但不想因為改版上架時間的問題 , 所以採用了一種做法 , 就是把 web 的內容用手機上的原生程式讀進 webView 顯示 , 除非原生程式有問題才會有改版並重新上架
目前是採用 Titanium 這套開發套件撰寫 ios 及 android 雙平台的程式 , 而畫面的部分採用遠端的 web 呈現 , web 和手機的原生程式透過某種機制溝通做到 web 也可以存取行事曆的功能
說白一點 , 用 Titanium 開發的程式主要就是讀取遠端的 HTML , 而遠端的 HTML 就是 mobile app的介面 , 所以設計介面所採用的 framework 就很重要 , 我試過了好多套目前常看到的 , 分別講一下
JQuery Mobile
這是以 jquery 為 base 開發的 , 設計方式要符合 jQuery Mobile 所定好的 HTML Code 及 CSS 規範 , 個人感覺 jQuery mobile 很容易開發 , 但也有不足之處 , 由於手機上的介面常常會用到觸控滑動 , 目前 jQuery Mobile 無法做到一點 , 就是當我需要做一個上下方都有一個固定的 BAR , 中間需要滑動 , 就很難做到 , 這可能要歸罪 iphone 4 或 android 的 webkit 尚未支援這種方式 , 據說 ios 5.0 的 webkit 就會有這原生功能 ,但目前有實驗性質的 scroller 可以測試 , 這算模擬的 , 個人覺得不夠順就是了 , 於是我放棄這套 framework , 因為觸控滑動實在太重要 , 目前 Drameweaver CS 5.5 有將 jQuery Mobile 和 PhoneGap 整合進來 , 我想有些美工人員應該會對這套有興趣
jQtouch
這和 jQuery mobile 一樣 , 開發的方式其實差不多也是 jquery base , 但一樣沒有好用的 scroller , 而且比起 JQuery Mobile 來說 UI 項目比較少 , 不過有一套 DataZombies 的套件是把 jQTouch fork 出來家上了 iScroll 這個 plugin 進去可以達成上下方有固定bar 可以當選單的功能 , 但是一樣不順 , 我測試過在 iphone 3GS 下挺順的 , 但 Android 2.3.3 的系統則很 lag , 個人感覺 jQtouch 其實和 jQuery Mobile 都有相同的特性就是好設計 , 但一樣 scroll 功能沒有很完善 , 所以在求完美的情況下 , 也放棄了
Dojo Mobile
這是以 dojo 為基礎而開發的 mobile framework , 功能強大 , 幾乎所有用原生手機的 framework 提供的內建 UI 方式 , 這套都有實做出來 , 但常常有些時候會發生畫面跑不出來的情形 , 看官網的 demo 有時候也要重整才出的來 , 雖然功能強大 , 但這種不穩定的狀況下, 我也放棄採用了
Wink Toolkit
這套算是著重在小巧 , 效能的 framework , 該有的 UI 功能都有 , 但由於太過簡化 , 按鈕也沒有按下的效果 , 反而要自己花腦筋 , 其實不算好設計 , 而它有一點令我眼睛發亮的原因是 , 她可以做到在有上下固定 bar 的選單時 , 還可以用到原生 scoll bar , 順到不行 , 啊這就奇了 , 怎麼只有 Wink 做的到 >< , 而我目前沒有採用它仍是因為很多 UI 元件都做半套的 , 按鈕沒有按下的效果 , 選單沒有點選的效果 ..... 但我很期待這套 framework 若有對 UI 做加強後 , 應該會是一個好設計 , 效能又好的 framework
Sencha touch
這是以 ExtJS 4.0 為基礎所開發的 , 我可以這麼說 , 它是最難上手 , 開發時 , 應該用不上 HTML 了 , 因為完全都是物件導向 API 的開發 , 但我為何要提它 ? 因為我目前就是用這套來開發介面 , 因為玩過後 , 感覺起來他應該是目前功能上和 Dojo Mobile 不相上下的一套 , 且不會有 Dojo 一堆奇怪問題 , 而且也有上下固定 bar 中間可以 scroll 的設計方式 , 而在目前萬元以上的智慧手機上執行起來也很順暢 , 雖然其 scroll 效果在 android 上仍然有點小 lag , 但還可以忍受 , 至少不會比 jQTouch 或 jQuery Mobile 在畫面複雜時 , 滑動起來變成是一種折磨 , 而用這套開發最大的缺點 , 我想就是他已經無法做網頁最佳化 , 如果說要拿這套開發一個手機版的網站 , 我認為不適合 , 但若拿來開發一個類手機程式的 UI , 我覺得挺適合的 , 目前已經有用到其 MVC 的概念 , 感覺有點類似 PHP YII 或 Ruby On Rails 了 , 他的 ORM 資料的定義方式很類似我們使用 PHP MVC Framework 的方式 , 也有做到關聯性 , 並且可以將資料從遠端相對應的 json 讀到 ORM , 或存到本機的 WebStorage , 做離線資料存取的使用非常棒 , 應該這套是用到 HTML5 功能最多的一套 Framework 了
總結
其實每套 framework 都有他的優缺點 , 並非我喜歡的就是適合大部分的場合 , 但有些時候總要取捨 , 碰那麼多套也有好處 , 就是知道甚麼場合用那套 , 如果是要作一個入口網站 , 是需要有搜尋引擎的索引增加排名的 , Sencha touch 會被我丟了 , 而若想要快速建立一個手機網站 , 那麼 jqtouch or jquery mobile 是首選 , 而我本人最期待 wink toolkit , 因為他真的所有 UI 功能都有了而且效能最好 , 但就是做半套 >< 我真的很希望那天他的所有 UI 都已經擬真到和一般 mobile app 一樣 , 未來兩三年在智慧型手機的效能越來越好的同時以及瀏覽器的硬體加速做的越來越好時 , 手機程式設計應該會有越來越多人用 html + javascript 方式來做了
感謝詳盡分析, 我當初也是選 Sencha touch, 方法並不是很科學, 看demo效果來選的, 純外貿協會比較法….
Titanium 的賣點在於Native look UI widget, 你畫面都已 web 為主, 何不直接用phonegap？
因為 phonegap 我還沒找到如何讓 iphone , android 可以增加訊息到行事曆的方式
請問有沒有一套framework可以做到上下固定Toolbar,但中間那塊不只可以scroll，還要可以zoom in/zoom out,我測試了這幾套framework預設都把zoom in/out鎖掉了
沒注意耶
你說的 Zoom in out 應該是指手指去放大縮小 , Touch 事件是可以監聽的到 , 有看過有人 po 相關文章
但對於某個區塊的放大縮小 , 應該也是 css 就有辦法做 , 若自己實作應該可以 , 例如以下 jquery 的效果就是利用 css 對某區塊內容放大縮小
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html
Sencha touch真的很難上手，網路上也找不到合適的例子可以模彷
sencha touch 確實最難上手 , 它比較像在設計視窗程式所以程式的邏輯及經驗都要夠 , 不過對於學過 C# 或 VC/BCB 視窗程式的人應該感覺觀念都差不多
我自己倒是還好 , 就碰了很多壁反而習慣了 , 覺得 Ext 的東西提供的物件很完整還蠻有修改彈性的 , jquery 的東西是簡單 , 但真的找不到合適的 plugin 倒是會寫得非常痛苦
這裡倒是看到有人作出 pinch 事件 , http://www.sencha-touch.de/examples/touch-events/ , 可以參考看看手指"捏"的事件怎麼作的 , 但目前我測試應該指有 iphone 支援 , android 沒什用
查了一下 ongesturechange 事件在 android webkit 是沒有的 , 所以這很難做 , 但可以做到點兩下去放大縮小 , 再差一點就只好放個 +/- 的圖案讓人縮放了 , ios 的 webkit 確實作的比較好 , 光 scroll 的滑動就比 android 的強
很諷刺 , google map 網頁版在 iphone 可以縮放 , 在 Android 確不行
我之前把實現這個功能想的太簡單了…
看來要搭配Framework做的話，把需要Zoom In/Out的頁面做為新頁面開啓，而這個頁面不要套用Framework，這樣就可以用到Mobile Browser原本就具備的縮放功能….
找到一個範例，他好像試著擴充原來的Panel讓它具有Zoom In/Out的功能
https://gist.github.com/1002303#file_gistfile1.html
不過我用它的程式碼在IPhone Safari上測試都不會縮放..
我覺得這範例應該不是給 iphone 跑的 , 應該是 Android 3.0 以上跑的
pinch event 在 androdi 3 是有支援 , 但我沒有 Android 平版可測試 , iphone 上應該是 gesture event 才是
http://quirksmode.org/mobile/tableTouch.html
這有個比較表 , android 真的支援的比較差 , 不知道 Android 4.0 會不會弄出來
這也有ㄧ些討論
http://code.google.com/p/android/issues/detail?id=11909
我現在決定做兩個zoom in/out的button,只是還蠻醜又蠻笨的…
但是好像沒什麼選擇,sencha touch的Panel要做縮放目前好像有點困難
forums上很多人在討論pinch zoom的問題,但似乎還沒一個好的解決方案
2.0版能解決這個題嗎?
我覺得這應該不是 sencha touch 問題 , 是 android webkit 問題 , google map 在 iphone 上就可以 zoom in/out
Panel
Panel在Iphone上有什麼方法做到Zoom in/Out嗎?
Zoom in/Out 應該 css 就可以作到 , webkit 有原生放大縮小的 css , 甚至最簡單的方式 css3 的 document.getElementById('xxx').style.zoom = "150%" 都可以試試看
但我沒試過 sencha touch 上玩啦 , 所以你要自己試試看
謝謝你的資訊,我現在也是在用javascript去控制div的style.zoom(內容都放在同一個div中)
不過寫sencha touch的pinch事件的功力還不太夠,所以目前只做到用button去觸發zoom in/zoom out
很詭異的是,我在Android 2.2+Webkit 3.1 Browser去看Sencha Touch的程式
結果整個畫面都是可以縮放的…不過這其實不是預期想要的效果
在IPhone上同樣的程式不能縮放