Share via

  • Article

Exercise 1: Automating Silverlight application and Silverlight Web Part Deployment

In this exercise, you will use Visual Studio 2010 to create a SharePoint Solution Package that deploys a Silverlight application and a web page that includes a pre-configured Silverlight Web Part to display the Silverlight application.

Task 1 – Creating a WSP to Deploy the Silverlight Application

In this task, you will use Visual Studio to create a SharePoint Solution Package that deploys a Silverlight application to a SharePoint 2010 site collection.

  1. Using Visual Studio 2010, open the Sample.Silverlight.App.sln Visual Studio Solution at the following location <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Before \Sample.Silverlight.App.
  2. In Visual Studio 2010, click File>> Add >> New Project to add a new project. (Figure 1)
  3. In the Installed Templates, select Visual C# -> SharePoint -> 2010 and select Empty SharePoint Project.
  4. Under Name: enter SharePoint.Silverlight.Deployment.

  5. In the Location: textbox enter <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Before and click OK.

    Figure 1

    Create an Empty SharePoint project.

  6. In the SharePoint Customization Wizard, enter the URL for your on premise instance of SharePoint 2010 (i.e. https://intranet.contoso.com).
  7. Select Deploy as a sandboxed solution and click Finish.
  8. Right-click the Sample.Silverlight.App project and choose Add -> New Item.
  9. Select Visual C# -> SharePoint -> 2010 -> Module.

  10. In the Add New Item dialog, under Name: enter Silverlight and click Add.

  11. Include the Silverlight.CSOM project output in the Silverlight.Client.CSOM.

  12. In the Solution Explorer, Right-click the Silverlight module and select Properties.

    Figure 2

    TO-DO

  13. Click on Project Output References row and click the Ellipse button to open the Project Output References dialog.
  14. Click Add and select a new project output reference.
  15. Under Members: select the SharePoint.Silverlight.Deployment project.
  16. Select the Project Name dropdown under SharePoint.Silverlight.Deployment properties: in the right hand panel select Sample.Silverlight.App.

  17. Using the Deployment Type dropdown, select ElementFile.

    Figure 3

    Project Output References

  18. Expand the Deployment location row.
  19. Delete the value in the Path row.
  20. Click OK to exit the dialog.
  21. In the Solution Explorer, right click the Sample.txt file and select Delete.
  22. Click OK.
  23. Double-click the Elements.xml file under the Silverlight module.

  24. Add the following code to the Module element.

    Xml

    Url="_catalogs/masterpage/xaps"

  25. Add the following code to the File element.

    Xml

    Type="GhostableInLibrary"

  26. Make sure the XML is exactly as it appears below:

    Xml

    <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Module Name="Silverlight" Url="_catalogs/masterpage/xaps"> <File Path="Sample.Silverlight.App.xap" Url="Sample.Silverlight.App.xap" Type="GhostableInLibrary"/> </Module> </Elements>

  27. Save the Elements.xml file.
  28. Add a module to deploy a custom ASPX page that includes a Silverlight Web Part configured to display the new Silverlight application.
  29. Right-click the SharePoint.Silverlight.Deployment SharePoint project and choose Add-> New Item.
  30. Select Visual C# -> SharePoint-> 2010 -> Module.
  31. Name the module CustomPages.
  32. Click Add.
  33. In the Solution Explorer, right-click the Sample.txt file and select Delete.
  34. Click OK.
    1. Add the TimeEntrySearchPage.aspx included in the student files to the module.
  35. Right-click the CustomPages module.
  36. Select Add >> Existing Item.
  37. Browse to the <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Before\SilverlightTestPage.aspx file and select it.
  38. Click Add.

  39. Open the Elements.xml file included in the CustomPages module and replace the content with the following Xml:

    Xml

    <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Module Name="CustomPages"> <File Url="SilverlightTestPage.aspx" Path="CustomPages\ SilverlightTestPage.aspx" Type="Ghostable" > <Property Name="Title" Value="Silverlight Test Page" /> <Property Name="Description" Value="Test Page to demonstrate how to deploy a web page with the Silverlight Web Part preconfigured to display a Silverlight application." /> <AllUsersWebPart WebPartOrder="1" WebPartZoneID="Main" ID="SilverlightWebPart"> <![CDATA[ <webParts> <webPart xmlns="https://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="Microsoft.SharePoint.WebPartPages.SilverlightWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" /> <importErrorMessage>Cannot import this Web Part.</importErrorMessage> </metaData> <data> <properties> <property name="HelpUrl" type="string" /> <property name="AllowClose" type="bool">True</property> <property name="ExportMode" type="exportmode">All</property> <property name="Hidden" type="bool">False</property> <property name="AllowEdit" type="bool">True</property> <property name="Direction" type="direction">NotSet</property> <property name="TitleIconImageUrl" type="string" /> <property name="AllowConnect" type="bool">True</property> <property name="HelpMode" type="helpmode">Modal</property> <property name="CustomProperties" type="string" null="true" /> <property name="AllowHide" type="bool">True</property> <property name="Description" type="string">A web part to display a Silverlight application.</property> <property name="CatalogIconImageUrl" type="string" /> <property name="MinRuntimeVersion" type="string" null="true" /> <property name="ApplicationXml" type="string" /> <property name="AllowMinimize" type="bool">True</property> <property name="AllowZoneChange" type="bool">True</property> <property name="CustomInitParameters" type="string" null="true" /> <property name="Height" type="unit">250px</property> <property name="ChromeType" type="chrometype">Default</property> <property name="Width" type="unit">800px</property> <property name="Title" type="string">Silverlight Web Part</property> <property name="ChromeState" type="chromestate">Normal</property> <property name="TitleUrl" type="string" /> <property name="Url" type="string">~site/_catalogs/masterpage/xaps/Sample.Silverlight.App.xap</property> <property name="WindowlessMode" type="bool">True</property> </properties> </data> </webPart> </webParts> ]]> </AllUsersWebPart> </File > </Module> </Elements>

  40. Save the Elements.xml file.

Task 2 – Deploying and Testing the Silverlight Application and Web Page Pre-configured with the Silverlight Web Part

In this task, you will test the deployment of the Silverlight application and web page.

  1. In the Solution Explorer, right-click the SharePoint.Silverlight.Deployment project and choose Deploy.
  2. Once the status bar displays deploy succeeded, open Internet Explorer and navigate to https://intranet.contoso.com/silverlighttestpage.aspx.

  3. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

    Figure 4

    Silverlight Web Part

Exercise 1 Verification

In order to verify that you have correctly performed all steps of exercise 1, proceed as follows:

Verification 1

In this verification, you will browse to the SharePoint page where you added the Content Editor Web Part to validate it displays the Silverlight.Sample.App Silverlight application that is running on the web site hosted by Visual Studio 2010.

  1. Open Internet Explorer and navigate to https://intranet.contoso.com/silverlighttestpage.aspx.

  2. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

    Figure 5

    Silverlight Web Part

< previous | next >

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files

Contents