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.CSSbody
{
background-color: navajowhite;
}
.ColdVertTabBtn
{
background-color: burlywood;
border: peru thin solid;
font-weight: bold;
font-size: smaller;
color: black;
}
.HotVertTabBtn
{
border-bottom: tan thin solid;
border-top: tan thin solid;
font-weight: bold;
font-size: smaller;
border-left: tan thin solid;
color: red;
border-right: blanchedalmond thin solid;
background-color: blanchedalmond;
}
.TabBodyContent
{
border-right: tan thin solid;
border-left: blanchedalmond thin solid;
border-top: tan thin solid;
border-bottom: tan thin solid;
background-color: blanchedalmond;
}
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. < uc1:simverttabstrip id="SVTabRegions" runat="server" onClick="SVTabRegions_Click"> < /uc1:simverttabstrip >
Example of the HTML for webform - NWRegion. <body MS_POSITIONING="GridLayout">
<form id="NWRegions" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" width="80%">
<tr>
<td id="TabStripCol" width="20%" valign="top">
<uc1:simverttabstrip id="SVTabRegions" runat="server" onClick="SVTabRegions_Click"> </uc1:simverttabstrip >
</td>
<td id="TabBodyCol" class="TabBodyContent" width="80%">
<table>
<tr>
<td>
Go Populate Controls with Info About this Region
</td>
</tr>
<tr>
<td>
< asp:Label id="Label1" runat="server"> Label < /asp:Label >
</td>
</tr>
<tr>
<td>
<asp:Label id="Label2" runat="server"> Label< /asp:Label>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
< /body>
- 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
|
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
More ASP.NET Articles
More By aspfree  developerWorks - FREE Tools!
|
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!
| | | |
Learn field-tested SOA principles, methodology, technology and implementation from the global SOA market leader - in a new e-book by an IBM SOA expert. Written by IBM Certified SOA Solution Designer Bobby Woolf, "Exploring IBM SOA Technology & Practice" is the ultimate insider's guide to SOA - a PDF e-book packed cover to cover with IBM's specific advice on how to make your SOA implementation a success.
FREE! Go There Now!
| | | |
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!
| | | |
Effective governance for lean development isn’t about command and control. Instead, the focus is on enabling the right behaviors and practices through collaborative and supportive techniques. Hear from Scott Ambler on how it is far more effective to motivate people to do the right thing than it is to force them to do so. Learn how to form a lightweight, collaboration-based framework that reflects the realities of modern IT organizations.
FREE! Go There Now!
| | | |
Join us for this on demand webcast to learn about developing complex systems more quickly and efficiently. We'll cover market drivers for developing, governing and reusing systems software assets and how you can develop system software assets with Rational Asset Manager.
FREE! Go There Now!
| | | |
Learn how you can extend modern application lifecycle management to IBM System z through the IBM Rational Software Delivery Platform (SDP). The Did you say mainframe? e-kit includes podcasts, webcasts, tutorials, white and red papers, demos, and articles designed to help ease the challenges of modernizing your enterprise. This complimentary kit for mainframe developers is a practical, how-to guide for making the most of an existing development environment, including the skills and infrastructure already in place at an established enterprise.
FREE! Go There Now!
| | | |
XML has become a common way of storing business data as flat files and many data server vendors including IBM have provided ways to store this data within relational database systems. Increasingly collections of XML files are accessed like databases using an xQuery and other XML standard mechanisms. Businesses find the need to combine the traditional tabular structured data with XML formatted data. In this webcast, you’ll learn about IBM’s WebSphere Federation Server technology, which provides users with the ability to integrate these two data formats.
FREE! Go There Now!
| | | |
Rational Build Forge Express Edition is an automation framework that packages the latest enterprise-grade technologies into a reliable, flexible and robust configuration designed and priced specifically for small to midsize businesses. The new Rational Build Forge Express eKit provides you with valuable resources – including a case study, podcast, demo, and articles – to help you increase staff productivity, compress development cycles and deliver better software, fast.
FREE! Go There Now!
| | | |
Informix Dynamic Server (IDS) Express Edition offers outstanding online transaction processing (OLTP) database performance, while helping to simplify and automate many of the tasks associated with deploying databases for small business applications. IDS 11 further extends the ease of management and applications integration with the Admin API and Scheduler, high availability with Continuous Log Restore for backup server recovery in case of a primary server failure, and column level encryption to protect personal and company private data.
FREE! Go There Now!
| | | |
In this webcast, you'll get an introduction to the eXtreme Transaction Processing (XTP) features of WebSphere Extended Deployment and the common architectural traits required by XTP applications. See how WebSphere Extended Deployment's ObjectGrid feature provides a state-of-the-art infrastructure for hosting XTP applications.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
| |
/ 4 
