ASP.NET Outlook Style Toolbar Control

• Download source files - 9.15 Kb

Introduction

This article describes how to develop sophisticated Outlook style toolbar as an ASP.NET server control. In the past, I have seen many similar controls, but either they weren't easy to use or didn't provide functionality I wanted. So I decided to give it a shot myself.

Features Of The Toolbar

The toolbar simulates the Outlook style toolbar. A toolbar consists of various toolbar groups. Each toolbar group contains a header title and buttons following the header. Moreover, only one group can be active at any given time. Activation of groups can be performed by clicking on the titles that expands the group, contracting the previously active group.

A button in the toolbar is characterized by a picture and a label. More generally, any button of the toolbar can be identified by the toolbar group and button index pair.

This toolbar control lacks scrolling when the number of buttons in an active toolbar group exceeds the screen area, i.e.:

#Buttons in active group * Height of each button > 
    Toolbar Height - ToolbarGroupTitleHeight * Number of Total Groups.

This is so because there is no runtime knowledge of web component dimensions. Perhaps, someone can guide me on this.

Another thing to remember is that the toolbar drops down successfully only when container page is not designed in grid mode but in flow mode.

Code Construction

When I set out to plan my server control, I had two major considerations. Firstly, the server control should be configurable at runtime. Secondly, it should be a child's play to modify element styles and hover / un-hover styles for elements. For one thing, I hate to have JavaScript dependency for my server controls (not easy to manage).

The first requirement is fulfilled by the use of XML Schema and configuration file. The toolbar server control exposes ToolbarDefinitionFileName property that can be changed to reconfigure toolbar configuration. Alternatively, the same configuration file can be changed to reflect changes on next page refresh / postback. Toolbar control validates the XML contents of this file against its schema.

Following is the schema of the toolbar:

<?xml version="1.0" encoding="utf-8" ?>
<xs:schema id="Toolbar" targetNamespace="http://tempuri.org/Toolbar.xsd" 
                                             elementFormDefault="qualified"
xmlns="http://tempuri.org/Toolbar.xsd" 
      xmlns:mstns="http://tempuri.org/Toolbar.xsd" 
      xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:complexType name="ToolbarButtonDef">
      <xs:sequence>
            <xs:element name="Caption" type="xs:string" nillable="false" />
            <xs:element name="ImagePath" type="xs:string" nillable="false" />
            <xs:element name="Alt" type="xs:string" />
      </xs:sequence>
</xs:complexType>

<xs:complexType name="ToolbarGroupDef">
      <xs:sequence>
            <xs:element name="Caption" type="xs:string" nillable="false" />
            <xs:element name="ToolbarButton" type="ToolbarButtonDef" />
      </xs:sequence>
</xs:complexType>
<xs:element name="Toolbar">
      <xs:complexType>
            <xs:sequence>
                  <xs:element name="ToolbarGroup" type="ToolbarGroupDef" />
                        <xs:element name="ScrollUpImagePath" type="xs:string" 
                                               default="images/scrollup.gif" />
                  <xs:element name="ScrollDownImagePath" type="xs:string" 
                                             default="images/scrolldown.gif" />
           </xs:sequence>
      </xs:complexType>
</xs:element>
</xs:schema>

And following is a sample XML file that passes the validation check:

<?xml version="1.0" encoding="utf-8" ?>
<Toolbar>
     <ToolbarGroup Caption="WebService">
         <ToolbarButton Caption="Upload File" ImagePath="Images/4_47.gif" 
                                                   Alt="Upload Test File" />
         <ToolbarButton Caption="Download File" ImagePath="Images/4_47.gif" 
                                                 Alt="Download Test File" />
         <ToolbarButton Caption="Update Line" ImagePath="Images/schedule.gif" 
                                                        Alt="Update Line" />
     </ToolbarGroup>

     <ToolbarGroup Caption="Group2"> 
             <ToolbarButton Caption="Button3" 
                 ImagePath="Images/test.gif" Alt="Test Button" />
             <ToolbarButton Caption="Button4" 
                 ImagePath="Images/test.gif" Alt="Test Button" />
     </ToolbarGroup>
</Toolbar>

Second requirement is fulfilled by the use of CSS style sheet file, and imposing CSS class name binding to various toolbar elements to provide runtime configurable styles / mouse hover events. For hovering the elements, switch state between <Element>Normal and <Element>Hover CSS classes, where Element denotes the element type.

Instantiating Toolbar

Extract the toolbar project under wwwroot of IIS. For the purpose of using toolbar on the web form, include the CSS stylesheet as follows:

<LINK href="Shared/Styles/Toolbar.css" type="text/css" rel="Stylesheet">

To start with, I would suggest to use the sample CSS provided in the downloads.

Next, add reference of toolbar control from wwwroot\CustomWebControls folder to the web project, and drop the toolbar on the web form.

<customwebcontrols:toolbar id="Toolbar1" 
       runat="server"></customwebcontrols:toolbar>

Next, create an XML config file for the toolbar and supply it to the toolbar control via Page_Load as follows:

private void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    { 
        Toolbar1.ToolbarDefinitionFileName = "~/Toolbar.xml";
    }
    Toolbar1.OnToolbarButtonClicked +=new 
    CustomWebControls.ToolbarButtonClicked(Toolbar1_OnToolbarButtonClicked);
}

The above code attaches the XML contents (pasted as sample above) to the toolbar. The last part is to receive notifications from toolbar and handle them. This is done by handling ToolbarButtonClicked event (we already attach it in Page_Load event).

private void Toolbar1_OnToolbarButtonClicked(int Group, int Button)
{
   // Toolbar Group
   switch (Group)
   {
    case 0:
        
        // Toolbar Button Within Group
        switch (Button)
        {
            case 0:
                       // Do Something
            break;
        }
    }
}

For the purpose of convenience, Toolbar.css is included in the download to be used as CSS style sheet in your projects, and so is SampleToolbar.xml (sample configuration). That's it ! We are done... Any suggestions are welcome any time.

Ashish Kaila