Sencha Touch和jQuery Mobile開(kāi)發(fā)過(guò)程對(duì)比
本文將站在一個(gè)Flash開(kāi)發(fā)者的角度，以一個(gè)簡(jiǎn)單的RSS閱讀器實(shí)例(這個(gè)實(shí)例已經(jīng)在這篇文章《如何開(kāi)發(fā)基于Adobe AIR的Android應(yīng)用》中實(shí)現(xiàn)過(guò))，初步為大家介紹一下使用這兩個(gè)框架構(gòu)建移動(dòng)應(yīng)用的差異。
前置知識(shí)
首先您需要大致了解Sencha Touch 和 jQuery Mobile。
Sencha Touch簡(jiǎn)介：http://mobile.51cto.com/Sencha-278623.htm
前不久基于JavaScript編寫(xiě)的Ajax框架ExtJS,將現(xiàn)有的ExtJS整合JQTouch、Raphaël庫(kù)，推出適用于最前沿Touch Web的Sencha Touch框架，該框架是世界上第一個(gè)基于HTML5的移動(dòng)應(yīng)用框架。進(jìn)入Sencha Touch官方網(wǎng)站查看更多介紹。
jQuery Mobile簡(jiǎn)介：http://mobile.51cto.com/others-277308.htm
為了讓移動(dòng)設(shè)備也能用上jQuery，jQuery開(kāi)發(fā)團(tuán)隊(duì)發(fā)布了jQuery移動(dòng)設(shè)備版開(kāi)發(fā)項(xiàng)目jQuery Mobile Project(http://jquerymobile.com)。jQuery Mobile不僅會(huì)給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。
工具
工欲善其事，必先利其器，開(kāi)發(fā)之前，要先準(zhǔn)備好開(kāi)發(fā)工具和調(diào)試工具。
IDE：可以使用任意文本編輯器，隨您哪個(gè)順手就用哪個(gè)，本文將使用Eclipse+Spket，這是一個(gè)非常不錯(cuò)的，主要用于開(kāi)發(fā)Ext應(yīng)用的插件，但經(jīng)過(guò)配置也可用于jQuery開(kāi)發(fā)，點(diǎn)擊這里查看詳細(xì)介紹。
調(diào)試工具：很遺憾Firefox對(duì)Sencha Touch的渲染效果非常差，所以我們不能使用Firebug來(lái)調(diào)試。可以使用谷歌瀏覽器，其調(diào)試工具也不遜色，而對(duì)這兩款框架的支持程度都尚好。而為了驗(yàn)證Sencha Touch的效果無(wú)偏差，最好再裝一個(gè)Safari瀏覽器，它對(duì)Sencha Touch的渲染是最好的。
最終運(yùn)行效果(點(diǎn)擊查看大圖)
在線預(yù)覽(請(qǐng)使用Safari或谷歌瀏覽器觀看)：
Sencha Touch版：http://www.riameeting.com/examples/sencha/
jQuery Mobile版：http://www.riameeting.com/examples/jqmobile/
RSS閱讀器開(kāi)發(fā)過(guò)程之Sencha Touch篇
首先進(jìn)入Sencha Touch官網(wǎng)，下載開(kāi)發(fā)包，開(kāi)發(fā)包中包含必須的JS類庫(kù)和CSS，示例等等。
然后新建一個(gè)HTML頁(yè)面，代碼如下：
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
- <link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
- <link rel="stylesheet" href="css/index.css" type="text/css">
- <title>List</title>
- <script type="text/javascript" src="ext-touch-debug.js"></script>
- <script type="text/javascript" src="test.js"></script>
- </head>
- <body></body>
- </html>
body區(qū)域留空即可，這也算是Ext開(kāi)發(fā)的一個(gè)特點(diǎn)，絕大多數(shù)工作都依賴JS來(lái)完成。注意test.js是由我們建立，用來(lái)編寫(xiě)頁(yè)面邏輯。邏輯代碼的實(shí)現(xiàn)步驟：
- 首先創(chuàng)建一個(gè)Ext.Component，并指定它的HTML模板定義，用來(lái)作為RSS顯示的列表視圖
- 創(chuàng)建一個(gè)基本組件，只顯示一行字符串，作為第二個(gè)視圖
- 創(chuàng)建一個(gè)基于Tab顯示的面板，面板的Tab自動(dòng)從視圖的Title中抽取，類似于Flex中的ViewStack
- 用Ajax的方式，發(fā)起對(duì)遠(yuǎn)程數(shù)據(jù)的請(qǐng)求，用循環(huán)的方式獲取數(shù)據(jù)，并Push到數(shù)組中，更新顯示列表
具體代碼如下：
- xt.setup({
- tabletStartupScreen: 'tablet_startup.png',//設(shè)置加載狀態(tài)時(shí)平板電腦上顯示的圖片
- phoneStartupScreen: 'phone_startup.png',//設(shè)置加載狀態(tài)時(shí)手機(jī)屏幕顯示圖片
- icon: 'icon.png',//圖標(biāo)設(shè)置
- glossOnIcon: false,
- //相當(dāng)于HTML的onload,加載完畢時(shí)觸發(fā)的方法
- onReady:function() {
- //創(chuàng)建一個(gè)列表組件，Component是所有Ext組件類的基類，設(shè)置尺寸為充滿這個(gè)屏幕
- //注意tpl屬性，這是定義一個(gè)HTML模板，使用{}來(lái)表明是可變字段
- var list = new Ext.Component({
- fullscreen: true,
- title: 'RIAMeeting News Reader',
- scroll: 'vertical',
- tpl:'<tpl for="."><div class="listItem"><h2>{title}</h2><p>{content}</p></div></tpl>'
- });
- //創(chuàng)建一個(gè)基本組件，只顯示一行字符串
- var about = new Ext.BoxComponent({
- fullscreen: true,
- title: 'About',
- scroll: 'vertical',
- html:'RIAMeeting'
- });
- //創(chuàng)建一個(gè)基于Tab顯示的面板，面板的Tab自動(dòng)從視圖的Title中抽取，類似于Flex中的ViewStack
- //注意animation用來(lái)設(shè)置切換視圖產(chǎn)生的動(dòng)畫(huà)，而item則指定顯示哪些視圖
- var panel = new Ext.TabPanel({
- fullscreen: true,
- animation: 'slide',
- items: [list,about]
- });
- //加載數(shù)據(jù)之前，先在界面上顯示Loading
- Ext.getBody().mask('Loading...', 'x-mask-loading', false);
- //聲明一個(gè)數(shù)組，將來(lái)用返回?cái)?shù)據(jù)來(lái)填充
- var result = [];
- //用Ajax的方式，發(fā)起對(duì)遠(yuǎn)程數(shù)據(jù)的請(qǐng)求，注意跨域問(wèn)題，一旦跨域請(qǐng)使用代理或其它方式解決
- Ext.Ajax.request({
- url: 'rss.xml',//數(shù)據(jù)URL
- success: function(response, opts) {//數(shù)據(jù)加載成功之后的回調(diào)方法
- var xmlDom = response.responseXML;
- var items = xmlDom.getElementsByTagName('item');//用XMLDom的方式獲取數(shù)據(jù)節(jié)點(diǎn)
- //用循環(huán)的方式獲取數(shù)據(jù)，并Push到數(shù)組中
- for(var i=0;i<items.length;i++) {
- var item = items[i];
- var t = getText(item.getElementsByTagName('title')[0]);
- var d = getText(item.getElementsByTagName('description')[0]);
- result.push({title:t,content:d});
- }
- Ext.getBody().unmask();//刪除Loading顯示
- list.update(result);//更新列表
- }
- });
- //這個(gè)方法用來(lái)獲取XML節(jié)點(diǎn)的文本值
- function getText(oNode) {
- var sText = "";
- for (var i = 0; i < oNode.childNodes.length; i++) {
- if (oNode.childNodes[i].hasChildNodes()) {
- sText += getText(oNode.childNodes[i]);
- } else {
- sText += oNode.childNodes[i].nodeValue;
- }
- }
- return sText;
- }
- }
- });
注意因?yàn)橐{(diào)取遠(yuǎn)程數(shù)據(jù)，在本地是看不到效果的，您需要將它部署到一個(gè)Server上，才能正常運(yùn)行。
RSS閱讀器開(kāi)發(fā)過(guò)程之jQuery Mobile篇
同樣請(qǐng)進(jìn)入jQuery Mobile的官網(wǎng)，下載最新的開(kāi)發(fā)包(依賴的JS類庫(kù)和CSS，圖片)。
創(chuàng)建HTML頁(yè)面，代碼如下：
- <html>
- <head>
- <title>Lists</title>
- <link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
- <script src="jquery-1.4.3.min.js"></script>
- <script type="text/javascript" src="jquery.mobile-1.0a1.min.js"></script>
- <script src="news.js"></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>
注意news.js是我們用來(lái)編寫(xiě)邏輯JavaScript的文件，而ul則是RSS列表顯示所用的容器。
news.js的邏輯實(shí)現(xiàn)：
- //相當(dāng)于HTML的onload,加載完畢時(shí)觸發(fā)的方法
- $(document).ready(function(){
- //用Ajax的方式，發(fā)起對(duì)遠(yuǎn)程數(shù)據(jù)的請(qǐng)求，注意跨域問(wèn)題，一旦跨域請(qǐng)使用代理或其它方式解決
- $.ajax({
- url: '../rss.xml',//數(shù)據(jù)URL
- dataType: 'xml',//數(shù)據(jù)類型設(shè)置
- type: 'GET',//Get還是Post
- timeout: 10000,//超時(shí)設(shè)置，單位為毫秒
- error: function(xml){//加載錯(cuò)誤的處理方法
- alert("loading xml error");
- },
- success: function(xml){//加載成功的處理方法
- //也是用循環(huán)遍歷數(shù)據(jù)節(jié)點(diǎn)
- $(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">');//聲明一個(gè)li標(biāo)簽節(jié)點(diǎn)
- $("<h3></h3>").html(title).appendTo(liNode);//用h3包裹標(biāo)題并添加到li節(jié)點(diǎn)
- $("<p></p>").html(description).appendTo(liNode);//用p包裹摘要并添加到li節(jié)點(diǎn)
- liNode.appendTo("ul");//最終將li節(jié)點(diǎn)添加到ul節(jié)點(diǎn)，形成列表顯示
- });
- }
- });
- })
同樣的，您需要將它部署到一個(gè)Server上，才能正常運(yùn)行。
總結(jié)對(duì)比
Sencha Touch：重量級(jí)框架，類似于Flex SDK;組件封裝較多;在各平臺(tái)交互表現(xiàn)統(tǒng)一(內(nèi)部封裝);入門(mén)門(mén)檻較高
jQuery Mobile：輕量級(jí)框架，實(shí)質(zhì)是jQuery插件;組件較少;交互表現(xiàn)依賴于平臺(tái)自身，會(huì)有差異;入門(mén)門(mén)檻較低
