Custom Control: Organizing Properties

[Redth]

Hello,

I'm creating a custom control, which will require a very long list of different properties for it...

Now, to keep things organized and easy for both me and the user using this control, i would like to sort of try and group these properties into sub tags in my control's tag...

these are my properties:

Table
    Display
        BorderWidth     '//Width of border around whole table
        Width           '//Width
        Height          '//Height
 
    Colors
        BorderColor     '//Color of border around whole table
        BGColor         '//Background Color of whole table
        
 
 
Header
    Display
        ShowHeader      '//Determines if header is shown
        BorderWidth     '//Width of Border of table around whole header
        ShowNextButton      '//Show a Next Month Button
        ShowPrevButton      '//Show a Previous Month Button
        ShowMonthDropDown   '//Show the DropDownList for months (false shows a plain text month on)
        NextButtonText      '//Caption of button for Next Month
        PrevButtonText      '//Caption of button for Previous Month
        Width           '//Width
        Height          '//Height
            
    
    Colors
        BorderColor     '//Border Color of entire table around header
        BGColor         '//Background Color of entire header table
 
    Fonts
        Face            '//Font Face
        Size            '//Font Size
        Color           '//Font Color
        Align           '//Alignment of Font
        VAlign          '//Verticle Alignment of Font
        Bold            '//Font Bold
        Italic          '//Font Italic
        Underline       '//Font Underline
 
 
DaysOfWeek
    Display
        ShowDaysOfWeek      '//Shows the days above the columns
        ShowDayNumbers      '//Shows the day number 
        StartingDayOfWeek   '//Number 1 is sunday, 7 is saturday for which the week starts on
        BorderWidth     '//Width of Border around whole table
        CellBorderWidth     '//Width of border of each individual cell
        
        
    Colors
        BorderColor     '//Color of border around whole DaysOfWeekTable
        BGColor         '//Background of entire daysofweek table
        CellBorderColor     '//Color of border around each cell
        CellBGColor     '//Background color of each cell
        
    Fonts
        Face            '//Font Face
        Size            '//Font Size
        Color           '//Font Color
        Align           '//Font Alignment
        VAlign          '//Font Verticle Alignment
        Bold            '//Font Bold
        Italic          '//Font Italic
        Underline       '//Font Underline
 
 
Calender
    Display
        ShowDayNumbers      '//Shows the number 
        EventsPerDay        '//Number of events shown in a cell before it links to more...  
        BorderWidth     '//Width of cell's border
        CellWidth       '//Width of Cell
        CellHeight      '//Height of Cell
        
 
    Colors
        BorderColor     '//Cell's Border Color
        BGColor         '//Cell's Background Color
 
    DayNumberFont
        Face            '//Font Face
        Size            '//Font Size
        Color           '//Font Color
        Align           '//Font Alignment
        VAlign          '//Font Verticle Alignment
        Bold            '//Font Bold
        Italic          '//Font Italic
        Underline       '//Font Underline
    
    EventFont
        Face            '//Font Face
        Size            '//Font Size
        Color           '//Font Color
        Align           '//Font Alignment
        VAlign          '//Font Verticle Alignment
        Bold            '//Font Bold
        Italic          '//Font Italic
        Underline       '//Font Underline
 
 
Footer 
    Display
        ShowHeader      '//Determines if header is shown
        BorderWidth     '//Width of Border of table around whole header
        ShowNextButton      '//Show a Next Month Button
        ShowPrevButton      '//Show a Previous Month Button
        ShowMonthDropDown   '//Show the DropDownList for months (false shows a plain text month on)
        NextButtonText      '//Caption of button for Next Month
        PrevButtonText      '//Caption of button for Previous Month
        Width           '//Width
        Height          '//Height
            
    
    Colors
        BorderColor     '//Border Color of entire table around header
        BGColor         '//Background Color of entire header table
 
    Fonts
        Face            '//Font Face
        Size            '//Font Size
        Color           '//Font Color
        Align           '//Alignment of Font
        VAlign          '//Verticle Alignment of Font
        Bold            '//Font Bold
        Italic          '//Font Italic
        Underline       '//Font Underline

now, as you can see, the list is quite lengthy, and i've already divided them into sort of subsections....

this is sort of how i'd like to allow the user to use the control:

<MyControl:Calender Runat="Server">
    <MyControl:CalenderTable BorderWidth="1" BorderColor="#000000" />
    <MyControl:CalenderHeader properties here... />
    <MyControl:CalenderDaysOfWeek properties here... />
    <MyControl:CalenderDays properties here... />
    <MyControl:CalenderFooter properties here... />
</MyControl:Calender>

Not sure if you understand what i mean with this example, but i'm just trying to organize things easier so the user using this control can easily set properties without having them all in the <MyControl:Calender Runat="Server" /> Tag, and thus forcing huge property names...

I'm more than open to any suggestions of other means of setting this up.. this was just what i came up with, by no means is it what i am stuck on going with...

i appreciate the input!

[Patoooey]

Got enuf properties there ???

Anyway....you need to create a ControlBuilder and override AddParsedSubObject to handle nested controls like that. I just got into that part of making controls, so the following might not be the most efficent or complex, but it does work. I change some of the property names so you could follow it better.

using System;
using System.Collections;
using System.Web;
using System.Web.UI;

namespace JWM.WebControls
{
                 public class CustomControlBuilder : ControlBuilder 
	{

		public override Type GetChildControlType(String tagName, IDictionary attributes) 
		{
			if (String.Compare(tagName, "CalendarTable", true) == 0) 
			{
				return typeof(JWM.WebControls.CalTable);
			}
			if (String.Compare(tagName, "CalendarFooter", true) == 0) 
			{
				return typeof(JWM.WebControls.CalFooter);
			}
			return null;
		}
	}

	[ControlBuilderAttribute(typeof(CustomControlBuilder))]
	public class CB : Control 
	{

		private ArrayList _items         = new ArrayList();
		private JWM.WebControls.CalTable ct = new CalTable();
		private JWM.WebControls.CalFooter cf = new CalFooter(); 

		protected override void AddParsedSubObject(Object obj) 
		{
			if (obj is JWM.WebControls.CalTable) 
			{
				ct.BorderColor = ((JWM.WebControls.CalTable)obj).BorderColor;
				ct.BorderWidth = ((JWM.WebControls.CalTable)obj).BorderWidth;
			}
			if (obj is JWM.WebControls.CalFooter) 
			{
				cf.ShowNextButton = ((JWM.WebControls.CalFooter)obj).ShowNextButton;
			}
		}

		protected override void Render(HtmlTextWriter output) 
		{
			output.Write("Border Color = " + ct.BorderColor + "<br>");
			output.Write("Border Width = " + ct.BorderWidth + "<br>");
			output.Write("ShowNextButton = " + cf.ShowNextButton + "<br>");
		}
	}    
	public class CalTable : Control 
	{
		private Int32 _borderWidth;
		private String _borderColor;

		public Int32 BorderWidth 
		{
			get 
			{
				return _borderWidth;
			}
			set 
			{
				_borderWidth = value;
			}
		}
		public String BorderColor
		{
			get 
			{
				return _borderColor;
			}
			set 
			{
				_borderColor = value;
			}
		}
	}
	public class CalFooter : Control 
	{
		private bool _showNextButton;

		public bool ShowNextButton 
		{
			get 
			{
				return _showNextButton;
			}
			set 
			{
				_showNextButton = value;
			}
		}
	}
}

Place that in a WebControl....compile it and add a WebApp to the project. The add the control to the Page and change the HTML to:

<cc1:CB id="CB1" runat="server">
    <CalendarTable BorderWidth="5" BorderColor="Pink"/>
    <CalendarFooter ShowNextButton="true" />
</cc1:CB>

The render part of the control is very simple. It just outputs the properties you set. The cc1 part might need to be changed.

HTH
John