1/10/2009

SilverLight SlideShow in an Easy to Deploy WebPart

Update: The SlideShow is now Open Source, visit http://sharepointslideshow.codeplex.com to submit bugs, issues, requests and thoughts.

I have set up a demonstration of the SilverLight Slideshow created by FirstFloor Software on this page, I also created two blog posts which gave instructions on how to repeat the process found here and here. I have now created the Silverlight SlideShow in a web part including the required Javascript files, so to get started, all you need to do is install, activate, and specify the name of the picture library from where you want to get your images.

Download It from CodePlex: http://sharepointslideshow.codeplex.com/releases/view/38087

Posted at 1:08 by Isaac Stith | Category: Microsoft SharePoint; Silverlight | Permalink | Email this Post | Comments (62)

1/4/2009

Using Silverlight SlideShow and a SharePoint Picture Library(Part2)

We started off in Part 1 http://www.sharepointevolved.com/blog/Lists/Posts/Post.aspx?ID=27 , getting the page ready for the transformation. We have a view that is essentially a list view of the pictures in the Pictures Library.

Now we need to modify the CAML to get the data to Silverlight.

Inserting the Code

In the source view of the webpart, find the section that looks like the following code segment:

<xsl:template match="/">

<xsl:call-template name="dvt_1"/>

</xsl:template>

You'll want to replace it with the following code:

<xsl:template match="/">

<xsl:text disable-output-escaping="yes">

<![CDATA[<script type="text/javascript" src="/scripts/Silverlight.js"></script>

]]>

</xsl:text>

</div>

<xsl:call-template name="dvt_1"/>

</xsl:template>

You'll notice that this is where we specify where the JavaScript files are located, so if you've uploaded them to a different location, you'll need to specify that location here in all five tags.

The Next step is to find the next code block:

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">Table</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</xsl:if>

<th class="ms-vh" nowrap="nowrap">Content Type</th>

<th class="ms-vh" nowrap="nowrap">Created</th>

<th class="ms-vh" nowrap="nowrap">Created By</th>

<th class="ms-vh" nowrap="nowrap">Modified</th>

</tr>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</table>

</xsl:template>

You'll want to replace the code block with the following code:

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">Table</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:text disable-output-escaping="yes"><script id="slides" type="text/xml"></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"></script></xsl:text>

</xsl:template>

This part of the code basically specifies the <script> tag for consumption by the SilverLight application. The next code block you need to look for is:

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

<xsl:call-template name="dvt_1.rowview"/>

</xsl:for-each>

</xsl:template>

Which You'll need to replace with this one:

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:text disable-output-escaping="yes"><slides baseUrl=""></xsl:text>

<xsl:for-each select="$Rows">

<xsl:call-template name="dvt_1.rowview"/>

</xsl:for-each>

<xsl:text disable-output-escaping="yes"></slides></xsl:text>

</xsl:template>

This code specifies the <slides> tag for consumption. You'll need to change the next code block to get the final part of the transformation. The codeblock will be a large chunk of HTML, which looks like this:

<xsl:template name="dvt_1.rowview">

<tr>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="class">ms-alternating</xsl:attribute>

</xsl:if>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</td>

</xsl:if>

<xsl:value-of select="format-number(@ID, '#,##0.#;-#,##0.#')"/>

</td>

<xsl:value-of select="@ContentType"/>

</td>

<xsl:value-of select="ddwrt:FormatDate(string(@Created), 1033, 5)"/>

</td>

<xsl:value-of select="@Author" disable-output-escaping="yes"/>

</td>

<xsl:value-of select="ddwrt:FormatDate(string(@Modified), 1033, 5)"/>

</td>

</tr>

</xsl:template>

This large block of code will need to be replaced with =: You'll nee do replace /Pictures/_t/ with the relative path to your Picture Library

<xsl:template name="dvt_1.rowview">

<xsl:text disable-output-escaping="yes"><slide imageUrl="</xsl:text>

<xsl:value-of select="@FileRef"/>

<xsl:text disable-output-escaping="yes">" thumbnailUrl="/Pictures/_t/</xsl:text>

<xsl:value-of select="substring-before(@LinkFilenameNoMenu,'.')" />

<xsl:text>_</xsl:text>

<xsl:value-of select="substring-after(@LinkFilenameNoMenu,'.')" />

<xsl:text disable-output-escaping="yes">.jpg" caption="</xsl:text>

<xsl:value-of select="@Title"></xsl:value-of>

<xsl:text disable-output-escaping="yes">"/></xsl:text>

</xsl:template>

Once this is replaced, you've completed the necessary transformations required for the Picture Library to function as a data source for the SilverLight SlideShow. It will not show in the browser if you go your page, but if you view the source you'll see a scripts tag that looks similar to this, but obviously with your values:

</slides>

</script>

This big step has now been completed, and now we need to go back and modify one of the Javascript files to specify where the Scene.xml file is located. Back in SharePoint Designer, open up the file "SlideShowCreate.js". If you go to line 21, you'll see the following bit of code:

source: 'Scene.xml',

You need to specify the relative path to the Scene.xml file on your server. If you've uploaded it to the scripts directory under the root site it would be '/scripts/Scene.xml'. So insert the relative path here between the quotes for the script to work. For our purposes I am using

source: '/Scene.xml',

Since my file is located at the root level.

Customizing the SlideShow

Go back to the location where you originally extracted the zip file. Open up the default.html file in internet explorer, and acknowledge any security warnings that may come up. Allow Internet Explorer to run any blocked content, and start customizing away. You should see an interface like this:

Start with the basic options for now, and you can go back and customize the slideshow later once you have this up and running. If you select the customize button, the text box will be populated with javascript containing your options.

The final step is to go back to the source view of the SlideShow WebPage and find the following code block:

Directly after this code block, you'll want to paste in the following code:

</script>

And in between the two Script tags you'll want to paste the code given to you by the SlideShow customizer. So you will end up with the following code in your Source view.

<xsl:template match="/">

<xsl:text disable-output-escaping="yes">

<![CDATA[<script type="text/javascript" src="/scripts/Silverlight.js"></script>

createSlideshow('slideshow', {

width: '360',

height: '360',

slidesSource: '#slides',

background: '#202020',

buttonBackground: 'Black',

buttonForeground: 'White',

buttonBorderColor: 'White',

buttonPlayForeground: 'LightGreen',

captionBackground: 'Black',

captionForeground: 'White',

captionFontFamily: 'Verdana',

captionFontSize: 11,

captionFontStyle: 'Normal',

captionFontWeight: 'Normal',

captionOpacity: .7,

contentBackground: 'Black',

selectedThumbnailBorderColor: 'Yellow',

trackerForeground: 'Silver',

trackerFontFamily: 'Verdana',

trackerFontSize: 11,

trackerFontStyle: 'Normal',

trackerFontWeight: 'Normal',

borderRadius: 8,

padding: 8,

captionVisible: true,

thumbnailsVisible: true,

trackerVisible: true,

buttonOptions: BUTTON_PLAYPAUSE | BUTTON_PREVNEXT | BUTTON_PREVNEXTPAGE | BUTTON_FULLSCREEN | BUTTON_SAVE,

autoPlay: true,

slideSettings: {

speedRatio: 1,

theme: THEME_NONE

}});

</script>

]]>

</xsl:text>

</div>

<xsl:call-template name="dvt_1"/>

</xsl:template>

You've done it! Save and Preview Your Work!

At this point, you should have a functioning SlideShow on your page! Or you can view the example I've created here:

http://www.sharepointevolved.com/Pages/Slideshow.aspx

-Isaac Stith
http://www.sharepointevolved.com

Posted at 18:48 by Isaac Stith | Category: Microsoft SharePoint; Silverlight | Permalink | Email this Post | Comments (30)

Using Silverlight SlideShow and a SharePoint Picture Library(Part1)

The goal of this post is to explain how to get the SilverLight SlideShow working with your Picture Library as a data source for the slideshow. The end result should look something like this:

Getting Started

To get this project going, you'll need to download the source files from the codeplex website. You'll find the source files for this project here: http://www.codeplex.com/silverlightslideshow/Release/ProjectReleases.aspx?ReleaseId=9559 Please make sure you download the Version 1.0 files as opposed to the 2.0 Preview. Once you've downloaded the files and extracted, you should see a folder structure similar to the figure below.

The five JavaScript files in the folder are the powerhouse behind the Silverlight magic. The Scene.xml provides the base for the SilverLight application and the SlideShow. The Default.html is a page that allows you to customize the SlideShows look and feel, and then outputs JavaScript for you to create the SlideShow application.

The first thing we're going to do is upload these files to either a subdirectory on the site, or a document library. For this example, I am going to use SharePoint Designer to upload the files to a scripts directory on my webserver. If it does not exist already, create the scripts folder by right clicking on the websites root element and selecting New -> Folder and naming it scripts. Once the folder is created, it is simple as drag and drop into the folder from the Slideshow folder locally.

You can see the scripts have been successfully loaded onto the SharePoint site in the Scripts folder. You can also see that I've uploaded the Scene.xml file to the root directory of the web site. You'll need to remember this for later, though I'll reference it when it becomes necessary. Now that we have all the files on the web server, its time to start modifying the page on which the SlideShow is going to be presented.

Modifying the Web Part

So we have the files on the server, now we need to create a page if we're not modifying an existing page to display the SlideShow. What I've done is create a demo page in a Web Page Library called SlideShowDemo.aspx. Now that this page is created, I'll open it in designer so I can start making the changes necessary to function as a data source for the SilverLight SlideShow.

As you can see I have an empty page waiting to be modified. From here I go to the Data Source Library and select SharePoint Libraries. Listed below is the Pictures Library. Click on Pictures under SharePoint Libraries and select "Show Data". You should see a view on the Data Source Details Tab that is similar to below. What is interesting on the tab is the Insert Selected Fields as button. Its here that you'll want to click and select Multiple Item Form.

From here you should see a very basic list of the files that are located in the Pictures Document Library. See Below.

Here is where it gets tricky. We're going to go behind the scenes and modify the CAML to output the data from SharePoint in a format required as a data source for the SlideShow.


<slides baseUrl="Images/">

</slides>

We'll get started on Part2 Tomorrow and I'll show you the modifications you need to do to the CAML to get the transformation correct.

See Part Two of this article here: http://www.sharepointevolved.com/blog/Lists/Posts/Post.aspx?ID=28

Posted at 3:18 by Isaac Stith | Category: Silverlight; Microsoft SharePoint | Permalink | Email this Post | Comments (7)

9/7/2008

Charts for SharePoint using VisiFire and Silverlight

Ian at www.wssdemo.com has a great demo getting the VisiFire libraries to work with SharePoint and Silverlight

http://www.wssdemo.com/Pages/graph.aspx

Posted at 21:00 by Isaac Stith | Category: Microsoft SharePoint; Silverlight | Permalink | Email this Post | Comments (0)

9/5/2008

Using Virtual Earth on SharePoint without Server Side Coding

Ian over at www.wssdemo.com has a good set of guidelines to get Virtual Earth set up using the Dataview Web Part and the Virtual Earth API.

Find more information here: http://www.wssdemo.com/Blog/archive/2008/09/05/sharepoint-virtual-earth-web-part-without-deploying-any-server-code.aspx

Posted at 21:00 by Isaac Stith | Category: Microsoft SharePoint; Silverlight | Permalink | Email this Post | Comments (0)

Blog

Blog

1/10/2009

1/4/2009

Inserting the Code

Customizing the SlideShow

You've done it! Save and Preview Your Work!

The goal of this post is to explain how to get the SilverLight SlideShow working with your Picture Library as a data source for the slideshow. The end result should look something like this:

Related Links

Getting Started

Modifying the Web Part

See Part Two of this article here: http://www.sharepointevolved.com/blog/Lists/Posts/Post.aspx?ID=28

9/7/2008

9/5/2008