为Live.com Build一个Gadget的例子（二）-CSDN博客

本文链接：https://blog.csdn.net/cyp403/article/details/1144102

为Live.com Build一个Gadget的例子

为Live.com Build一个gadget的例子

一篇概览关于如何创建一个gadget例子，使用DTHTML、JavaScript和CSS，使之运行在Live.com平台上。使用这些必需的组件来创建和发布你自己的gadget。

是什么让你的gadget运行？

Live.com平台 – Live.com beta是一个能够自定义的homepage，在这里，你能够决定内容和布局。这个页面有很多轻量级的名为gadget的部分组成。基于DHTML和JavaScript，Live.com平台提供了一种扩展页面功能的方法，就像Atlas framework来扩展Javascript的功能一样。

Manifest – 创建你自己的gadget的第一步是创建基于XML的manifest文件，它能用作link你gadget的URL。Manifest包括你gadget的metadata，比如title和description，担当了运行你gadget所需扩展文件的指示器。

JavaScript – JavaScript，通过manifest被link，使主要功能的存在形式。为了让你的gadget能够在Live.com页面上工作，你必须调用特定的方法来在Atlas框架中注册和执行你的类。解释这个框架不是本文的内容，但下面有一些简单的代码会被演示。

CSS – 虽然Live.com提供了主题，你可能想要提供你自己的样式。要实现这功能，可以通过在你的manifest中简单的link到一个CSS文件和前面你注册的JavaScript类名的每一个class和element，覆盖周期性的分隔符”.”和下划线”_”。举例：如果你的JavaScript类名是Xbox.GamerTag，那么标记h1的风格，你需要在你的css文件中使用标记Xbox_GamerTag h1。这么做能够保证gadget间没有CSS的名称冲突。

manifest的例子

正如前面说到的，基于XML的manifest定义你的gadget。让我们看一个gadget例子中的manifest，我已经创建一个gadget的例子来返回基于输入名字的Xbox GameCard。

<?xml version="1.0" ?>
<rss version="2.0" xmlns:binding="http://live.com">
   <channel>
       <title>Xbox GameCard</title>
      <link>http://xbox.com</link>
      <description>This gadget returns an xbox game card based upon the entered Xbox Live Gamertag.</description>
      <language>en-us</language>
      <pubDate>Mon, 7 Nov 2005 01:00:00 GMT</pubDate>
      <binding:type>Xbox.GamerTag</binding:type>
      <lastBuildDate>Mon, 7 Nov 2005 01:00:00 GMT</lastBuildDate>
      <item>
         <description>The Xbox GameCard script</description>
         <link>http://adamkinney.com/gadgets/xbox/xboxtag.js</link>
      </item>
      <item>
         <description>The Xbox GameCard CSS</description>
         <link binding:type="css">http://adamkinney.com/gadgets/xbox/xboxtag.css</link>
      </item>
   </channel>
</rss>

乍一看，你可能注意到这个manifest的框架与RSS feed的一样。不但存在一个标准的杠杆作用，其实本质上，manifest提供了permalink来订阅gadget。虽然与RSS对立，item元素列出了gadget文件和拥有一块持久的空间。许多其它的元素是基于他们名称的自解释，绑定的例外是：type。注意，binding的命名空间声明在root元素中，binding:type被Atlas框架用来定义JavaScript的入口点来调用。

不同元素的值被用在不同的地方。Title的值用作你gadget的在Live.com中的名字。如果link的值被使用，title变成一个能够点击的链接，能够打开应用的URL。当用户安装你的gadget的时候，Description的值被用作显示额外的信息。Icons也在Live.com页面中用到，但是不能被你的manifest定义，但是宁愿链接的favicon.ico值域被使用。

Gadget script

现在，我们已经安装了manifest，让我们继续关注Xbox GameCard gadget的JavaScript。第一件事就是创建类Xbox.GamerTag的引用。

registerNamespace("Xbox");

Xbox.GamerTag = function(p_elSource, p_args, p_namespace)
{
Xbox.GamerTag.initializeBase(this, arguments);
...
}
Xbox.GamerTag.registerClass("Xbox.GamerTag", "Web.Bindings.Base");

第一行代码注册”Xbox”的命名空间，它给出了我们客户代码的范围。命名空间提供了避免多个gadget中对象名称的冲突。然后这个类被定义作为一个方法，同时被framework传入默认的参数……。后面，我们注册这个类，通过” Web.Bindings.Base”指示我们的基本类。

下面是基类方法initialize和dispose的实现：

this.initialize = function(p_objScope)
{
   Xbox.GamerTag.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);

   var elDiv = document.createElement("div");
   var elSpan = document.createElement("span");
   elSpan.innerText = "Search for: ";
   elSearch = document.createElement("input");
   elSearch.attachEvent("onchange",DoSearch);
   elSearch.attachEvent("onkeypress",DoReturn);

   var savedName = GetCookie();
   if(savedName != null)
   {
       elSearch.value = savedName;
   }

   elDiv.appendChild(elSpan);
   elDiv.appendChild(elSearch);
   p_elSource.appendChild(elDiv);

   elResults = document.createElement("div");
   elResults.className = "x23b";
   p_elSource.appendChild(elResults);

   if(savedName != null)
   {
      DoSearch();
   }
}
Xbox.GamerTag.registerBaseMethod(this, "initialize");

this.dispose = function(p_objScope)
{
   Xbox.GamerTag.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_objScope);

   elSearch.detachEvent("onchange",DoSearch);
   elSearch.detachEvent("onkeypress",DoReturn);
   lastSearch = url = xmlhttp = elSearch = elResults = null;
}
Xbox.GamerTag.registerBaseMethod(this, "dispose");

当gadget被装载时，initialize是第一个被调用的方法。这里，我们看到的使用JavaScript创建text和textbox元素添加到页面上。注意，这些元素被添加到p_elSource变两种，当类构造的时候被传送。P_elSource变量表现gadget最外的div元素。注意：attaching事件的方法使用attachEvent语法要强于直接分配函数给事件。IE事件模型的平衡，经过Atlas框架扩展了FireFox（任何一个函数被指派成事件的句柄在被引用前必须被声明，确认能看到下面链接提供的完整源代码）。在初始化后，我们担当起优秀gadget城市的设计师，然后通过使用detachEvent和设置变量为null来清除事件句柄处理你的事件属性。

现在让我讨论获取需要的数据。用户在Xbox GameCard的search textbox中输入一个名字，点击一下enter或者让这个textbox失去焦点，然后开始查询所需的数据。看看下面的DoSearch函数。

首先，我们检查lastSearch的值是否与testbox elSearch的值相等。注意，elSearch是在initialize方法中定义，动态生成的textbox的引用。如果搜索内容是新的，我们被这个值存进cookie，生成GamerTag URL并且创建Atlas框架定义的Network Request对象。我们传送NetworkType，用到的URL，null给对象上下文（用来传送需要的状态），我们的回调函数和优先级。Network函数使用Live.com作为代理去获得定义的URL，一旦接收到回调函数ReceiveResponse传过来的数据。在这个案例中，GamerTag html是被解析和添加到elResults div的innerHTML中。

很不幸，返回的GamerCard HTML不是合法的XML，当XML被解析的时候会抛出一个错误。因此，我们接收这个错误信息作为我们request的结果。很不幸，Atlas框架中不支持Network.Type.Raw or Network.Type.HTML。围绕这个问题，我们使用XMLHttpRequest来request这个数据。

这里成功检索到的数据，但会有一个警告。但是不使用Network Request对象，我们不再拥有访问Live.com提供的代理的能力。这意味着，除非Live.com被添加作一个Trusted Site，否则一个"Access is Denied"错误将会在数据request的时候发生。这已经被Live.com team所知晓，并致力于解决这个问题。目前来说，一个合法的xml作为数据源是没有问题的。

发布gadget

这个gadget已经完成了，并准备去使用它。最后一步就是上传gadget文件到一个web服务器。一旦你有了一个manifest文件的URL，那么访问Live.com。选择Add Content然后Advanced options。把gadget URL复制到Add a gadget by URL的textbox中。点击Add按钮。如果成功的话，你会在Live.com站点看到你的gadget。