Creating a typical Tab – Your code, your plugins, part 2

In the previous post – Creating a simple Tab – Your code, your plugins, part 1 – we looked at how we could take the data you store inside of a configuration object in your system, and create a tab which shows that data.

This time around we are going to be taking that a step further and looking at how we can customize how your Tab looks and how the data is displayed.

New Concepts

  • Creating a tab which renders a list of objects
  • Render data which is continuously changing
  • Controlling when a tab is executed

Use Case 2: Show the content of a shopping cart style of component you might have written

In this example, we have a shopping cart that our site uses to track items that a user is purchasing. When applying this to your own situation, think of the shopping cart as a generic representation of any component in your site that has transient state, based on the actions that the user performs.

For this case, our shopping cart is fairly simple and we wont be aiming to show more than the content of the shopping cart. In your own scenarios, you will likely be able to draw even more value than what we are showing here and start to apply some of the details/factors that exist in most real e-commerce solution (i.e. applied promotions, culture, discounts, markups, etc).

Existing code
Here is the general interface of the API that we are interacting with which manages the state of the cart:

public class ShoppingCart
{
    //...
    public static ShoppingCart GetCart(HttpContextBase context)
    {
        var cart = new ShoppingCart();
        cart.ShoppingCartId = cart.GetCartId(context); 
        return cart;
    }
     
    public string GetCartId(HttpContextBase context)
    {
        //Pulls cartId from Session
    }

    
    public List<CartItem> GetCartDetials()
    { 
        //Pull cart items from Cache
    }
    //...
}

public class CartItem
{ 
    public string AlbumTitle { get; set; }
    
    public decimal AlbumPrice { get; set; }
    
    public string GenreName { get; set; }
    
    public string ArtistName { get; set; }
    
    public int AlbumId { get; set; }
    
    public int Count { get; set; }
    
    public DateTime DateCreated { get; set; }
    
    public int RecordId { get; set; }
    
    public string CartId { get; set; }
}

Problem
Under normal circumstances, when developing this functionality within a site, its difficult to know whether the internal state of your model matches what you expect. Many different factors can contribute to what is stored, and and the cart summary page usually isn’t tailored to try to inform you about object state.

Solution
Assuming you have read part 1 in the series and had a crack at creating a basic Tab, you are becoming more adventurous and decide that a Glimpse Tab could hold the answer. You decide that to start with, you would like to show the basic content of the cart.

This is what we would like to see:
CartTab

Sample Code
As per usual, the runtime will detect any class in your solution that inherits from ITab. To produce what we have in mind with the awareness that you have access to the API described, the following is how we create your Tab:

public class TabCart : AspNetTab
{
    public override string Name
    {
        get { return "Cart"; }
    }

    public override object GetData(ITabContext context)
    {
        var cart = ShoppingCart.GetCart(context.GetHttpContext());
        var items = cart.GetCartDetials();

        return items;
    }

    public override RuntimeEvent ExecuteOn
    {
        get { return RuntimeEvent.EndSessionAccess; }
    }
}

In this example we have introduced a new concept with the override of ITab.ExecuteOn. This property dictates at what point in the request your Tab will be executed. By default, if you use the base classes Glimpse has, tabs run at the end of the request (RuntimeEvent.EndRequest). But in this case, we need to access a cartId which is stored in Session and in asp.net Session state is only available during the whole request. Hence we want to tap in at the last point which session is available.

Working Sample
If you are interested, here is the link (3a65662aea) to the MVC Music Store sample which has the commit for the above functionality. Feel free to play around with it and modify.

2 thoughts on “Creating a typical Tab – Your code, your plugins, part 2

  1. Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1401

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>