PivotViewer, Silverlight

Runtime PivotViewer collection creation

PivotViewer series

  1. Building your first PivotViewer application
  2. Runtime PivotViewer collection creation
  3. PivotViewer – Working with Facets
  4. Handling PivotViewer events
  5. PivotViewer – Custom actions
  6. PivotViewer and MVVM

Intro

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 is capable of generating images on the fly or load 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 include in the sample code for this tutorial.

To be able to use the factory a custom HTTP handler needs to be build. 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. Lets 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 examples 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.

image

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 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.

image

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.

In this first version of the PivotViewer it is not possible to style the control, but you can do other fun stuff with it. You can expect more tutorials on the PivotViewer in the future. To be the first to know about that you can subscribe to the RSS-feed or follow me on twitter.

You can download the code for this tutorial here.

Technorati Tags: Silverlight,PivotViewer

Share



 

kick it on DotNetKicks.com


 

Shout it

15 comments

  1. Hey Timmy,

    I always get the exception “Could not load type ‘PivotViewerDynamic.Web.CxmlHandler’.” when trying to access the .cxml files on my server.
    I’ve added the following lines to my web.config:

    What could be a possible reason for that?

    Thanks,
    Marius

  2. Hi Marius,
    Your config code seems to be filtered out by the commenting system. Do you mind posting it again? or send it to me by email? Thanks!

  3. Thanks for the article.

    I do not see any output (images) when I run your code though.

    I have executed my own code that has preconfigured images and corresponding xml files.

    I am not sure what I am doing wrong.

  4. Hi Timmmy,
    I am Sumit. I am new and found your tutorial very useful for JIT PivotViewer Collection creation.
    I have a problem. I implemented the JIT PivotViewer in SharePoint and it works fine for the images stored locally on the hard drive. I tried to create a collection from the images stored in the SharePoint Picture Library.
    The CXML gets generated but the images are not rendered in the PivotView instead I get a blank page. After Debugging I narrowed down to CollectionItems.cs in PivotServerTools.
    In “SetImage” method we dont get image data with “this.ImageProvider = new FileImage(image.ImageFilePath);”
    it works fine for the files on hard disk but not for SharePoint Library.

    Can you help me out in any way???

    Regards,
    Sumit Zitshi

  5. I found out the reason.
    Was passing the URL of file as the file path.
    Used the string img = new ItemImage(fullURL);
    as img = new ItemImage(new Uri(fullURL)); while using AddItem function.

    And once again thank you Timmy for such a wonderful tutorial. And I think its the only one available of its kind.

  6. Hi Timmy, thanks for the tutorials. They’ve been very helpful as I’ve built up a dynamic PivotViewer app.

    In my application, I’m dynamically generating images in memory server-side, then passing them to PivotServerTools when I make my collection items. My question is: does the PivotServerTools library cache these images on the hard drive? I haven’t had much luck finding the source code for the server tools or any documentation, since http://www.getpivot.com doesn’t exist anymore.

    Thanks,
    Chris

  7. @Running the project displays a blank page:

    Make sure you set the PivotViewerDynamic.Web as starting project and not PivotViewerDynamic, then you will see the images :)

  8. Hi Tim,

    Thanks for the helpful solution.

    I was able to run it successfully and able to load the images.

    Now,I want to upload it on IIS server so every one can view it.

    I have uploaded “HTML, XAP, DEMODATA.XML” files on server but the application is not displaying.

    I have set the MIME types on server.

    Please let me know if I am missing on anything.

    Regards,
    Lokesh

  9. Hi Timmy,

    Thanks for the helpful solution.

    I was able to run it successfully and able to load the images.

    Now,I want to upload it on IIS server so every one can view it.

    I have uploaded “HTML, XAP, DEMODATA.XML” files on server but the application is not displaying.

    I have set the MIME types on server.

    Please let me know if I am missing on anything.

  10. Hi Timmy,
    just coded your example, everything appears ok, when running locally from VS 2010 debugger,
    images to dnot show up, do i need to publish to IIS to view images ?

  11. Hi Tiimy,
    figured it out, it was my XAML, had pivotviewer in scrollviewer, once removed worked fine, great article :),

    Thanks,
    Tim

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: