Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Web Widget概述

From 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 02:28.
1361 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×