Geeks With Blogs
Asif Maniar Software Engineer

 

 

Flickr is a popular photo-sharing website.  It’s primarily used by people to store, organize and share their photos. Flickr allows both public and private photos and the ability of people being able to comment on them.

Like many other social websites Flickr has a public API that can be used to get access to their data via low level web service calls. We shall use an open source Flickr API library called FlickrNet to take care of the low level web service calls for us.

In this post we shall be using the FlickrAPI to build a simple Silverlight based application. The completed application will display 10 random public photos for any Flickr username/email with the ability to view a larger photo along with any comments.


The Flickr API provides a means for application developers to interface with Flickr assets - photos, users, comments, blogs, groups, and so forth. In order to use the Flickr API you must have an API key, which you can get for free from the Flickr API Keys page at http://www.flickr.com/services/api/keys.

After downloading the FlickrNet.dll we create a web application and a silverlight application. We add the FlickrNet.dll as a reference into the web app and add a Silverlight enabled - WCF service for transmitting data to the Silverlight application.

Next we add flickrNet config section to our web application and populate it with our API key.

Note: You might want to disable caching by adding disableCache="true" to the config section if you get permission exceptions in production.

 

      <configSections>
            …
            <section name="flickrNet" type="FlickrNet.FlickrConfigurationManager,FlickrNet"/>
      </configSections>
      <flickrNet apiKey="YOUR API KEY"/>


We also add a FlickrPhoto and FlickrComment classes to represent a Flickr photo and comment respectively.

The Solution looks like this:

 

Next we implement a method in the WCF Service that returns the top 10 random pics for a given user name.
For this you can use the PeopleFindByUsername method to find the user and then create a PhotoSearchOptions object and set the PerPage property to 200 so we get the first 200 photos for the user.

We order the returned list randomly and then select the top 10 photos with the help of some linq.

FoundUser userInfo = flickr.PeopleFindByUsername(username);               
flickrUserId = userInfo.UserId;PhotoSearchOptions options = new PhotoSearchOptions();
options.UserId = flickrUserId;     
options.PerPage = 200;
//get 10 pics randomly
Photos searchResults = flickr.PhotosSearch(options);
pics = (from p in searchResults.PhotoCollection.OrderBy(p=>Guid.NewGuid())
                        select new FlickrPhoto
                        {
                           PhotoId = p.PhotoId,
                           Title = p.Title,
                           MediumUrl = p.MediumUrl,
                           WebUrl = p.WebUrl,
                           LargeUrl = p.LargeUrl,
                           ThumbnailUrl = p.ThumbnailUrl,
                           SmallUrl = p.SmallUrl}).Take(10).ToList();

Next we will add a ServiceReference to this service from our Silverlight project called FlickrServiceReference. Now we have a client side proxy called FlickrServiceReference which we can use to talk to our web service.

In the silverlight application you can then accept a Flickr username/email from the user and call the Web services GetRandomPhotos method and bind the results to an ItemsControl as shown in the following code snippet.

FlickrServiceReference.FlickrServiceClient service = new SilverlightApplication.FlickrServiceReference.FlickrServiceClient();
            service.GetRandomPicsCompleted += new EventHandler<SilverlightApplication.FlickrServiceReference.GetRandomPicsCompletedEventArgs>(service_GetRandomPicsCompleted);
            service.GetRandomPicsAsync(“FlickrUsername”);


Using a DataTemplate for the ItemsControl to show the Thumbnails inside a ScrollViewer so we can scroll the photos. We use data binding to bind the image source to the ThumbnailUrl property.

Here is a snippet of the scroll viewer that wraps the thumbnails

 

<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" Name="ScrollViewer" Visibility="Collapsed">
            <ItemsControl x:Name="icPhotos" HorizontalAlignment="Left" VerticalAlignment="Top"
                          BorderBrush="#FFB83636" BorderThickness="1,1,1,1" RenderTransformOrigin="0.5,0.5" >
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="content" Orientation="Vertical" Cursor="Hand" MouseEnter="RightStackPanel_MouseEnter" MouseLeave="RightStackPanel_MouseLeave">
                            <StackPanel.Resources>
                                <Storyboard x:Name="grow" BeginTime="0">
                                    <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleX" To="1.1" Duration="0:0:.2"/>
                                    <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleY" To="1.1" Duration="0:0:.2"/>
                                </Storyboard>
                                <Storyboard x:Name="shrink" BeginTime="0">
                                    <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleX" To="1" Duration="0:0:.2"/>
                                    <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleY" To="1" Duration="0:0:.2"/>
                                </Storyboard>
                            </StackPanel.Resources>
                            <StackPanel.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform x:Name="st" ScaleX="1" ScaleY="1"/>
                                </TransformGroup>
                            </StackPanel.RenderTransform>
                            <Image Source="{Binding Path=ThumbnailUrl}" MaxWidth="100" MaxHeight="100" Margin="10" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>


You will notice we have added two animations called grow and shrink that will fire on MouseEnter and MouseLeave on the stackpanel. As a result the images zoom by 10% every time the cursor is hovered over them.

Next we add some more markup to display a large image along with any comments when a thumbnail is clicked.

OnMouseLeftButtonDown event of the thumbnail is wired to call the GetComments method on the web service and bind the returned Comments to a ItemSource property of the DataGrid. The larger image is bound to the images mediumUrl.

The GetComments Method returns a List of FlickrComments for the Photo ID.

    public List<FlickrComment> GetComments(string pid)
        {
            Flickr flickr = new Flickr();
            string flickrUserId = string.Empty;
            List<FlickrComment> comments = new List<FlickrComment>();
            try
            {
                Comment[] commentResults = flickr.PhotosCommentsGetList(pid);
                comments = (from c in commentResults
                                         select new FlickrComment
                                         {
                                           CommentHtml = c.CommentHtml,
                                           DateCreated = c.DateCreated,
                                           PhotoId = c.PhotoId,
                                           AuthorUserName = c.AuthorUserName,
                                           CommentId = c.CommentId
                                                }).ToList();
 
            }
            catch (FlickrApiException)
            {
                // report error
            }
            return comments;
        }

 
Check the live demo here.

Download Source code here:

Resources:
http://www.flickr.com/services/api/keys/
http://flickrnet.codeplex.com/
http://www.4guysfromrolla.com/articles/091609-1.aspx
http://www.asifmaniar.com/samples/Flickr-Silverlight-WCF.aspx

Posted on Wednesday, September 30, 2009 4:08 PM ASP.NET , Silverlight , mashup , wcf , Flickr | Back to top


Comments on this post: Building a Silverlight Flickr Application using Windows Communication Foundation

# re: Building a Silverlight Flickr Application using Windows Communication Foundation
Requesting Gravatar...
great application.
but i have a problem. it's not work on my computer.
can you help me ?
Left by olivier on Jan 18, 2010 4:18 AM

comments powered by Disqus

Copyright © Asif Maniar | Powered by: GeeksWithBlogs.net