jQuery Mobile和Sencha Touch开发移动应用过程对比是本文要介绍的内容,HTML5虽然离全面普及还有很长的时间,但在一些开发领域,HTML5已经崭露头角。 比如在移动开发中,HTML5更能体现其跨平台的特性(Flash虽然积极努力,但仍然被iOS等系统拒之门外),说到这里,不得不提一下HTML5在移动开发领域的两个优秀框架:Sencha Touch 和 jQuery Mobile。本文将站在一个Flash开发者的角度,以一个简单的RSS阅读器实例(这个实例已经在这篇文章《走进Android[1]:如何开发基于Adobe AIR的Android应用》中实现过),初步为大家介绍一下使用这两个框架构建移动应用的差异。 前置知识 首先您需要大致了解Sencha Touch 和 jQuery Mobile。 jQuery Mobile简介: 为了让移动设备也能用上jQuery,jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。 Sencha Touch简介: 前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Rapha?l库,推出适用于最前沿Touch Web的Sencha Touch框架,该框架是世界上第一个基于HTML5的移动应用框架。进入Sencha Touch官方网站查看更多介绍。 开发工具 IDE:可以使用任意文本编辑器,随您哪个顺手就用哪个,本文将使用Eclipse+Spket,这是一个非常不错的,主要用于开发Ext应用的插件,但经过配置也可用于jQuery开发,点击这里查看详细介绍。 调试工具:很遗憾Firefox对Sencha Touch的渲染效果非常差,所以我们不能使用Firebug来调试。可以使用谷歌浏览器,其调试工具也不逊色,而对这两款框架的支持程度都尚好。而为了验证Sencha Touch的效果无偏差,最好再装一个Safari浏览器,它对Sencha Touch的渲染是最好的。 最终运行效果(点击查看大图) jQuery Mobile和Sencha Touch开发移动应用过程对比 图 jQuery Mobile和Sencha Touch开发移动应用过程对比 图 在线预览(请使用Safari或谷歌浏览器观看): Sencha Touch版: http://wwwriameetingcom/examples/sencha/ jQuery Mobile版: http://wwwriameetingcom/examples/jqmobile/ RSS阅读器开发过程之Sencha Touch篇 首先进入Sencha Touch官网,下载开发包,开发包中包含必须的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区域留空即可,这也算是Ext开发的一个特点,绝大多数工作都依赖JS来完成。注意testjs是由我们建立,用来编写页面逻辑。逻辑代码的实现步骤: 首先创建一个ExtComponent,并指定它的HTML模板定义,用来作为RSS显示的列表视图 创建一个基本组件,只显示一行字符串,作为第二个视图 创建一个基于Tab显示的面板,面板的Tab自动从视图的Title中抽取,类似于Flex中的ViewStack 用Ajax的方式,发起对远程数据的请求,用循环的方式获取数据,并Push到数组中,更新显示列表 具体代码如下: Extsetup({tabletStartupScreen: 'tablet_startuppng',//设置加载状态时平板电脑上显示的图片 phoneStartupScreen: 'phone_startuppng',//设置加载状态时手机屏幕显示图片 icon: 'iconpng',//图标设置 glossOnIcon: false,//相当于HTML的onload,加载完毕时触发的方法 onReady:function() { //创建一个列表组件,Component是所有Ext组件类的基类,设置尺寸为充满这个屏幕 //注意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>' });//创建一个基本组件,只显示一行字符串 var about = new ExtBoxComponent({ fullscreen: true,title: 'About',scroll: 'vertical',html:'RIAMeeting'}); //创建一个基于Tab显示的面板,面板的Tab自动从视图的Title中抽取,类似于Flex中的ViewStack //注意animation用来设置切换视图产生的动画,而item则指定显示哪些视图 var panel = new ExtTabPanel({fullscreen: true,animation: 'slide',items: [list,about]}); //加载数据之前,先在界面上显示LoadingExtgetBody()mask('Loading', 'x-mask-loading', false); //声明一个数组,将来用返回数据来填充var result = []; //用Ajax的方式,发起对远程数据的请求,注意跨域问题,一旦跨域请使用代理或其它方式解决ExtAjaxrequest({url: 'rssxml', //数据URLsuccess: function(response, opts) { //数据加载成功之后的回调方法 var xmlDom = responseresponseXML; var items = xmlDomgetElementsByTagName('item'); //用XMLDom的方式获取数据节点//用循环的方式获取数据,并Push到数组中 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节点的文本值 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; } } } ); 注意因为要调取远程数据,在本地是看不到效果的,您需要将它部署到一个Server上,才能正常运行。 RSS阅读器开发过程之jQuery Mobile篇 同样请进入jQuery Mobile的官网,下载最新的开发包(依赖的JS类库和CSS,图片)。 创建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的逻辑实现: //相当于HTML的onload,加载完毕时触发的方法 $(document)ready(function(){ //用Ajax的方式,发起对远程数据的请求,注意跨域问题,一旦跨域请使用代理或其它方式解决 $ajax({url: '/rssxml',//数据 URLdataType: 'xml',//数据类型设置 type: 'GET',//Get还是 Posttimeout: 10000,//超时设置,单位为毫秒 error: function(xml){//加载错误的处理方法 alert("loading xml error"); },success: function(xml){/加载成功的处理方法//也是用循环遍历数据节点 $(xml)find("item")each(function(i){var title = $(this)children("title")text();//获取标题内容 var description = $(this)children("description")text();//获取摘要内容 var liNode = $('<li role="option" class="ui-li ui-li-static ui-btn-up-c">');//声明一个li标签节点 $("<h3></h3>")html(title)appendTo(liNode);//用h3包裹标题并添加到li节点 $("<p></p>")html(description)appendTo(liNode);//用p包裹摘要并添加到li节点 liNodeappendTo("ul");//最终将li节点添加到ul节点,形成列表显示 }); }}); }) 同样的,您需要将它部署到一个Server上,才能正常运行。 Sencha Touch和jQuery Mobile功能对比总结如下: Sencha Touch:重量级框架,类似于Flex SDK;组件封装较多;在各平台交互表现统一(内部封装);入门门槛较高 jQuery Mobile:轻量级框架,实质是jQuery插件;组件较少;交互表现依赖于平台自身,会有差异;入门门槛较低。 |
Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )
GMT+8, 2024-4-25 00:56 , Processed in 0.027230 second(s), 20 queries .
Powered by Discuz! X3.2
© 2001-2013 Comsenz Inc.