Picasa DataProvider for Slide.Show 2 Quick Start Guide
Release 1.0
July 2009
Contents
Introduction 1
Your first slideshow with Slide.Show 2 using Picasa DataProvider 1
Step 1: Embed the control 2
Step 2: Configure the control 3
Step 3: Provide data to the control 3
Slide.Show 1 migration 6
Where to go from here? 7

Introduction
Picasa DataProvider for Vertigo Slide.Show 2 is an open source extension to the original Slide.Show 2 by Vertigo. (Based on build 25970 dated 14-Jul-2009).
Slide.Show 2 is an open source Silverlight 2 control for publishing highly-customizable photo and video slideshows on the Web.
This guide has one purpose – to help you build your first slideshow with Slide.Show 2 using Picasa DataProvider as quickly as possible. It assumes that your scenario is typical – you have nice collections of photos in your Picasa albums that you’d like to display in slide show.
Your first slideshow with Slide.Show 2 using Picasa DataProvider
The typical scenario involves the following steps:
Step 1. Determine the Web page to host your slideshow
Step 2. Define the configuration for the desired behavior and options for the control
Step 3. Define the data with the album and slide data for the control

Step 1: Embed the control
At a minimum, a Web page hosting the Slide.Show 2 control requires the following:
• An object tag for displaying the control
• A parameter specifying the style, behavior, and data for the control
• A parameter referencing the Vertigo.SlideShow.xap file
Tip: To keep things organized, create a new folder in your site to contain the page and other files required by your slideshow, including the Slide.Show 2 XAP file, configuration and data files, images, and videos.
First, create a new page in your site with the following content:
<html>
<head>
<title>Slide.Show 2 Quick Start Example</title>
</head>
<body>
<object type="application/x-silverlight-2" data="data:application/x-silverlight-2,"
width="640" height="480">
<param name="background" value="black" />
<param name="source" value="Vertigo.SlideShow.xap" />
<param name="initParams" value="" />
</object>
<object
id="SLControl"
type="application/x-silverlight-2"
data="data:application/x-silverlight-2,"
width="640"
height="480">
<param name="background" value="#fff" />
<param name="source"
value="Vertigo.SlideShow.xap" />
<param name="enableHtmlAccess" value="true" />
<param name="initParams" value="" />
<param name="initParams"
value="ConfigurationProvider=LightTheme,DataProvider=PicasaDataProvider;PicasaId=pb.blog.dummy" />
</object>
</body>
</html>

We have set up an <object> tag for displaying silverlight control with following attributes and parameter values:
• width : 640
• height : 480
• id : SLControl (This is must, the id of Object tag must only be ‘SLControl’ as it is accessed by SL app.)
• Parameters: (<param>)
o Background : black
o Source : Specify the location of .xap file for slide show over here. (i.e. location of Vertigo.SlideShow.xap file.)
o EnableHtmlAccess : true (enableHtmlAccess param value must be set to true. This is must)
<param name="enableHtmlAccess" value="true" />
o initParams : Please refer to step 2 “Configer the control” for setting up values for InitPrams.

Figure 1. An empty slideshow

Note: The object tag will embed the Slide.Show 2 control in the HTML document at the exact location of the object tag (e.g. within table cells, div tags, etc.). This is important to note when integrating the control with complex page layouts.
Step 2: Configure the control
To give substance to your empty slideshow, you’ll need to configure it. In this scenario, we will be applying the configuration using one of the out-of-the-box themes provided by Slide.Show 2. A theme is a set of configuration values that achieve an overall look and feel. The available themes are: SimpleTheme, LightTheme, and DarkTheme.
Modify the initParams of the object tag as follows:
General format for setting up initParams will be
<param name="initParams" value="ConfigurationProvider={0},DataProvider={1}"
Where {0} is the value of configuration provider & {1} is the value for DataProvider.
Following are some of the possible values for configuration provider:
ConfigurationProvider= SimpleTheme
ConfigurationProvider= LightTheme
ConfigurationProvider= DarkTheme
ConfigurationProvider= XmlConfigurationProvider;Path=Configuration.xml
Note: Slide.Show 2 can be configured via theme or an XML file . The latter allows detailed configuration of your slideshow.
Step 3: Provide data to the control
In the previous step, we configured the look and feel of the Slide.Show 2 control. In this final step, we’ll provide data source information for Picasa DataProvider.
For this, modify the value of the DataProvider part initParams of the object tag as follows:
<param name="initParams" value="ConfigurationProvider=LightTheme,DataProvider= PicasaDataProvider; PicasaId=xxxxx"/>
To fetch pictures from your Picasa albums, your data provider for vertigo slide show should point to ‘PicasaDataPorvider’ and in PicasaId attribute please provide your valid PicasaID. This will fetch all public albums from your picasa account.
Alternatively if you want to fetch pictures from particular albums only then you can use following format:
<param name="initParams" value="ConfigurationProvider=LightTheme,DataProvider= PicasaDataProvider; PicasaId=xxxxx;Albums=Album 01Album 07Album 04"/>
To fetch particular albums only, provide Albums attribute with ^^ separated list of albums you want.
Tip: Alternatively, Slide.Show 2 can be configured to use a different data provider, such as the FlickrDataProvider, which uses the Flickr API to retrieve photo data for a given Flickr user.

Figure 2. The finished slideshow

Tip: The data file may reference local or remote images and videos using
Where to go from here?
Now that you’re familiar with the basic steps and tips listed above, please refer to the additional documentation available in the source code or the Slide.Show 2 Configuration Guide for detailed information about extending Slide.Show 2 to meet your unique needs.









Last edited Jul 20, 2009 at 2:53 PM by pinalbhatt, version 2

Comments

No comments yet.