The migration is a working process and i hope it will finished in a couple of days. This blog

will stay open for some time but no new post will posted here.

Looking forward to see all my subscribers on my new blog.

-Thomas

So one of the first task was to build som simpel functionality tha could resolve their url delivered from the underlying CMS.Instead of register specific routes for the different pagetypes in the CMS

I came up with this solution shown in this blogpost.

To begin with I registered a new "CMS route in global.asax". All URL shoul hit this route, ofcourse you could make other routes before this.

 //RouteMap for CMS content
 routes.MapRoute("CMSRoute", "{*url*}").RouteHandler = new CmsRouteHandler();

Now to the simple CmsRouteHandler implementation it simply calls the CmsHttpHandler a relying on the handler to find a correct controller to desplaying the current request.

  
public class CmsRouteHandler : IRouteHandler
{
    public IHttpHandler GetHttpHandler(RequestContext requestContext)
    {
      return new CmsHttpHandler(requestContext);
    }
}

Now the CMSHttpHandle which for this blogpost is simplyfied to always returning the

frontpage. This should offcourse by matching the url to a page i DB and displaying the

and resolve it to the correct controller

public class CmsHttpHandler : IHttpHandler
    {
        private RequestContext RequestContext { get; set; }
        private IControllerFactory ControllerFactory { get; set; }
        private IController Controller { get; set; }

        public CmsHttpHandler(RequestContext requestContext)
        {
            RequestContext = requestContext;
        }

        public void ProcessRequest(HttpContext context)
        {
            HttpContext = context;
            InstantiateControllerFactory();
            InstantiateController();
            SetupRequestContext();
            Controller.Execute(RequestContext);
        }

        private HttpContext HttpContext { get; set; }

        private void InstantiateControllerFactory()
        {
            ControllerFactory = ControllerBuilder.Current.GetControllerFactory(); 
        }

        private void InstantiateController()
        {
            Controller = ControllerFactory.CreateController(RequestContext, Pagetype);
        }

        private void SetupRequestContext()
        {
            RequestContext.RouteData.Values.Add("controller", Pagetype);
            //Always render Index action, all pagetype controllers must implement Index action
            RequestContext.RouteData.Values.Add("action", "Index");

            AppendQueryStrings();
        }

        private void AppendQueryStrings()
        {
            foreach (string name in HttpContext.Request.QueryString)
                RequestContext.RouteData.Values.Add(name, HttpContext.Request.QueryString[name]);
        }

        private static string ResolvePagetypeFromUrl()
        {
           
            
            //Should return apgetype from db/URL
            return Pagetype
        
             
        }

        private string _pageType;
        private string Pagetype
        {
            get
            {
                  //Resolve pagetype from DB fx
                  //For now we will just return the frontpage
                  /return string should match controller name
                  return "frontpage";
            }
        }

        public bool IsReusable
        {
            get
            {
                throw new NotImplementedException();
            }
        }
    }

Hope you find it usefull..

We all know that code degrades as time goes by, and that the more "quick fixes - Hey it works don't change it" where used during implementation the faster the code degrades, and oh yes even the best code will degrade over time, but maybe not on a quite as steep slope.

We have all tried to write simple parts of a website, but even the simple parts may lead to complicated code. Let's take an simple example as a Menu or Breadcrumb path. Most websites have some sorts of navigation and likewise have breadcrumbs. So to start with the Customer have a simple website where the breadcrumb starts at the current item and works it's way up the content tree to the root of the site i.e. at the front page. It would be an fairly easy task to implement code that can build this sort of breadcrumb path. This could be done either in an simple xslt or maybe by implementing some sort of breadcrumb provider in c# class.We will traverse every ancestor until the following condition is meet. This could for example be done using a Sitecore query a look something like this.
Note only pseudo code will be used in this post.

ancestor-or-self::item[@tid = 'frontpage']

This will work great and is a simple and acceptable solution. So what is the problem ? After an year your customer returns with an wish that they want functionality restart the navigation "breadcrumb" for some node in content tree, this could be anywhere. So the root item ie the first link in the breadcrumbs path is no longer the front page but could potentially be any node.
The question now is, how do you determine where the root of the breadcrumbs path is? You can no longer settle for a simple test against the "frontpage"-template or could we ? A simple way would either be to make an new front page at the given point in the content tree, but it seems stupid that the customer will have to use a front page for this task and might be confusing as well. So okay no problem we will just make an new template, or choose a page type and add the template to the query condition and it might look something like this.

ancestor-or-self;;item[@tid = 'frontpage' or @tid = 'subfrontpage']

Great it works and was pretty simple too, but now we started on the slippery slope.The key point to notice here is that for this to work we had to make changes to the code.
What will happen the next time the customer returns with a wish to reset the navigation for the all ready existing document template or any template for that matter. And even more the document template should have a check box that enables the reset features. No problem we simply add the check box to the document template and extend the select query.

ancestor-or-self::item[@tid = 'frontpage' or @tid = 'subfrontpage' or (@tid = 'document' and resetmenuField = '1' )]

Wow it worked but now the query is becoming quite complex and keep in mind this is an simple example. And soon the customer will be back with a note that the shoppingItemTemplate needs to reset the breadcrumbs as well and with the same condition as the document template. As the years go bye the query is becoming more and more unreadable.

But how can we avoid this slippery slope ?
We could build a new template and let it inherit from the "frontpage"-template, new template will then have the same fields as the front page. This might lead to a more confused customer because a simple document template will have the same field as front page without using them.

So now we will have a look at an interface template. This could be a simple template with or without fields. The sole purpose of the this interface template, is to define "some functionality"
for another templates that inherits from it. Lets revisit our example with the breadcrumbs.
First we define this template without any fields lets call it _isMenuRoot. And let the frontpage template inherit from this. Now we can write the first query as this.

ancestor-or-self::item[ is derived from template _isMenuRoot]

The query will return the front page as the menu root just as we wanted. Perfect now the beauty of the simple template comes into play. Now the customer wants a simple sub front page that can reset the breadcrumbs. This should be a fairly easy task. Build your normal sub front page a let it inherit from the _isMenuRoot template now look at the query

ancestor-or-self::item[ is derived from template _isMenuRoot]

Wow it's the same and we didn't have to change anything in the code, great!
Now let's extend the template so it has a simple checkbox field that allows back end users to enable/disable the reset functionality. This is done simply by extending the _isMenuRoot Template with an checkbox field. Of course this demands for a simple change to the code, so we change the query accordingly so it reads.

item[ is derived from template _menuRoot and reset menu = 1]

Of course this will force back end users to actively enable/disable this feature for existing items. But this can be done fairly easy on templates that inherit from the interface template. For example, you might want the front page to always have this feature enabled, and as default disabled for a document page or alike. You can achieve this but setting the checkbox value in standard values for all the templates the inherits from our _isMenuRoot interface template. Thank you sitecore for standard values. So without changing any code, future templates can nowgain access to this Menu root functionality by inheriting from our _isMenuRoot template.

The above helped me on project i recently worked on where I had an if statements that had to test for 8 different templates. Everytime someone came to develop new templates/page types they had to go in and actively add another clause to the if statement, if they wanted to acces the code features provided after in if statement. This were change by the use of an interface template so the if statement checked for an interface template instead of 8 different templates .And of course all the template previously in the if statement, now simply had to inherit from the newly created interface template. New templates/pages, that want to reuse the same functionality, simply had to inherit from the interface template,without the need for changing any code at all.

In Pentia we have a different tools for monitoring different parameters and i thought i could be fun to have some graphical reprensentation of this, and luckely one of colleagues told me about the chart tools at google. So in this post we have a quick look at this service from google. I will only do the simple piechart but it is possible to build more complex chart.

So since I want different input to the chart tools I will first build a simple interface, and do and simple demo implementation.

  interface IChartItem
  {
    string Label { get; }
    string Size { get; }
  }

and now to the simple implementation

public class Demo : IChartItem
  {
    public Demo(string label,string size)
    {
      Label = label;
      Size = size;
    }


    public string Label
    {

      get; private set;
    }

    public string Size
    {
      get;
      private set;
    }
  }

Now to the glue that combines or more build the url for image that hold our chart.

 protected void Page_Load(object sender, EventArgs e)
    {
      DataBind();
    }

    protected string ChartSource
    {
      get
      {
        return BuildGoogleChartUrl();
      }
    }

    private string BuildGoogleChartUrl()
    {
      string prefix = "http://chart.apis.google.com/chart?cht=p3&chs=500x300";
      string chd = "&chd=t:";
      foreach (IChartItem chartItem in ChartItems)
      {
        chd = String.Format("{0}{1},", chd, chartItem.Size);
      }
      chd = chd.TrimEnd(',');
      string chl = "&chl=";
      foreach (IChartItem chartItem in ChartItems)
      {
        chl = String.Format("{0}{1}|", chl, chartItem.Label);
      }
      chl = chl.TrimEnd('|');
      return String.Format("{0}{1}{2}", prefix, chd,chl);
    }

    private IEnumerable _chartItems;
    private IEnumerable ChartItems
    {
      get
      {
        if (_chartItems == null)
          _chartItems = InstantiateChartItems();
        return _chartItems;

      }
    }

    private IEnumerable InstantiateChartItems()
    {
      List list = new List();
      list.Add(new Demo("20","20"));
      list.Add(new Demo("4", "40"));
      list.Add(new Demo("50", "50"));
      list.Add(new Demo("10", "10"));
      return list;
    }

And now we can use the url generated as a source for img-tag as this <img src="<%# ChartSource %>" />

and here is the result

Så har jeg endelig fået nogle fine chiliplanter som sælges på mit lille hobbyprojekt

chillicious.dk her er et llink hvo i kan se dem fine chiliplanter desværre er der kun ganske få tilbage så man skal skynde sig lidt hvis man ønsker at få fat i en af de fine sager.

Men tjek dem ud.

So what could I do to improve my blog, and why don't my visitors add comments. So my question is what will make you write comments for blogposts in the future ?

With out any comments or feedback it is hard to improve the posts and this blog overall.

With comments each post becomes more interactive and hopefully can help even more people.

So let me know if you have any specific themes or question you would like me to blog about, or how to improve the posts so you will and commets.

The number of usersession that is possible to have open in sitecore depend onj the licens, which is fair enough. But the task for an administrator to end hanging usersession seems somewhat headless. The administrator have to logout, to get a list of active user sessions, and then choose to end hanging or not used sessions. This might be fine in minor solutions but I think this might pose a problem in solutions where a user with the "Is Adminstrator" flag is set to true can be hard to find. He might be working in different office or just generally be hard to get a hold of. It doesn't require you have the "Is administrator" flag to end session but it is required to get the list of active sessions. You don't even have to be logged in to sitecore to end active session, if presented with the option to end active session anonymous users could do so. My idea is to help local administrators with functionality to end session with out leaving the backend, or having to log out or anything like that. Since sitecore is one big tool box I will build it as shortcut in the tray of sitecore.
Okay so we start, all our work is done in the core database and it only contains minimal coding. We start with making the tray icon. In the core database we go to content/applications/Desktop/tray and add a item I will call it UserSessions the Data section of the item find the click attribute and add the command name, this will also have to go in the command file we get back to that. I also and icon for the tray I have choosen the standard user icon.

Now with the tray icon shortcut in place you should be able to see it in th start bar just save the item and hit F5

Now we will add the command to the App_Config/Commands.config add the following line

<command name="Tray:UserSessionViewer" type="UserHelper.UserhelperTrayCommand,UserHelper" />

I will add this little user feature helper as an application so we need to add an application and layout for the application in the core database. We start with adding the layout "core database" go to sitecore/layout/applications and add a new layout in the data section in path write the physical path to layout you will create in the next step.

Next we will add the application again this is done in the core database go to sitecore/content/Applications/ and add a new application pull on the the layout we just created make sure you can see it in the layout section for the item. Also note the Id for your application, we will have to use it in the code part.

Okay now we are done with the configuration in sitecore now to code part.
First we will start we the Tray click command which is pretty simple note that is hardcode the id for our application and the database I getting the item from.

Now we have something that handle the click on the Tray command no we will code the popup or application window. First the frontend code for the application. The frontend code shows when the user session started and when the last request was made info need to take into account which user sessions you should end

<div class="taskInfoWindow">
  <div class="SystemTime>
  <span class="Literal">System Time</span>
  <span class="Time"><%# SystemTime %></span>
  </div>
    <div class="tasks">
      <asp:Repeater ID="taskRepeater" runat="server" DataSource="<%# ScheduleItems %>"
        OnItemCommand="taskRepeater_ItemCommand">
        <HeaderTemplate>
          <table>
            <thead>
              <tr class="informationHeader">
                <td class="Icon">
                  *
                </td>
                <td class="Literal">
                  Task name
                </td>
                <td class="Literal">
                  Is Due
                </td>
                <td class="Time">
                  Last run
                </td>
                <td class="Time">
                  Next run
                </td>
                <td class="Button">
                  Execute Task
                </td>
              </tr>
            </thead>
            <tbody>
        </HeaderTemplate>
        <ItemTemplate>
          <tr class="scheduledItem <%# Container.ItemIndex == 0 || Container.ItemIndex % 2 == 0 ? "even" : "odd"   %>">
            <td class="Icon">
              <img src="/sitecore/shell/Themes/Standard/<%#((ScheduleItem)Container.DataItem).Icon%>"
                alt="<%# ((ScheduleItem)Container.DataItem).DisplayName %>" />
            </td>
            <td class="Literal">
              <%# ((ScheduleItem)Container.DataItem).DisplayName%>
            </td>
            <td class="Literal">
              <%# ((ScheduleItem)Container.DataItem).IsDue%>
            </td>
            <td class="Time">
              <%# ((ScheduleItem)Container.DataItem).LastRun.ToString("HH:mm dd/MM-yyyy")%>
            </td>
            <td class="Time">
              <%# ((ScheduleItem)Container.DataItem).NextRun.ToString("HH:mm dd/MM-yyyy")%>
            </td>
            <td class="Button">
              <asp:LinkButton ID="LinkButton1" Text="Execute" CssClass="SortButton" runat="server"
                CommandName="Execute" CommandArgument="<%# ((ScheduleItem)Container.DataItem).ID %>" />
            </td>
          </tr>
          </tbody>
        </ItemTemplate>
        <FooterTemplate>
          </tbody> </table>
        </FooterTemplate>
      </asp:Repeater>
    </div>
  </div>

Now to the code behind, I am only using standard sitecore functionality nothing fancy here other then the click event for the repeater that end the selected user session.

using Sitecore.Data;
using Sitecore.Security.Accounts;
using Sitecore.Web.Authentication;

namespace Userhelper.Presentation
{
  public partial class UserSessionsView : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      DataBind();
    }

    public IEnumerable UserSessions
    {
      get
      {
        return DomainAccessGuard.Sessions;
      }
    }


    protected void userRepeater_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
      string id = e.CommandArgument.ToString();
      switch (e.CommandName)
      {
        case "Execute":
          EndSession(id);
          break;
      }
    }

    private void EndSession(string sessionID)
    {
      DomainAccessGuard.Kick(sessionID);
    }

  }
}

This is how I looks when we done

The styling part is left for you. With this little userhelper you can set security on the tray icon so local administrator can see the tray icon and all other users have denied read access so only users with elevate security settings can end user sessions.

This new hobby project doesn't mean that I will stop writing post. I've allready have some ideas in the pipeline with code allready made just waiting for me to have the time to write a post about it.

/* Function for calling the webservice                             */
function callWebservice() {
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.open("GET", "/Components/SystemNotifier/AjaxWebservice/SystemNotifier.asmx/GetAlerts", false);
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send();

  if (xmlhttp.status == 200) {
    var str = xmlhttp.responseXml.getElementsByTagName("string").item(0).text;
    return str;
  }
}

/* function that Get system alerts */
/* update timer by calling the webservice    */
function GetSystemAlerts() {
  var alertString = callWebservice();
  if (alertString != "") {
     alert(alertString);
     //increase time to next call so we dont get same alert twice
     setTimeout("GetSystemAlerts()", 125000);
  }
  else {
    setTimeout("GetSystemAlerts()", 60000);
  } 
}

var cookieName = "SitecoreSystemNotifier";

function writeCookie() {
 document.cookie = cookieName;
}

function cookieExists()
{

 if (document.cookie.length >0 )
 {
   var offset = document.cookie.indexOf(cookieName);
   if (offset != -1)
     return true;
   return false;
 }
 return false;
}


function init(){
 if(!cookieExists()){
  writeCookie();
  //SetTimeout in ms
  setTimeout("GetSystemAlerts()", 60000);
 }
}

init();

Okay now that we have the javascript we need the webservice to be called. It's fairly simple when using the Provider.

namespace SystemNotifier.AjaxWebservice
{
  /// 
  /// Summary description for SystemNotifier
  /// 
  [WebService(Namespace = "http://pentia.dk/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.ComponentModel.ToolboxItem(false)]
  // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
  [System.Web.Script.Services.ScriptService]
  public class SystemNotifier : WebService
  {

    [WebMethod]
    public string GetAlerts()
    {
      ISystemAlert alert = AlertProvider.NextAlert;
      if (alert != null)
        return alert.Text;
      return "";
    }

    private SystemAlertProvider _provider;
    private SystemAlertProvider AlertProvider
    {
      get
      {
        if (_provider == null)
          _provider = new SystemAlertProvider();
        return _provider;
      }
    }
    
  }
}

And now to the provider implementation

 public class SystemAlertProvider
  {
    private IEnumerable _alerts;
    public IEnumerable Alerts
    {
      get {
      if(_alerts == null)
       _alerts = GetAlertsFromSitecore();
       return _alerts;
      }
    }

    private TimeSpan timespan = new TimeSpan(0, 1, 0);
    private IEnumerable GetAlertsFromSitecore()
    {
      ChildList childList = AlertRootItem.Children;
      foreach(Item child in childList)
      {
        ISystemAlert alertItem = new SystemAlert(child);
        if(alertItem.AlertTime > DateTime.Now.Subtract(timespan))
          yield return alertItem;
      }
    }

    private const string sitecoreRootPath = "/sitecore/system/SystemAlertNotifier";
    private Item _rootItem;
    private Item AlertRootItem
    {
      get
      {
        if(_rootItem == null)
         _rootItem = Database.GetItem(sitecoreRootPath);
        return _rootItem;
      }
    }

    private const string _databaseName = "master";
    private Database Database
    {
      get
      {
        return Database.GetDatabase(_databaseName);
      }
    }
    public ISystemAlert NextAlert
    {
      get
      {
        if(Alerts.Count() > 0)
          return Alerts.OrderBy(w => w.AlertTime).First();
        return null;
      }
    }
  }

And finally the Alert interface and implementation of the same.

Inteface

public interface ISystemAlert
  {
    DateTime AlertTime { get; }
    String Text { get; }
  }

Implementaion

public class SystemAlert : ISystemAlert
  {
    public SystemAlert(Item item)
    {
      Item = item;
    }

    private Item Item
    {
      get;
      set;
    }

    private const string _alertTimeField = "SystemAlert_AlertTime";
    public DateTime AlertTime
    {
      get
      {

        DateField dateField = Item.Fields[_alertTimeField];
        return dateField.DateTime;
      }
    }

    private const string _textField = "SystemAlert_Text";
    public string Text
    {
      get { return Item[_textField]; }
    }
  }

Now we got all the code working so now we need to have someway to get the info, let's use a sitecore item. So here is a snapshot of the how my sitecore item looks.

So this is pretty much everything you need to have a system alert system up and running inside sitecore. Remember to edit hardcode root path to system alert root folder.
You can download the project in the download section link here.

And hope you can see the posiblities in this solution or implementaion, you could scheduled downtown and have email alert, downtime calendar and much much more hope you enjoy,

So i don't what to build the new Picasa or a like, so i will only provide functionality for showing frontend relevant images and associated information. In near future there will be a post on how-to use this post to integrate into Umbraco.

For this post i have chosen to integrate up against Google's Picasa so to start with you can go and download the google-gdata API you can get it here

The documentation i used to for making this post and code can be found here
The main idea for making this seamless is it could be easy to switch gallery provider from picasa to whatever your favorite web-photo gallery you use. Off course the difficulties you meet depend on how well an interface the provider gives you, you could end up in some tricky situations.

Okay let's get started. First of I've created the interfaces I've so necessary for making a good web gallery. You are more than welcome to give feedback if you think something are missing on one these.

There exist three parts. A gallery which consists of one or more photo albums. Next there off course a photo album which contain some album information and one or more Images. Last off is the image it self. So here are the three interfaces.

 
public interface IGallery
  {
    String Name { get; }
    String Description { get; }
    int NumberOfAlbums { get; }
    IEnumerable Albums{get;}
    IGalleryAlbum GetAlbumFromId(string id);
  } 

 
public interface IGalleryAlbum
  {
    String Id { get; }
    String Name{ get; }
    String Description { get; }
    String Category { get; }
    IGalleryImage AlbumCoverImage { get; }
    uint NumberOfImages { get; }
    IEnumerable Images { get; }
  }

 
 public interface IGalleryImage
  {
    String Name { get; }
    String Url { get; }
    String Description { get; }
    String ThumbnailUrl { get; }
    Dictionary ExifData { get; }
  }

Again you are more than welcome to give feedback if you think something is missing, keep in mind this is what I think is one a good and simple image gallery should be able to provide of information.
So now we have the interfaces in place lets go ahead an implement them using the Picasa API.
This is a pretty simple task if keep a window open with the documentation here is another link to the documentation
All I've used is the simple example provide at the documentation page.
First of the gallery implementation this is simple

namespace PicasaGalleryModel
{
  public class PicasaGallery : IGallery
  {
    private PicasaService _service;
    private PicasaFeed _feed;


    private const string PICASA_SERVICE_NAME = "PicasaIGalleryModel";

    public PicasaGallery(string username)
    {
      Username = username;
    }

    public string Name
    {
      get
      {
        return Feed.Title.Text;
      }
    }

    public string Description
    {
      get { return ""; }
    }

    public int NumberOfAlbums
    {
      get { return Albums.Count(); }
    }

    public IEnumerable Albums
    {
      get
      {
        return InitializeGalleryAlbumFromPicasaFeed(); 
      }
    }

     public IGalleryAlbum GetAlbumFromId(string id)
     {
       return Albums.Where(g => g.Id == id).First();
     }

    private PicasaFeed Feed
    {
      get
      {
        if (_feed == null)
          _feed = RetrieveUserAlbumsFromPicasa();
        return _feed;
      }
    }

    private PicasaFeed RetrieveUserAlbumsFromPicasa()
    {
      AlbumQuery query = new AlbumQuery(PicasaQuery.CreatePicasaUri(Username));
      PicasaFeed feed = Service.Query(query);
      return feed;
    }

    private IEnumerable InitializeGalleryAlbumFromPicasaFeed()
    {
      foreach (PicasaEntry entry in Feed.Entries)
      {
        IGalleryAlbum album = new PicasaAlbum(entry,Service,Username);
        yield return album;
      }

    }

    private PicasaService Service
    {
      get
      {
        if(_service == null)
          _service = new PicasaService(PICASA_SERVICE_NAME);
        return _service;
      }
    }

    private void Logon()
    {
    }

    protected string Password
    {
      get;
      set;
    }

    protected string Username
    {
      get; set ;
    }
  }
}

DO note that the username is the logon name you use to logon to picasa.
The implementation have some unused and unfinished function, when I first the idea to this post it started as huge project where I wanted security from picasa as well to be covered, in this implementation.
Wow this class uses the IGalleryAlbum so let's move on to the implantation of this.

namespace PicasaGalleryModel
{
  public class PicasaAlbum : IGalleryAlbum
  {
    private PicasaEntry _albumFeed;
    private PicasaFeed _imageFeed;
    private AlbumAccessor _ac;

    public PicasaAlbum(PicasaEntry feed,PicasaService service,string username)
    {
      AlbumFeed = feed;
      Service = service;
      Username = username;
    }

    public string Name
    {
      get { return AlbumAccessor.AlbumTitle; }
    }

    public string Description
    {
      get { return AlbumAccessor.AlbumSummary; }
    }

    public string Category
    {
      get { return "CAT-SET_STATIC"; }
    }

    public IGalleryImage AlbumCoverImage
    {
      get
      {
        PhotoQuery query = PhotoQueryFromUri(AlbumFeed.Id.AbsoluteUri);
        return BuildIGalleryImageFromPicasa(Service.Query(query)).First();
      }
    }

    private AlbumAccessor AlbumAccessor
    {
      get
      {
        if (_ac == null)
          _ac = new AlbumAccessor(AlbumFeed);
        return _ac;
      }
    }

    public uint NumberOfImages
    {
      get
      {
        
        return AlbumAccessor.NumPhotos;
      }
    }

    public IEnumerable Images
    {
      get 
      {
        return BuildIGalleryImageFromPicasa(ImageFeed);          
      }
    }

    private IEnumerable BuildIGalleryImageFromPicasa(PicasaFeed feed)
    {
      foreach (PicasaEntry entry in feed.Entries)
      {
        IGalleryImage image = new PicasaImage(entry);
        yield return image;
      }
    }

    public PicasaEntry AlbumFeed
    {
      get { return _albumFeed; }
      set { _albumFeed = value; }
    }

    public PicasaFeed ImageFeed
    {
      get
      {
        if(_imageFeed == null)
        {

          _imageFeed = Service.Query(PhotoQueryFromUri(PicasaImageUri()));
        }
        return _imageFeed;
      }
    }

    private string PicasaImageUri()
    {
      return PicasaQuery.CreatePicasaUri(Username, Id);;
    }

    private PhotoQuery PhotoQueryFromUri(string uri)
    {
      return new PhotoQuery(uri);
    }

    private PicasaService Service
    {
      get; set;
    }

    public String Id
    {
      get
      {
        return AlbumAccessor.Id;
      }
    }

    private string Username
    {
      get;
      set;
    }
  }
}

And now to the final part the Image implementation

namespace PicasaGalleryModel
{
  public class PicasaImage : IGalleryImage
  {

    private PhotoAccessor _photoAccessor;

    private Dictionary _exifData;

    public PicasaImage(PicasaEntry entry)
    {
      Entry = entry;
    }

    private PicasaEntry Entry
    {
      get;
      set;
    }

    public string Name
    {
      get
      {
        return PhotoAccessor.PhotoTitle;
      }
    }

    public string Url
    {
      get
      {
        return Entry.Media.Content.Attributes["url"].ToString();
      }
    }

    public string Description
    {
      get { return PhotoAccessor.PhotoSummary; }
    }

    public string ThumbnailUrl
    {
      get
      {
        return Entry.Media.Thumbnails[0].Attributes["url"].ToString();
      }
    }

    public Dictionary ExifData
    {
      get
      {
        if (_exifData == null)
          InitializeExifDataToDictionary();
        return _exifData;
      }
    }

    private void InitializeExifDataToDictionary()
    {
      _exifData = new Dictionary();
      _exifData.Add("Camera model", Entry.Exif.Model.Value);
      _exifData.Add("ISO", Entry.Exif.ISO.Value);
      _exifData.Add("Focal Length", Entry.Exif.FocalLength.Value);
      //_exifData.Add("Exposure", Entry.Exif.Exposure.Value);
      _exifData.Add("F Stop", Entry.Exif.FStop.Value);
      _exifData.Add("Flash", Entry.Exif.Flash.Value);
    }

    

    public PhotoAccessor PhotoAccessor
    {
      get
      {
        if(_photoAccessor == null)
          _photoAccessor = new PhotoAccessor(Entry);
        return _photoAccessor;
      }
    }

  }
}

Now with the model in place we can start to render out the IGallery* stuff.
This is made so it should be easy to integrate into Umbraco hence the MasterPage file.
The frontend stuff consist of the main gallery which loads in two different controls depending on you are viewing a list of albums or a list images in an album. The styling is left for you do, since this is dependent on your website design. If you like a can In a later post do this.
The main gallery

The .ascx page

<%@ Page Language="C#" MasterPageFile="~/Gallery.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Presentation._Default" %>
<%@ Import Namespace="Interfaces" %>

<asp:Content ID="head" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript" src="js/InitLightbox.js"></script>
<link rel="stylesheet" type="text/css" href="/CSS/jquery.lightbox-0.5.css" media="screen" />
</asp:Content>

<asp:Content ID="GalleryContent" ContentPlaceHolderID="GalleryContent" Runat="Server">

<div>
My Gallery Test

<asp:PlaceHolder ID="galleryContent" runat="server" />

</div>
</asp:Content>

and the codepage

public partial class _Default : System.Web.UI.Page
  {
    private IGallery _gallery;
    public const string ALBUMID = "aid";

    protected void Page_Load(object sender, EventArgs e)
    {

      SetGalleryContent();
    }

   

    private void SetGalleryContent()
    {
      Control view;
      if (String.IsNullOrEmpty(AlbumId))
        view = LoadGalleryView;
      else
        view = LoadAlbumView;
      galleryContent.Controls.Add(view);
    }

    private IEnumerable GalleryAlbums
    {
      get
      {
        return Gallery.Albums;
      }
    }

    private Control LoadGalleryView
    {
      get
      {
        Control viewControl = LoadControl("~/GalleryView.ascx");
        GalleryView gallery = (GalleryView)viewControl;
        gallery.AlbumQueryString = ALBUMID;
        gallery.GalleryAlbums = GalleryAlbums;
        return viewControl;
      }
    }

    private Control LoadAlbumView
    {
      get
      {
        Control viewControl = LoadControl("~/AlbumView.ascx");
        AlbumView gallery = (AlbumView)viewControl;
        gallery.Images = CurrentAlbum.Images ;
        return viewControl;
      }
    }

    private IGalleryAlbum CurrentAlbum
    {
      get
      {
        return Gallery.GetAlbumFromId(AlbumId);
      }
    }
    private string AlbumId
    {
      get
      {
        return Request.QueryString[ALBUMID];
      }
    }

    private IGallery Gallery
    {
      get
      {
        if(_gallery == null)
          _gallery = new PicasaGallery("USERNAME_GOES_HERE");
        return _gallery;
      }
    }
  }

The List view of albums
Ascx page

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GalleryView.ascx.cs" Inherits="Presentation.GalleryView" %>
<%@ Import Namespace="Interfaces"%>

<asp:Repeater runat="server" ID="AlbumeRepeater" DataSource="<%# GalleryAlbums %>">
<ItemTemplate>
<div class="AlbumCoverImage">
<a href="<%# AlbumLink(((IGalleryAlbum)Container.DataItem).Id) %>" >
<img src="<%# ((IGalleryAlbum)Container.DataItem).AlbumCoverImage.ThumbnailUrl %>" alt="" />
</a>
</div>
<div class="AlbumTitle">
<a href="<%# AlbumLink(((IGalleryAlbum)Container.DataItem).Id) %>" >
<%# ((IGalleryAlbum)Container.DataItem).Name %>
</a>
</div>
<div class="ImageCountInAlbum">
<%# ((IGalleryAlbum)Container.DataItem).NumberOfImages %>
</div>
<div class="AlbumDescription">
<%# ((IGalleryAlbum)Container.DataItem).Description%>
</div>

</ItemTemplate>
</asp:Repeater>

Codepage

public partial class GalleryView : System.Web.UI.UserControl
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      AlbumeRepeater.DataBind();
    }

    public string AlbumLink(string albumId)
    {
      string url = String.Format("{0}{1}={2}", Request.RawUrl, AlbumQueryString, albumId);
      return url;
    }

    public string AlbumQueryString
    {
      get; set;
    }

    public IEnumerable GalleryAlbums
    {
      get;
      set;
    }

  }

And finally the list view of images in an album
Ascx page

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AlbumView.ascx.cs" Inherits="Presentation.AlbumView" %>
<%@ Import Namespace="Interfaces"%>
<asp:Repeater ID="ImageRepeater" runat="server" DataSource="<%#Images %>">
<HeaderTemplate>
<ul id="Gallery">
</HeaderTemplate>
<ItemTemplate>
<li>
<a href="<%# ((IGalleryImage)Container.DataItem).Url %>" class="lightbox" title="<%# ExifData((IGalleryImage)Container.DataItem)%>"><img src="<%# ((IGalleryImage)Container.DataItem).ThumbnailUrl %>" /></a>

</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>

codefile

public partial class AlbumView : System.Web.UI.UserControl
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      ImageRepeater.DataBind();
    }

    public string ExifData(IGalleryImage image)
    {
      string exifData = "";
      foreach(string key in image.ExifData.Keys)
      {
        exifData += string.Format("{0} : {1}

", key, image.ExifData[key]);
      }
      return exifData;
    }

    public IEnumerable Images
    {
      get;
      set;
    }
  }

The final part is using the jquery lightbox again you could switch this to you own favorite gallery viewing service the lightbox for jquery can be found here. I've extend this a bit so you can provide a max image height and max image width, both are found in the solution for this project.
And a service for my loyal readers, you can now download the entire solution which contains all the above models implementations, and all the other good stuff I've covered in this post. Now you can get HERE, Rememer to fill out your own Username

And now you can head over and see when this is integrated into umbraco, i've done this for my site here is a like to my gallery