Project Description
This sample code shows how you can host Silverlight Pivot Viewer in Windows Azure Web Role. You just need to create Pivot Viewer CXML and folders using PivitViewer control and use this sample code to host it inside the Windows Azure Web Role.

Visit the Sample Demo Site: http://galaxiespivot.cloudapp.net/

If you decide to host Silverlight PivotViewer control in Windows Azure ASP.NET web role, here are the instructions:

Tools:
Install Silverlight PivotViewer SDK:
- http://www.silverlight.net/learn/pivotviewer/
Microsoft Live Labs Pivot Tools:
- http://research.microsoft.com/en-us/downloads/dd4a479f-92d6-496f-867d-666c87fbaada/default.aspx


Prebuild Pivot content:
For example let's assume that you already have pivot hosted at some other site as:
- http://galaxiespivot.cloudapp.net/ClientBin/galaxies.cxml
- http://xpert360.net/MIX11/MIX11.cxml

You can verify that the pivot does work fine in Live Labs Pivot Viewer:

http://www.codeplex.com/download?ProjectName=pivotviewerinazure&DownloadId=231614





The following steps with help you to call a Hosted Pivot URL within Silverlight application to run in Windows Azure:



1. Create ASP.NET Web Role

2. Add a new Silverlight Application to the application and integrated with Web Role created in step #1

3. In the Silverlight Application add the following references:

  1. System.Windows.Pivot
  2. System.Windows.Pivot.Model
  3. System.Windows.Pivot.SharedUI
  4. System.Windows.Pivot.StringResources
  5. System.Windows.Pivot.Utilities


4. In the Mainpage.xaml add the following highlighted code:

<UserControl x:Class="PivotSilverlightApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <local:PivotViewer x:Name="pvWidgets" />
    </Grid>
</UserControl>




5. In the MainPage.xaml.cs please add the highlighted code as below:

 

 

namespace GalaxySLPivot
{
    public partial class MainPage : UserControl
    {
        // When using DEvelopment Fabric use 127.0.0.1 URL:
        private static readonly Uri s_GalaxiesCollectionUri = new Uri("http://127.0.0.1/ClientBin/galaxies.cxml");
        // When using DEvelopment Fabric use actual <yoursrvice>.cloudapp.net URL:
        //private static readonly Uri s_GalaxiesCollectionUri = new Uri("http://galaxiespivot.cloudapp.net/ClientBin/galaxies.cxml");
        public MainPage()
        {
            InitializeComponent();
            pivotWidgets.LoadCollection(s_GalaxiesCollectionUri.ToString(), string.Empty);
        }
    }
}

 

6. Now check the Web Role and Silverlight application in "Browser" that it is working.

7. Now Check the Web Role in compute Emulator and verify it is working fine.

8. Now Let's work in Web Role to remove other contents which are not necessary (you sure can keep it if you wish):


a. Remove App_data folder
b. Remove Account Folder
c. Remove Scripts Folder
d. Remove Styles Folder
e. Remove Global.asax
f. Remove About.aspx and About.aspx.cs
g. Remove Site.Master collection

9. Now update your web.config as below and add the following  RED lines:

<?xml version="1.0"?>

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>

  <system.webServer>
     <staticContent>
            <mimeMap fileExtension=".cxml" mimeType="text/xml" />
            <mimeMap fileExtension=".dzc" mimeType="text/xml" />
            <mimeMap fileExtension=".dzi" mimeType="text/xml" />
     </staticContent>
  </system.webServer>
</configuration>



10. Add a XML file name clientaccesspolicy.xml to the Web Role and insert the following content:

<access-policy>
  <cross-domain-access>
    <policy>
      <allow-from http-request-headers="SOAPAction">
        <domain uri="*"/>
      </allow-from>
      <grant-to>
        <resource path="/" include-subpaths="true"/>
      </grant-to>
    </policy>
  </cross-domain-access>
</access-policy>

 


11. Test the Application in the Compute Emulator

12. Now please add your Pivot CXML and necessary files in the ClientBin folder inside  the Solution as below:

http://www.codeplex.com/download?ProjectName=pivotviewerinazure&DownloadId=231620

 

When testing in Compute Emulator use the Pivot link as below
         // When using DEvelopment Fabric use 127.0.0.1 URL:        
         private static readonly Uri s_GalaxiesCollectionUri = new Uri("http://127.0.0.1/ClientBin/galaxies.cxml");        

When you are ready to deploy solution in Windows Azure use the Pivot link as below

        // When using DEvelopment Fabric use actual <yoursrvice>.cloudapp.net URL:        
        //private static readonly Uri s_GalaxiesCollectionUri = new Uri("http://galaxiespivot.cloudapp.net/ClientBin/galaxies.cxml");  

 

 

13. When test is done successfully, please package the application and deploy in Azure.



I have the site running at : http://galaxiespivot.cloudapp.net/

Last edited Apr 22, 2011 at 10:47 PM by Avkash, version 4