Click here to Skip to main content
Click here to Skip to main content
Go to top

ASP.NET Outlook Style Toolbar Control

, 10 Nov 2004
Rate this:
Please Sign up or sign in to vote.
An outlook style toolbar control in ASP.NET

Sample Image - aspnetoutlooktoolbar.jpg

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Ashish Kaila
Software Developer (Senior) MixModes Inc. | Research In Motion
Canada Canada
Ashish worked for Microsoft for a number of years in Microsoft Visual Studio (Architect edition) and Windows Live division as a developer. Before that he was a developer consultant mainly involved in distributed service development / architecture. His main interests are distributed software architecture, patterns and practices and mobile device development.
 
Currently Ashish serves as a Technical Lead at RIM leading next generation BlackBerry media experience and also runs his own company MixModes Inc. specializing in .NET / WPF / Silverlight technologies. You can visit MixModes at http://mixmodes.com or follow it on Twitter @MixModes
 
In his free time he is an avid painter, hockey player and enjoys travelling. His blog is at: http://ashishkaila.serveblog.net
Follow on   Twitter

Comments and Discussions

 
GeneralHelp - Design time &quot;object reference not set to an instance of an object&quot; error Pinmembermchallis15-Jun-05 11:23 
GeneralRe: Help - Design time &quot;object reference not set to an instance of an object&quot; error PinsussAshish_Kaila17-Jun-05 2:28 
Ya since the xml file property is not set in the designer it throws a null exception. I also see another problem with height = 100% in ASP.NET 2.0. Try assigning xml schema and def filename in designer.
GeneralRe: Help - Design time &quot;object reference not set to an instance of an object&quot; error PinsussAnonymous17-Jun-05 2:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 11 Nov 2004
Article Copyright 2004 by Ashish Kaila
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid