学士学位论文基于html5的跨移动平台的新闻阅读应用.docx

1、学士学位论文基于html5的跨移动平台的新闻阅读应用 广州大学华软软件学院 毕业论文（设计） 课题名称 基于HTML5与jQuery Mobile的跨移动平台的新闻阅读应用-页面设计学 院 广州大学华软软件学院 系 别 软件工程系 专业班级 软件开发1班 学生姓名 邓鸿健 学 号 0840112142 指导教师 钟迅科 日 期 2012年5月2日 摘要 近年移动互联网的高速发展，给人们相互交流与获取资讯提供了便捷的渠道。同时伴随移动互联网快速发展的是日新月异的终端设备，各种终端设备每几个月就携带更强的硬件并搭载最新版本的移动操作系统，给用户提供更强大的性能与更友好的用户体验，但是这也给开发者带

2、来了选择平台与兼容版本的困难，一种系统对应一种开发环境，系统版本升级带来了新特性和更高的硬件要求，原来的应用可能就要跟着同时升级。 近来HTML5因为其强大的功能而受到业界的重视与支持，热门的移动操作系统都给予了充分的重视，而著名的JavaScript框架jQuery也推出了移动版的框架jQuery Mobile,该框架基于HTML5给不同的移动终端提供了友好界面的支持并对触屏进行了优化。本应用使用jQuery Mobile框架来实现页面设计，实现浏览RSS聚合信息，并提供收藏、推荐、评论功能，实现跨平台新闻阅读。关键词 HTML5，jQuery Mobile，新闻阅读，RSSABSTRACT

3、 The few year mobile web developer faster, let people easy to communication and get news. Take part with the mobile web developer is different mobile device with different operation system, the different let user had must choose, and take a problem to developer: a operation system support a program

4、language，a kind user support a software .HTML5 is attracted and supported by its power function, all the host mobile operation system declare support HTML5.The popular JavaScript framework release mobile version: jQuery Mobile ,its HTML5-based and support friend UI and optimize about touch screen. T

5、his application use jQuery Mobile to design web page, support read RSS news and collect, recommend, comment function，achieve Cross-Platform web application.KEY WORDS HTML5；jQuery Mobile；News Reader；RSS目录前 言 1研究背景和意义 1研究方法与要达到的要求 1与国内研究对比 2研究范围 31 相关技术介绍 41.1 HTML5相关新特性介绍 41.2 CSS3相关新特性介绍 61.3 jQuery

6、 Mobile框架介绍 71.3.1 综述 71.3.2 组件 71.3.3 事件与方法 91.4 Spring框架 91.5 Hibernate框架 91.6 RSS技术 102 跨移动平台的新闻阅读应用的可行性分析 112.1. 可行性分析 112.1.1. 技术可行性 112.1.2. 操作可行性 112.1.3. 经济可行性 112.2. 可行性分析结论 123 跨移动平台的新闻阅读应用的需求分析 133.1 系统性能需求 133.2 系统功能需求分析 133.2.1. 注册与登录模块 133.2.2. 订阅管理模块 133.2.3. 浏览用户订阅新闻模块 143.2.4. 管理订阅新

7、闻模块 143.2.5. 新闻评论模块 143.3 跨移动平台的新闻阅读应用的DFD图 153.4 跨移动平台的新闻阅读应用的ER图 163.5 用例的实现与说明 173.5.1. 用例图示 173.5.2. 用例规约 173.6 时序图 193.6.1. 注册时序图 193.6.2. 登录时序图 203.6.3. 浏览条目时序图 203.6.4. 管理订阅时序图 213.6.5. 新闻评论时序图 223.7 开发平台 223.8 应用运行环境 223.8.1. 服务器端硬件与软件环境 233.8.2. 客户端硬件与软件环境 234 跨移动平台的新闻阅读应用的概要设计 244.1 应用的系统结

8、构与开发模型 244.1.1. B/S系统结构 244.1.2. MVC开发模型 244.2 应用系统结构图 254.3 数据库设计 254.3.1. 数据字典 265 跨移动平台的新闻阅读应用的详细设计 295.1 应用结构图 295.2 功能实现 305.2.1. 注册模块与注册模块 305.2.2. 管理订阅模块 315.2.3. 浏览订阅模块 345.2.4. 管理条目模块 385.2.5. 新闻评论模块 406 项目测试 426.1 单元测试 426.2 集成测试 426.3 系统测试 426.4 响应性能测试 43项目总结 45参考文献 46致谢 47前 言研究背景和意义本文主要探

9、讨跨平台新闻聚合阅读应用在移动中的重要地位。随着信息爆炸时代的到来，个人获取信息的渠道异常丰富，各种渠道提供了不同的信息，如果没有统一的管理工具，要查看新闻信息必须查看信息源，同时要从一大堆信息中分辩哪些是旧的，哪些是新的，这会导致产生大量重复性的工作产生，如果要获取多个信息源的新闻，那重复的工作会更加的多。但是如果使用信息聚合应用，就可以把多个信息源集中起来，统一浏览与管理，只要查看这个应用就能查看到最新的新闻资讯，并且可以查找以前看过的内容，实现个人信息源中心的作用。现在移动互联网的资费越来越低，很多人都通过移动终端来获取信息，这的确是一个非常便利的手段，因为这可以十分便利地联网与别人交流

10、或者获取资讯。因为移动平台的激烈竞争，诞生了像iOS、Android、WP7等不同的移动操作系统，这些系统给用户提供的更多的选择与不同的体验，却增加了开发人员的负担，因为想要更多的用户就要兼容更多的系统，这样在开发和升级上的工作就会大大增加。近几年快速发展的HTML5给更好的跨移动平台应用提供了技术的支持，现在HTML5提供了丰富的功能如：视频标签、画布、离线支持，加上越来越强大的CSS3，在开发跨移动平台应用时能够使开发人员更加专注于功能的实现，而不用顾虑太多的平台相关兼容，所以使用HTML5相关技术在开发跨移动平台应用时是个不错的选择。研究方法与要达到的要求使用jQuery Mobile框

11、架开发一个Web应用，通过使用jQuery Mobile框架 API提供的功能模块和方法事件实现较丰富的跨移动平台新闻阅读应用，另外使用HTML5与CSS3实现增强性的功能，提供更好的用户体验。同时测试该应用在不同平台上面的表现效果，以此测试应用跨平台性的适应性，探讨跨移动平台应用的开发方向。该Web应用要完成任务设定的基本要求，和部分考虑实现功能，能够在主流移动平台如：Android和iOS上运行良好，同时有较好的用户体验，以此证明基于HTML5的jQuery Mobile开发的应用能够胜任跨移动平台开发的任务，能够提供较好的平台适应性。图0-1 效果图与国内研究对比国外知名的新闻阅读应用G

12、oogle reader和国内领先的新闻阅读应用鲜果阅读都有推出移动版的应用，以下就这些应用与本应用的异同做些简单分析：1.跨平台性：Google reader的移动版本有移动网页版和客户端版，移动网页版的功能有所精简，比较简单。鲜果阅读的移动版本也有移动网页版和客户端版，但是移动网页版更加简单，只实现了基本的功能。本应用基于移动网页提供了一致的功能体验，但是需要较新的浏览器支持。2.功能：Google reader的客户端版功能齐全，同时提供了良好的体验。鲜果阅读的客户端版提供了相对简单的功能，但是有很好的用户体验。本应用通过较新的HTML5与jQuery Mobile提供了较完整的功能与比

13、较好的用户体验。3.其它：Google reader与鲜果阅读作为商业化应用在浏览器兼容上面考虑更多，所以他们在移动网页上的功能会有所精简，而重点维护客户端版本。本应用因为研究性的需要，只确保在主流移动平台如Android和iOS上能良好运行，其它一些较老的移动平台和较旧版本的浏览器，在兼容方法可能有所欠缺。研究范围围绕跨移动平台新闻阅读应用的需求，使用jQuery Mobile框架作为核心架构，实现应用基本功能，另外再使用HTML5与CSS3增强用户体验与完成考虑添加的功能。研究范围集中于实验jQuery Mobile的提供的API是否满足跨移动平台应用开发的需要，同时尝试结合HTML5与C

14、SS3进行开发，研究这些最新技术在现有平台上面的适应性。1 相关技术介绍1.1 HTML5相关新特性介绍HTML5的上一个版本是4.01，发布时间在1999年，这会使人觉得奇怪为什么一个版本间会隔了十多年， 其实这是因为W3C在发布4.01版本后就改变研究方向到XHTML，但是因为XHTML发展的过于超前和规范太严格，所以没被业界接受，反而是Opera、Apple的浏览器厂商在HTML基础上面发展的新版本受到欢迎，后来W3C加入到HTML新版本的开发上面，这就是现在的HTML5，这个新版本有如下几点新特性：1. 简单的声明之前的HTML4.01文件类型声明：和XHTML1.0文件类型声明：到H

15、TML5声明文件类型只要如下简单即可：因为HTML5的一个设计原理就是必须要向后兼容，兼容未来的HTML版本，所以再写一个声明版本的doctype已经没有多大意义，对验证器来说也是一样。同时HTML5的规范还省略了不必要的复杂性，避免不必要的复杂性。如声明rel=stylesheet后就不必要再声明type=text/css了，因为这两个声明是同样的意思，只要有rel= stylesheet就够了，因为这样浏览器就可以猜测出你要链接的是一个CSS样式表。2. 新的有具体意义的标签（头部）、（导航）、（文章）、（分区）、（脚本）、这些元素的作用类似于以前的（分区）,可以把文档分割为独立的不同的部

16、分，但是新标签有具体的语义上的含义，可以把网页分隔成清晰的独立的模块。 3. 新的表单元素元素把表单内容的一部分打包，生成一组相关表单的字段。增加新的带有浏览器直接支持插件的类型，提供原生的更好的用户输入体验:color date datetime datetime-local month week time email number rangesearch tel url增加新属性带有默认的动作事件或者特殊的效果：autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget he

17、ight max min multiple pattern placeholder required step 4. 视频与音频支持标签定义视频，通过浏览器原生支持MP4、WebM和Ogg三种视频格式，各个浏览器公司对这三种视频支持略有不同。标签定义音频，通过浏览器原生支持 MP3、Wav、和Ogg三种音频格式，同样各个浏览器对这三种音频支持略有不同 。5. 元素拖放通过设置元素为可拖元素和drag（拖到）与drag（拖放）事件，和相关的动作处理事件，完成网页元素的拖放事件操作，这个也是通过浏览器原生支持的，只需简单的操作就可以完成。6. 画布元素元素是只用于图形的容器，可以通过脚本语言绘制自

18、定义的图形，或者绘制图片文件，它与其它图片元素的区别在于它是通过脚本来实现的。7. 离线应用与数据支持提供比cookies更安全更快捷的本地存储功能，能够在用户浏览器保存更多的数据。8. 其它SVG格式支持、位置定位服务、独立线程、服务器发送事件。1.2 CSS3相关新特性介绍1. 强大的选择符：CSS3的扩展了CSS2.1的基本选择符，它允许在标签中指定特定的HTML元素而不必使用多余的类、ID或者JavaScript脚本，另外增加了全新的伪对象选择符，用来和content属性一起使用，设置在对象前后使设计弹性更大。2. 更丰富的色彩效果：颜色取值HSL能够设定色调的饱和度和亮度，RGBA和

19、HSLA的参数Alpha可以指定元素的透明度，另外还可以使用transparent指定全透明色彩。3. 多栏布局：CSS3提供了多列布局的支持，通过指定columns的相关属性，就可以指定列数或者根据列宽动态布局。4. 丰富的背景属性：CSS3增加了多个背景属性，如background-image、background-repeat、background-size、background-position等，这样就可以在一个元素上添加上不同效果的背景图片，设计更美观的网页。5. 字体与文字支持：支持将字体文件映射到客户端系统，使的客户端可以使用没有安装的字体样式。Text（文本）属性有所增强，支

20、持一些文字处理，或者文字效果。6. 增强边框支持：更详细的边框设置，和原生的圆角支持。比如：多色边框、边框背景图、圆角与边框阴影，那样就可以通过简单的代码实现丰富的效果。7. 新增弹性盒子模型：可以设定盒子的比例或者固定大小，然后就能使各个元素的自适应窗口大小，而且还可以指定布局的取向和顺序，使网页元素的布局更加灵活，更有弹性。8. 媒体查询：media query可以测定浏览设备的类型和大小，从而编写不同的样式，使网页的平台适应性大大提高，提供更好浏览体验。9. 其它：边框图片、渐变设计、动画效果、语音样式。1.3 jQuery Mobile框架介绍1.3.1 综述jQuery Mobile

21、框架是jQuery面向手机与平板等移动设备开发的核心库，并且提供了完整统一的UI框架，为开发人员提供一个跨浏览器的框架，使得开发移动Web网站或应用更加快捷。jQuery Mobile中的页面都是基于简洁、语义化的HTML来构建，这样可以确保能兼容大部分支持web浏览的设备。在这些设备解析CSS和JavaScript的过程中，以一种不明显的方式将语义化的页面转化为富客户端页面。1.3.2 组件页面与对话框jQuery Mobile关于页面提供了如下几种组件：带有头部栏和底部栏的页面，链接动态载入页面，对话框页面以及体验比较好的页面切换效果，同时提供动态页面后退动作的处理，满意开发移动应用的需求

22、。工具栏提供工具栏组件。可以头部栏和底部栏添加按钮；不同样式的导航栏；头部栏和底部栏自动适应页面，显示或者隐藏；某些页面内容作全屏显示，例如展示图片。按钮提供三种颜色主题的18种不同标志的图标按钮，并且可以设置按钮的图标位置、是否带有文字、是否行内按钮，或者一组相关的按钮。内容格式提供四种不同宽度的列布局，自动把元素按照比例平铺。折叠展示的内容，并且可以把相关的几个折叠元素组合成一个集合。表单元素提供风格统一的美观的UI的表单元素，可以设置标签和元素在同一行的格式显示，也可以把多个表单元素组和成一个独立样式的表单集合。列表视图提供了多种样式可带统计数字的列表：基本的网格列表、数字列表、分割显示

23、的列表、带分割标题的列表等，提供列表内查询的功能支持。图1-1 jQuery Mobile基本组件1图1-2 jQuery Mobile基本组件21.3.3 事件与方法jQuery Mobile对移动设备提供了丰富的事件支持，如 ：触摸、虚拟鼠标、改变屏幕方向、滑动和页面状态改变的事件支持。基于框架的方法就提供改变或加载页面、清除框架记录缓存、显示或隐藏通知信息、显示或隐藏工具栏等丰富的方法，使开发人员使用jQuery Mobile开发Web应用更加得心应手。1.4 Spring框架1. 管理容器：Spring包含并管理应用对象的配置和生命周期，可以配置bean的实例策略与相互之间联系。委托S

24、pring容器对对象生命周期进行管理，从而使开发人员可以更加注重与业务上的工作。2. 控制反转：Spring3.0 通过一种称为控制反转（Inversion of Control，IoC）的技术完成松耦合的需求。一个对象依赖的其它对象会通过被动的方式传递进来，而不用自己创建依赖的对象。3. 面向切面编程：Spring3.0 还提供了称为面向切面编程（Aspect-Oriented Programming，AOP）方式的支持，通过分离应用的业务逻辑与系统服务（如日记）实现高内聚，使得对象实现自己的功能，完成业务逻辑就足够了。4. Spring MVC：Spring MVC框架是一个全功能的Web

25、应用程序的MVC实现。通过控制器实现Web应用程序的业务逻辑，加上Spring 框架一贯的易用性、扩展性与灵活性，使得Spring MVC能够高效地和其它技术协同工作。1.5 Hibernate框架基于Java语言的一种对象关系映射解决方案，使得开发人员使用通过面向对象的思维来操作关系数据库。同时提供HQL查询工具、缓存管理、延迟加载策略、事务管理批量操作等方法。1.6 RSS技术RSS（信息聚合）是一种描述与同步网站信息的格式。有些网站提供RSS输出，即把网站最新的内容实时地输出到RSS上面，这样用户只要借助RSS聚合工具就能获取到多个信息源的最新更新，在不访问来源网站的情况下获取网站的的资

26、讯。2 跨移动平台的新闻阅读应用的可行性分析2.1. 可行性分析可行性分析主要是对跨移动平台的新闻阅读应用的技术可行性、操作可行性、经济可行性进行分析，所指定的解决方案是否可行，能否在规定资源和时间的约束下完成，能否获得相应的效益。2.1.1. 技术可行性本应用后台技术采取成熟的Spring与Hibernate框架，拥有规范、完整的官方文档与详细的网络教程，加上已经有一定的使用经验，所以能够应用于开发相关功能应用。HTML5与jQuery Mobile是Web最新的技术与新诞生的框架，所有相关资料与经验会比较欠缺，但是可以参考官方详细文档，并通过实验验证效果，所以也可以对这些新技术新框架进行使

27、用，开发跨平台应用。2.1.2. 操作可行性本应用基于HTML5与jQuery Mobile框架开发，框架UI提供了良好的用户体验，并且在主流的移动平台都有较好的适应性。另外在jQuery Mobile的UI的基础上面再增加一定的优化，使框架能满足应用的需求。良好的用户体验为操作可行性提供了保证。2.1.3. 经济可行性后台应用的框架Spring、Hibernate都基于开源框架，能免费使用并获得一定的支持服务。数据库系统采用性能高、成本低、可靠性好的关系型数据库 MySQL，能够为数据存储提供较好的支持。费用支出主要集中于开发与维护人员的工资，以及服务器运行与网络流量的费用。2.2. 可行性

28、分析结论通过可行性分析，跨平台新闻阅读应用在技术、操作、经济三个方面的可行性都达到要求，具备进行开发的价值，并能在开发完成上线，为用户提供服务。3 跨移动平台的新闻阅读应用的需求分析3.1 系统性能需求 表3-1 系统性能需求主要质量属性详细要求正确性无逻辑错误稳定性Web服务持续稳定工作时间3天（72小时）可靠性有针对异常的处理，防止非法操作性能，效率应用响应时间小于等于3秒易用性精简操作步骤，相关操作有一定的提示清晰性界面条理清楚，操作明确安全性保护用户信息可扩展性可在当前需求基础之上进行功能上的扩展跨平台性可运行在主流的移动平台上3.2 系统功能需求分析3.2.1. 注册与登录模块为用户

29、提供注册帐号，使之能够登录到系统，以独立的身份使用应用，浏览或者管理自己的新闻信息。3.2.2. 订阅管理模块用户可以搜索自己感兴趣的新闻，并将该新闻源添加到自己的订阅源中，然后就可以在应用中第一时间浏览到最新的新闻资讯。同时，用户还可以删除已订阅的新闻源，使新闻阅读应用中的信息符合个人的需求。3.2.3. 浏览用户订阅新闻模块以列表方式或者图片方式浏览已经用户订阅的最新的新闻，或者订阅源内全部的新闻。系统还支持用户浏览自己收藏的新闻，或者应用推荐的新闻条目（即用户推荐）。使得用户可以统一浏览感兴趣的新闻。3.2.4. 管理订阅新闻模块标记用户已读的新闻条目，用户可以初始新闻条目的阅读状态，另

30、外提供收藏、分享到微博的功能，使用户可以对自己订阅的新闻进行管理，分享感兴趣的新闻，并且通过用户的操作动作，应用汇集关注度高的新闻，进行推荐。3.2.5. 新闻评论模块用户可以查看某条应用其他用户所给的评论，并能自己发表评论，参与到与其他用户的讨论中，获取比新闻本身更丰富资讯。3.3 跨移动平台的新闻阅读应用的DFD图图3-1 跨移动平台的新闻阅读应用的DFD图3.4 跨移动平台的新闻阅读应用的ER图拥有目录N11用户1包含N11新闻订阅新闻源等于1包含N拥有11拥有阅读记录1新闻条目N评论图3-2跨移动平台的新闻阅读应用的ER图3.5 用例的实现与说明3.5.1. 用例图示图3-3 注册用户用例图3.5.2. 用例规约表3-2注册用例规约用例名称：注册涉及的参与者：未注册