微软的PivotViewer控件编程续

在前一篇微软的PivotViewer控件编程中，讲到了创建PivotViewer使用的静态数据源的方法。但是手工创建CXML，或者在Excel里面一个个输入PivotViewer里面的数据的确是太麻烦了。不过还好，微软已经给我们提供了动态创建数据源的方法。

动态创建数据源

PivotViewer团队提供了一个开源的工具Pauthor可以用来创建动态的PivotViewer数据源。另外对于ASP.NET程序，他们还提供了另外一个开源库PivotServerTools可以直接用在ASP.NET程序中，这个函数库还自带了一个示例演示了：

l 从外部OData数据源生成CXML数据源。

l 从数据库中直接生成CXML数据源。

l 从文件系统的文件夹中生成CXML数据源。

l 还有从Twitter的Web服务中生成CXML数据源。

这里我挑最简单的从文件系统中生成CXML数据源来讲解一下PivotServerTools的用法，如果你有其他的需要，请自己参考那个示例程序。

使用PivotServerTools

创建一个ASP.NET程序，并将PivotServerTools添加到工程的引用列表中，这时动态生成CXML数据源就变得很简单了：

1.         新建一个类PicturesFactory继承PivotServerTools.CollectionFactoryBase。

2.         在PicturesFactory中重载MakeCollection函数。

3.         使用Collection.AddItem添加要显示在PivotViewer里的元素（例如图片）。

这里是上面提到的PicturesFactory的源代码：

PicturesFactory:

 1 using System;
 2 using System.IO;
 3 using PivotServerTools;
 4 
 5 namespace Pivot.Test
 6 {
 7     public class PicturesFactory : CollectionFactoryBase
 8     {
 9         public PicturesFactory()
10         {
11             Name = "photos";
12             Summary = "我自己的照片";
13         }
14 
15         public override Collection MakeCollection(CollectionRequestContext context)
16         {
17             // 需要耗费大量的时间，因为照片还是非常多的
18             var files = Directory.GetFiles(@"d:\testphotos", "*.*", SearchOption.AllDirectories);
19             var collection = new Collection();
20             collection.Name = "我的照片";
21 
22             foreach (var file in files)
23             {
24                 var info = new FileInfo(file);
25                 collection.AddItem(Path.GetFileNameWithoutExtension(file), 
26                     file, 
27                     null,
28                     new ItemImage(file),
29                     new Facet("文件名", Path.GetFileName(file), Path.GetExtension(file)),
30                     new Facet("文件大小", info.Length / 1024),
31                     new Facet("拍摄日期", info.CreationTime),
32                     new Facet("连接:", new FacetHyperlink("打开图片", file))
33                 );
34             }
35 
36             return collection;
37         }
38     }
39 }

上面的代码中，22行到34行就是将文件系统中的图片添加到CXML文件的方法了。25行到33行在CXML添加具体的元素，例如25行设置了PivotViewer显示图片时，图片的名称，而28行就是将图片本身添加到PivotViewer控件中，PivotServerTools自己会生成Deep Zoom Compositor理解的格式，并且帮我们生成对应的.dzi和.dzc文件。29行到32行，分别是添加了图片不同的信息，PivotViewer可以根据这4个种类分类图片，如下图所示：

 

另外，还需要注意的是第11行，指定了这个CXML文件的文件名，如果你使用PivotServerTools自带的HttpHandler的话，它会将用户请求的CXML文件名和PicturesFactory的Name属性对应，这样也方便你在网站中动态提供多个CXML文件。在PivotServerTools的源代码中，FactoryBaseCollection类（在源文件Internals\CollectionFactories.cs中）的TryGet函数用来匹配CollectionFactoryBase.Name和用户请求的CXML文件名。

CollectionFactories.cs:

 

 1 public CollectionFactoryBase TryGet(string name)
 2 {
 3     CollectionFactoryBase output;
 4     if (null != base.Dictionary)
 5     {
 6         return base.Dictionary.TryGetValue(name.ToLowerInvariant(), out output) ? output : null;
 7     }
 8     else
 9     {
10         return base.Items.Find(item => (0 == string.Compare(name, item.Name, true)));
11     }
12 }

 

输出动态生成的CXML文件

前面的工作做好以后，你就可以往客户端发送生成的CXML文件了：

1.         动态生成Deep Zoom Compositor需要的.dzc文件。

string collectionKey = collection.SetDynamicDzc(collectionFileName);

2.         指定文件类型：

context.Response.ContentType = "text/xml";

3.         动态生成CXML文件并输出到客户端：

collection.ToCxml(context.Response.Output);

在PivotServerTools示例代码中，它是通过自定义HttpHandler来实现的，我建议你使用同样的方法，因为前面的步骤只是动态生成了CXML文件和.DZC文件。但是PivotViewer在后续的请求中，会请求图片片断和.DZI文件，这是由Deep Zoom的实现方式决定的。请把下面的HttpHandler源代码添加到你的ASP.NET工程项目里，并在web.config文件中注册这个HttpHandler：

动态生成PivotViewer需要的.CXML、.DZC、.DZI和图片片断的HttpHandler源代码：

 

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using PivotServerTools;
 6 
 7 namespace PivotTest.Web
 8 {
 9     public class CxmlHandler : IHttpHandler
10     {
11         public void ProcessRequest(HttpContext context)
12         {
13             PivotHttpHandlers.ServeCxml(context);
14         }
15 
16         public bool IsReusable
17         {
18             get { return true; }
19         }
20     }
21     
22     public class DzcHandler : IHttpHandler
23     {
24         public void ProcessRequest(HttpContext context)
25         {
26             PivotHttpHandlers.ServeDzc(context);
27         }
28 
29         public bool IsReusable
30         {
31             get { return true; }
32         }
33     }
34 
35 
36     public class ImageTileHandler : IHttpHandler
37     {
38         public void ProcessRequest(HttpContext context)
39         {
40             PivotHttpHandlers.ServeImageTile(context);
41         }
42 
43         public bool IsReusable
44         {
45             get { return true; }
46         }
47     }
48 
49 
50     public class DziHandler : IHttpHandler
51     {
52         public void ProcessRequest(HttpContext context)
53         {
54             PivotHttpHandlers.ServeDzi(context);
55         }
56 
57         public bool IsReusable
58         {
59             get { return true; }
60         }
61     }
62 
63 
64     public class DeepZoomImageHandler : IHttpHandler
65     {
66         public void ProcessRequest(HttpContext context)
67         {
68             PivotHttpHandlers.ServeDeepZoomImage(context);
69         }
70 
71         public bool IsReusable
72         {
73             get { return true; }
74         }
75     }
76 }

 

在web.config中注册这些HttpHandler:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />

      <httpHandlers>
        <add path="*.cxml" verb="GET" type="PivotTest.Web.CxmlHandler"/>
        <add path="*.dzc" verb="GET" type="PivotTest.Web.DzcHandler"/>
        <add path="*.dzi" verb="GET" type="PivotTest.Web.DziHandler"/>
        <add path="*/dzi/*_files/*/*_*.jpg" verb="GET" type="PivotTest.Web.DeepZoomImageHandler"/>
        <add path="*_files/*/*_*.jpg" verb="GET" type="PivotTest.Web.ImageTileHandler"/>
      </httpHandlers>
    </system.web>
    <system.webServer>
      <handlers>
        
        <add name="CXML" path="*.cxml" verb="GET" type="PivotTest.Web.CxmlHandler"/>
        <add name="DZC" path="*.dzc" verb="GET" type="PivotTest.Web.DzcHandler"/>
        <add name="DZI" path="*.dzi" verb="GET" type="PivotTest.Web.DziHandler"/>
        <add name="DeepZoomImage" path="*/dzi/*_files/*/*_*.jpg" verb="GET" type="PivotTest.Web.DeepZoomImageHandler"/>
        <add name="ImageTile" path="*_files/*/*_*.jpg" verb="GET" type="PivotTest.Web.ImageTileHandler"/>
      </handlers>
      
        <!--<staticContent>
            <mimeMap fileExtension=".cxml" mimeType="text/cxml" />
          <mimeMap fileExtension=".dzi" mimeType="text/xml" />
          <mimeMap fileExtension=".dzc" mimeType="text/xml" />
        </staticContent>-->
    </system.webServer>

</configuration>

最后，在HTML页面的OBJECT标签里，为PivotViewer指定这个动态的CXML数据源即可：

HTML:

        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
                   <param name="source" value="ClientBin/PivotTest.xap"/>
                   <param name="onError" value="onSilverlightError" />
                   <param name="background" value="white" />
                   <param name="minRuntimeVersion" value="4.0.50401.0" />
                   <param name="autoUpgrade" value="true" />
          <param name="initparams" value="COLLECTION_URL=http://localhost:12345/photos.cxml" />
                   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
                            <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
                   </a>
     </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

其它未尽事宜，请看源码：/Files/killmyday/DynamicPivotDemo.zip

或者PivotServerTools的示例程序。