Web Tabstrip Control for Frames

• Download demo project - 7 Kb
• Download source - 3 Kb

Introduction

There are plenty of tabstrip controls available for download that use panels to decide which content to display. But what if your existing web application's / web site's content is stored on separate pages, or you have to use frames? This article will take you through the basics of creating a custom tabstrip control that can be loaded in one frame, and change content in another frame.

Using the code

Using the code is quite simple. The library contains a Tab control, as well as a TabList Control. You add Tabs to the TabList. To demonstrate, very quickly,

myTab.DisplayName = " Project Home ";<br>
myTab.DisplayPosition = 0;<br>
myTab.URL = "projectHome.aspx?pjID=" + ourID;<br>
TabList2.AddTab(myTab);<br>

The TabList Control has a number of properties that you can set, namely:

Settings Properties

1. UseFrames (default is true - provided so that I can incorporate panel tabs later)
2. TargetFrame (the name of the frame to load the content pages in)
3. SelectedTab (the index of the selected tab)
4. TabsAcross (the number of horizontal tabs before creating a new line)

Appearance Properties

1. LeftImage (the image to appear on the left hand side of the tab)
2. RightImage (the image to appear on the right hand side of the tab)
3. TopImage (the image to appear on the top of the tab)
4. BottomImage (the image to appear below the tab)
5. LeftImageOver (the image to appear on the left hand side of the tab when the tab is selected)
6. RightImageOver (the image to appear on the right hand side of the tab when the tab is selected)
7. TopImageOver (the image to appear on the top of the tab when the tab is selected)
8. BottomImageOver (the image to appear below the tab when the tab is selected)
9. CssClass (the style sheet element for the unselected tabs)
10. CssClassOver (the style sheet element for the selected tab)
    

How it all works

The Tablist Control has a private member named m_items which is an arraylist of Tab. This is where the collection of tabs are stored. To order the tabs (by the tab display position) I had to have a way to compare the tabs to one another. For that I created a TabCompare class, inheriting from IComparer.

This allowed me to compare one tabs display position to another, and return a value representing whether the first tab should appear before or after the second tab. By inheriting from the IComparer interface, I could now also make use of the arraylist method Sort, which, as it now had a way to compare one tab to another, could automatically order my tabs for me, simply by calling m_items.Sort(new TabCompare()), which I wrapped in a private method called order.

I also wanted my control to be able to have fancy images around it (you know, so it looks like a tab), so my control renders 3 html rows per tab line (the top row for the top image, the middle row for the side images and tab, and the bottom row for the bottom images). I wrote a method that returns a string for each of the rows.

The ChangeTab method is the event handler for the linkbuttons (which is what i used to display the tab link and handle click events), and simply changes the selected tab index, and uses JavaScript to change the target page.

State Management

Because my TabList control inherits from Control, I can override the LoadViewState and SaveViewState methods to maintain the state of the control. The only value I needed to maintain was the selected tab index, m_intSelTab.

  //Saves the View State
  protected override object SaveViewState() 
  {
   object[] allStates = new object[2];
   allStates[0] = base.SaveViewState();
   allStates[1] = m_intSelTab;
   return allStates;
  }
  //Loads View State Info 'Load Saved State Values
  protected override void LoadViewState(object savedState) 
  {
   if (savedState != null)
   {
    object[] myState = (object[])savedState;
    if (myState[0] != null) 
    {
     base.LoadViewState(myState[0]);
    }
    if (myState[1] != null) 
    {
     m_intSelTab = Convert.ToInt32(myState[1]);
    }
   }
  }
  

In my CreateChildControls method (which renders the control to the screen) I simply set the start position (index of first tab to display - i.e. 0), and work out how many tabs to display in the first row. I also set a counter to keep track of which tabs I've displayed. I then order the tabs by calling the order method I created before.

I then loop through all my tabs and write them to the screen, using my counters to determine when to draw a new row, and when to finish off the table. I used linkbuttons as the hyperlinks, so that I could control their events server side.

  protected override void CreateChildControls() 
  {
   int intColRows = (m_items.Count / m_intTabsAcross) + 1;
   int intPositionRendered = 0;
   int intStartPosition = 0;

   order();

   this.Controls.Clear();

   this.Controls.Add(new LiteralControl(
"<table cellpadding=\"2\" cellspacing=\"1\" border=\"0\" ID="Table1">"));

   for (int i=1; i <= intColRows; i++) 
   {
    if ((m_strTopImage.Length > 0) || (m_strSelTopImage.Length > 0))
    {
     this.Controls.Add(new LiteralControl(TopRow(intStartPosition, 
         ref intPositionRendered, m_intSelTab)));
    }
    MiddleRow(intStartPosition, ref intPositionRendered, m_intSelTab);
    if ((m_strBottomImage.Length > 0) || (m_strSelBottomImage.Length > 0)) 
    {
     this.Controls.Add(new LiteralControl(BottomRow(intStartPosition, 
        ref intPositionRendered, m_intSelTab)));
    }
    intStartPosition = intPositionRendered;
   }

   this.Controls.Add(new LiteralControl("</table>"));

  }
  

And that's it. I hope you find both the control (I included the dll for use), and this article useful.