×
Namespaces

Variants
Actions

Web Widget概述

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

文章
happywolf 在 18 Feb 2008 创建
最后由 hamishwillee 在 16 Nov 2011 编辑

Web Widget概述


Contents

移动互联网的兴起

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

  现在在移动设备上访问Internet,不如在PC上访问方便,并且支持的Web能力也有限。针对这个问题,目前有两种主要的解决方案,即服从于Web和服从于PC的解决方案。S60的浏览技术属于后者,致力于在移动设备上提供类似于PC 的浏览体验。而通过PC访问Internet,则不如通过移动设备那样,有方便、快捷的网络接入。此外,统计数字显示了网站访问存在的"二八"现象,即人们频繁访问的只有少数网站。针对以上问题,S60 SDK 3rd 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 3rd Edition Feature Pack 2中,新增加的浏览器组件。它是一个Web应用开发环境。

  访问以下链接可以获得更多关于Widget的信息,http://www.developer.nokia.com/Develop/

体验Widget

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

  如下链接展示了Widget的安装和使用的一段视频,http://www.developer.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 3rd 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 3rd Edition FP2的Emulator中安装Widget的步骤与上述步骤类似。常用方法是,首先把Widget安装包复制到文件夹Symbian\9.3\S60_3rd_FP2_Beta\epoc32\winscw\c\Data\Others中(以S60 SDK 3rd 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的开发过程如下:

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

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

widget 开发工具

Nokia Web Tools (supersedes Aptana)

  下半年即将发布的Web Development Kit (WDK) 将整合更强大的功能,对Widget的开发提供更全面的支持。

  此外,nokia还提供了一些Widget UI library帮助开发者建立美观一致的UI,如,

Widget访问移动设备的功能

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

  现在,widget通过Platform Service APIs可以进一步整合智能手机平台。例如,widget能够访问位置,PIM,媒体等手机设备信息,以及其它平台提供的服务。并改进用户界面,进一步提升用户的使用体验。

  详见 Using Platform Services

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.developer.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非正常退出。解决的方案有几种,一种是不要在有输入框的页面放置其它按钮和链接,而是将需要的功能放在左键选项菜单中,这样用户只有点击”完成/取消”之后,才有机会再点击其它功能;还有就是不要改变右键菜单,这样的效果就是完成当前操作后,菜单还是停留在”完成/取消”。

Symbian^3 Widget开发注意事项

  Symbian^3平台相对于以往版本有一些改进,对widget的开发有一些影响。具体体现在待机屏幕设计,水平 / 垂直屏幕布局以及Platform Service APIs 2.0 的支持等方面。旧的Widget需要在该平台上测试,以确认是否需要做调整。

  可参考 Web Runtime Widgets in Nokia Symbian^3 devices 获得更详细信息。

Widget的发展

  移动互联网的发展方兴未艾,多个移动设备厂商和组织都推出了widget平台。如何将各种Widget以规范的形式统一起来,使其具有良好的兼容性和更强大的功能,是有关设备厂商,运营商和国际标准化组织正在联手推进的工作。

更多信息

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

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

  关于S60浏览技术的信息,可以访问 http://www.developer.nokia.com/Develop/Web/Mobile_web_browsing/

This page was last modified on 16 November 2011, at 05:28.
1070 page views in the last 30 days.
×