Quick solution: Simulating a TabStrip Control - Part Two

• intermediate
• uses C# ASP.NET
• builds and implements a basic web user control, a vertical tabstrip, which raises an event

This article will build on the TabStrip Control of Part One. Just as in the previous article a collection of buttons will simulate the TabStrip. How to handle the tab body content depends upon the scenario.

For variety's sake this article will demonstrate a vertical tab strip and use only one web form as the tab body content.

Continuing to use Microsoft's Northwind Database as an example basis. Let each tab represent one region: Eastern, Western, Northern and Southern. When the active tab changes fill the tab body content with the Territories of that region.

Color scheme

The color scheme is still critical to giving the tab the correct look and feel. Following the same guidelines as before place a dark border around all inactive tab buttons. The active tab button's border, which touches the tab body content, should be the same color as the tab content's background. Likewise the tab body's border, which connects to the tab button, should have the same color as its own background. The following style sheet works for a Vertical tab on the left side of tab body content.

Style Sheet: SSVTabStrip.CSS

Building the UserControl : SimVertTabStrip

Next create a user control to contain the collection of tab buttons. This control will be implemented on pages of tab body content. This example will have four "tabs": Eastern,Western,Northern and Southern.

• In the Design mode of the new control place the needed number of buttons on the page within an HTML TABLE. The table should have one column and one row per button. Drag the SSVtab style sheet over the control.
• Once again give each button a simple name that follows a distinct pattern: btnTab0, btnTab1,btnTab2 and btnTab3. This will allow you to easily determine which one was clicked.

Adding functionality to the appearance

Now that the control is beginning to look like a tab strip follow these remaining steps to ensure it behaves like one.

• Open the code behind SimVertTabStrip.asx.cs and expose an enumerated type to make the indexes more understandable.
  
  
  public enum VTabIndx:int
  {
  Eastern=0,
  Western=1,
  Northern=2,
  Southern=3
  }
  
  
  
  
• In the previous example we exposed a method to set one of the tab's appearance as the current tab. This control will grow a little sophistication by exposing a current tab property. The method which changes the tab's appearance will become private and automatically called when the current tab property changes. Just as in the last article the tab's appearance is altered by changing the button's "CSS" property.
  //expose the current tab index
  //when this value is changed
  //alter the tabs appearance as well
  private int curtab;
  public int CurTab
  {
      get
     {
         return curtab;
     }
      set
     {
         curtab = value;
         SetCurrentTabtoHOT(curtab);
     }
  }
  protected void SetCurrentTabtoHOT(int iTabIndx)
  {
  //To use the control collection
  //include: using System.Web.UI;
  //first set all other buttons to COLD
  foreach(Control oCtl in this.Controls) //loop Text Boxes
  {
      try
      {
         Button CurCtl = (Button)oCtl;
         CurCtl.CssClass = "ColdVertTabBtn";
     }
     catch{}
  }
  //To use the String builder class
  //include: using System.Text;
  //Known that buttons name is btnTabXX
  StringBuilder sbTabName = new StringBuilder("btnTab");
  sbTabName.Append(iTabIndx.ToString());
  Button CurBtn = (Button) this.FindControl(sbTabName.ToString());
  CurBtn.CssClass = "HotVertTabBtn";
  }
  
  
  
  
• Create an internal method OnTabClick. This generic method will be assigned to the onClick event for each tab button. Within this method take the name of the control from the "Sender" parameter. From the name of the sender control retrieve the tab index substring. Use this index to change the current tab property and raise an event. The consumer web form can detect the tab click event and then re-populate the web form controls with values related to that tab.
  protected void OnTabClick(object sender,EventArgs e)
  {
  //tell who was clicked by taking the index from the name
  // tabIndex property
  Button CurBtn = (Button) sender;
  string sTabName = CurBtn.ID;
  string sIndx = sTabName.Substring(6);
  int iTabIndx = int.Parse(sIndx);
  //Reset the CurTab property
  CurTab = iTabIndx;
  Click(this,e); //raise the event
  }
  
  
  
• Now to define the Click event for the tab control:
  First expose the event followed by its required "On" method.
  public event EventHandler Click;
  protected void OnClick(EventArgs e)
  {
      if (Click != null)
      {
          Click(this, e);
      }
  }
  
  
  
• Return to SimVertTabStrip.ascx and using the Properties pages for each button assign the button's Click event to the protected OnTabClick method just created.

Using the User Control

NNow to create the tab body content pages which will consume the SimVTabStrip control.

• Add a webform to the project,NWRegion.aspx. Drag the Style Sheet over it.
  

• Switch to HTML mode. Add a table to the webform which contains two columns. Set the tables cellpadding and cellspacing to 0. Make sure the first column's valign property is set to "top". Give the second column 80% of the entire tables width and set its class to TabBodyContent.

• Add HTML space - nbsp to each cell to make it easier to drag controls into the table. Return to Design mode. Drag the SimVTabStrip user control into the first cell.

• Using the property pages name the control SVTabRegions. Notice that even though your control raises an event , events for user controls do not appear within the property pages.
  
  
• Switch back to design mode and within the HTML declaration for the user control enter a method,SVTabRegions_Click, for the OnClick event.

• Next go to the code behind for the form, NWRegions.aspx.cs Insert a protected declaration of the control to allow references throughout the code.
  protected SimVertTabStrip SVTabRegions;
  
  
  
• Within the page load event set the tab initially to "Eastern" using the enumerated type.
  private void Page_Load(object sender, System.EventArgs e)
  {
  if (!IsPostBack)
  {
  //first time around set the tab to the first one
  //Eastern
  SVTabRegions.CurTab = (int) SimVertTabStrip.VTabIndx.Eastern;
  }
  }
  
• Finally create the method which will be called when the tabstrip's click event is fired. Give it the same name as you declared for the controls "OnClick" event in the HTML.
  protected void SVTabRegions_Click (object sender,EventArgs e)
  {
  //get current tab from the control
  int iCurTab = SVTabRegions.CurTab;
  
  Label1.Text = "CURRENT TAB INDEX " + iCurTab.ToString();
  
  //Regions begin with 1
  int iRegionCode = iCurTab + 1;
  Label2.Text = "REGION CODE " + iRegionCode.ToString();
  
  //rebind all data controls according to this tab
  }
  

  In summary this is a simple control which is easily maintained. It raises an event allowing the consuming webform to determine what it should do. The webform can always retrieve the current tab using the exposed property. Changing the current tab will automatically reset the tab buttons CSS style to appear "hot".

  
  About the author: Lisa D. Welch
  Lisa has been completing applications for nine years. She acquired her MCSD in 1996. She is currently under contract completing internet and intranet development. Contact her at ldwelch@dcr.net 

More ASP.NET Articles
More By aspfree

developerWorks - FREE Tools!

Be the first to hear about i5/OS V6R1! Hold your calendar on January 30, 2008 for this free webcast on the new i5/OS. Rational's Enterprise Modernization products will be discussed at this webcast as they help to drive the application development environment for this new System i OS. <br />And learn how i5/OS will take you to the next step of efficient, resilient business processing. You will hear about the new i5/OS capabilities as it will be the most significant i5/OS release in years. If you cannot join the webcast on 1/30/08 you can still use this link to listen to the replay.<br /> FREE! Go There Now!

NEW! A Layered approach to delivering security-rich Web applications As businesses grow increasingly dependent upon Web applications to provide services to customers, employees and partners, these complex applications become more difficult to secure. Although traditional security solutions protect Internet infrastructure layers, they do not guard against HTTP and HTML attacks. Many organizations that conduct security testing still deploy applications that allow attackers to manipulate their logic and wreak havoc on their business. To mitigate this risk, development and delivery teams must address Web application security throughout the lifecycle, addressing the many layers detailed in this paper. FREE! Go There Now!

NEW! Evaluate Rational Host Access Transformation Services (HATS) Toolkit V7.1 Visit IBM developerWorks to download a free trial of the Rational Host Access Transformation Services (HATS) Toolkit. The HATS toolkit provides a set of plug-ins for the IBM Rational Software Delivery Platform to help you easily extend your legacy applications. HATS makes your 3270 and 5250 applications available as HTML through the most popular Web browsers, while converting your host screens to a Web look and feel and it also enables you to develop new Web, portal, and rich-client applications. FREE! Go There Now!

NEW! Hello World: WebSphere Service Registry and Repository Manage, govern, and share services across your organization by using WebSphere Service Registry and Repository. Follow the hands-on exercises to learn how to navigate the Web interface to publish, find, reuse, and update services. FREE! Go There Now!

NEW! IBM Enterprise Modernization Sandbox for System z: Architecture Analysts, architects, and developers who have existing COBOL or PL/I skills and want to extend those skills to deploy new workloads on the mainframe can use the IBM Enterprise Modernization Sandbox for System z to find hands-on walkthroughs of common real world scenarios. The scenarios provide examples of how to rapidly design, create, assemble, test, and deploy high-quality Web, Web services, portal, and SOA applications for IBM CICS, IBM IMS, and IBM WebSphere Application Server. FREE! Go There Now!

NEW! Successful Change and Release Management for .NET Join this webcast to discover the key requirements for successful change and release management. Learn how to extend your .NET environment to improve productivity and collaboration, and address core problems afflicting team development. In this webcast, we’ll review typical challenges faced by customers and how to resolve them with the IBM Rational Change and Release Management solution, including Rational ClearCase, Rational ClearQuest and Rational Build Forge. Replay is available for 9 months. FREE! Go There Now!

NEW! Trial download: IBM Rational Method Composer V7.2 Get a free trial download of the latest version of IBM Rational Method Composer V7.2 which helps you deliver customized yet consistent process guidance to your project teams and IT organization, and includes the latest version of IBM Rational Unified Process (RUP), which has provided process guidance to teams since 1996. FREE! Go There Now!

NEW! Webcast: Eclipse: Empowering the universal platform The Eclipse community is constantly working to extend Eclipse's functionality. In this webcast, learn about some of the most important and feature-rich projects under development. From multi-language support to plug-in development, tune in to see what Eclipse is capable of now. FREE! Go There Now!

NEW! Webcast: IBM Rational Build Forge - Beyond the Build The discipline of assembling and delivering software is maturing beyond standard developer-centric compile/test software builds. The end-to-end software development lifecycle is emerging as the new focus moves “Beyond the Build.” Join this on demand webcast to learn about methods for streamlining software delivery and key capabilities of the IBM Rational Build Forge framework for automating build and release management in environments of any size. FREE! Go There Now!

NEW! Webcast: Introducing the new Information Server and Solutions community: LeverageInformation User communities play an important role in communication and collaboration around products, solutions and other areas of special interest to members. Successful communities are able to provide the right mix of content and services to deliver a value proposition that resonates with each audience. Join Tom Inman, VP of Marketing for Information and Platform Solutions as he introduces the new LeverageINFORMATION community. During this webcast, learn about the value provided by the community and how customers and partners derive value from the community in addressing their own technical and business challenges. FREE! Go There Now!

All FREE IBM® developerWorks Tools!