Introduction
Today, I would like to show you how you can consume web services in the PivotViewer control for Silverlight and build a collection at runtime. This tutorial is based on examples found on www.getpivot.com and the getting started tutorial I posted earlier this week. This tutorial used the previous as a starting point, so if you haven't read that, you probably want to do that first. The only difference is that I named the project PivotViewerDynamic this time.
The PivotViewer control loads a collection by reading an .CXML file. To get the PivotViewer to load a generated collection, HTTP handlers are used to redirect the request for an .CXML file to custom code. This code, the Collection Factory, returns the collection in .CXML format. Requests for the DeepZoom images used in the collection are also redirected to custom code capable of generating images on the fly or loading them from the web.
Building a Factory
The factory class that will be building the collection is based on a class that can be found in one of the examples on www.getpivot.com. You can download this example here. Add the PivotServerTools project from this example to the project created in the Getting Started tutorial. And add a reference to the PivotServerTools project from the Web project. It is also included in the sample code for this tutorial.
To be able to use the factory, a custom HTTP handler needs to be built. This sounds more complex than it is.
Start by adding a new class to the Web project and name this class CxmlHandler. Make this class implement the IHttpHandler interface. This will give you one method, ProcessRequest, and one property, IsReusable. Add one line of code to the ProcessRequest method as shown below. The PivotHttpHandlers.ServceCxml method will look for factories and returns the collection in .CXML format. Don't forget to resolve a using to the PivotServerTools namespace.
public class CxmlHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
PivotHttpHandlers.ServeCxml(context);
}
public bool IsReusable
{
get { return true; }
}
}
To get the HTTP handler to work, it has to be configured in Web.Config. To do this, add the code below:
<system.webServer>
<handlers>
<add name="CXML" path="*.cxml" verb="GET"
type="PivotViewerDynamic.Web.CxmlHandler"/>
</handlers>
</system.webServer>
It also has to be defined in the system.web section of the config file. Add the code below to the system.web section.
<httpHandlers>
<add path="*.cxml" verb="GET" type="PivotViewerDynamic.Web.CxmlHandler"/>
</httpHandlers>
This makes sure that every request for a .CXML file is redirected to the PivotViewerDynamic.Web.CxmlHandler class.
It’s time to add the actual factory class now. Add a new class to the Web project and name this DemoCollectionFactory. Make this class implement the base class CollectionFactoryBase and make sure you resolve the PivotServerTools namespace. Only the MakeCollection method is overridden from the base class. We'll add the functionality of this method later.
Add a constructor to this class to set the name of the factory. This name is going to correspond with the name of the .CXML file requested. The constructor will look something like this now:
public DemoCollectionFactory()
{
this.Name = "Demo";
}
The collection factory is ready to use now. Let's load it from the Silverlight part of the application.
The PivotViewer control should already be there if you're using the code from the first tutorial. If not, add the control like below:
<UserControl x:Class="PivotViewerDynamic.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot">
<Grid x:Name="LayoutRoot" Background="White">
<Pivot:PivotViewer x:Name="Pivot"/>
</Grid>
</UserControl>
Add or change the Pivot.LoadCollection method in the code behind MainPage.xaml.cs to:
Pivot.LoadCollection("http://localhost:49000/demo.cxml",string.Empty);
This example assumes the Web project is running on port 49000. If not, go to the Project properties and on the Web tab, set Specific Port, in this case 49000.
Add a breakpoint to the MakeCollection method in the factory to make sure it works. Now hit F5 to compile and run.
Filling the Collection
If all went well, you should have got the application running, although it doesn’t do much yet. Let us fill the collection.
To fill the collection, an .XML file is downloaded from the server and fed to the collection.
public override Collection MakeCollection(
CollectionRequestContext context)
{
string data;
using (var web = new WebClient())
{
data = web.DownloadString(
"http://localhost:49000/DemoData.xml");
}
Next, a string reader is created, which in turn is passed to the XElement.Load method which parses the XML.
var reader = new StringReader(data);
XElement root = XElement.Load(reader);
A collection has to be instantiated before it can be filled with data. For each DemoData element in the parsed XML, the MakeItem method is called. This method is described a little later. It fills the collection with data from the XML entries. Before the collection will be returned, its name is set.
var collection = new Collection();
foreach (XElement entry in root.Elements("DemoData"))
{
MakeItem(collection, entry);
}
collection.Name = "Demo Collection";
return collection;
}
The MakeItem method takes the instance of the collection and an entry from the XML data. It extracts three values, Id, Value1 and Description. These are passed into the AddItem method. This method takes 5 parameters. The first is the Name of the item. The second is for a URL. The third is a description of the item. The fourth an image. If the image is omitted, an image will be generated. The last parameter is a collection of Facets. Facets are the properties of the collection. You filter and sort the collection by facets. The PivotViewer control decides the best way to show them in the filter section. There a five types of facets: String, LongString, Number, DateTime and Link. In this case, we let the control figure out what type to use.
MakeItem
private void MakeItem(Collection collection, XElement entry)
{
int id= int.Parse(entry.Element("Id").Value);
double value = double.Parse(entry.Element("Value1").Value);
string description = entry.Element("Description").Value;
collection.AddItem(
id.ToString(),
null,
description,
null,
new Facet("Value",value));
}
To get the runtime generated collection to show the right images, HTTP handlers have to be added for the DeepZoom images.
Add empty .cs file named DeepZoomHandlers.cs and place the four handlers below in there: DeepZoomCollection(.DZC), DeepZoomImage(.DZI) and two paths to images to handle the loading of images by code. All these handlers call methods in the PivotServerTools in the same way the CxmlHandler does.
using System.Web;
using PivotServerTools;
namespace PivotViewerDynamic.Web
{
public class DzcHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
PivotHttpHandlers.ServeDzc(context);
}
public bool IsReusable
{
get { return true; }
}
}
public class ImageTileHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
PivotHttpHandlers.ServeImageTile(context);
}
public bool IsReusable
{
get { return true; }
}
}
public class DziHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
PivotHttpHandlers.ServeDzi(context);
}
public bool IsReusable
{
get { return true; }
}
}
public class DeepZoomImageHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
PivotHttpHandlers.ServeDeepZoomImage(context);
}
public bool IsReusable
{
get { return true; }
}
}
}
Add these handlers to the web.config too. Add the lines below to the HttpHandler section in system.web.
<add path="*.dzc" verb="GET"
type="PivotViewerDynamic.Web.DzcHandler"/>
<add path="*.dzi" verb="GET"
type="PivotViewerDynamic.Web.DziHandler"/>
<add path="*/dzi/*_files/*/*_*.jpg" verb="GET"
type="PivotViewerDynamic.Web.DeepZoomImageHandler"/>
<add path="*_files/*/*_*.jpg" verb="GET"
type="PivotViewerDynamic.Web.ImageTileHandler"/>
Add the lines below to the Handlers section in System.WebServer:
<add name="DZC" path="*.dzc" verb="GET"
type="PivotViewerDynamic.Web.DzcHandler"/>
<add name="DZI" path="*.dzi" verb="GET"
type="PivotViewerDynamic.Web.DziHandler"/>
<add name="DeepZoomImage" path="*/dzi/*_files/*/*_*.jpg"
verb="GET" type="PivotViewerDynamic.Web.DeepZoomImageHandler"/>
<add name="ImageTile" path="*_files/*/*_*.jpg"
verb="GET" type="PivotViewerDynamic.Web.ImageTileHandler"/>
You should be able to run the application now.
Wrap-up
In this example, I used a very simple .XML file. It won't be hard to change the code to consume external web services. As long as there are items return that can contain sets of data it can be shown in the PivotViewer, like RSS feeds, Twitter and even OData.
History
- 18th August, 2010: Initial post
