Combo Control

Introduction

This is a control which will help to generate Tabs , Menus, Slider bars, and Tree views. Just in time dynamically from XML.

Sample screenshot

Background

We see many web pages with lots of controls. Most of the controls available in the market are quiet expensive and they do only one work (if it is a menu control we cant use for tab). This control has all the built in features including the security. For example, the user may want some of the items in the tab should be visible to a particular set of users say administrators and some less important to the common users. In that case this plays a important role.

This control is very easy to use. The control exposes some public properties to set the data, look 'n' feel and events for the panel. By setting these properties, the collapsible panel can be used to group information very nicely.

Using the code

The user control has four public properties:

Controltype = To mention the type of control (tab, tree, panel, menu).
Display = To set alignment of the control (only to Controltype =menu).
PageTitle = To set the pagetitle (only to Controltype = tab).
MainMenuSelected = To set the Main menu (only to Controltype = tab).
SubMenuSelected = To set the Submenu selected (only to Controltype = tab).
ImageUrl = To set the Image in the tree (only to Controltype = tree).

<%@ Register TagPrefix="CONTROL" Namespace="Controls" Assembly="FOURINONE"%>
 
// for tab
<CONTROL:FourinOne runat="server" PageTitle="Congress Type" Controltype="tab" 
 MainMenuSelected="2" SubMenuSelected="1" />
 
// for tree
<CONTROL:FourinOne runat="server" Controltype="tree" />
 
// for panel bar
<CONTROL:FourinOne runat="server" Controltype="panel" />
 
// for menu - horizontal
<CONTROL:FourinOne runat="server" Controltype="menu" Display="h" />
 
// for menu - vertical
<CONTROL:FourinOne runat="server" Controltype="menu" Display="v" />

For generating the menu, tree, panel, tab dynamically the xml should be of the form

<Menu>
 <MainMenu Label="Registration" BaseURL="SearchCongress.aspx" MenuID="8"
  MainSecurity="AM" MenuSequence="1" ImageUrl="xp_documents.gif">
  <SubMenu Label="Search" URL="SearchCongress.aspx" MenuID="8"
  Security="AM" SubMenuID="9" SubMenuSequence="1" ImageUrl="xp_documents.gif"/>
 <SubMenu Label="Add Company" URL="CompanyDetails.aspx" MenuID="8"  
  Security="A" SubMenuID="6" SubMenuSequence="4" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="New Order" URL="NewOrder.aspx" MenuID="8" Security="AM" 
  SubMenuID="7" SubMenuSequence="5" ImageUrl="xp_documents.gif"/>
 </MainMenu>
 <MainMenu Label="Maintenance" BaseURL="Congress.aspx" MenuID="6" 
  MainSecurity="A" MenuSequence="4" ImageUrl="xp_documents.gif">
   <SubMenu Label="Congress Type" URL="Congress.aspx" MenuID="6" Security="A" 
  SubMenuID="1" SubMenuSequence="1" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="Event Type" URL="EventType.aspx" MenuID="6" Security="A" 
  SubMenuID="2" SubMenuSequence="2" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="Sales Type" URL="SalesType.aspx" MenuID="6" Security="A" 
  SubMenuID="3" SubMenuSequence="3" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="Venue" URL="CongressVenue.aspx" MenuID="6" Security="A" 
  SubMenuID="4" SubMenuSequence="4" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="Office" URL="Office.aspx" MenuID="6" Security="A" 
  SubMenuID="6" SubMenuSequence="6" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="Sales Person" URL="SalesPerson.aspx" MenuID="6" Security="A" 
  SubMenuID="7" SubMenuSequence="7" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="Tax Rate" URL="TaxRate.aspx" MenuID="6" Security="A" 
  SubMenuID="8" SubMenuSequence="8" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="User" URL="User.aspx" Security="A" MenuID="6" 
  SubMenuID="9" SubMenuSequence="9" ImageUrl="xp_documents.gif"/>
   <SubMenu Label="Option Type" MenuID="6" URL="PriceOption.aspx" Security="A" 
  SubMenuID="10" SubMenuSequence="10" ImageUrl="xp_documents.gif"/>
 </MainMenu>
</Menu>

The MainSecurity attribute in the MainMenu node and Security attribute in the SubMenu node are used to implement the security in displaying the menu items.

To implement security in this control keep the UserType in the session for example (A for administrator) when the user logs on to the system. By comparing the value in session the security is implemented.

private bool isAuthorised(string sSecString, string sSecType){
  return(sSecString.IndexOf(sSecType)>=0);
 }

The isAuthorized method returns true if the user is authorized to view that page else it return 0. For exmple I have taken two users Administrator (A) and Moderator (M). I have mentioned the pages that can be viewed only my administrator as (A) and pages that can be viewed by both of them as (AM).

The menu can be configured using web.config.

      <add key="MenuXMLPath" value="/helper/" />
      <add key="MainMenuFontColor" value="#ffffff" />
      <add key="MainMenuShadowColor" value="#999999" />
      <add key="MainMenubGColor" value="#000088" />
      <add key="MainMenuMouseoverColor" value="#000088" />
      <add key="SubmenuBgColor" value="#cfd3d8" />
      <add key="SubmenuMouseoverColor" value="#ffffff" />
      <add key="SubmenuBorderColor" value="#0000cc" />
      <add key="SubmenuFontColor" value="#000000" />
      <add key="SubmenuMouseOverFontColor" value="#000000" />
      <add key="SubmenuShadowColor" value="#666666" />


 



Downloads

Comments

  • Thanks for your article

    Posted by zjroland on 04/14/2006 10:26pm

    This artilce really helped me. I have been looking to do the same as i can see this on my web site. I run Outsourcing software development website - which help you outsource software development to India,China or other countries, find freelance programmers and web designers all over the world.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: February 12, 2015 The evolution of systems engineering with the SysML modeling language has resulted in improved requirements specification, better architectural definition, and better hand-off to downstream engineering. Agile methods have proven successful in the software domain, but how can these methods be applied to systems engineering? Check out this webcast and join Bruce Powel Douglass, author of Real-Time Agility, as he discusses how agile methods have had a tremendous …

  • The mobile market is white hot. Building a well-crafted product development plan that addresses market research, strategy, design, and development will provide the greatest chance for success. Each phase of an app's lifecycle is critical to the its overall success and feeds into the next step of the process of product development for the app. This white paper examines the five key phases of mobile app creation, one by one, to understand how they work together to help create a successful mobile app.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date