全面认识Web Widget开发

移动开发
Widget开发有很多值得学习的地方,这里介绍一下什么是WEBWidget开发,WebWidget开发是轻量级的Web应用程序,为使用者提供一键式的服务。

本文和大家重点学习一下WebWidget开发概述,WebWidget开发是轻量级的Web应用程序,为使用者提供一键式的服务。它通常被设计为具有特定的功能,如提供天气、股票、拍卖等的信息。

WebWidget开发概述

移动互联网的兴起

  移动通讯的商业环境正在面临快速变化。一个重要表现是,人们的工作、生活越来越多地倚赖于Internet,例如大量涌现的Web2.0网站、网络社区。同时,人们对Internet的需求也越来越多样化。如何把移动通讯与Internet结合起来,无论对于移动终端制造商还是Internet服务提供商,都是一个新的有趣的挑战。

  现在在移动设备上访问Internet,不如在PC上访问方便,并且支持的Web能力也有限。针对这个问题,目前有两种主要的解决方案,即服从于Web和服从于PC的解决方案。S60的浏览技术属于后者,致力于在移动设备上提供类似于PC的浏览体验。而通过PC访问Internet,则不如通过移动设备那样,有方便、快捷的网络接入。此外,统计数字显示了网站访问存在的"二八"现象,即人们频繁访问的只有少数网站。针对以上问题,S60SDK3rdEditionFeaturePack2中推出了相应的解决方案----WebWidget(以下简称Widget)。

  随着Widget开发的推广,在不久的将来,人们将可以随时随地访问Internet,就象今天人们打电话一样容易。

什么是WEBWidget开发

  WebWidget开发是轻量级的Web应用程序,为使用者提供一键式的服务。它通常被设计为具有特定的功能,如提供天气、股票、拍卖等的信息。它与网页一样,使用标准的Web技术开发,如XHTML,CSS,javascript等。从这方面看,Widget是脱离浏览器UI运行的网页。

  与其它S60应用相比,Widget可以通过相同的方式下载、安装到手机上。这使它非常易于分享。

  Widget的运行基于WebRun-time(以下简称WRT)。WRT是S60SDK3rdEditionFeaturePack2中,新增加的浏览器组件。它是一个Web应用开发环境。

  访问以下链接可以获得更多关于Widget的信息,[url]http://www.forum.nokia.com/main/resources/technologies/browsing/widgets.html。[/url]

体验Widget

  Widget的使用方式与S60本地应用一样。作为Widget的运行平台,WRT设计目标之一就是使Widget与S60平台进行无缝集成,给用户一致的使用体验。例如,每个Widget都可以在应用程序菜单中显示图标;可被设置为待机状态下的快捷键和左右软键;能出现在活动应用列表中;具有与现有的S60应用一样的管理方式,如安装,卸载。

  如下链接展示了Widget的安装和使用的一段视频,[url]http://www.forum.nokia.com/info/sw.nokia.com/id/4e20baf8-4c58-4d36-be9f-798a168a844d/Web_widget_webinar_zh_Ch.swf.html。[/url]

安装Widget

  如上所述,Widget的管理方式与S60本地应用一样。如果了解S60本地应用的安装,就可以顺利地安装Widget。现在支持Widget的手机有***版软件的NokiaN95以及N958G,以及即将上市的所有S603rdEditionFP2手机。

  通过链接http://discussion.forum.nokia.com/forum/showthread.php?t=115609#4,可以下载一些Widget例子。

  Widget以安装包的形式发布。一个安装包就是一个扩展名为.wgz的ZIP文件,包含Widget的所有源文件以及Widget项目的根目录。

  把Widget部署到手机上是安装的***步。Widget可以通过三种方式部署到手机上:

◆通过蓝牙或红外发送到目标设备的信息收件箱中。
◆通过MMC卡或USB端口传送到目标设备的内存中。
◆通过S60Web浏览器下载。

  相应地,根据Widget开发部署方式的不同,安装过程也有所不同:

◆通过信息应用程序打开信息收件箱中的Widget安装包,根据提示安装。
◆使用手机上的文件管理器从MMC卡或从本地C盘上打开Widget安装包,根据提示安装Widget(假定Widget安装包已经复制到MMC卡或通过USB数据线传到手机C盘)。
◆如果在服务器端配置Widget安装包的MIME类型为x-nokia-widget,通过S60浏览器中下载到手机的Widget安装包将被浏览器识别并自动安装。

  安装好后的Widget出现在"应用程序"菜单中。

  在S603rdEditionFP2的Emulator中安装Widget的步骤与上述步骤类似。常用方法是,首先把Widget安装包复制到文件夹Symbian\9.3\S60_3rd_FP2_Beta\epoc32\winscw\c\Data\Others中(以S60SDK3rdEditionFP2为例),然后使用Emulator中的文件管理器打开并安装。

  上一节"体验Widget"中的链接包含了一段演示Widget安装过程的视频。

Widget开发过程

  开发Widget使用标准的Web开发技术,如XHTML,CSS,javascript等。这使得Widget开发比较容易上手,开发周期也较短,一般仅需要数日至数周。

  Widget包含两个必要文件:HTML文件和info.plist文件。以及其它可选文件:css文件,javascript文件,资源文件(如图标,背景等)。HTML文件定义了widget的结构和内容。Css文件定义了widget的版面格式,如字体、颜色等,起修饰作用。Javascript给widget增加了动态效果,使其具有某些智能。

  Widget项目表现为文件系统中的一个目录。该目录包含Widget的所有文件。开发过程中要注意,Widget的必要文件和图标文件(icon.png)必须位于widget项目的根目录下。

  Widget的开发过程如下:

1.用字编辑器或WebIDE编写widget代码。
2.调试widget。可结合使用Firefox与Firebug,常用的调试功能有设置断点、单步执行等,还可以观察HTML文件的DOM结构。
3.把widget文件连同目录打成ZIP包,改扩展名为.wgz,安装到测试环境。

测试Widget开发可使用三种环境:
1.S603rdEditionFP2中的emulator。
2.支持WRT的某些手机。当本文写作时,可用的手机包括具有***版软件的诺基亚N95,N958G等。即将发布的所有S603rdEditionFP2手机也将支持Widget.
3.通过RDA(RemoteDeviceAccess)测试。RDA是一种通过Internet远程访问诺基亚S60设备的服务,有关RDA的信息位于http://apu.ndhub.net。
4.测试Widget,改正Bug。可重复执行步骤1至4。

  关于Widget开发的信息还可以访问链接:http://www.forum.nokia.com/...Getting_Started_with_Nokia_Web_Widget_Development.html。该文档通过一个例子详细讲解了如何开发widget。关于WRTAPI参考可访问链接:http://www.forum.nokia.com/info/sw.nokia.com/id/cf225acf-7efe-4dae-b89f-967578c00f1d/Web_Run_Time_API_Reference.html。

Widget开发***实践

用Firefox和模拟器进行开发和调试

Widget开发基本可以用Firefox浏览器完成,就像开发普通网页类似。在浏览器中调试完成后,如果没有支持的手机,可以先在S60SDK的模拟器中进行测试。

对于有网络连接的应用,需要对网络连接进行类似以下的处理,否则无法在浏览器中调试:

  1. try{  
  2. if(window.netscape){  
  3. netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");  
  4. }  
  5. varhttpRequest=newXMLHttpRequest();  
  6. httpRequest.open("GET",someurl,true);  
  7. httpRequest.send(null);  
  8. }  
  9. catch(e){  
  10. alert(e);  
  11. }  
  12.  

 

S603.2或者5模拟器下载地址:http://www.forum.nokia.com/info/sw.nokia.com/id/ec866fab-4b76-49f6-b5a5-af0631419e9c/S60_All_in_One_SDKs.html

需要注意的是,5版模拟器目前不支持中文,所以只能大致用来测试UI的适配。主要还是要用3版模拟器。

模拟器上的测试方式是:将wgz文件存在sdk安装路径下的\epoc32\winscw\c\Data\Others下,然后从模拟器的文件管理中进行安装。

文件命名和编码

关于Widget中的文件、目录名称,以及文本文件和数据接口的编码格式,请遵循以下原则,以获得对不同手机的***兼容性:

◆所有文件和目录名称不要使用中文
◆所有包含中文的文本文件(html,javascript,info.plist等),务必要使用utf-8编码进行保存
◆第三方的API接口返回的xml文件也要尽量使用utf-8编码

CMWAP接入点问题

CMWAP接入点问题是中国特有的问题,一定要了解。

连网时如果选择CMWAP接入点,需要注意CMWAP的请求确认页面问题。如果请求方式是GET,则会碰到请求确认页面,导致内容无法获得。解决办法是对连接的IP或域名进行一次无效请求。还有一种方式是使用POST方式,这种方式的请求不会被CMWAP网关拦住。两种方式的示例如下:

 

  1. /◆无效请求◆/  
  2. functionjumpCMWAP()  
  3. {  
  4. if(window.netscape)  
  5. {  
  6. netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");  
  7. }  
  8. varxmlHttpRequest=newXMLHttpRequest();  
  9. xmlHttpRequest.onreadystatechange=function()  
  10. {  
  11. if(xmlHttpRequest.readyState==4)  
  12. {  
  13. if(xmlHttpRequest.status==200)  
  14. {  
  15. /◆无效请求结束,这里可以开始调用正式GET请求◆/  
  16. }  
  17. }  
  18. }  
  19. xmlHttpRequest.open("get","http://正式域名地址或IP地址/",true);  
  20. xmlHttpRequest.send(null);  
  21. }  
  22.  
  23. /◆GET请求◆/  
  24. xmlHttpRequest.open("get","接口地址",true);  
  25. xmlHttpRequest.send(null);  
  26.  
  27. /◆POST请求◆/  
  28. xmlHttpRequest.open("post","接口地址",true);  
  29. xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");  
  30. xmlHttpRequest.send("请求参数拼接字符串,参数间&符号隔开");  
  31.  

 

导航模式设置

Widget开发中有指针(cursor)和导航键(tab)两种导航模式,建议统一使用指针模式,否则如果只支持导航键模式,在触摸屏手机上将无法使用。
打开外部网站链接

必须使用widget.operUrl()来打开其它网站链接,而不是使用类似于<ahref=”http://www.google.com”>google</a>的方式。后一种打开方式将导致无法从打开页面中返回widget。
界面设计和兼容性

如果设计合理,widget可以自动适应不同屏幕尺寸,包括触摸屏和屏幕旋转。如果有的情况界面不容易处理,也可以为不同机型开发不同的widget。但是任何widget中屏幕旋转一定要支持,这个无法通过安装不同版本的widget来解决。

基本的原则就是,不要使用固定大小的图片做为背景和边框等,这点和普通网页设计基本上是一致的。另外在字体选择上也要合适,否则在高分辨率的手机上自会很小。对于普通240×320的屏幕,字体用13~16号,对于XpressMusic5800的360X640屏幕,需要用24号左右的字体大小。屏幕尺寸可以通过screen.width和screen.height来获得。

另外,由于屏幕旋转时没有事件触发,所以有的情况(例如无法用同一张图片对横屏进行自适应)旋转后要进行特殊处理的,可以用定时器来监测是否有屏幕尺寸的变化,从而模拟旋转事件。这样会有一定的效率问题,因为一直有个定时器程序在不间断地运行。

XpressMusic5800适配问题

XpressMusic5800是基于S60第五版本的触摸屏手机。除了要在界面设计时注意上节所说的问题之外,还有一些其它问题要注意。

◆文本内容在5800上不会自动换行,需要用如下样式进行处理:word-break:break-all;
◆如果界面上有输入框,输入内容后,菜单会自动变成”完成”和”取消”,这时,如果页面上还有另外的按钮,而用户没有点击”完成”或”取消”而直接点击那个按钮,如果这个按钮的事件处理中,进行了setRightSoftKey()操作,就会立刻导致widget非正常退出。解决的方案有几种,一种是不要在有输入框的页面放置其它按钮和链接,而是将需要的功能放在左键选项菜单中,这样用户只有点击”完成/取消”之后,才有机会再点击其它功能;还有就是不要改变右键菜单,这样的效果就是完成当前操作后,菜单还是停留在”完成/取消”。

Widget开发的发展

  Widget的运行需要WRT支持。现阶段的widget只是信息型的widget,从网络获取信息并呈现给用户。此外,WRT在很多方面支持widget与S60的无缝集成,主要体现在widget的管理和使用方式上,与S60应相比,能够给用户一致的使用体验。

  下一阶段,widget将进一步整合智能手机平台。例如,widget将能够访问位置,PIM,媒体等手机设备信息,以及其它平台提供的服务。并改进用户界面,进一步提升用户的使用体验。

  WRT是一个不断发展的平台,widget也将拥有更强大的能力和丰富的功能。如果解决了平台安全性问题,widget将能够通过S60API来访问S60平台提供的服务。那时,开发部署widget也许会需要一个类似于Symbian签名的验证过程。
更多信息

  诺基亚论坛中文讨论区有关于Web技术和WebWidget的专题,可以访问以下链接来交流经验,答疑解惑,http://discussion.forum.nokia.com/forum/forumdisplay.php?f=76。其中Widget专题收集了Widget文档、开发工具、Q&A等,可通过以下链接访问:http://discussion.forum.nokia.com/forum/showthread.php?t=115609。

  新发布的Widgete-learning资料,内容比较全面,包括概述和一个开发实例,http://www.forum.nokia.com/info/sw.nokia.com/...=s60platformArticle7CTA。

  关于S60浏览技术的信息,可以访问http://www.forum.nokia.com/browser。
 

责任编辑:佚名 来源: javaeye.com
相关推荐

2011-09-08 17:48:33

Web Widget

2011-09-07 17:19:16

Web widget

2012-09-17 11:26:14

IBMdw

2010-07-26 17:01:03

Perl包

2010-07-06 16:13:13

HART协议

2010-04-12 17:32:59

Windows Pho

2010-07-29 17:21:26

AdobeFlex3

2010-07-02 14:16:42

UML

2010-07-28 12:58:24

Flex DateCh

2010-09-28 12:54:32

HTML Docume

2010-08-11 13:46:01

Flex安全沙箱

2010-07-02 12:39:38

UML对象图

2010-07-07 14:43:19

UML协作图

2010-07-01 17:43:23

UML包图

2010-06-30 13:53:28

UML建模过程

2010-09-26 11:32:39

JVM结构

2010-07-27 10:48:17

Flex3

2010-07-07 10:35:40

UML软件建模

2010-07-12 13:47:09

UML部署图

2010-08-12 15:35:44

Flex事件机制
点赞
收藏

51CTO技术栈公众号