Integrate SilverLight in sharepoint

In the field of Web application development, users are constantly pursuing improved application experience. In addition, the requirements for these Web applications are no longer simply to support a single browser or platform. If you are currently building a Web application, the technology you need must not only provide a more convincing user experience, but also allow developers to quickly deliver this experience to multiple technologies and audiences. Silverlight 2 is an example of a technology that provides opportunities for developing robust Web applications. Silverlight is a cross-browser, cross-platform plug-in that allows developers to access a wide range of programming models to create a Web-based user experience. SharePoint is another technology that is often used in Web application development. Companies that originally used SharePoint to develop intranets now want to extend this technology to external Web sites. Silverlight and SharePoint will work together to provide a simple but powerful infrastructure for building intranets and extranet applications with cutting-edge user interface design and interaction functions. In this article, we will discuss how to use SharePoint and Silverlight by integrating the Silverlight application in SharePoint Web components. We will first guide you through using Silverlight 2 Beta 2 to build a fairly simple media application (see Figure 1). We will then show you how to use SharePoint Web components as a packaging for Silverlight applications. This method is interesting because it not only enables you to create independent bearer applications, but also supports the built-in SharePoint object model (for example, through the provider/user model) interconnect Web components. Figure 1 Web Components of Silverlight WMV player(Click an image to view the larger image)

The Silverlight 2 beta 2 launched by Media Player creation evolved from Silverlight 1.0. For example, Silverlight 2 supports hosting code. Therefore, in addition to JavaScript, you can also use Visual Basic and C # in applications #. In addition, Silverlight 2 comes with a set of controls that facilitate the expansion of controls, making it easier to create a Silverlight-based user interface. The experience of the designer has now been improved and is also supported by the UI design tools and Expression Blend in Visual Studio 2008. To prepare an environment for building a Silverlight application for SharePoint, make sure that the following programs are installed:

• Windows Server 2003 or Windows Server 2008
• Windows SharePoint Services 3.0 and SP1
• Microsoft Office SharePoint Server 2007 and SP1
• Visual Studio 2008 Professional Edition
• Silverlight Tools Beta 2 for Visual Studio 2008
• Silverlight 2 Beta 2 Runtime
• Windows SharePoint Services 3.0 tool: Visual Studio Extensions, version 1.2

After the environment is set up, open Visual Studio 2008 and create a new project. On the C # node or Visual Basic node, you will find a new project node named Silverlight, which contains two project templates: one for creating a Silverlight application, the other is used to create the Silverlight class library (see Figure 2). Figure 2 Silverlight application new project template(Click an image to view the larger image)

For the sample application, we select the Silverlight Application Template, provide a name (MediaPlayer in our example), and accept other default options. After you complete these steps and click "OK", the system prompts you to add a new Web to the solution or dynamically generate an HTML test page to host the Silverlight in the project. Select the first method (Add a new Web to the solution) and accept the default option again. After that, your solution will contain both the Silverlight project and Web applications (not just HTML pages ). In our example, you can see the two projects in the MediaPlayer solution. The first project is a Web site named MediaPlayerWeb. This is the testing Web site you need to use when developing and testing the Silverlight application .. The second project is the Silverlight application named MediaPlayer. In this article, we focus on the Page. xaml and Page. xaml. cs files in the MediaPlayer project. In Silverlight 2, the UI is generated by using an XML-based declarative language named XAML to create Windows Presentation Foundation (WPF) for client applications) this language is used in the UI. Page. xaml contains the XAML code that defines the UI, while Page. xaml. cs contains the hidden code of the application. You can only have one Page. xaml. cs file, but you can have multiple XAML files that can be managed through the central Page. XAML file. If you want to manage individual Silverlight controls in a Page. xaml, you can do so.

When you open a XAML file, Visual Studio 2008 displays a split design/XAML view. In addition, in Silverlight 2 Beta 2, you can drag controls from the toolbox to The XAML view. (Visual Studio 2008 does not support dragging controls to the design tool surface, but you can implement this in Expression Blend .) We deliberately created a relatively simple UI for MediaPlayer to illustrate the basic aspects of integration.Figure 3Displays the XAML code that represents the UI of the Silverlight application. We will use the StackPanel element to include and locate other controls in the UI. A MediaElement (that is, an element used to play a WMV file) and a Slider element (representing the timeline of a short film ). The other is used to hold Button, ToggleButton, and CheckBox elements, which provide playback, pause, stop, and mute functions. Figure 3 Media Player XAML

<UserControl x:Class="MediaPlayer.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="500">

    <StackPanel Grid.Row="1" 
                Margin="20,10,20,10" 
                Background="White" 
                Visibility="Visible">

        <MediaElement x:Name="moviePlayer" 
                      Source="Bear.wmv"
                      Margin="5">                     
        </MediaElement>

        <Slider x:Name="timeline" 
                ValueChanged="timeline_ValueChanged"
                Maximum="1"  
                Margin="5" >
        </Slider>
        <StackPanel Orientation="Horizontal" 
                    HorizontalAlignment="Center">
            <Button x:Name="movieStop"
                    Content="Stop" 
                    Height="25"
                    Width="40"

                    Click="movieStop_Click"
                    Margin="5">
            </Button>
            <ToggleButton x:Name="moviePlay" 
                          Content="Play" 
                          Height="25"
                          Width="40"

                          Click="moviePlay_Click"
                          Margin="5">
            </ToggleButton>
            <CheckBox x:Name="movieMute"
                      Content="Sound On"
                      Click="movieMute_Click">
            </CheckBox>
        </StackPanel>
    </StackPanel>
</UserControl>

In the XAML-based UI, the x: Name attribute is one of the key attributes you will pay attention. This attribute indicates the name provided to the control. You can control the control by hiding the code. You should also pay attention to the events corresponding to some controls in XAML, such as the click = moviePlay_Click event of the button. When you click this event, the moviePlay_Click method in the hidden code is called. In the XAML code, we configure the MediaElement control to play the video Bear. wmv. You can load your own video from the ClientBin folder, but you must make sure that the Source attribute in XAML is changed to reflect the name of the file added to the project. In addition, you can provide HTTP references for the location of a WMV file. For example, you can use a picture library as the repository for the movies on your SharePoint site. Note that in the Page of each event handler. when you create an event handler in a xaml file (for example, Click = "movieMute_Click"), if you type Click to add an event handler using intelliisense, Visual Studio will automatically go to Page. xaml. add the stub Method for your event handler in the cs file. Before discussing hidden code, let's take a quick look at the view of the same Code in Expression Blend. We complete all encoding in Visual Studio 2008, but you can also use Expression Blend to create a UI and then integrate the UI into the Silverlight project in Visual Studio. After opening the page in Expression Blend (seeFigure 4), You can add an item to the Silverlight application, save the file, and switch back to Visual Studio 2008. Visual Studio 2008 will prompt you to reload the changes in Expression Blend in the Visual Studio 2008 project. (To open in Expression, right-click Page. xaml and select "open in Expression Blend ".) Figure 4Project view in Expression Blend(Click an image to view the larger image)

To add hidden code to a Silverlight application, right-click the Page. xaml file in Solution Explorer and click View code ". You can also expand the Page. xaml node, right-click the Page. xaml. cs file, and select "view code ". The code in this view corresponds to the UI we have previously built. Here we set specific properties of the Silverlight control.Figure 5Shows the code we added to the Page. xaml. cs file. Figure 5 Media Player hidden code

namespace MediaPlayer {
    public partial class Page : UserControl {
        public Page() {
            InitializeComponent();
        }

        private void timeline_ValueChanged(
          object sender, RoutedPropertyChangedEventArgs<double> e) {
            long ticks = (long)((sender as Slider).Value * 
              this.moviePlayer.NaturalDuration.TimeSpan.Ticks);
            TimeSpan movieTimespan = new TimeSpan(ticks);
            this.moviePlayer.Position = movieTimespan;
            if (this.moviePlayer.CurrentState == MediaElementState.Playing) {
                this.moviePlay.IsChecked = true;
                this.moviePlay.Content = "Pause";
            }
        }

        private void movieStop_Click(object sender, RoutedEventArgs e) {
            this.timeline.Value = 0;
            this.moviePlayer.Stop();
            this.moviePlay.Content = "Play";
        }
        private void moviePlay_Click(object sender, RoutedEventArgs e) {
            if (moviePlay.IsChecked == true) {
                moviePlay.Content = "Pause";
                this.moviePlayer.Play();
            }
            else {
                moviePlay.Content = "Play";
                this.moviePlayer.Pause();
            }
        }

        private void movieMute_Click(object sender, RoutedEventArgs e) {
            if (movieMute.IsChecked == true) {
                movieMute.Content = "Sound On";
                this.moviePlayer.IsMuted = true;
            }
            else {
                movieMute.Content = "Sound Off";
                this.moviePlayer.IsMuted = false;
            }
        }
    }
}

You will notice that there are many methods in the hidden code, all of which correspond to the event handler we added to the control in the XAML code. For example, in this Code, the movieStop_Click method responds to the user who clicked the "stop" button, and then sets the timeline value to 0 (in other words, return to the starting position of the video) and change the text on the play button (from pause to play, depending on the initial status ). This hidden code also responds to users who click the "Play/Pause" switch button. In this way, the corresponding Play and Pause methods are called and the text on the switch button is set. You can also interact with the slider control, which enables the video to jump back to a specific point, which is equivalent to the Fast forward/reverse function. Finally, you can mute a video by clicking the "mute" check box.

In this case, you can debug the Silverlight application by pressing F5 on the keyboard or clicking debug | start Debug on the Visual Studio project menu. This will call your default browser and load the Silverlight application. You may see a warning indicating that debugging is not enabled. Click OK to make Visual Studio modify the web. config file to enable debugging. If everything works properly, the WMV file (Bear. wmv in this example) will be loaded and played. You can click "stop", "pause", or use the slider control to change the playback status. You can also change the sound effect by selecting the "mute" check box. The Silverlight application is running at this time, and you need to complete a step before integrating it with SharePoint. This step ensures that the XAP file (that is, an archive containing your built Silverlight application) is placed in a location where a SharePoint Web part can be picked and loaded. The XAP file contains all the core application files of the Silverlight application. Because the XAP file is essentially an archive of the built project file, you can rename the XAP file with the. zip extension and open it to view the files contained in the XAP package. When you open the MediaPlayer. xap file, you will see several different files: the project's core DLL and an AppManifest. xaml file. The DLL in this archive is a combination of the code you created (the DLL created in this example is MediaPlayer. dll) and the Microsoft DLL necessary to run the compiled assembly. The AppManifest. xaml file is generated, which lists all dependencies in the project. The content of the AppManifest. xaml file in the MediaPlayer example discussed in this article contains a large number of key references specific to Silverlight application deployment:

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  EntryPointAssembly="MediaPlayer" 
  EntryPointType="MediaPlayer.App" 
  RuntimeVersion="2.0.30523.6">
  <Deployment.Parts>
    <AssemblyPart x:Name="MediaPlayer" Source="MediaPlayer.dll" />
    <AssemblyPart x:Name="System.Windows.Controls.Extended" 
      Source="System.Windows.Controls.Extended.dll" />
  </Deployment.Parts>
</Deployment>

The name of the Assembly (MediaPlayer) and the Silverlight runtime version used to compile the application (2.0.30523.6) are displayed, and the required assembly is listed (this is also included in the XAP archive ). Make sure that the XAP file is copied to a location in the SharePoint site. In the MediaPlayer example, a folder named ClientBin is created in the root virtual directory of the SharePoint site. You can also copy the XAP file to the _ layouts folder on a SharePoint document library or SharePoint Server. In ClientBin, we created a folder named XAP that contains all XAP files (or the Silverlight application we are building and integrating with SharePoint ). This location must be referenced when you create a Silverlight control instance in a SharePoint Web parts project. Make sure that you do not forget to copy the latest XAP file to the corresponding directory when updating and re-compiling the Silverlight application. After copying the XAP file to a location on the server, you can create a SharePoint Web Part host container for the Silverlight application immediately. Rename a Web part if the default name of the Web Part project is accepted, the project shell contains a Web Part named WebPart1. You can retain this name, but you may want to create a more descriptive name for the Web part. Right-click an existing Web Part (WebPart1) and select "delete ". Next, click the WSP tab and delete all content under WebPart1 WebPart. (If the WSP view is not displayed-Deploy the Web part package to the view after SharePoint, click View and other windows in the Visual Studio main menu ", select "WSP View ".) After you confirm that the Web part is deleted, right-click the project in Solution Explorer and select Add new item ". In the "Add new project" dialog box, select a SharePoint node and select "Web parts ". Provide a more intuitive name for the Web part.Add new Web parts to the Project(Click an image to view the larger image)

To create and deploy Web parts, open Visual Studio and open a new SharePoint Web parts project template (seeFigure 6). In this example, we have named the new Web Part project MediaPlayerWebPart. Figure 6Web parts project template(Click an image to view the larger image)

After adding a new Web part, you must add two references to the project to add the code. The first reference is System. Web. Extensions DLL, and the second is System. Web. Silverlight DLL. To add code to a Web part, right-click the Web part code file (for example, MediaPlayerWebPart. cs), and click View code ". Figure 7Shows the code we added to the Web parts project. There are two important things to emphasize. First, we will use the ScriptManager object to render the Silverlight application. This is because the Silverlight application depends on the AJAX ScriptManager control. Therefore, you must first add an instance of the ScriptManager object to the project. The second is the instantiation of the Silverlight control. In Figure 7In the code shown in, myMediaCtrl indicates the Silverlight control (actually the Silverlight media player we created) instance. After creating a new instance of the control, you need to set many attributes. These attributes are very important to the Source attribute, which points to the location of the XAP file and then loads the file in the Web part. Figure 7 Media Player Web Components

namespace MediaPlayerWebPart {
    [Guid("7e7ef885-130a-45e6-ab14-15f344b1939d")]
    public class MediaPlayerWebPart : 
      System.Web.UI.WebControls.WebParts.WebPart {
        public MediaPlayerWebPart() {
        }

        protected override void OnLoad(EventArgs e) {
            base.OnLoad(e);

            ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
            if (scriptManager == null) {
                scriptManager = new ScriptManager();
                this.Controls.Add(scriptManager);
            }
        }

        protected override void CreateChildControls() {
            System.Web.UI.SilverlightControls.Silverlight myMediaCtrl = 
              new System.Web.UI.SilverlightControls.Silverlight();
            myMediaCtrl.ID = "myMediaPlayer";
            myMediaCtrl.Source = "/ClientBin/XAP/MediaPlayer.xap";
            myMediaCtrl.Width = new System.Web.UI.WebControls.Unit(900);
            myMediaCtrl.Height = new System.Web.UI.WebControls.Unit(650);

            this.Controls.Add(myMediaCtrl);
        }
    }
}

After adding the code, you can complete the second step: configure the Web Part project to be deployed. To do this, open the "properties" view of the project and click the "debug" tab. Select the "Start browser with URL" check box and enter the root URL of the SharePoint site (for example, http: // spvm ). To test the deployment of Web parts, click Generate, and then click deploy solution ". This will automatically create a WSP package that contains all the files required to deploy the Web part assembly to SharePoint (the CAB equivalent file of the SharePoint Assembly deployment item), deploy the solution file to the corresponding location in the SharePoint site, and then stop and restart the "Internet Information Service" (IIS) Web application. If you try to deploy on Windows Server 2008 when UAC is enabled, you need to run Visual Studio as an "Administrator, otherwise, the system will receive an error message "the instance where the object reference is not set as an object. Assuming everything is correctly configured, you can now add Web parts to a site in SharePoint, the last step of integration between SharePoint and Silverlight.

To add an application to a SharePoint site, you have created a Silverlight application and created and deployed a Web Part container for the Silverlight application. The last step is to create a site that can carry Web components. However, before performing this operation, you must check several items. The first thing is to check whether you have installed System. Web. Silverlight. dll in the Global Assembly Cache (GAC. If not, install the SDK at \ Program Files \ Microsoft SDKs \ Silverlight \ v2.0 \ Libraries \ Server. The second thing is to check whether the web. config file in the SharePoint root directory has all the elements required to support the Silverlight application and whether the Silverlight application is marked as a security control. The following describes the Security Control entries of MediaPlayerWebPart in the web. config file (automatically added when a project is built and deployed to a SharePoint site ):

<SafeControl Assembly="MediaPlayerWebPart, 
             Version=1.0.0.0, 
             Culture=neutral,    
             PublicKeyToken=9f4da00116c38ec5" 
             Namespace="MediaPlayerWebPart" 
             TypeName="MediaPlayerWebPart" 
             Safe="True" />

We will not discuss the web in detail. config file, but before you try to make sure that the web. when the config file supports the Silverlight application, the simplest way is to check the web generated as part of the Silverlight project. and make sure all these elements exist in the web. config. If none of these elements exist, the Silverlight application will not appear in the SharePoint Web part. Now you can create a SharePoint site that will host the Web parts based on Silverlight. To do this, navigate to your SharePoint site. We created a separate test site named Media Player for the Silverlight application. To create a site, navigate to the SharePoint site home page and click website operations | website settings ". Under website management, click website and workspace ". On the "website and workspace" page, click "CREATE ". Provide the name, description, and site type (we have selected the Blank site) and the site URL, and then click "CREATE ". After a new site is created, SharePoint automatically loads it. Click "website operations" and "Edit page ". In this site, click Add Web parts to call the Web parts library (seeFigure 8). Scroll down until you find the project (for example, MediaPlayerWebPart) You added to SharePoint, select the check box, and click Add ". In this way, the Silverlight Media Player application can be added to SharePoint through a Web part used as the host container. The response of this Silverlight application is the same as when you debug it in Visual Studio 2008, and only appears as a Web Part in SharePoint. After adding Web parts to SharePoint, test different controls in the Silverlight application to ensure that they can run normally. Figure 8Web parts library(Click an image to view the larger image)