Foreword

I wrote this article back in 2010. This was my first programming article written in English. Actually it was more a need then a pleasure at the time as I was searching for my first employment here in The Netherlands and one of the companies that at whom I applied, requested a test that at the end with just a bit of extra effort I transformed in this article. As I suppose lately my English got better re-reading my own words make me wish to rewrite many of them, however it will be silly and great waste of time, so I will leave all the text just as it is in it’s original. In order to make it easier to read I will also split the article in n parts.

Let’s keep the conversation going! If any, just comment and will do my best to provide an answer to your doubts.

Download source code – 145 KB

Table of contents

A Simple ASP.NET Flickr Application – Part 1

1. Introduction
2. Getting started
3. The web.config

A Simple ASP.NET Flickr Application – Part 2

1. Constructing the page
2. The make up
3. The result
4. Notes

Introduction

First of all, I want to thank Sam Judson who created a very useful project and that he shared it to us all. Without his effort, this article will be much longer and tedious. So thanks to him and other people who collaborated on that project. All project details and downloads can be found at this address: http://flickrnet.codeplex.com/.

I also used a light-weight, customizable lightbox plug-in for jQuery 1.3 and 1.4, called ColorBox, for adding a nice effect on the image preview. ColorBox is written by Jack Moore, and thanks to him too; you can find more details here: http://colorpowered.com/colorbox/. The version I’m using is 1.3.3, but you can update your projects with latest versions if you wish. More details about the version history can be obtained here: http://colorpowered.com/colorbox/core/README.

Another essential thing in order to use a Flickr API is creating your own API key and your secret key. If you already have a Yahoo! account, it will be quite simple; otherwise, you should create one. In both cases, you can start from here: http://www.flickr.com/services/api/keys/. For more details about the Flick API, visit http://www.flickr.com/services/api/.

Note that the API key and secret key used in the sample application are fake, they will not work. You’ll get an error message when executing the application. So you should change them, in the web.config, with data you got from Flicker! (Haven’t you created your own key? Bad bad, go to http://www.flickr.com/services/api/keys/ .)

Getting started

Start by creating an empty ASP.NET Web Site. I used Visual Studio 2010 Ultimate, but the same can be accomplished with Visual Studio Express as it can be done with previous versions of Visual studio such as 2008 or 2005.

Using the code

Let’s write some code. Add to your project an ASP.NET folder App_Code and create a new class and call it FlickrBLL. This is the code to be added:

using System;
using System.ComponentModel;
using System.Configuration;
using FlickrNet;

namespace Infrastructure.BLL
{
    ///<summary> 
    /// Helper class for confortable pagining and binding
    /// </summary>
    [DataObject(true)]
    public class FlickrBLL
    {
        [DataObjectMethodAttribute(DataObjectMethodType.Select, true)]
        public static PhotosetPhotoCollection GetPagedSet(string setId,
                      int maximumRows, int startRowIndex)
        {
            Flickr flickr = new Flickr(ConfigurationManager.AppSettings["apiKey"],
                ConfigurationManager.AppSettings["shardSecret"]);
            PhotosetPhotoCollection photos = flickr.PhotosetsGetPhotos(setId, GetPageIndex(
                startRowIndex, maximumRows) + 1, maximumRows);

            return photos;
        }

        public static int GetPagedSetCount(string setId)
        {
            Flickr flickr = new Flickr(ConfigurationManager.AppSettings["apiKey"],
                ConfigurationManager.AppSettings["shardSecret"]);
            Photoset set = flickr.PhotosetsGetInfo(setId);
            return set.NumberOfPhotos;
        }

        [DataObjectMethodAttribute(DataObjectMethodType.Select, false)]
        public static PhotosetCollection GetPhotoSetsByUser(string userId)
        {
            Flickr flickr = new Flickr(ConfigurationManager.AppSettings["apiKey"],
                ConfigurationManager.AppSettings["shardSecret"]);

            return flickr.PhotosetsGetList(userId);
        }

        protected static int GetPageIndex(int startRowIndex, int maximumRows)
        {
            if (maximumRows                 return 0;
            else
                return (int)Math.Floor((double)startRowIndex / (double)maximumRows);
        }
    }
}

Let’s analyze some of these methods.

The Fickr.Net library method PhotosetsGetPhotos expects the page index, and not the index of the first record to retrieve, so I created the GetPageIndex helper method for the conversion.

The method GetPhotoSetsByUser returns the result of PhotosetsGetList. Note that this function doesn’t expect as parameter the Flickr user name, but the user id. You can retrieve this data using other methods integrated into the Flicker.Net API or using websites such as http://www.xflickr.com/fusr/.

Don’t get scared by the GetPagedSet method attribute. Components such as the ObjectDataSource control and the ObjectDataSourceDesigner class examine the values of this attribute, if present, to help determine which data method to call at run time. It isn’t necessary, but it simplifies the work. The same attribute is used to indicate that this class is a data object ([DataObject(true)]). I decides to make use of pagination in this example, and it was easy because the API already provides this functionality. The method simply calls the PhotosetsGetPhotos available in the Flicker.Net library, and uses the opportune overload.

The Count method needed for paging uses GetPagedSetCount, which gets the requested set’s info and returns the number of items in the set.

The web.config

In order to acquire authentication data and other parameters that may vary, we need to create an appSettings section in our web.config.

<appSettings>
  <add key="apiKey" value="6370a3f6c4f1c031afd636247a648385"/>
  <add key="shardSecret" value="42cf8c1g85e6d3b2"/>
  <add key="defaultUser" value="10734446@N06"/>
  <add key="defaultPageSize" value="44"/>
</appSettings>

apiKey and sharedSecret are dummy values. You need to register and replace them to obtain a full functionality, but you can still use the default user and the default page size. If you are using a different layout, you can change the number of photos shown on each page, by simply varying this value.

continue…

Download source code – 145 KB