Demonstration Environment Setup Share Point 2010

To show some of the code snippets in this chapter in action, we’ll start by setting up a demonstration environment and add some test data.

  1. Using a web browser, navigate to an appropriate root site within your SharePoint farm—for example, http://<Your Server Name>. From the Site Actions menu, choose New Site.
  2. In the Create dialog, select Team Site. Type the title for the new site, and the URL Name, Chapter.
  3. After the site has been created, click the Lists link and select the Announcements list.
  4. Add a few rows of sample data; we’ll use this for our demo code.

Host Silverlight in SharePoint

To demonstrate the Silverlight Client Object Model, we’ll create a basic application and host it in a page on our SharePoint test site. Take the following steps:

Host Silverlight in SharePoint

  1. Using Visual Studio, choose File | New Project.
  2. In the New Project dialog, select Empty SharePoint Project and name the new project, as shown:
  3. In the SharePoint Customization Wizard dialog, set the debugging site to the demo site that we created earlier. Select Deploy As A Farm Solution, and then click Finish.
  4. Choose File | Add | New Project.
  5. In the Add New Project dialog, select Silverlight in the Installed Templates list and Silverlight Application in the middle pane, and then type the project name, SilverlightCOMDemo, as shown:
  6. SilverlightCOMDemo

  7. In the New Silverlight Application dialog, uncheck the Host The Silverlight Application In A New Web Site checkbox, and then click OK.
  8. Choose Project | Add Reference.
  9. Select the Browse tab and navigate to%SPRoot%TemplateLayoutsClientBin and add references toMicrosoft.SharePoint.Client.Silverlight.dll and Microsoft.SharePoint.Client.Silverlight.runtime.dll. Be aware that the SPRoot environment variable isn’t resolved in the Add Reference dialog, so you’ll need to enter the complete path:
    C:Program Files Common Files Microsoft Shared Web ServerExtensions14Template Layouts Client Bin.

To ensure that our Silverlight project is automatically deployed as part of our SharePoint project, let’s create a new document library in SharePoint and add the compiled output of our Silverlight project to it as part of the build process:

  1. Right-click the Chapter4 project and select Add | New Item.
  2. Select List Instance from the list, and type the name SilverlightControls as shown:
  3. SilverlightCOMDemo

  4. Type the display name for the list as SilverlightControls and then, from the Which List Do You Want To Instantiate drop-down, select Document Library.
  5. Set the relative URL to SilverlightControls and click Finish.
  6. A new SilverlightControls folder will be added to the Chapter4 project. If it’s not already open, open the Elements.xml file from the SilverlightControls folder and add the following XML after the closing ListInstance tag:
  7. <Module Name="SilverlightControls" Url="SilverlightControls"><File Path="SilverlightControlsSilverlightCOMDemo.xap" Url="SilverlightCOMDemo.xap" Type="GhostableInLibrary" /><File Path="SilverlightControlsJScriptTest.js" Url="JScriptTest.js" Type="GhostableInLibrary" /></Module>

    Element files are covered in more detail in Chapter 19. These files are used by the deployment mechanism to determine configuration settings and files that should be deployed to SharePoint when the package is installed. The additional XML that we’ve added will load SilverlightCOMDemo.xap and JScriptTest.js into our SilverlightControls document library. Of course, before we can load these files into the library we need to create them.

  8. In the SilverlightControls folder, add a new JScript file named JScriptTest.js.
  9. Right-click the SilverlightCOMDemo project node and select Properties.
  10. Select the Build Events tab, and in the Post-build event command line, enter the following (on a single line):
  11. xcopy "$(TargetDir)$(TargetName).xap"
    "$(SolutionDir)Chapter4SilverlightControls" /Y


    This command line statement will copy the .xap file that’s built by the Silverlight project into the SilverlightControls folder in our SharePoint project.

  12. To be sure that all is working correctly, build the Silverlight project by right-clicking the SilverlightCOMDemo node and selecting Build.
  13. Click the Show All Files icon at the top of the Solution Explorer pane, as shown, and then right-click the SilverlightCOMDemo.xap file in the SilverlightControls folder and select Include In Project.

Click the Show All files icon again to hide extraneous files. Select the JScriptTest.js file, and then in the Properties pane, set the Deployment Type to ElementFile. Repeat this process for theSilverlightCOMDemo.xap file.

  1. To ensure that the Silverlight project is always updated, right-click the Chapter node and select Project Build Order.
  2. In the Dependencies tab, select Chapter4 from the Projects drop-down, and then check the SilverlightCOMDemo dependency.
  3. We’re now ready to deploy our solution to our SharePoint site. Choose Build | Deploy.

Using the Silverlight Web Part
Our solution will create a new document library named SilverlightControls on our test site. So that we can see our demo control, we need to host it within a SharePoint page. The easiest way to do this is to use the new Silverlight web part that’s included out-of-the-box with SharePoint 2010.

  1. Using a web browser, navigate to the demo site that we set up earlier. Notice that a new SilverlightControls document library has been added, which contains our Silverlight package and test JavaScript file.
  2. From the Site Actions menu, choose New Page. Name the new page SilverlightTest.
  3. From the Insert tab in the ribbon, click the Web Part button. Then select the Silverlight Web Part from the Media And Content category, as shown. Then click Add.
  4. Demonstration Environment Setup

  5. In the Silverlight Web Part dialog, set the URL to <Demo SiteUrl>/SilverlightControls/ Silverlight COMDemo.xap.
  6. From the Page tab in the ribbon, select Save.

Referencing the JavaScript Client Object Model
We’ll adopt a similar technique to test our JavaScript code. However, in this case, we don’t have the luxury of a web part that hooks everything up for us, so we’ll need to edit the page template to add the appropriate references.

  1. From the Site Actions menu, choose New Page. Name the new page JavaScriptTest.
  2. From the Page tab in the ribbon, click Save.
  3. Also from the Page tab, click the arrow under the Edit button and select Edit In SharePoint Designer.
  4. In SharePoint Designer, from the Home tab on the ribbon, select Advanced Mode.
  5. In the Content control with the ID PlaceHolderAdditionalPageHead, add the following markup after the SharePoint:RssLink tag (on one line):
  6. <SharePoint:ScriptLink runat="server" Name="sp.js" Localizable="false" LoadAfterUI="true"/>
  7. Scroll to the bottom of the page, and before theWebPartPage: WebPartZone tag, add the following markup (on one line):
  8. <script type="text/javascript" src="../SilverlightControls/JScriptTest.js" ></script><div id="DemoConsole"></div>
  9. Click the Save icon in the upper-left corner of the window to save the changes to SharePoint. Click Yes in the Site Definition Page Warning.

We’re now good to go. Our demo site has a Site Pages library containing a JavaScript test page and a Silverlight test page. At the moment, neither of these pages will display anything interesting, but as we progress through the examples in this, they’ll start to show how the Client Object Model works.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Share Point 2010 Topics