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:
="1.0" ="utf-8"
="Toolbar" ="http://tempuri.org/Toolbar.xsd"
="qualified"
="http://tempuri.org/Toolbar.xsd"
="http://tempuri.org/Toolbar.xsd"
="http://www.w3.org/2001/XMLSchema"
="ToolbarButtonDef"
="Caption" ="xs:string" ="false"
="ImagePath" ="xs:string" ="false"
="Alt" ="xs:string"
="ToolbarGroupDef"
="Caption" ="xs:string" ="false"
="ToolbarButton" ="ToolbarButtonDef"
="Toolbar"
="ToolbarGroup" ="ToolbarGroupDef"
="ScrollUpImagePath" ="xs:string"
="images/scrollup.gif"
="ScrollDownImagePath" ="xs:string"
="images/scrolldown.gif"
And following is a sample XML file that passes the validation check:
="1.0" ="utf-8"
="WebService"
="Upload File" ="Images/4_47.gif"
="Upload Test File"
="Download File" ="Images/4_47.gif"
="Download Test File"
="Update Line" ="Images/schedule.gif"
="Update Line"
="Group2"
="Button3"
="Images/test.gif" ="Test Button"
="Button4"
="Images/test.gif" ="Test Button"
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)
{
switch (Group)
{
case 0:
switch (Button)
{
case 0:
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