成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

Sencha Touch和jQuery Mobile開發過程對比

作者：郭少瑞
移動開發
HTML5雖然離全面普及還有很長的時間，但在一些開發領域，HTML5已經嶄露頭角。比如在移動開發中，HTML5更能體現其跨平臺的特性（Flash雖然積極努力，但仍然被iOS等系統拒之門外），說到這里，不得不提一下HTML5在移動開發領域的兩個優秀框架：Sencha Touch 和 jQuery Mobile。

本文將站在一個Flash開發者的角度，以一個簡單的RSS閱讀器實例(這個實例已經在這篇文章《如何開發基于Adobe AIR的Android應用》中實現過)，初步為大家介紹一下使用這兩個框架構建移動應用的差異。

前置知識

首先您需要大致了解Sencha Touch 和 jQuery Mobile。

Sencha Touch簡介：http://mobile.51cto.com/Sencha-278623.htm

前不久基于JavaScript編寫的Ajax框架ExtJS,將現有的ExtJS整合JQTouch、Raphaël庫，推出適用于最前沿Touch Web的Sencha Touch框架，該框架是世界上第一個基于HTML5的移動應用框架。進入Sencha Touch官方網站查看更多介紹。

jQuery Mobile簡介：http://mobile.51cto.com/others-277308.htm

為了讓移動設備也能用上jQuery，jQuery開發團隊發布了jQuery移動設備版開發項目jQuery Mobile Project(http://jquerymobile.com)。jQuery Mobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。

工具

工欲善其事，必先利其器，開發之前，要先準備好開發工具和調試工具。

IDE：可以使用任意文本編輯器，隨您哪個順手就用哪個，本文將使用Eclipse+Spket，這是一個非常不錯的，主要用于開發Ext應用的插件，但經過配置也可用于jQuery開發，點擊這里查看詳細介紹。

調試工具：很遺憾Firefox對Sencha Touch的渲染效果非常差，所以我們不能使用Firebug來調試。可以使用谷歌瀏覽器，其調試工具也不遜色，而對這兩款框架的支持程度都尚好。而為了驗證Sencha Touch的效果無偏差，最好再裝一個Safari瀏覽器，它對Sencha Touch的渲染是最好的。

最終運行效果(點擊查看大圖)

在線預覽(請使用Safari或谷歌瀏覽器觀看)：

Sencha Touch版：http://www.riameeting.com/examples/sencha/

jQuery Mobile版：http://www.riameeting.com/examples/jqmobile/

RSS閱讀器開發過程之Sencha Touch篇

首先進入Sencha Touch官網，下載開發包，開發包中包含必須的JS類庫和CSS，示例等等。

然后新建一個HTML頁面，代碼如下：

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  4. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> 
  5. <link rel="stylesheet" href="css/sencha-touch.css" type="text/css"> 
  6. <link rel="stylesheet" href="css/index.css" type="text/css"> 
  7. <title>List</title> 
  8. <script type="text/javascript" src="ext-touch-debug.js"></script> 
  9. <script type="text/javascript" src="test.js"></script> 
  10. </head> 
  11. <body></body> 
  12. </html> 

 

body區域留空即可，這也算是Ext開發的一個特點，絕大多數工作都依賴JS來完成。注意test.js是由我們建立，用來編寫頁面邏輯。邏輯代碼的實現步驟：

  • 首先創建一個Ext.Component，并指定它的HTML模板定義，用來作為RSS顯示的列表視圖
  • 創建一個基本組件，只顯示一行字符串，作為第二個視圖
  • 創建一個基于Tab顯示的面板，面板的Tab自動從視圖的Title中抽取，類似于Flex中的ViewStack
  • 用Ajax的方式，發起對遠程數據的請求，用循環的方式獲取數據，并Push到數組中，更新顯示列表

具體代碼如下：

  1. xt.setup({ 
  2. tabletStartupScreen: 'tablet_startup.png',//設置加載狀態時平板電腦上顯示的圖片 
  3. phoneStartupScreen: 'phone_startup.png',//設置加載狀態時手機屏幕顯示圖片 
  4. icon: 'icon.png',//圖標設置 
  5. glossOnIcon: false, 
  6. //相當于HTML的onload,加載完畢時觸發的方法 
  7. onReady:function() { 
  8. //創建一個列表組件，Component是所有Ext組件類的基類，設置尺寸為充滿這個屏幕 
  9. //注意tpl屬性，這是定義一個HTML模板，使用{}來表明是可變字段 
  10. var list = new Ext.Component({ 
  11. fullscreen: true, 
  12. title: 'RIAMeeting News Reader', 
  13. scroll: 'vertical', 
  14. tpl:'<tpl for="."><div class="listItem"><h2>{title}</h2><p>{content}</p></div></tpl>' 
  15. }); 
  16. //創建一個基本組件，只顯示一行字符串 
  17. var about = new Ext.BoxComponent({ 
  18. fullscreen: true, 
  19. title: 'About', 
  20. scroll: 'vertical', 
  21. html:'RIAMeeting' 
  22. }); 
  23. //創建一個基于Tab顯示的面板，面板的Tab自動從視圖的Title中抽取，類似于Flex中的ViewStack 
  24. //注意animation用來設置切換視圖產生的動畫，而item則指定顯示哪些視圖 
  25. var panel = new Ext.TabPanel({ 
  26. fullscreen: true, 
  27. animation: 'slide', 
  28. items: [list,about] 
  29. }); 
  30. //加載數據之前，先在界面上顯示Loading 
  31. Ext.getBody().mask('Loading...', 'x-mask-loading', false); 
  32. //聲明一個數組，將來用返回數據來填充 
  33. var result = []; 
  34. //用Ajax的方式，發起對遠程數據的請求，注意跨域問題，一旦跨域請使用代理或其它方式解決 
  35. Ext.Ajax.request({ 
  36. url: 'rss.xml',//數據URL 
  37. success: function(response, opts) {//數據加載成功之后的回調方法 
  38. var xmlDom = response.responseXML; 
  39. var items = xmlDom.getElementsByTagName('item');//用XMLDom的方式獲取數據節點 
  40. //用循環的方式獲取數據，并Push到數組中 
  41. for(var i=0;i<items.length;i++) { 
  42. var item = items[i]; 
  43. var t = getText(item.getElementsByTagName('title')[0]); 
  44. var d = getText(item.getElementsByTagName('description')[0]); 
  45. result.push({title:t,content:d}); 
  46. } 
  47. Ext.getBody().unmask();//刪除Loading顯示 
  48. list.update(result);//更新列表 
  49. } 
  50. }); 
  51. //這個方法用來獲取XML節點的文本值 
  52. function getText(oNode) { 
  53. var sText = ""; 
  54. for (var i = 0; i < oNode.childNodes.length; i++) { 
  55. if (oNode.childNodes[i].hasChildNodes()) { 
  56. sText += getText(oNode.childNodes[i]); 
  57. } else { 
  58. sText += oNode.childNodes[i].nodeValue; 
  59. } 
  60. } 
  61. return sText; 
  62. } 
  63. } 
  64. }); 

注意因為要調取遠程數據，在本地是看不到效果的，您需要將它部署到一個Server上，才能正常運行。

RSS閱讀器開發過程之jQuery Mobile篇

同樣請進入jQuery Mobile的官網，下載最新的開發包(依賴的JS類庫和CSS，圖片)。

創建HTML頁面，代碼如下：

  1. <html> 
  2. <head> 
  3. <title>Lists</title> 
  4. <link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" /> 
  5. <script src="jquery-1.4.3.min.js"></script> 
  6. <script type="text/javascript" src="jquery.mobile-1.0a1.min.js"></script> 
  7. <script src="news.js"></script> 
  8. </head> 
  9. <body> 
  10. <div data-role="page"> 
  11. <div data-role="header"> 
  12. <h1>RIAMeeting RSS Reader</h1> 
  13. </div> 
  14. <div data-role="content"> 
  15. <ul data-role="listview"></ul> 
  16. </div> 
  17. </div> 
  18. </body> 
  19. </html> 
 

注意news.js是我們用來編寫邏輯JavaScript的文件，而ul則是RSS列表顯示所用的容器。

news.js的邏輯實現：

  1. //相當于HTML的onload,加載完畢時觸發的方法 
  2. $(document).ready(function(){ 
  3. //用Ajax的方式，發起對遠程數據的請求，注意跨域問題，一旦跨域請使用代理或其它方式解決 
  4. $.ajax({ 
  5. url: '../rss.xml',//數據URL 
  6. dataType: 'xml',//數據類型設置 
  7. type: 'GET',//Get還是Post 
  8. timeout: 10000,//超時設置，單位為毫秒 
  9. error: function(xml){//加載錯誤的處理方法 
  10. alert("loading xml error"); 
  11. }, 
  12. success: function(xml){//加載成功的處理方法 
  13. //也是用循環遍歷數據節點 
  14. $(xml).find("item").each(function(i){ 
  15. var title = $(this).children("title").text();//獲取標題內容 
  16. var description = $(this).children("description").text();//獲取摘要內容 
  17. var liNode = $('<li role="option" class="ui-li ui-li-static ui-btn-up-c">');//聲明一個li標簽節點 
  18. $("<h3></h3>").html(title).appendTo(liNode);//用h3包裹標題并添加到li節點 
  19. $("<p></p>").html(description).appendTo(liNode);//用p包裹摘要并添加到li節點 
  20. liNode.appendTo("ul");//最終將li節點添加到ul節點，形成列表顯示 
  21. }); 
  22. } 
  23. }); 
  24. }) 

同樣的，您需要將它部署到一個Server上，才能正常運行。

總結對比

Sencha Touch：重量級框架，類似于Flex SDK;組件封裝較多;在各平臺交互表現統一(內部封裝);入門門檻較高

jQuery Mobile：輕量級框架，實質是jQuery插件;組件較少;交互表現依賴于平臺自身，會有差異;入門門檻較低

責任編輯：佚名 來源： 瑞研社區
Sencha TouchjQuery Mobile
相關推薦

2011-09-01 10:09:04

2011-09-05 10:49:14

Sencha ToucjQuery MobiHTML5

2011-09-05 13:45:25

jQuery MobiSencha Touc移動Web UI框架

2011-09-02 15:18:49

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2011-09-05 11:23:26

EclipseSencha Touc框架

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-09-02 16:42:51

Sencha ToucWeb應用

2011-09-05 11:27:17

Sencha Touc框架HTML5

2011-09-05 10:20:21

Sencha ToucAPP

2011-07-26 09:46:53

Sencha Touc

2011-07-26 09:58:24

2012-01-10 14:10:26

Sencha Touc

2011-07-26 10:21:25

Sencha Touc

2011-07-26 10:44:15

Sencha Touc

2011-08-15 10:14:41

Sencha ToucMyEclipseTomcat

2011-09-02 16:21:08

Sencha Touc自動生成工具

2011-07-25 16:41:16

Sencha Touc
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 久久国产成人精品国产成人亚洲 | 啪啪毛片| 91在线观看 | 免费视频久久久久 | 久久精品免费观看 | 亚洲精品一区在线观看 | 久久久网| 日韩一区二区三区视频在线播放 | 爱高潮www亚洲精品 中文字幕免费视频 | 欧美日韩在线一区 | 日韩av在线一区二区 | 视频在线亚洲 | 日韩在线免费视频 | 国产一级电影在线观看 | 干干干操操操 | 国产精品中文在线 | 亚洲va国产日韩欧美精品色婷婷 | 在线视频久久 | 国产精品欧美一区二区 | 国产偷录叫床高潮录音 | 久久精品亚洲精品国产欧美 | h肉视频| 国产精品99久久久久久久久 | 羞羞视频免费观看入口 | 亚洲精品一 | 一区在线视频 | 激情欧美日韩一区二区 | 亚洲精品电影在线观看 | av在线天堂网| 国产色 | 中文字幕一二三区 | 国产精品视频网 | 在线观看深夜视频 | 中文字幕视频在线 | aa级毛片毛片免费观看久 | 一区二区三区精品视频 | 欧美成人一区二区 | 精品久久精品 | 日韩av成人在线 | 精品欧美一区二区精品久久 | 手机av在线 |