jQuery Mobile和Sencha Touch開發(fā)移動應(yīng)用過程對比
jQuery Mobile和Sencha Touch開發(fā)移動應(yīng)用過程對比是本文要介紹的內(nèi)容，HTML5雖然離全面普及還有很長的時間，但在一些開發(fā)領(lǐng)域，HTML5已經(jīng)嶄露頭角。
比如在移動開發(fā)中，HTML5更能體現(xiàn)其跨平臺的特性（Flash雖然積極努力，但仍然被iOS等系統(tǒng)拒之門外），說到這里，不得不提一下HTML5在移動開發(fā)領(lǐng)域的兩個優(yōu)秀框架：Sencha Touch 和 jQuery Mobile。本文將站在一個Flash開發(fā)者的角度，以一個簡單的RSS閱讀器實例（這個實例已經(jīng)在這篇文章《走進Android[1]:如何開發(fā)基于Adobe AIR的Android應(yīng)用》中實現(xiàn)過），初步為大家介紹一下使用這兩個框架構(gòu)建移動應(yīng)用的差異。
前置知識
首先您需要大致了解Sencha Touch 和 jQuery Mobile。
Sencha Touch簡介：
前不久基于JavaScript編寫的Ajax框架ExtJS,將現(xiàn)有的ExtJS整合JQTouch、Rapha?l庫，推出適用于最前沿Touch Web的Sencha Touch框架，該框架是世界上***個基于HTML5的移動應(yīng)用框架。進入Sencha Touch官方網(wǎng)站查看更多介紹。
jQuery Mobile簡介：
為了讓移動設(shè)備也能用上jQuery，jQuery開發(fā)團隊發(fā)布了jQuery移動設(shè)備版開發(fā)項目jQuery Mobile Project。jQuery Mobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。
工具
工欲善其事，必先利其器，開發(fā)之前，要先準(zhǔn)備好開發(fā)工具和調(diào)試工具。
IDE：可以使用任意文本編輯器，隨您哪個順手就用哪個，本文將使用Eclipse+Spket，這是一個非常不錯的，主要用于開發(fā)Ext應(yīng)用的插件，但經(jīng)過配置也可用于jQuery開發(fā)，點擊這里查看詳細(xì)介紹。
調(diào)試工具：很遺憾Firefox對Sencha Touch的渲染效果非常差，所以我們不能使用Firebug來調(diào)試。可以使用谷歌瀏覽器，其調(diào)試工具也不遜色，而對這兩款框架的支持程度都尚好。而為了驗證Sencha Touch的效果無偏差，***再裝一個Safari瀏覽器，它對Sencha Touch的渲染是***的。
最終運行效果(點擊查看大圖)
在線預(yù)覽（請使用Safari或谷歌瀏覽器觀看）：
- Sencha Touch版：
- http://wwwriameetingcom/examples/sencha/
- jQuery Mobile版：
- http://wwwriameetingcom/examples/jqmobile/
RSS閱讀器開發(fā)過程之Sencha Touch篇
首先進入Sencha Touch官網(wǎng)，下載開發(fā)包，開發(fā)包中包含必須的JS類庫和CSS，示例等等。
然后新建一個HTML頁面，代碼如下：
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width;
- initial-scale=10;
- maximum-scale=10;
- minimum-scale=10;
- user-scalable=0;" />
- <link rel="stylesheet" href="css/sencha-touchcss" type="text/css">
- <link rel="stylesheet" href="css/indexcss" type="text/css">
- <title>List</title>
- <script type="text/javascript" src="ext-touch-debugjs">
- </script>
- <script type="text/javascript" src="testjs">
- </script>
- </head>
- <body>
- </body>
- </html>
body區(qū)域留空即可，這也算是Ext開發(fā)的一個特點，絕大多數(shù)工作都依賴JS來完成。注意testjs是由我們建立，用來編寫頁面邏輯。邏輯代碼的實現(xiàn)步驟：
首先創(chuàng)建一個ExtComponent，并指定它的HTML模板定義，用來作為RSS顯示的列表視圖
創(chuàng)建一個基本組件，只顯示一行字符串，作為第二個視圖
創(chuàng)建一個基于Tab顯示的面板，面板的Tab自動從視圖的Title中抽取，類似于Flex中的ViewStack
用Ajax的方式，發(fā)起對遠(yuǎn)程數(shù)據(jù)的請求，用循環(huán)的方式獲取數(shù)據(jù)，并Push到數(shù)組中，更新顯示列表
具體代碼如下：
- Extsetup({tabletStartupScreen: 'tablet_startuppng',//設(shè)置加載狀態(tài)時平板電腦上顯示的圖片
- phoneStartupScreen: 'phone_startuppng',//設(shè)置加載狀態(tài)時手機屏幕顯示圖片
- icon: 'iconpng',//圖標(biāo)設(shè)置
- glossOnIcon: false,//相當(dāng)于HTML的onload,加載完畢時觸發(fā)的方法
- onReady:function() {
- //創(chuàng)建一個列表組件，Component是所有Ext組件類的基類，設(shè)置尺寸為充滿這個屏幕
- //注意tpl屬性，這是定義一個HTML模板，使用{}來表明是可變字段
- var list = new ExtComponent({fullscreen: true,title: 'RIAMeeting News Reader',scroll: 'vertical',tpl:'
- <tpl for="">
- <div class="listItem">
- <h2>{title}</h2>
- <p>{content}</p>
- </div></tpl>'
- });//創(chuàng)建一個基本組件，只顯示一行字符串
- var about = new ExtBoxComponent({
- fullscreen: true,title: 'About',scroll: 'vertical',html:'RIAMeeting'});
- //創(chuàng)建一個基于Tab顯示的面板，面板的Tab自動從視圖的Title中抽取，類似于Flex中的ViewStack
- //注意animation用來設(shè)置切換視圖產(chǎn)生的動畫，而item則指定顯示哪些視圖
- var panel = new ExtTabPanel({fullscreen: true,animation: 'slide',items: [list,about]});
- //加載數(shù)據(jù)之前，先在界面上顯示LoadingExtgetBody()mask('Loading', 'x-mask-loading', false);
- //聲明一個數(shù)組，將來用返回數(shù)據(jù)來填充var result = [];
- //用Ajax的方式，發(fā)起對遠(yuǎn)程數(shù)據(jù)的請求，注意跨域問題，一旦跨域請使用代理或其它方式解決ExtAjaxrequest({url: 'rssxml',
- //數(shù)據(jù)URLsuccess: function(response, opts) {
- //數(shù)據(jù)加載成功之后的回調(diào)方法
- var xmlDom = responseresponseXML;
- var items = xmlDomgetElementsByTagName('item');
- //用XMLDom的方式獲取數(shù)據(jù)節(jié)點//用循環(huán)的方式獲取數(shù)據(jù)，并Push到數(shù)組中
- for(var i=0;i<itemslength;i++) {
- var item = items[i];
- var t = getText(itemgetElementsByTagName('title')[0]);
- var d = getText(itemgetElementsByTagName('description')[0]);
- resultpush({title:t,content:d});
- }ExtgetBody()unmask();//刪除Loading顯示
- listupdate(result);//更新列表
- }
- }
- );
- //這個方法用來獲取XML節(jié)點的文本值
- function getText(oNode) {var sText = "";for (var i = 0;
- i < oNodechildNodeslength;
- i++) {
- if (oNodechildNodes[i]hasChildNodes()) {
- sText += getText(oNodechildNodes[i]);
- } else
- {sText += oNodechildNodes[i]nodeValue;
- }}
- return sText;
- }
- }
- }
- );
注意因為要調(diào)取遠(yuǎn)程數(shù)據(jù)，在本地是看不到效果的，您需要將它部署到一個Server上，才能正常運行。
RSS閱讀器開發(fā)過程之jQuery Mobile篇
同樣請進入jQuery Mobile的官網(wǎng)，下載***的開發(fā)包（依賴的JS類庫和CSS，圖片）。
創(chuàng)建HTML頁面，代碼如下：
- <html>
- <head>
- <title>Lists</title>
- <link rel="stylesheet" href="jquerymobile-10a1mincss" />
- <script src="jquery-143minjs">
- </script><script type="text/javascript" src="jquerymobile-10a1minjs">
- </script><script src="newsjs">
- </script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>RIAMeeting RSS Reader</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- </ul>
- /div>
- </div>
- </body>
- </html>
注意newsjs是我們用來編寫邏輯JavaScript的文件，而ul則是RSS列表顯示所用的容器。
newsjs的邏輯實現(xiàn)：
- //相當(dāng)于HTML的onload,加載完畢時觸發(fā)的方法
- $(document)ready(function(){
- //用Ajax的方式，發(fā)起對遠(yuǎn)程數(shù)據(jù)的請求，注意跨域問題，一旦跨域請使用代理或其它方式解決
- $ajax({url: '/rssxml',//數(shù)據(jù)
- URLdataType: 'xml',//數(shù)據(jù)類型設(shè)置
- type: 'GET',//Get還是
- Posttimeout: 10000,//超時設(shè)置，單位為毫秒
- error: function(xml){//加載錯誤的處理方法
- alert("loading xml error");
- },success: function(xml){/加載成功的處理方法//也是用循環(huán)遍歷數(shù)據(jù)節(jié)點
- $(xml)find("item")each(function(i){var title = $(this)children("title")text();//獲取標(biāo)題內(nèi)容
- var description = $(this)children("description")text();//獲取摘要內(nèi)容
- var liNode = $('<li role="option" class="ui-li ui-li-static ui-btn-up-c">');//聲明一個li標(biāo)簽節(jié)點
- $("<h3></h3>")html(title)appendTo(liNode);//用h3包裹標(biāo)題并添加到li節(jié)點
- $("<p></p>")html(description)appendTo(liNode);//用p包裹摘要并添加到li節(jié)點
- liNodeappendTo("ul");//最終將li節(jié)點添加到ul節(jié)點，形成列表顯示
- });
- }});
- })
同樣的，您需要將它部署到一個Server上，才能正常運行。
總結(jié)對比
Sencha Touch：重量級框架，類似于Flex SDK；組件封裝較多；在各平臺交互表現(xiàn)統(tǒng)一(內(nèi)部封裝)；入門門檻較高
jQuery Mobile：輕量級框架，實質(zhì)是jQuery插件；組件較少；交互表現(xiàn)依賴于平臺自身，會有差異；入門門檻較低。
小結(jié)：jQuery Mobile和Sencha Touch應(yīng)用移動開發(fā)過程對比的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！
