JQuery mobile跟Sencha touch都是蠻完整的mobile web framework, 兩者各有擅長, 比較起來以開發的角度我比較喜歡JQuery所標榜的"Write less, Do more"的哲學下的架構, 而不喜歡Sencha touch把一堆html寫到code裡面去, 但Sencha touch又有比較好的UI look and feel

以tab panel為例,

Sencha touch:

這兩個作法大異其趣 

Sencha 的HTML 內容

裡面除了script以外根本就是空的, UI的創建放在app.js(以這範例而言)裡如下:

https://gist.github.com/1301828.js?file=gistfile1

Tabs的內容在哪? items裡分別就是兩個tab, html直接以字串的形態寫在裡面, 老實說, 我覺得這很醜, 也容易出問題, 如果頁面的內容是相當複雜的, 這樣並不是很好

再看看jQuery Mobile的作法:

這份source code有點偷懶, 剪剪貼貼過來的, 不過其實就這麼一個html, 並不需要寫額外的javascript code, 乾淨多了  

如果也可以用類似的寫法寫Sencha touch的UI似乎應該會比較好一點, 像是這樣寫:

做了個實驗, 剛寫下這段code把上面那段轉成跟第一個範例一樣的畫面:

https://gist.github.com/1301855.js?file=gistfile1

看來如果再多層包裝其實也不用醜醜的通通把UI hard code到js codes裡面去

今天才又忽然想起以前寫過這玩具, 這個在之前演講時, 有拿出來小Demo過, 不過只是當時隨便玩玩的, 就又沈寂, 也忘了分享source出來了, 這個範例很簡單, 只是寫了一個Java interface去給WebView裡的javascript呼叫, 並用JQuery mobile做出list view

Source 在此

呃, 不過話說回來, 我另一個玩具Rhino on Android好像無聲無息很久了… @@“

– 前言 –

Safari2Phone做兩天就膩了(天呀, 我無可救藥), 昨天想到玩點別的

第一階段目標, 用"<canvas>“ tag + JQMobile (其實非必要) 做了一個Tocuh Draw, 就是手指在Canvas上畫圖, 像這樣(這是測試結果):

—-

測試平台: Nexus One (Android) + WebView

碰到的問題:

Canvas可以很正常的在Android上跑沒問題, 但主要是event的問題, 本來用addEventListener(‘mousemove’, draw)的方式, 沒想到在mobile環境全部怪怪的

手機上的event應該是touchstart, touchend, touchmove, 其中touchmove跟mousemove有點不同, mousemove不用mousedown就會被觸發, 但touchmove卻是在有touch的狀況下才會發生

touch event的點也不一定只有一點, 所以有event.touches, 而這是一個array, 裡面放每一點座標, 像是clientX, clientY之類的

Canvas的部份, 用moveTo->lineTo來畫這些經過點就可以達成了(筆記: 下一步做一個queue來儲存)