Using the Built-in Silverlight Media Player of SharePoint 2010

SharePoint 2010 has a simple but extensible Silverlight Media Player built in which we leveraged on the sharepoint2010.microsoft.com site for the Videos section.

 

Here is the JavaScript code to use this media player :

<script type="text/javascript" src="/_layouts/mediaplayer.js"></script>
<script type="text/javascript">
        _spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');
        mediaPlayer.attachToMediaLinks
                (
                        (document.getElementById('<<DIV ID HERE>>')),
                        ['wmv', 'avi', 'mp3']
                );
</script>

Firstly we need to include the ‘mediaplayer.js’ file which essentially has all the API’s to work with the Silverlight media player and also does the integration with the HTML elements on the page.


Now in the background the media player script creates a transparent div on the page and than calls the ‘MediaPlayer.xap’ file which is under ‘14”hive/TEMPLATE/LAYOUTS/ClientBin’ to render the videos.To create this transparent div we need to call the ‘createOverlayPlayer’ method first. Since this function needs to called on the body’s onload event we have to add it to the _spBodyOnLoadFunctionNames array.


Now to integrate this with the HTML elements the mediaplayer library provides a function ‘attachToMediaLinks’ which essentially finds all the anchor tags within the given div and adds an onclick event handler for them which renders the above mention transparent div, which in-turn renders the silverlight media player.

Dialog Platform in SharePoint 2010 & How to open the Edit Form Dialog for List Item

Dialog Platform in SharePoint 2010:

One of the New User Interface Platforms in SharePoint 2010 is ‘The Dialog Platform’
A dialog is essentially a <div> which gets visible on demand and renders the HTML using a background overlay creating a modal dialog like user experience.

We can show an existing div from within the page or a different page using a URL inside the dialogs.
When we pass the URL to the dialog it looks for the Querystring parameter “IsDlg=1”. If this parameters exists than it would dynamically load the "/_layouts/styles/dlgframe.css” file. This file overrides the “s4-notdlg” class items as “display:none”, which means that all items with this class would not get displayed in Dialog Mode. 
So if we go to the v4.master page we can see that this class is used by the Ribbon control to hide the ribbon when in dialog mode:

 

How to open the Edit Form Dialog for List Item:

In SharePoint 2010 The URL for opening the Edit Form of any list item looks like something like this :

”http://intranet.contoso.com/<SiteName>/Lists/<ListName>/EditForm.aspx?ID=1&IsDlg=1”

ID is the list item row identifier and as discussed above the IsDlg is for the dialog mode.

Now to open a dialog we need to use the SP.UI.ModalDialog.showModalDialog method from the ECMAScript Client Object model and pass in the url of the page, width & height of the dialog and also a callback function in case we want some code to run after the dialog is closed.

<script type="text/javascript">
         //Handle the DialogCallback callback 
              function DialogCallback(dialogResult, returnValue){ 
              } 
  
          //Open the Dialog 
          function OpenEditDialog(id){ 
           var options = { 
url:&quot;http://intranet.contoso.com/<SiteName>/Lists/<ListName>/EditForm.aspx?ID=&quot; + id + &quot;&amp;IsDlg=1&quot;, 
             width: 700, 
             height: 700, 
             dialogReturnValueCallback: DialogCallback 
             }; 
            SP.UI.ModalDialog.showModalDialog(options); 
          }
</script>

The .js files for the ECMAScript Object Model (SP.js, SP.Core.js, SP.Ribbon.js, and SP.Runtime.js ) are installed in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS directory.


Here is a good MSDN link explaining the Client Object Model Distribution and Deployment options available in SharePoint 2010.