Book Image

Microsoft Silverlight 4 and SharePoint 2010 Integration

By : Gaston C. Hillar
Book Image

Microsoft Silverlight 4 and SharePoint 2010 Integration

By: Gaston C. Hillar

Overview of this book

Silverlight is a powerful development platform for creating engaging, interactive user experiences for the Web, desktop, and mobile applications. Integrating Silverlight RIAs in SharePoint 2010 offers amazing opportunities to combine the power and flexibility offered by SharePoint. It is easy to create great user experiences when you have a step-by-step guide to implement Silverlight 4 applications on SharePoint 2010 sites. This book is not a primer on Silverlight 4 or SharePoint 2010. This book focuses on the integration of Silverlight 4 and SharePoint 2010 and provides step-by-step guidelines for implementing Silverlight RIAs in SharePoint. It is filled with real-world examples that depict the various techniques for interacting with data and services provided by this powerful business collaboration platform, for the enterprise and the Internet. As you sit reading this, you might have already started thinking about the benefits of implementing multiple Silverlight applications in a SharePoint environment. This book will help bring those thoughts to fruition. This book begins with the fundamental concepts of integrating Silverlight 4 with SharePoint 2010, such as the preparation of the development environment to create applications using Silverlight 4 and the addition of one or more Silverlight RIAs to a SharePoint site. Then, it moves on to the SharePoint Silverlight Client Object Model world, using step-by-step examples to combine a Silverlight application and a SharePoint module. It also covers methods to deploy and debug the Silverlight application while it runs as Silverlight Web Part in a SharePoint page. The book teaches you to take advantage of the new features offered by Visual Studio 2010 to browse SharePoint lists. Once the reader has control over the SharePoint Silverlight Client Object Model and its asynchronous operations in Silverlight applications, it is time to access external databases through the new Business Connectivity Services (BCS) and interact with workflows. Then, the book explains to perform CRUD operations by consuming the new SharePoint 2010 WCF Data Services in Silverlight. In the end, you'll learn to utilize Silverlight 4's rich media features to add effects and interactive animations to images and videos, thus offering the final touches to the Silverlight 4 and SharePoint 2010 integration learning experience. By the end of this book, you'll learn to take advantage of the unique features offered by Silverlight in order to create impressive UX that interact with SharePoint 2010.
Table of Contents (12 chapters)
Microsoft Silverlight 4 and SharePoint 2010 Integration
Credits
About the Author
Acknowledgement
About the Reviewers
Preface

Creating a Silverlight LOB (Line-of-Business) RIA


Now, we are going to create a very simple Silverlight LOB (Line-Of-Business) RIA that retrieves data, displays a grid with a list of projects, and allows the users to navigate through the data. Then, we are going to integrate this Silverlight UI in SharePoint.

  1. 1. Create a new Visual C# project using the Silverlight | Silverlight Application template. Use SilverlightProjects as the project's name.

  2. 2. Deactivate the Host the Silverlight application in a new Web site checkbox in the New Silverlight Application dialog box. We want the Silverlight application to run in a simple HTML web page. As you have installed Silverlight 4 Tools, the dialog box will offer you a combo box with the possibility to choose the desired Silverlight version. Select Silverlight 4 as we want to take advantage of the new features offered by this version.

  3. 3. Add a new XML file to the project, Projects.xml. The following lines define properties and values for five project instances. This way, we have some data in XML format for our simple LOB application.

    <?xml version="1.0" encoding="utf-8" ?>
    <projects>
    <project projectId="0">
    <title>Creating a Silverlight 4 UI</title>
    <estimatedDaysLeft>4</estimatedDaysLeft>
    <status>Delayed</status>
    <assignedTo>Jon Share</assignedTo>
    <numberOfTasks>5</numberOfTasks>
    </project>
    <project projectId="1">
    <title>Creating a Complex Silverlight LOB RIA</title>
    <estimatedDaysLeft>5</estimatedDaysLeft>
    <status>Delayed</status>
    <assignedTo>James Point</assignedTo>
    <numberOfTasks>35</numberOfTasks>
    </project>
    <project projectId="2">
    <title>Creating a New SharePoint Site</title>
    <estimatedDaysLeft>3</estimatedDaysLeft>
    <status>Delayed</status>
    <assignedTo>Vanessa Dotcom</assignedTo>
    <numberOfTasks>8</numberOfTasks>
    </project>
    <project projectId="3">
    <title>Installing a New SharePoint 2010 Server</title>
    <estimatedDaysLeft>3</estimatedDaysLeft>
    <status>Delayed</status>
    <assignedTo>Michael Desktop</assignedTo>
    <numberOfTasks>25</numberOfTasks>
    </project>
    <project projectId="4">
    <title>Testing the New Silverlight LOB RIA</title>
    <estimatedDaysLeft>4</estimatedDaysLeft>
    <status>Delayed</status>
    <assignedTo>Jon Share</assignedTo>
    <numberOfTasks>35</numberOfTasks>
    </project>
    </projects>
    
    
  4. 4. Add a new class to the project called Project in a new class file, Project.cs. The following lines define the new class, with six properties. This way, you will be able to create instances of this class to hold the values defined in the previously created XML file.

    public class Project
    {
    public int ProjectId { get; set; }
    public string Title { get; set; }
    public int EstimatedDaysLeft { get; set; }
    public string Status { get; set; }
    public string AssignedTo { get; set; }
    public int NumberOfTasks { get; set; }
    }
    
  5. 5. Open MainPage.xaml, define a new width and height for the Grid as 800 and 600, add the following controls located in the Toolbox under All Silverlight Controls, and align them as shown in the screenshot. Remember that Visual Studio 2010 allows us to drag-and-drop controls from the toolbox to the Silverlight UserControl in the design view and it will automatically generate the XAML code.

    • Two Label controls.

    • One DataGrid control and set its name to dataGridProjects. Set its AutoGenerateColumns property to true.

    • One Slider control, sliGridFontSize. Set its Minimum property to 8, Maximum to 72, and Value to 11.

  6. 6. Apply data binding to the font size for the DataGrid control, dataGridProjects. In order to do so, select dataGridProjects, activate the Properties panel, display them in alphabetical order, right-click on the FontSize property, and select Apply Data Binding in the context menu that appears. Then, select ElementName in Source, sliGridFontSize, and then Value in Path. This way, when the user moves the slider, the font size for the data grid will change. The code that defines the data binding is as follows:

    FontSize="{Binding ElementName=sliGridFontSize, Path=Value}"
    
  7. 7. The complete XAML markup code for MainPage.xaml will be similar to the following lines:

    <UserControl x:Class="SilverlightProjects.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"
    mc:Ignorable="d"
    d:DesignWidth="800" d:DesignHeight="600" xmlns:data= "clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data" xmlns:dataInput= "clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data.Input">
    <Grid x:Name="LayoutRoot" Background="White">
    <data:DataGrid AutoGenerateColumns="True" Height="491" HorizontalAlignment="Left" Margin="12,56,0,0" Name="dataGridProjects" VerticalAlignment="Top" Width="776" FontSize="{ Binding ElementName=sliGridFontSize, Path=Value}" />
    <dataInput:Label Height="38" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="376" FontWeight="Bold" FontSize="24" Content="Projects" />
    <Slider Height="35" HorizontalAlignment="Left" Margin="158,553,0,0" Name="sliGridFontSize" VerticalAlignment="Top" Width="630" Value="11" Maximum="72" Minimum="11" />
    <dataInput:Label Content="Font size" FontSize="20" FontWeight="Bold" Height="35" HorizontalAlignment="Left" Margin="12,553,0,0" Name="label2" VerticalAlignment="Top" Width="140" />
    </Grid>
    </UserControl>
    
  8. 8. Now, it is necessary to add code to retrieve data from the XML file and assign a value to the ItemsSource property of the DataGrid control. First, you have to add a reference to System.Xml.Linq.dll. Then, you can add the new InitializeGrid method and call it from the class constructor as shown in the following lines for MainPage.xaml.cs.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    // Added
    using System.Xml.Linq;
    namespace SilverlightProjects
    {
    Silverlight LOB RIAcreatingpublic partial class MainPage : UserControl
    {
    private void InitializeGrid()
    {
    XDocument docProjects = XDocument.Load("Projects.xml");
    var projectsData = from el in docProjects.Descendants("project")
    select new Project
    {
    ProjectId = Convert.ToInt32(el.Attribute("projectId").Value),
    Title = Convert.ToString(el.Element("title").Value),
    EstimatedDaysLeft = Convert.ToInt32(el.Element("estimatedDaysLeft").Value),
    Status = Convert.ToString(el.Element("status").Value),
    AssignedTo = Convert.ToString(el.Element("assignedTo").Value),
    NumberOfTasks = Convert.ToInt32(el.Element("numberOfTasks").Value)
    };
    dataGridProjects.ItemsSource = projectsData;
    }
    public MainPage()
    {
    InitializeComponent();
    InitializeGrid();
    }
    }
    }
    
  9. 9. Build and run the solution. The default web browser will appear showing a grid with headers and the five rows defined in the previously added XML file, as shown in the following screenshot:

It is a very simple Silverlight LOB RIA displaying a data grid with rows that are read from the XML file included in the project, Projects.xml.

First, we added the XML file with the definitions for the five projects. Then, we added a class with the necessary properties to hold the values defined in this XML file.

The InitializeGrid method loads the projects from the Projects.xml XML file (embedded and compressed in the .xap file).

XDocument docProjects = XDocument.Load("Projects.xml");

Then, it uses a LINQ to XML query to create instances of the Project class and assign values to their properties. Finally, it assigns this query to the ItemsSource property of the DataGrid:

dataGridProjects.ItemsSource = projectsData;

Note

C# 3.0 (Visual C# 2008) introduced LINQ and it is very useful for processing queries for many different data sources. The features of LINQ and its usage in real-life scenarios are described in depth in LINQ Quickly (A Practical Guide to Programming Language Integrated Query with C#) by N. Satheesh Kumar from Packt Publishing.

Creating rich User eXperiences (UX)

We can click on one of the headers and the grid will sort the data in ascending order. Then, we can click again to sort the data into descending order.

When we drag the slider located at the bottom, the font size for the grid will change, as shown in the following screenshot:

As previously explained, we can also take advantage of the themes included in Silverlight's Toolkit to offer the user a more exciting UI. Follow these steps to apply a theme to the main UserControl for the Silverlight UI:

  1. 1. Select Start | All Programs | Microsoft Silverlight 4 Toolkit | Binaries and Windows will open the folder that contains the Silverlight Toolkit binaries. By default, they are located at C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin in 64-bit Windows versions. Its parent folder contains the Themes sub-folder, C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes. In 32-bit Windows versions, the default folders are C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin and C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes.

  2. 2. Add a reference to System.Windows.Controls.Theming.Toolkit.dll. Remember that it is located in the aforementioned Bin sub-folder.

  3. 3. Add a reference to the DLL for the desired theme in the Themes sub-folder. For example, if you want to apply the ShinyBlue theme, add System.Windows.Controls.Theming.ShinyBlue, located in the aforementioned Themes sub-folder.

  4. 4. Add the following line to include the namespace that defines the theme in the UserControl defined in MainPage.xaml:

    xmlns:shinyBlue= "clr-namespace:System.Windows.Controls.Theming; assembly=System.Windows.Controls.Theming.ShinyBlue"
    
  5. 5. Add the following line before the definition of the main Grid, LayoutRoot:

    <shinyBlue:ShinyBlueTheme>
    
  6. 6. Add the following line after the definition of the main Grid, LayoutRoot:

    </shinyBlue:ShinyBlueTheme>
    

This way, the ShinyBlue theme will be applied to the main Grid, LayoutRoot and all its child controls. It wasn't necessary to make great changes to offer a more attractive rich user experience. Let's see the revised look in the following screenshot:

Building a Silverlight 4 RIA

When we build a Silverlight project, Visual Studio or Expression Blend creates many folders with a lot of sub-folders and files.

In this case, we want to add the simple Silverlight RIA to a page in SharePoint 2010. Thus, we are interested in the SilverlightProjects.xap file. This is a compressed file, that is, a ZIP file with a .xap extension, and it contains all the necessary files for the Silverlight application.

You can find this file in the Debug or the Release sub-folder, according to your active solution configuration. For example, if the project is located in a SilverlightProjects folder, the relative path for the release SilverlightProjects.xap file would usually be ...\SilverlightProjects\Bin\Release. If you want to be sure about the location of the generated .xap file, you can follow these steps after building the project:

  1. 1. Activate the Solution Explorer.

  2. 2. Click on the Show All Files button, the second button located at the top of the Solution Explorer palette. Now, expand the Bin folder and then the Debug or Release sub-folder, according to your active solution configuration, as shown in the following screenshot:

  3. 3. Right-click on the SilverlightProjects.xap file and, and select Properties in the context menu that appears or press F4. The Properties palette will appear and you will be able to see the value for its Full Path property. This way, you can get the exact path for this file, as shown in the next screenshot. You will need it later to integrate it with SharePoint.