模块开发指南 - 搜狐博客

欢迎来到搜狐博客开放平台

	搜狐博客开放模块（Sohu Open Widget，以下简称SOW）是一个由搜狐公司推出、基于UWA（Universal Widget API）规范、应用于多个平台的Widget标准。

SOW简介

Sohu Open Widget是一个Widget标准规范，可以简单的描述为：

基于一个开放的Widget标准规范——UWA规范
任何人都可以以此开发自己的Widget，并将其分享给广大网友，添加到搜狐博客中使用

SOW的特点：

要求简单：只需要一些基本的Html、Javascript和CSS知识
开发快速：SOW以及UWA提供了很多支持性的API，便于快速开发
功能丰富：通过SOW，开发者使用第三方提供的丰富功能和数据，来构建相应的Widget
用途广泛：开发的widget能够运行在多个平台之上

UWA简介

UWA是一套Widget标准规范，由发起并建立。其目标是使人们能够使用更加简单标准的方式开发Widget，并使之能够运行在各个Widget和Blog平台之上。有关Netvibes的详细信息可以访问UWA开发者平台。

SOW与UWA的关系：

SOW基于UWA标准规范，符合UWA标准规范的Widget都能够直接运行在SOW平台之上。
为了保证Widget能够更好的使用搜狐博客中的一些功能，SOW对UWA进行了一些扩展，提供了一些UWA之外的API供开发者使用。

返回顶端Hello World

本节我们将通过一个简单的Hello World，来讲解如何能够快速地创建一个SOW Widget：

1、创建Widget文件

SOW平台规定，每一个Widget都只需要一个html格式的文件，因此首先创建一个基本的html文件，并加入一个Hello World提示以及一个作者的描述项，代码如下：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

<head>

<title>Hello</title>

<meta name="author" content="Jady" />

</head>

<body>

Hello World!

</body>

</html>

2、上传Widget文件

然后需要把刚创建的html文件上传到某个服务器中（比如您的个人站点），确保通过一个Url地址就能够访问到，例如我们的这个Hello World文件的地址为：
http://act.blog.sohu.com/widgets/helloworld.html。

3、测试Widget文件

然后进入自己搜狐博客，在地址栏中的博客地址后加上“?3rdDev=true”，例如：http://xxx.blog.sohu.com/?3rdDev=true，这样就能添加一个名为“测试模块”的Widget，如下图所示：

点击Widget上的“设置”按钮，将我们创建的Hello World文件的Url填入，点击保存之后，就会显示出测试Widget的内容，如下图所示：

这样，一个简单的Hello World就出来了。

下面我们将更加详细的介绍如何开发一个SOW Widget，并给出详细的开发规范和文档。

返回顶端如何开始

开发一个标准的SOW Widget不难，只需要掌握基本的Html、Javascript和CSS知识即可，本节将通过一个示例讲解如何开发一个SOW Widget，有如下几部组成：

创建模块文件
添加模块描述信息
添加默认显示内容
添加样式
添加模块参数设置项
添加Javascript代码
测试模块
提交模块

返回顶端创建模块文件

首先创建一个标准的html文件，同时要注意以下两点：

需要在文档开始加入xml的声明：<?xml version="1.0" encoding="utf-8"?>
增加一个xmlns声明: ?xmlns:widget=http://www.netvibes.com/ns/

注意：

搜狐开放平台支持多种格式的编码，utf-8、gbk等都可以，但是推荐采用utf-8编码，这样的Widget以后可以应用于多个平台中
Widget文件的后缀名称不仅限于html，采用别的比如xhtml、jsp、php等后缀都可以，只要其内容符合xhtml标准即可

因此最初这个文件的内容应该为：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

<head>

<title>title</title>

</head>

<body>

</body>

</html>

提示：一个SOW Widget仅需要一个html文件构成，相关的Javascript、CSS样式等，都需要放在这个文件中。详细内容参见“SOW文档规范”。

返回顶端添加模块描述信息

Widget中可以增加一些描述项来注解说明此Widget，SOW有几个标准的描述项，比如标题、图标、作者、Widget截图、是否是调试模式等等。有些描述项可能不会直接显示在Widget中，但是有些设置项会，比如<title>标签中的内容会显示成Widget的title，<link ref=”icon”>标签指定的图标会显示在Widget上。我们的示例中增加的描述项如下：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

<head>

<title>欢迎您</title>

<link rel="icon" type="image/x-icon" href="http://blog.sohu.com/favicon.ico" />

<meta name="author" content="Jady" />

<meta name="website" content="http://blog.sohu.com" />

<meta name="description" content="一个显示欢迎您的SOW Widget" />

<meta name="version" content="1.0" />

<meta name="keyword" content="欢迎 widget" />

<meta name="screenshot" content="http://blog.sohu.com/screenshot.jpg" />

<meta name="thumbnail" content="http://blog.sohu.com/thumbnail.jpg" />

<meta name="debugMode" content="true" />

</head>

<body>

</body>

</html>

显示效果截图：

提示：SOW系统将直接从Widget文件中获取Widget的描述信息，因为为了更好的描述Widget，描述信息最好是比较充分。有关Widget描述的详细说明参见“SOW文档规范”。

返回顶端添加默认显示内容

可以给Widget设置一个默认显示的内容（当Widget最初呈现出来时显示的内容），这个是通过直接设置<body>标签的内容来实现的，示例如下：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

<head>

<title>欢迎您</title>

<link rel="icon" type="image/x-icon" href="http://blog.sohu.com/favicon.ico" />

<meta name="author" content="Jady" />

<meta name="website" content="http://blog.sohu.com" />

<meta name="description" content="一个显示欢迎您的SOW Widget" />

<meta name="version" content="1.0" />

<meta name="keyword" content="欢迎 widget" />

<meta name="screenshot" content="http://blog.sohu.com/screenshot.jpg" />

<meta name="thumbnail" content="http://blog.sohu.com/thumbnail.jpg" />

<meta name="debugMode" content="true" />

</head>

<body>

您好，欢迎光临我的博客！

</body>

</html>

显示效果截图：

返回顶端添加样式

还可以在Widget中增加自定义的样式并应用到Widget中，这是通过增加<style>标签实现的。示例如下：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

<head>

<title>欢迎您</title>

<link rel="icon" type="image/x-icon" href="http://blog.sohu.com/favicon.ico" />

<meta name="author" content="Jady" />

<meta name="website" content="http://blog.sohu.com" />

<meta name="description" content="一个显示欢迎您的SOW Widget" />

<meta name="version" content="1.0" />

<meta name="keyword" content="欢迎 widget" />

<meta name="screenshot" content="http://blog.sohu.com/screenshot.jpg" />

<meta name="thumbnail" content="http://blog.sohu.com/thumbnail.jpg" />

<meta name="debugMode" content="true" />

<style type="text/css">

<!--

.nick {

  color: #333333;

  font-weight: bold;

}

-->

</style> 

</head>

<body>

您好，欢迎光临<span class="nick">我</span>的博客! 

</body>

</html>

显示效果截图：

提示：SOW不支持外链样式表，Widget中需要的样式必须直接定义在Widget文件中的<style>标签中。为了尽量保证所有Widget显示样式的统一，以及为了减少自定义样式与模板样式的冲突，SOW规范还定义了一些基本的样式供开发者使用，详细内容参见“SOW样式规范”。

返回顶端添加Widget参数设置项

SOW规范还规定了每个Widget都可以有一个Widget设置区域，这个Widget设置区域可以让用户设置一些有关此Widget的属性参数设置等内容，对于Widget参数设置项可以简单描述为：

具体实现哪些项，这些项显示成何种控件，这些控件的默认值是什么，都有开发者自己定义
这些设置项会呈现给Widget用户，用户可以修改这些设置项
这些设置项的值会直接由SOW系统保存
SOW提供了相应的方法供Widget Javascript程序读取这些设置项的值

Widget参数设置项的示例如下：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

<head>

<title>欢迎您</title>

<link rel="icon" type="image/x-icon" href="http://blog.sohu.com/favicon.ico" />

<meta name="author" content="Jady" />

<meta name="website" content="http://blog.sohu.com" />

<meta name="description" content="一个显示欢迎您的SOW Widget" />

<meta name="version" content="1.0" />

<meta name="keyword" content="欢迎 widget" />

<meta name="screenshot" content="http://blog.sohu.com/screenshot.jpg" />

<meta name="thumbnail" content="http://blog.sohu.com/thumbnail.jpg" />

<meta name="debugMode" content="true" />

<style type="text/css">

<!--

.nick {

  color: #333333;

  font-weight: bold;

}

-->

</style>

<widget:preferences>

  <preference type="text" name="nick" label="昵称" />

</widget:preferences>

</head>

<body>

您好，欢迎光临<span class="nick">我</span>的博客! 

</body>

</html>

显示效果截图：

提示：有关Widget参数设置项的详细介绍，参见“SOW参数设置规范”。

返回顶端添加Javascript代码

如果需要为Widget增加一些交互效果，可以使用Javascript代码。Widget中的Javascript需要注意一下几点：

所有的Javascript代码必须符合SOW的规范
而且这些代码都必须直接放到<script>标签之中，不支持外链Javascript代码

现在我们继续上面的例子，在其中增加Javascript代码，当Widget用户设置了自己的昵称之后，会把这个昵称显示在Widget的内容区域。内容如下：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

<head>

<title>欢迎您</title>

<link rel="icon" type="image/x-icon" href="http://blog.sohu.com/favicon.ico" />

<meta name="author" content="Jady" />

<meta name="website" content="http://blog.sohu.com" />

<meta name="description" content="一个显示欢迎您的SOW Widget" />

<meta name="version" content="1.0" />

<meta name="keyword" content="欢迎 widget" />

<meta name="screenshot" content="http://blog.sohu.com/screenshot.jpg" />

<meta name="thumbnail" content="http://blog.sohu.com/thumbnail.jpg" />

<meta name="debugMode" content="true" />

<style type="text/css">

<!--

.nick {

  color: #333333;

  font-weight: bold;

}

-->

</style>

<widget:preferences>

  <preference type="text" name="nick" label="昵称" />

</widget:preferences>

<script type="text/javascript">

<![CDATA[

  widget.onRefresh = function() {

    if (widget.getValue("nick")) {

    var nick = widget.getValue("nick");

    var str = 'Hello, welcome to <span class="nick">'+nick+'</span> world!';

    widget.setBody(str);

  }

    }

]]>

</script>

</head>

<body>

您好，欢迎光临<span class="nick">我</span>的博客! 

</body>

</html>

显示效果截图：

提示：为了辅助和规范Widget Javascript的开发工作，SOW中有很多有关这方面的支持和规范，详细内容参见“SOW API规范”。

返回顶端测试模块

为了保证此Widget是一个标准的、可用的SOW Widget，需要进行测试。在开始测试之前首先要注意一下几点：

所有测试的Widget文件，必须能够通过一个URL访问到
为了能够有效的发现Widget中错误，建议在测试阶段先将Widget描述信息的debugMode项设置为true，这样会显示错误和log信息
在程序中可以使用widget.log方法，这样就可以显示指定的内容（可用于跟踪变量或者流程等）

在确定了上面几点之后，就可以在搜狐博客中增加一个测试模块来测试您的Widget。

首先进入自己搜狐博客，在地址栏中的博客地址后加上“?3rdDev=true”，例如：http://xxx.blog.sohu.com/?3rdDev=true，这样就能添加一个名为“测试模块”的Widget，如下图：

把这个“测试模块”添加到博客之后，点击此Widget的“设置”按钮，然后把您要测试的Widget的URL地址添加到地址输入框中，点击保存之后，就会加载并显示要测试的Widget，如下图：

在IE浏览器下，错误和log信息会出现在页面的右上角，如图：

在Firefox浏览器下，错误和log信息会出现在“错误控制台”中，如图：

如果您的Firefox浏览器安装了Firebug插件，也会出现在其输出控制台中，如图：

这样，您就完成一个SOW Widget的开发，其中已经用到了xhtml、Javascript和CSS的知识。就是这样简单！

返回顶端提交模块

为了让这个Widget能够被网友使用，我们还需要将它提交到SOW平台中，点击 [提交模块] ，将刚才的Widget文件的Url填入到输入框中并提交，然后按照页面上的提示选择所属分类即可，如下图所示：

返回顶端管理/更新模块

通过 [管理/更新模块] ，您可以查看提交过模块的状态（是否审核通过），另外，您也可以更新您的widget，系统会再次验证以前提交的widget地址，并自动获取新版本。如下图所示：

如果需要更详细的文档规范，请参看下面：

返回顶端SOW文档规范

一个SOW Widget仅是由一个符合SOW文档规范的文档构成的。一个标准的SOW Widget由如下这六部分组成：

文档描述
Widget描述
Widget参数设置
Widget Javascript程序
Widget样式
Widget默认显示部分

对于这几部分详述如下：

文档描述

这部分主要是设定文档的类型、格式及编码等。文档描述应该注意一下几点：

必须符合xhtml文档规范
必须符合xml文档规范
需要为文档增加一个namespaces: xmlns:widget="http://www.netvibes.com/ns/"

因此一个标准的文档描述部分的代码应该如下：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:widget="http://www.netvibes.com/ns/">

Widget描述

这部分主要是通过一些属性项用来描述此Widget，比如Widget的标题、作者、版本号等。目前支持的属性包括：

属性	标签	名称	必须	说明
标题	title	（无）	是
图标	link	rel="icon"	否	如果未指定值，将采用系统默认的图标地址（建议图标大小为16×16）
作者	meta	name="author"	是	如：Jady Yang
网址	meta	name="website"	否	如：http://blog.sohu.com
描述	meta	name="description"	否	如：这是个测试Widget
版本	meta	name="version"	否	此Widget的版本号，如1.0
关键词	meta	name="keywords"	否	如：博客测试
截图	meta	name="screenshot"	否	截图的URL地址（建议图片宽度不超过540）
缩略图	meta	name="thumbnail"	否	缩略图的URL地址（建议图片大小为130×98）
平台版本	meta	name="apiVersion"	否	所需的SOW平台版本
调试模式	meta	name="debugMode"	否	默认为"false"
自动刷新	meta	name="autoRefresh"	否	表示多少秒刷新一次，正整数值，默认值为0（不定时自动刷新）
显示模式	meta	name="inline"	否	预留关键词，暂时不支持

所有这些标签必须直接从属于<head></head>标签。
示例：

<head>

<title>Hello World</title>

<link rel="icon" type="image/x-icon" href="http://blog.sohu.com/favicon.ico" />

<meta name="author" content="Jady" />

<meta name="version" content="1.0.1" />

…… 

</head>

Widget参数设置

Widget可以根据需要向用户显示一些设置选项，设置项的名称和类型都可以由开发者设置。如果要设置Widget参数，必须使用SOW Widget Preferences Language，后面将详细介绍Widget Preferences。Widget参数设置由一个"widget:preferences"标签构成，每一个设置项都是这个标签的子标签，"widget:preferences"标签从属于"head"标签。
示例：

<head>

……

<widget:preferences>

……

</widget:preferences>

…… 

</head>

Widget Javascript程序

如果widget需要使用SOW提供的功能接口，或者需要一些更多的交互或操作，可以使用JavaScript来做处理。这样的Javascript必须写在script标签之中，每个widget支持多个script标签，但是不支持外链JS文件。测试时为了模拟的需要可以加入一些外链的JS文件，但是如果在系统平台上运行时，系统会过滤掉这些外链的文件。
同时注意，每个script标签中的Javascript代码必须在开头和结尾处加上<![CDATA[ ]]>。
示例：

<script type="text/javascript">

<![CDATA[

// javascript代码 

……

]]>

</script>

如果能让开发者更好地进行交互操作和展示，SOW提供了提供的Widget API和Support API，具体如何使用这些API，后面将详细进行说明。

Widget样式

Widget中显示内容需要的样式可以写在style标签中，每个widget支持多个style标签，但是不支持外链CSS文件。测试时为了模拟的需要可以加入一些外链的样式文件，但是如果在系统平台上运行时，系统会过滤掉这些外链的文件。

Widget默认显示部分

可以设置当Widget刚呈现时默认显示的html内容，这些内容直接写在body标签之中，比如可以在其中显示“正在加载中…"，其他内容可以通过Widget JavaScript程序进行设置。

返回顶端SOW API规范

SOW API规范是SOW提供给开发者所有Javascript API的接口，其包括如下几部分：

Widget API：直接操作和使用Widget本身的一些API
Data API：操作数据请求的API
Element API：便于操作和管理对象的API
Controls API：辅助进行页面布局和控制的API
Other API：其他的一些辅助性的API

注意：为了保证Widget之间的相互影响及安全， API规范禁止直接操作window、document及其直接子对象

下面将对这些API进行详细的描述：

Widget API

SOW Widget API（以下简称Widget API）是提供给开发者，可以直接操作Widget进行各种处理的接口，第三方开发的Widget将直接构建在此API接口之上。

开发者可以通过widget对象使用Widget API，widget对象是一个SOW Widget类的实例，其提供的相关属性、方法和事件如下：

属性

名称	类型	说明
body	HtmlElement	widget内容显示区域的容器对象
lang	String	用户客户端的语言（保留关键词，暂不支持）
locale	String	用户客户端的locale（保留关键词，暂不支持）

方法

名称	说明
addBody(content)	把content添加到widget.body对象（内容区）的最后边，如果content为String类型，那就将其放入一个div对象中，添加到body对象中。
createElement(tagName)	通过tagName创建一个新的Dom对象
getValue(name)	此方法取得Widget Preferences中的参数设置值
log(string)	输出string到控制台
openURL(string)	用指定的地址打开一个新窗口
setAutoRefresh(delay)	设置Widget自动刷新的频率，delay刷新间隔时间，以秒为单位
setBody(content)	设置widget.body对象（内容区）的内容，content必须为一段有效的xhtml片段，其将替代原来widget.body中的内容
setSearchResultCount(count)	（保留关键词，暂时不支持）
setTitle(title)	设置widget的标题，只能是无格式的字符串，不支持xhtml标签
setUnreadCount(count)	（保留关键词，暂时不支持）
setValue(name, value)	此方法可以设置Widget Preferences中的参数值

事件

名称	说明
onLoad	当系统显示出Widget之后触发
onRefresh	手动或者自动更新时触发
onResize	Widget大小发生变更时触发（保留关键词，暂时不支持）
onSearch	（保留关键词，暂时不支持）
onResetSearch	（保留关键词，暂时不支持）
onKeyboardAction	（保留关键词，暂时不支持）

示例

<script type="text/javascript">

<![CDATA[

  widget.onLoad = function() {

  widget.setBody("hello world!");

  widget.addBody("hello " + widget.getValue("username") + "!");

  }

]]>

</script>

注意：如果需要为事件绑定一个处理方法，不能使用widget.addEventListener(…)这样的形式，必须使用widget.onLoad = function(){…}这样的形式。

Data API

Widget可能需要很多数据请求，比如从第三方服务器获取xml或者别的类型的数据，为了满足数据方面的功能需求，我们提供了SOW Data API。在数据功能部分，SOW系统平台有这样的要求：

所有的数据请求和处理都必须使用Data API接口
Data API将以Ajax的形式（而且也只会是）发送和请求数据

开发者可以通过UWA.Data对象使用Data API接口，UWA.Data提供的方法如下：

名称	说明
getText(url, callback)	请求一个地址，把取得的内容作为字符串发给回调方法（采用get方法发送数据请求），系统会把返回的text string作为第一个参数注入到callback中
getXml(url, callback)	请求一个地址，把取得的内容转作XmlDocument发给回调方法（采用get方法发送数据请求），系统会把返回的xml document和xmlhttp对象本身作为参数注入到callback中
getJson(url, callback)	请求一个地址，把取得的内容转作Json对象发给回调方法（采用get方法发送数据请求），系统会把返回的内容转化为一个json变量作为第一个参数注入到callback中
getFeed(url, callback)	（保留关键词，暂时不支持）
request(url, request)	按照制定的参数（request）向一个地址请求数据

UWA.Data.request方法的第二个参数为有关数据请求的一些设置，这个参数为一个对象，其中的每个属性为一个设置项，其支持的设置项包括：

属性名	说明
method	方法，可选值有： get：默认值 post
proxy	协议，可选值有： ajax：默认值 feed：（保留关键词，暂时不支持）
type	请求的数据类型，可选值有： text：默认值 json xml
cache	服务器缓存时间（保留关键词，暂时不支持）
onComplete	回调方法
parameters	method="post"时发送的参数

示例：

<script type="text/javascript">

<![CDATA[

function gettedInfo(obj) {

widget.setBody("返回信息：<br />" + obj.info);

}

widget.onRefresh = function() {

UWA.Data.request("http://www.yoursite.com/data.jsp", {

method: "get",

proxy: "ajax",

type: "json",

onComplete: gettedInfo

});

}

]]>

</script>
http://www.yoursite.com/data.jsp:

{

info: “这是个测试数据……"

}

Element API

SOW Element API（以下简称Element API）是为了能够方便使用和操作Html Element对象的一个API。Element API提供的方法如下：

名称	说明
addClassName(className)	添加一个样式名到现在的对象的样式名中
addContent(content)	把content添加到对象的最后边，如果content为String类型，那就将其放入一个div对象中，添加到对象中
appendText(text)	在对象的最后边添加一个textNode对象，其值为参数中的text
empty()	清空对象中的内容
getDimensions()	取得描述对象宽度和高度的一个对象，其格式为： { width: Number, height: Number }
getElementsByClassName(className)	通过样式名称找到所有包含在此对象中的采用此样式名的对象数组
getElementsByTagName(tagName)	通过标签名称找到所有包含在此对象中的此标签对象数组
getParent()	取得当前对象的父对象
getChildren()	取得当前对象的子对象数组
hasClassName(className)	返回一个布尔值，表示当前对象的样式名称中是否包含此样式名
hide()	隐藏当前对象
remove()	从Dom树中移除当前对象
removeClassName(className)	从当前对象的样式名称中删除此样式名
setText(text)	设置对象的内容为一段text
setHTML(html)	设置对象的内容为一段html代码
setContent(content)	设置对象的内容为content，如果content为String类型，那就将其放入一个div对象中，添加到对象中
setStyle(property, value)	设置对象的某个样式
show()	显示当前对象
toggle()	变更当前对象的显示状态（在显示和隐藏间切换）

上面的这些Element API不会自动附加到对象中，可以通过系统提供的UWA.$element(element)方法可以为某个元素附加这些Element API，同时widget.body对象和widget.createElement()创建出来的对象都可以直接使用这些Element API。
示例：

<script type="text/javascript">

<![CDATA[

widget.onLoad = function() {

widget.setBody("<div>正在计算大小</div>");

var div = UWA.$element(widget.body.getElementsByTagName("div")[0]);

widget.addBody("宽：" + div.getDimensions().width + "高：" + div.getDimensions().height);

}

]]>

</script>

Controls API

SOW Controls API（以下简称Controls API）中包括一组经过封装的、常用的控件API。其中包括如下封装好的控件：

Pager API：封装有关翻页和页码的类

Pager API

通过使用UWA.Controls.Pager类的实例，可以提供有关翻页和页码的操作和控制。其提供的方法有：

名称	说明
Pager(params)	构造函数，params为一个参数配置对象，其中包括的参数有： module: 对widget对象的引用，可以直接写为widget limit：Number类型，表示一页中显示的列表的个数 offset：Number类型，表示当前页的第一项在总列表中的位置编号 dataArray：Array类型，一个包含数据的数组（其不一定是一个绝对包含所有要显示数据的数组，但只需要其length属性能够保证和真实的数据的数量相等即可）
getContent()	取得包含整个翻页元素的对象
getDom()	同上
onChange(offset)	翻页时调用的方法，新页中的第一项在总列表中的位置值将作为第一个参数传入。开发者必须重写此方法，否则翻页时将不做任何处理。

示例：

function display(offset) {

var dataArray = ["item1", "item2", "item3", "item4", "item5", "item6", "item7"];

var pager = new UWA.Controls.Pager({

module: widget,

limit: 2,

offset: 0,

dataArray: dataArray

});

pager.onChange = function(offset) {

display(offset);

}

widget.empty();

widget.addBody(pager.getDom());

}

widget.onLoad = function() {

display(0);

}

Other API

SOW提供的其他API列表如下：

API	说明
UWA.$element(element)	为一个对象添加Element API接口

返回顶端SOW样式规范

开发者可以直接套用的以下部件模板及样式，它能让你的模块看起来更适合搜狐博客。

表格样式
文字列表样式
标题+描述列表样式
缩略图样式
缩略图+文字样式
翻页样式
“管理”+“更多”样式
注意事项

表格样式

图例：

表格样式

样式：table_list

代码：

<table cellpadding="0" cellspacing="0" class="table_list">

  <thead>

    <tr>

      <td>序号</td>

      <td>标题</td>

      <td>内容</td>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>标题1</td>

      <td>内容1</td>

    </tr>

    <tr>

      <td>2</td>

      <td>标题2</td>

      <td>内容2</td>

    </tr>

  </tbody>

</table>

文字列表样式

图例：

文字列表样式

样式：text_list

代码：

<ul class="text_list">

  <li><a href="#" target="_blank">这里是标题1标题1</a></li>

  <li><a href="#" target="_blank">这里是标题2标题2</a></li>

  <li><a href="#" target="_blank">这里是标题3标题3</a></li>

</ul>

标题+描述列表样式

图例：

标题+描述样式

样式：rich_list、item、description

代码：

<div class="rich_list">

  <div class="item">

    <h3><a href="#" target="_blank">这里是标题1</a></h3>

    <p class="description">这里是描述1这里是描述1</p>

  </div>

  <div class="item">

    <h3><a href="#" target="_blank">这里是标题2</a></h3>

    <p class="description">这里是描述2这里是描述2</p>

  </div>

  <div class="item">

    <h3><a href="#" target="_blank">这里是标题3</a></h3>

    <p class="description">这里是描述3这里是描述3</p>

  </div>

</div>

缩略图样式

图例：

缩略图样式

样式：thumb_list

代码：

<ul class="thumb_list">

  <li>

    <a href="#" target="_blank">

      <img src="http://ow.blog.sohu.com/styles/screen/example105.jpg" alt="图" />

      <p>这里是标题</p>

    </a>

  </li>

  <li>

    <a href="#" target="_blank">

      <img src="http://ow.blog.sohu.com/styles/screen/example105.jpg" alt="图" />

      <p>这里是标题</p>

    </a>

  </li>

  <li>

    <a href="#" target="_blank">

      <img src="http://ow.blog.sohu.com/styles/screen/example105.jpg" alt="图" />

      <p>这里是标题</p>

    </a>

  </li>

</ul>

缩略图+文字样式

图例：

缩略图+文字样式

样式：thumbnailed_list、item、description

代码：

<div class="thumbnailed_list">

  <div class="item">

    <a href="#" target="_blank">

      <img src="http://ow.blog.sohu.com/styles/screen/example105.jpg" alt="图" />

    </a>

    <a href="#" target="_blank"><h3>这里是标题1</h3></a>

    <p class="description">这里是描述1描述1描述1</p>

  </div>

</div>

翻页样式

图例：

翻页样式

样式：pager、prev、next

代码：

<div class="pager">

  <a href="#" class="prev">上一页</a>

  <a href="#" class="next">下一页</a>

</div>

“管理"+“更多"样式

图例：

管理+更多样式

样式：manage、more

“管理"代码：

<div class="manage"><a href="#">管理</a><hr size="1"/></div>

“更多"代码：

<div class="more"><a href="#">查看更多>></a></div>

注意事项

不建议对背景颜色及文字颜色做样式定义，以便适应不同模板
装饰图片和小图标尽量使用透明gif，避免在不同模板下出现问题
博客中字体大小一般为12px，字体列表为Verdana, Arial, Helvetica, sans-serif
最外层容器建议定义为100%宽度，以适应不同宽度的模块
提交前建议使用不同模板及不同宽度来反复测试模块
模块最好能兼容IE6、IE7和Firefox等浏览器

返回顶端SOW参数设置规范

SOW Widget Preferences Language（以下简称Widget Preferences）是一种设置Widget参数设置的语言，这些参数都会以html控件的形式显示给用户，开发者可以通过Widget Preferences设置参数的数量、显示为何种html控件、名称及默认值等。
每一个设置项都对对应一个preference标签，标签有一个type属性来设置参数的类型，每种类型都代表一种特殊的显示控件或者数据类型，现在支持的type属性如下：

type	对应的html元素	默认值	说明
text	Input text	undefined
boolean	Input checkbox	false
hidden	Input hidden	undefined	对应一个input hidden控件
range	select	undefined	表示一个数字序列，比如1到10
list	select	undefined	对应一个选择项列表
password	Input password	undefined	对应一个password输入框

所有的这些类型都有一些相同的属性项，但是某些类型由于其特殊性也针对性地存在一些属性项。所有的属性项如下所示：

支持的type	属性名	数据类型	必填	说明
所有	label	String	否	参数的文字说明
	name	String	是	参数的名称，JS可以通过这个值取得或设置参数的值
	defaultValue		否	参数的默认值
boolean range list	onchange	Boolean	否	属性值变更时，是否发送onRefresh事件，默认为false
range	min	Number	是	数字序列的起始值
	max	Number	是	数字序列的结束值
	step	Number	是	数字序列的变更量

list类型的参数有些特殊，其可以设置可选项的列表，每个可选项都是一个option标签，其从属于岂有如下属性：

属性名	数据类型	必填	说明
label	String	是	可选项的文字说明
value	String	是	可选项的值

示例：

<widget:preferences>

  <preference type="text" label="姓名" name="username" />

  <preference type="boolean" label="已婚" name="marry" defaultValue="true" />

  <preference type="hidden" name="编号" />

  <preference type="range" label="年龄" name="age" min="18" max="60" step="1" onchange="true" />

  <preference type="list" label="职业" name="job">

    <option label="工程师" value="engineer" />

    <option label="其他" value="other" />

  </preference>

  <preference type="password" label="密码" name="password" />

</widget:preferences>

返回顶端问题反馈

欢迎加入我们开设的开发者圈子，如果您在开发过程中遇到任何问题和困难，可以及时向我们提出，同时，您也可以订阅我们的开发团队博客，让我们共同进步，向着开放和共享，共同迈进！

返回顶端FAQ

SOW简介

UWA简介

返回顶端Hello World

1、创建Widget文件

2、上传Widget文件

3、测试Widget文件

返回顶端如何开始

返回顶端创建模块文件

返回顶端添加模块描述信息

返回顶端添加默认显示内容

返回顶端添加样式

返回顶端添加Widget参数设置项

返回顶端添加Javascript代码

返回顶端测试模块

返回顶端提交模块

返回顶端管理/更新模块

返回顶端SOW文档规范

文档描述

Widget描述

Widget参数设置

Widget Javascript程序

Widget样式

Widget默认显示部分

返回顶端SOW API规范

Widget API

Data API

Element API

Controls API

Other API

返回顶端SOW样式规范

表格样式

文字列表样式

标题+描述列表样式

缩略图样式

缩略图+文字样式

翻页样式

“管理"+“更多"样式

注意事项

返回顶端SOW参数设置规范

返回顶端问题反馈

返回顶端FAQ

快速导航

如何开始

规范文档

问题反馈

FAQ