添加一个Silverlight到SharePoint里面

背景:
       老板要我做一个video library using silverlight and intergrate it into sharepoint.

分析:
      说实话, 我之前还真没有接触过silverlight, 不过老板给了我一点时间来学习了, 于是琢磨这先把一个普通的silverlight集成到sharepoint去.

实现:
     1. 新建一个Web Part类型的Document Library. 
     2. 在Document Library 里面新建一个script的文件夹.
     3. 把下面的文件copy到script文件夹中, 以下的文件是关于silverlight项目的文件,从codeplex里面找的. 虽然现在没看明白, 等学上一段时间应该就没有问题了.
       

Createsilverlight.js

Main.js

Silverlight.js

Scene.xaml

Photoitem.xaml  
    4. 在Document Library 里面新建一个web part page.
    5. 用SharePoint Designer 打开那个page.
    6. 插入一个 picture Library  





    7.  点击Edit Columns, 保留Name, 然后修改Change Layout




   8.  切换到代码视图, 找到<xsl:call-template name="dvt_1"/>,之前插入代码:

<xsl:text disable-output-escaping="yes"><![CDATA[<script type="text/javascript" src="script/CreateSilverlight.js"></script> 
    <script type="text/javascript" src="script/Silverlight.js"></script> 
    <script type="text/javascript" src="script/Main.js"></script> 
    <div id="SilverlightControlHost">Loading<script type="text/javascript"> 
        var localScene=new BinaryJamSFSPart.Scene('SilverlightControlHost', 'script'); 
        createSilverlight('SilverlightControlHost', 'script/Scene.xaml', 'SilverlightControl','640','520', localScene); 
    </script>]]></xsl:text>

   9. 替换dvt_1 template

<xsl:template name="dvt_1"> 
            <xsl:variable name="dvt_StyleName">PlnTitl</xsl:variable> 
            <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" /> 
            <xsl:text disable-output-escaping="yes"><![CDATA[<script type="text/javascript"> 
            ]]></xsl:text> 
            <xsl:call-template name="dvt_1.body"> 
                <xsl:with-param name="Rows" select="$Rows" /> 
            </xsl:call-template> 
            <xsl:text disable-output-escaping="yes"><![CDATA[</script></div>]]></xsl:text> 
        </xsl:template>

  10. 替换<xsl:template name="dvt_1.rowview"> </xsl:template>里面的内容:

localScene.PhotoItemsUrls['<xsl:value-of select="position()-1"/>'] =  new BinaryJamSFSPartPhotoUrls('http://moss/<xsl:value-of select="@FileRef"/>','http://moss/<xsl:value-of select="@FileRef"/>'); 

最后的效果:



Silverlight文件

后记：用silverlight做出来的效果真的很漂亮。看来我要抽点时间学学silverlight

Silverlight项目的URL: http://www.codeplex.com/bjsspv
另请参考文章: http://www.wssdemo.com/Pages/silverlight.aspx