By: John Kilgo
You may not be familiar with the IE WebControls. That is because they are not part of the installation of the .Net framework or Visual Studio.Net. You must download them from Microsoft. They are available for download at http://msdn.microsoft.com/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols/. Documentation for the controls is available at http://msdn.microsoft.com/workshop/webcontrols/webcontrols_entry.asp.
Treeview, Toolbar, and TabStrip controls have been a part of client-server applications for years. They are not as common on the web due to the dhtml involved. Actually, for the most part, Microsoft has implemented dhtml for these controls only if you are running IE 5.5 and above. Downlevel browsers such as Netscape, and earlier IE implementations make multiple trips to the server rather than serving dhtml for these controls. We will explore the controls and ask the question: are they ready for prime time?
First we will examine the TreeView control. The example program presented below contains three TreeView controls. The first is just a simple implementation that doesn't do anything other than display some data. The second example utilizes the NavigateUrl property to form a vertical navigation menu. It also includes the DefaultStyle property to control display coloring and border when first expanded. When you hover over the expanded nodes, it reverts to the default coloring and lack of a border. I never could figure out how to control the coloring of the top node. I guess Microsoft allows it to be any color you want as long as it is pale blue. The third example binds the nodes to the contents of an xml file. While this may be neat, I'm not sure what it buys you. I should also point out that these controls must be registered on the page. That is what the second line of code does.
<%@ Page Language="vb" %>
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TreeView</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
Simple Treeview<br>
<iewc:TreeView id="TreeView1" runat="server">
<iewc:TreeNode text="My Favorite .Net Books" runat="server" ID="Treenode1" NAME="Treenode1">
<iewc:TreeNode text="ASP.NET Unleashed - Stephen Walther" />
<iewc:TreeNode text="Programming Data-Driven Web Applications with ASP.NET - Donny Mack & Doug Seven" />
</iewc:TreeNode>
</iewc:TreeView>
<p>
Treeview with URL Navigation<br>
<iewc:TreeView id="TreeView2" runat="server" >
<iewc:treenode text="URL Navigation">
<iewc:treenode text="Microsoft.com"
NavigateUrl="http://www.microsoft.com"
DefaultStyle="background: #CCCCCC; border: solid 1px; color: Black; font-size: 10pt" />
<iewc:treenode text="dotnetjohn.com"
NavigateUrl="http://www.dotnetjohn.com"
DefaultStyle="background: #CCCCCC; border: solid 1px; color: Black; font-size: 10pt" />
</iewc:treenode>
</iewc:TreeView>
</p>
<p>
Treeview with XML Source<br>
<iewc:TreeView id="TreeView3" runat="server" TreeNodeSrc="JazzPiano.xml">
</iewc:TreeView>
</p>
</form>
</body>
</html>
The code for the xml file used in the third example is shown below.
<TREENODES>
<TREENODE Text="Favorite Jazz Pianists">
<TREENODE Text="Oscar Peterson">
</TREENODE>
<TREENODE Text="Keith Jarrett">
</TREENODE>
<TREENODE Text="Bill Evans">
</TREENODE>
</TREENODE>
</TREENODES>
You may run the TreeView example program here.
Next we will look at the ToolBar control. Although it also has a limited number of properties and methods, you can do some useful things with it. The example program demonstrates two ways to handle events with the ToolBar control. The first example checks the button click event to change the fore color of a label control. The second example implements a horizontal menuing system. All in all I found the toolbar to have some useful features although it also is short on properties and methods.
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Page Language="vb" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ToolBar</title>
<Script runat="server">
Sub btn_Click(sender As Object, e As EventArgs)
Select Case btnGroup.SelectedCheckButton.Text
Case "Red"
lblMessage.ForeColor = System.Drawing.Color.Red
Case "Green"
lblMessage.ForeColor = System.Drawing.Color.Green
Case "Blue"
lblMessage.ForeColor = System.Drawing.Color.Blue
End Select
End Sub
Sub Button_Click(sender As Object, e As EventArgs)
Select Case sender.id.ToString()
Case "books"
Response.Redirect("http://www.dotnetjohn.com/books.aspx")
Case "links"
Response.Redirect("http://www.dotnetjohn.com/links.aspx")
Case "home"
Response.Redirect("http://www.dotnetjohn.com/")
Case "about"
Response.Redirect("http://www.dotnetjohn.com/about.aspx")
End Select
End Sub
</Script>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<form id="Form1" method="post" runat="server">
Simple Toolbar with Events
<iewc:Toolbar id="Toolbar1" runat="server" width="100px" AutoPostBack="True" OnButtonClick="btn_Click">
<iewc:ToolbarCheckGroup id="btnGroup">
<iewc:ToolBarCheckButton Text="Red" />
<iewc:ToolBarCheckButton Text="Blue" />
<iewc:ToolBarCheckButton Text="Green" />
</iewc:ToolbarCheckGroup>
</iewc:Toolbar>
<p>
<asp:Label ID="lblMessage" Runat="server" Text="This is your color" />
</p>
<div align="center>
Toolbar as a Navigation Menu
<iewc:Toolbar id="Toolbar2" runat="server" onButtonClick="Button_Click" width="225px">
<iewc:ToolbarSeparator />
<iewc:ToolbarButton text="Books" id="books" />
<iewc:ToolbarSeparator />
<iewc:ToolbarButton text="Links" id="links" />
<iewc:ToolbarSeparator />
<iewc:ToolbarButton text="Home" id="home" />
<iewc:ToolbarSeparator />
<iewc:ToolbarButton text="About" id="about" />
<iewc:ToolbarSeparator />
</iewc:Toolbar>
</div>
</form>
</body>
</html>
You may run the ToolBar example program here.
Lastly we will look at the TabStrip control. I found this control to be very frustrating to set up and to have limited usefulness. I present my efforts below and hope that you can do better. Please note that to get anything other than the tab strips themselves (the headings) you must also include a MultiPage control.
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TabStrip</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<form id="Form1" method="post" runat="server">
<iewc:TabStrip id=TabStrip2 runat="server"
style="width:400px; height:100%;"
TabSelectedStyle="background-color:#ffffff;color:#000000"
TabHoverStyle="background-color:#777777"
SepDefaultStyle="width:10px; border-bottom: solid 1px red;"
TabDefaultStyle="background-color:#000000; border:solid 1px red; font-family:verdana; font-weight:bold; font-size:8pt; color:#ffffff; width:79; height:21; text-align:center"
TargetID="mpcTabs">
<iewc:Tab Text="Tab 1" />
<iewc:TabSeparator />
<iewc:Tab Text="Tab 2" />
<iewc:TabSeparator />
<iewc:Tab Text="Tab 3" />
</iewc:TabStrip>
<iewc:MultiPage id="mpcTabs" runat="server"
style="BORDER-RIGHT:red 1px solid; PADDING-RIGHT:12px; BORDER-TOP:medium none; PADDING-LEFT:12px; PADDING-BOTTOM:12px; BORDER-LEFT:red 1px solid; PADDING-TOP:12px; BORDER-BOTTOM:red 1px solid" Width="400px" Height="81px">
<iewc:PageView>
MultiPage One
</iewc:PageView>
<iewc:PageView>
MultiPage Two
</iewc:PageView>
<iewc:PageView>
MultiPage Three
</iewc:PageView>
</iewc:MultiPage>
</form>
</body>
</html>
You may run the TabStrip example program here.
At the top of the article I posed the question: are these IEWebControls ready for prime time? For me, the answer is no. While Microsoft is to be lauded for making the controls available, I believe they need a lot more work to make them truly useful on the web. They are simply not "fat" enough to be included with the rest of the .Net server controls. The one possible exception may lie in using the TreeView and ToolBar controls for page navigation.
You may download the code here. Don't forget that before you can run the programs you must download the controls at the link provided at the top of the article.
