学文网【摘 要】通过对Widget技术的介绍，同时结合现有移动办公需求，分析了Widget技术在移动办公应用上的优势，并对Mobile Widget技术在移动办公中的应用进行了研究，包括其系统架构与关键技术，最后阐述了Widget移动投票应用这一具体应用实例的开发。
【关键词】Widget Mobile Widget 移动办公 通用投票
1 引言
Widget（微技），是一种基于互联网Web的小应用，能实现某个特定的功能。微技可以看作是运行于浏览器界面之外的定制Web页面，每一个微技都是面向具体的轻量级任务，可以简单地用HTML和级联样式表（CSS）编写；但是要达到真正的可用性，往往需要用到JavaScript和XML等逻辑运算。微技具有小巧轻便、易于开发、与操作系统耦合度低和功能完整等特点。它介于BS和CS架构之间，结合了两者的优点，并不完全依赖网络，软件框架可以存在本地，而内容资源从网络获取，程序代码和UI设计同样可以从专门的服务器获取更新，保留了BS 架构的灵活性。
微技作为一种特殊的“网页”正在改变着互联网的访问方式，用户访问网络不再需要依赖于浏览器就可以实现Web功能。微技还向用户提供了全新的用户体验，通过微技用户可以定制实现自己所需要的各种服务，随意个性化自己的桌面。目前主流的微技包括Yahoo Widget、Google gadget、Apple dashboard Widget和Facebook Widget等。随着互联网用户的需求改变以及微技技术的发展，微技已经不再仅仅局限于PC桌面，而开始渗透到其他领域，如网页Widget、Mobile Widget、人机交互Widget甚至Widget专用终端等。微技的优势和特色，或许注定会成为未来Web应用的重要发展趋势之一，尤其是其中的Mobile Widget。
2 Mobile Widget在移动办公应用中的
技术优势
Mobile Widget（移动微技），指运行于移动终端上的微技。微技的应用框架非常适合手机终端，手机终端屏幕相对较小，使用浏览器将占用有限的屏幕资源，导致手机上网用户体验较差。移动微技不仅可以***于浏览器运行，有效地利用手机屏幕，而且可以更加快速方便地访问移动互联网，给手机用户带来良好的呈现方式和互联网体验。
随着社会节奏的加快，移动办公需求不断增加。经常外出的人员，需要随时随地发起流程、审批流程、审阅公司相关信息。现有的企业信息化系统有效地支撑了内网的流程发起和审批，但是不能适应基于手机的移动审批——无法基于手机发起流程申请，管理层也无法基于手机进行流程审批，从而给工作带来不便。为了更好地支撑公司信息化应用建设，提高内部运作效率与执行力，需要在原有企业信息化系统上实现手机移动办公，实现随时随地基于手机进行移动办公、审批、重要信息与查询。
Widget移动办公应用提供原有企业系统业务功能模块定义的功能，实现在不需要增加、修改原系统任何代码的情况下，方便快速地将Web应用移植到手机上，使客户能够通过手机随时（Anytime）、随地（Anywhere）掌握所关心的信息，实现移动办公、移动审批。
Widget应用有如下优点：
可以基于HTML、CSS、JavaScript等Web技术开发，易于开发与部署；
功能单一，实用性强，每个Widget都有自己的主题功能，执行效率高，占据系统资源少；
灵活轻便，内容丰富，可实现高度个性化桌面；
利用开放API开发应用，开发成本低，易于高效整合已有的应用来开发新应用；
实现形式介于Web网页和客户端软件之间，既有B/S架构的易推广性，又有C/S 架构的易管理性；
功能实现在Widget引擎上完成，和操作系统耦合度低，便于应用的跨平台移植。
3 Widget移动办公应用系统架构及关键
技术
3.1 Widget技术架构
Widget技术架构（***1）由Widget引擎和Widget应用两部分组成。Widget引擎相当于一个容器，容纳不同类型的Widget应用，Widget应用运行于Widget引擎之上。
Widget应用一般以XML文件构成代码，用CSS定制风格，用JavaScript表现逻辑，用Ajax机制从网络获取内容，通过Widget对象访问本地文件。Widget应用的类型主要由业务种类决定，每个Widget应用都对应一种业务应用。
Widget引擎用以解决不同手机操作系统接口差异而引起的开发成本高、开发周期长、适配难度高、版本维护难等问题，它通过屏蔽不同手机操作系统的差异，向上层Widget应用提供统一的API接口和运行环境，实现Widget应用的跨终端运行。Widget引擎提供了HTML解释、CSS解释、JavaScript解释等引擎，内置了访问手机本地能力的Widget对象。
3.2 Widget移动办公应用开发架构
Widget移动办公应用开发架构分为终端侧、中间层、服务端三部分。终端侧包括手机终端上的Widget引擎以及运行在Widget引擎上的Widget移动办公应用；中间层是为Web应用快速移动办公化而提供的中间层能力，包括数据转换能力、附件转换能力等；服务端是指运行Web上的各种办公应用系统。Widget开发架构如***2所示：
中间层通过一系列的数据接入、数据解析、数据容错、数据交互、数据转换、逻辑分析，完成终端到服务端的传输和连接，从而实现Web办公应用而无需进行任何改动，快速实现Widget移动办公化。
中间层对Web办公应用系统返回的数据进行快速接入、分析，能够解析的类型涵盖了HTML语言所有的语法和标签，如a、img、table、tr、td、th、div、span、p、body、head、html、b、u、i、label、strong、li、ul、dl；同时也对数几十种文档格式进行预读解析成特定格式，如doc、ppt、xls、zip、rar、txt、html、xml、jpg、gif、tif、bmp、png等，提高系统性能；在页面本身错误时也能够对数据进行容错，保证数据的合法性；最后将数据进行逻辑处理，整合输出到终端侧的Widget应用。
3.3 Widget关键技术
（1）HTML
HTML即超文本标记语言，最初由Tim Berners Lee于1989年在欧洲核子研究理事会创建，设计的目的是使科学家透明地共享网络上的信息。HTML通过为普通文件中某些字句加上标记使文件在浏览器中达到预期的显示效果，具有***于平台的格式、结构化的设计、超文本链接等特点，已经成为万维网文档和浏览的基本格式。
（2）CSS
CSS即级联样式表，在W3C标准中被定义为“一种对Web页面进行外观控制的机制”，与HTML和JavaScript一样，是用于Web开发的前端技术。
使用CSS来控制网页页面外观，具有如下优势：
1）表现和内容分离。将设计部分剥离出来放在一个***样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好；
2）提高页面浏览速度。对于同一样式的页面视觉效果，采用DIV+CSS重构的页面容量要比table编码的页面文件容量小得多；
3）易于维护和改版。开发人员只需修改几个CSS文件就可以重新设计整个网站的页面。
（3）JavaScript
JavaScript是由Netscape公司开发并随Navigator一起的基于对象事件驱动的编程语言，它是一种解释型客户端脚本语言，可为客户提供更流畅的浏览效果。
（4）Ajax
Ajax是指异步JavaScript和XML技术，使用几种现有技术——CSS、JavaScript、XHTML、XML和可扩展样式语言转换（XSLT），开发外观及操作类似于桌面软件的Web应用软件。通过Ajax技术，Web页面不用打断交互流程进行重新加载，就可以动态地更新，而且可以创建接近本地桌面应用的更直接、高可用、更丰富、更动态的Web用户界面。
4 Widget移动办公应用开发实现
根据Widget移动办公开发框架，Widget技术可实现办公应用系统的快速移动化，快速建立移动办公应用系统。下面介绍基于Widget移动办公开发框架的应用实现：Widget移动投票应用。该应用通过Widget技术，实现Web通用投票系统在手机终端的延伸，实现通过手机客户端进行投票、查看历史投票记录等功能，用户可通过手机终端随时随地参与各类投票活动，具有方便、快捷、美观等优点。
4.1 系统架构
Widget移动投票应用的系统架构如***3所示，系统主题为Widget客户端，提供问卷调查、满意度调查、选举调查、竞争性调查、培训报名、意见收集等功能。客户端通过Ajax与中间层进行数据转换，并调用中间层的通用投票能力、业务统计能力等，中间层再与Web通用投票系统之间通过HTML进行交互。
4.2 工作原理
Widget数据对象的典型处理过程（***4）就是对上行和下行的处理，其中大部分页面只需要配置下行规则。
Web通用投票系统的适配，需要编写XSL文件对Web请求和应答数据进行格式化。适配原则项主要包含：配置规则主要适用于Web系统的开发；对于数据库和接口适配，则需要编写JSP文件，在JSP中访问数据库或者调用接口，输出终端需要的页面。
Widget终端展示页面和普通Web页面都为“text/html”文本类型（都为HTML元素），此时只要通过JSP代码“response.setContentType（"text/html"）；”指明JSP输出的为智能终端页面。
具体代码示例如下：
（1）获取所有投票列表
GET URL地址 HTTP/1.1
Accept： image/gif， image/jpeg， image/pjpeg， image/pjpeg， application/x-shockwave-flash，
application/x-ms-application， application/x-ms-xbap， application/vnd.ms-xpsdocument， application/xaml+xml， application/QVOD， application/QVOD， application/vnd.ms-excel，
application/vnd.ms-powerpoint， application/msword， */*Accept-Language： zh-cn
User-Agent： Mozilla/4.0 （compatible； MSIE 8.0； Windows NT 5.1； Trident/4.0； Embedded
WB 14.52 from： http：/// EmbeddedWB 14.52； .NET CLR 2.0.50727； .NET CLR 3.0.04506.648； .NET CLR
3.5.21022； .NET CLR 3.0.4506.2152； .NET CLR 3.5.30729； InfoPath.2）
Accept-Encoding： gzip， deflate
Host： 域名地址
Connection： Keep-Alive
Cookie：_SessionId=[值]； __ZSIAMS-Passport__=[值]； ZS___Z***OBILE-IAP___IAPAppCookie（_test）=[值]； ZS_IAP_FlagCookie（_test）=[值]
（2）节选返回的部分数据 “Test002”食堂服务质量问卷调查活动开始了，截至2011年02月12日
进入 >>
（3）提交投票，部分数据
POST URL地址 HTTP/1.1
Accept： image/gif， image/jpeg， image/pjpeg， image/pjpeg， application/x-shockwave-flash，
application/x-ms-application， application/x-ms-xbap， application/vnd.ms-xpsdocument，
application/xaml+xml， application/QVOD， application/QVOD， application/vnd.ms-excel，
application/vnd.ms-powerpoint， application/msword， */*
Referer： URL地址
Accept-Language： zh-cn
User-Agent： Mozilla/4.0 （compatible； MSIE 8.0； Windows NT 5.1； Trident/4.0； EmbeddedWB
14.52 from： http：/// EmbeddedWB 14.52； .NET CLR 2.0.50727； .NET CLR
3.0.04506.648； .NET CLR 3.5.21022； .NET CLR 3.0.4506.2152； .NET CLR 3.5.30729； InfoPath.2）
Content-Type： application/x-www-form-urlencoded
Accept-Encoding： gzip， deflate
Host： 域名地址
Content-Length： 6555
Connection： Keep-Alive
Cache-Control： no-cache
Cookie：_SessionId=[值]；__ZSIAMS-Passport__=[值] ；ZS___Z***OBILE-IAP___IAPAppCookie（_test）= [值]；ZS_IAP_FlagCookie（_test）= [值]
4.3 应用效果
Widget移动投票应用的用户界面如***5所示，分别是手机端显示的Widget登陆界面、投票列表界面、投票详情界面和投票提交界面。
5 结束语
本文主要研究了基于Widget的移动办公应用的系统开发框架和应用，充分发挥了Mobile Widget在移动办公应用中的技术优势。Widget移动投票应用的成功开发实现，验证了基于Widget的移动办公应用开发可以有效提高办公应用移动化的效率。它的应用不受时间和地域限制，实现方案具有较强的普适性，对其他信息化应用实现移动办公具有一定的参考价值。
参考文献：
[1] 程宝平，杨晓华，朱春梅. 移动微技（Mobile Widget）应用开发权威指南[M]. 北京： 电子工业出版社， 2010.
[2] 杨晓华，程宝平，朱春梅. Mobile Widget——新一代移动互联网应用技术[J]. 电信技术， 2011（2）： 30-34.
[3] 倪敢峰，薛立宏，龚雪峰. Mobile Widget在移动增值业务中的应用研究[J]. 电信科学， 2009（5）： 22-26.
转载请注明出处学文网 » 基于Widget的移动办公应用的研究和开发