拼吾爱程序人生

文/huazhihao  出处/博客园

概述
WebSlices是一种浏览器技术,只要html中使用一些特殊的标记,就可以使用户只订阅页面的一部分变得可能。这种订阅就像是订阅RSS一样。而这些特殊的标记里包括了订阅过期的描述，IE8会定时去检查更新，并给订阅用户提示。 

 附件: 您所在的用户组无法下载或查看附件
上图是ebay为IE8用户提供的一个应用。在这个应用里，用户可以在搜索结果里订阅某一个商品的拍卖信息。订阅后IE8的Favorite Bar里便多了一个WebSlice按钮。当拍卖信息发生变化(比如说是有人出了更高的价钱)，该WebSlice按钮会闪动，点击后便如上图一样展开，显示新的拍卖信息。本篇文章是依据Internet Explorer 8 Beta 1 Whitepapers WebSlices 编写的。大家可以直接参考。

WebSlices的界面
用户在整个WebSlices的使用过程中有四个步骤

发现 订阅 提示 预览
发现
当IE8发现页面中存在WebSlices时，Tool Bar中会出现一个紫色的发现按钮，点击展开可以看到此页面的所有Feed(包括Rss之类的)。

 附件: 您所在的用户组无法下载或查看附件

而当鼠标悬浮在使用了特殊标记的那部分html上时，左上角也会浮出这个即处(in-place)发现按钮。

 附件: 您所在的用户组无法下载或查看附件

 
订阅
点击紫色的发现按钮就可以完成订阅，订阅后，Favorite Bar里就会出现对应的WebSlice按钮。(刚安装IE8的时候，我选择了使用原先IE7的设置，却发现多了一个Favorite Bar，当时还奇怪呢。原来ms是有这个用意的。)

提示
订阅信息发生变化,该WebSlice按钮会闪动提示.

预览
点开Favorite Bar里的WebSlice按钮就可以预览订阅的信息。(其实就是用个小窗口看html)

 附件: 您所在的用户组无法下载或查看附件
 
编写WebSlices
为了方便，我使用css选择器来描述标记。

必要标记
先看一个示例，在http://auction.microsoft.com/item这个页面里有这么一段html,
<div class="hslice" id="1">
    <p class="entry-title">Item - $66.00</p>
    <div class="entry-content">high bidder: buyer1 … </div>
</div>
如同rss里item的title,description,link,这里的title就是"Item - $66.00"，description就是"high bidder: buyer1 … ",link就是http://auction.microsoft.com/item#1。具体解释一下:
hslice : ".hslice[id]"这是一个唤醒标记，没有它，其他标记都不起作用。标class以hslice的元素必须要有id,并通过页面的url和这个id来合成link，在用户点击WebSlice下方的open web page按钮时，会新开link指定的url的页面

entry-title : ".hslice[id] .entry-title"的标签的innerHTML会作为title的一部分。可以有不止一个class="entry-title"的元素

entry-content : ".hslice[id] .entry-content"的标签的innerHTML会作为description的一部分。可以有不止一个class="entry-title"的元素也就是说，IE8会把这些标记理解成rss类似的feeds，而网站开发人员可以不用分别维护feeds和原页面。

 您可能对 [应用系统] 的这些文章也感兴趣：

EAI概述

EAI选型的标准

从EAI到SOA

通用的SOA供应链信息共享平台

Android程序开发初级教程(一)

Android程序开发初级教程(二)

Android程序开发初级教程(三)

在SOA中实现业务规则和业务流程

IBM拟50亿美元收购Cognos布局SOA BI领域

案例研究：巴西国家医疗保健系统

Google发布Chart API

Forrester关注RIA实施在信息工作站领域的增长

不过WebSlices不会基于"类似rss"这么模糊的定义,WebSlices是基于hAtom Microformat标准的。除了entry-title，entry-content，hslice这三个必需的标记以外以外，还有一些其他的标记，但都是可选的。比如:

可选标记
过期
<div class="hslice" id="1">
    <p class="entry-title">Item - $66.00</p>
    <div class="entry-content">high bidder: buyer1 …
        <p>End time:<abbr class="endtime" title="2008-02-28T17:00:00">1 day 18 hours</abbr></p>
    </div>
</div>这里唤醒标记是".hslice[id] .endtime"，有意义的值的是title属性的值,而格式使用的是abbr-design-pattern。设置这个标记的意义是，当接近过期的时候（比如说5分钟前），Favorite Bar里的WebSlice按钮会闪动。而真的过期了，WebSlice按钮上的文字就会变灰了。

带宽
<div class="hslice" id="1">
    <p class="entry-title">Item - $66.00</p>
    <div class="entry-content">high bidder: buyer1 …
        <p>This clip updates every <span class="ttl">15</span> minutes </p>
    </div>
</div>
带宽是ms给的说法，事实上它的意义和rss里的ttl(Time-to-Live)值的意义是一样的，使用的标记也是".hslice[id] .ttl",表示浏览器检查的时间间隔是多少。

feed url
也许订阅信息和页面上使用的是不同的html，那么IE8还是允许用户使用旧式的feed方式来订阅的。只要feed符合一些要求，还是可以获得一样的WebSlice功能。 feed url的标记是'.hslice[id] [rel="feedurl"]',有意义的是ref属性的值。


<div class="hslice" id="1">
    <p class="entry-title">Item - $66.00</p>
    <div class="entry-content">high bidder: buyer1 …
        <a rel="feedurl"ref="auction.microsoft.com/item.xml">Subscribe to WebSlice</a>
    </div>
</div>
feed的示例.

<?xml version="1.0"?>
<rss version="2.0"xmlns:mon="http://www.microsoft.com/schemas/rss/monitoring/2007";>
  <channel>
    <title>Feed for Item</title>
    <link>http://auction.microsoft.com</link>
    <description>Feed for auction item</description>
    <ttl>15</ttl>
    <item>
      <title>Item = $66.00</title>
      <link>http://auction.microsoft.com/item#1<;/link>
      <description>high bidder: buyer1 …</description>
      <mon:endtime>2008-02-28T17:00:00</mon:endtime>
    </item>
  </channel>
</rss>

值得一提的是，这个feed里只允许有一个item。而如果提供了feedurl,就以feed为准了，页面里的其他标记(title description link)不再起作用。

认证
WebSlices的认证和html类似，cookie和http认证。

cookie
cookie可以把认证信息持久化，不过在vista Protected Mode的IE8下， users must run Internet Explorer 8 Beta 1 for Developers in elevated mode (right-click the Internet Explorer 8 icon and select Run as administrator) in order to get the authenticated WebSlice content.

http认证
WebSlice support HTTP HTTPS
HTTP BASIC auth X O
HTTP DIGEST auth O O


如果页面是http的，那么是不能订阅https的WebSlice(例如<a rel="feedurl" href="https://....">)的。还有一个我试验过程中碰到的一个问题，我在一个本地的html文件里加上足够的标记(windows认证)，IE8却不能发现WebSlice,如果是http认证的html，是可以正常发现的。但是如果我在一个本地的html文件里如果包含feedurl，也是可以正常发现的。

发现机制
经过前面的介绍，大家应该了解WebSlice是如何被发现的了。但是除了之前的介绍以外，我们还可以为页面制定一个主WebSlice. 或是让即处发现按钮不会浮出(也许有人讨厌这个，比如影响他们自己定制的一些效果),或是用js来下达订阅命令。

主WebSlice
在ToolBar里的发现按钮是个(split button)，展开可以看到页面里所有的WebSlice，而如果指定了主WebSlice以后，直接点发现按钮就可以了，不需要从展开的split button找出来再点。指定主WebSlice的代码

<head>
    <link rel="default-slice" type="application/x-hatom" href="www.example.com/#auction"; />
</head>
rel type href这三个属性都是必须的。ref,type的值就是"default-slice"，"application/x-hatom"，这段代码的页面的地址是www.example.com，它指定的主WebSlice是"#auction.hslice"选出的。

禁用即处发现按钮
<head>
    <meta name="slice" scheme="IE" c />
</head>

使用js订阅WebSlice
js里订阅和原来添加到收藏的函数一样addToFavoritesBar。

window.external.addToFavoritesBar(string URL, string Title, [optional] string Type)

唯一值得一提的是最后的参数string Type，如果订阅的是WebSlice的话，Type必须为"slice"，然后弹出的就不是addToFavoritesBar的确认框，而是添加WebSlice的确认框。

刷新WebSlice的发现
当浏览器解析完html以后，会在WebSlice发现按钮的split button里列出所有的feed和WebSlice，不过当dom发生变化，被列出的feed和WebSlice是不会同步更新的，使用

window.external.contentDiscoveryReset()

手动更新。在ajax的页面里，回调的最后不要忘了这句。

其他
默认情况下，IE8对feed和WebSlice的更新频率是24小时。 WebSlice里的脚本不会被执行，form里的字段也不会起作用。 WebSlice的更新时会和本地的WebSlice进行对比，如果有不同，Favorites Bar里的WebSlice按钮字体会加粗。