From Forum Nokia Wiki

Web Widget概述

移动互联网的兴起

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

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

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

什么是WEB Widget

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

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

　　Widget的运行基于Web Run-time（以下简称WRT）。WRT是S60 SDK 3^rd Edition Feature Pack 2中，新增加的浏览器组件。它是一个Web应用开发环境。

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

体验Widget

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

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

安装Widget

　　如上所述，Widget的管理方式与S60本地应用一样。如果了解S60本地应用的安装，就可以顺利地安装Widget。现在支持Widget的手机有最新版软件的Nokia N95以及N95 8G，以及即将上市的所有S60 3^rd Edition FP2手机。

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

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

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

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

　　相应地，根据Widget 部署方式的不同，安装过程也有所不同：

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

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

　　在S60 3^rd Edition FP2的Emulator中安装Widget的步骤与上述步骤类似。常用方法是，首先把Widget安装包复制到文件夹Symbian\9.3\S60_3rd_FP2_Beta\epoc32\winscw\c\Data\Others中（以S60 SDK 3^rd Edition FP2为例），然后使用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的开发过程如下：

用字编辑器或Web IDE编写widget代码。
调试widget。可结合使用Firefox与Firebug，常用的调试功能有设置断点、单步执行等，还可以观察HTML文件的DOM结构。
把widget文件连同目录打成ZIP包，改扩展名为.wgz，安装到测试环境。测试widget可使用三种环境：
1. S60 3^rd Edition FP2中的emulator。
2. 支持WRT的某些手机。当本文写作时，可用的手机包括具有最新版软件的诺基亚N95，N95 8G等。即将发布的所有S60 3^rd Edition FP2手机也将支持Widget.
3. 通过RDA（Remote Device Access）测试。RDA是一种通过Internet远程访问诺基亚S60设备的服务，有关RDA的信息位于http://apu.ndhub.net 。
测试Widget，改正Bug。可重复执行步骤1至4。

　　关于Widget开发的信息还可以访问链接：http://www.forum.nokia.com/...Getting_Started_with_Nokia_Web_Widget_Development.html 。该文档通过一个例子详细讲解了如何开发widget。关于WRT API参考可访问链接：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浏览器完成，就像开发普通网页类似。在浏览器中调试完成后，如果没有支持的手机，可以先在S60 SDK的模拟器中进行测试。

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

 try {
   if(window.netscape) {		
     netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");	
 }
   var httpRequest = new XMLHttpRequest();
   httpRequest.open("GET", someurl, true);		   
   httpRequest.send(null);
 }
 catch(e) {
   alert(e);
 }

S60 3.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网关拦住。两种方式的示例如下：

 /*无效请求*/
 function jumpCMWAP()
 {
  if(window.netscape) 
  {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
  }
  var xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.onreadystatechange = function() 
  {
   if(xmlHttpRequest.readyState == 4) 
   {
    if(xmlHttpRequest.status == 200)
    {
      /*无效请求结束，这里可以开始调用正式GET请求*/
    }
   }
  }
  xmlHttpRequest.open("get","http://正式域名地址或IP地址/", true);
  xmlHttpRequest.send(null); 
 }

 /*GET请求*/
 xmlHttpRequest.open("get","接口地址", true);
 xmlHttpRequest.send(null);

 /*POST请求*/
 xmlHttpRequest.open("post","接口地址", true);
 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
 xmlHttpRequest.send("请求参数拼接字符串，参数间&符号隔开");

导航模式设置

Widget有指针(cursor)和导航键(tab)两种导航模式，建议统一使用指针模式，否则如果只支持导航键模式，在触摸屏手机上将无法使用。

打开外部网站链接

必须使用widget.operUrl()来打开其它网站链接，而不是使用类似于<a href=”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将能够通过S60 API来访问S60平台提供的服务。那时，开发部署widget也许会需要一个类似于Symbian签名的验证过程。

Community: Wiki

Web Widget概述