Programming Microsoft ASP.NET 4 - Dino Esposito [272]
For a composite control, you don’t need to override the Render method, but it is recommended that you implement the marker interface INamingContainer to facilitate ASP.NET’s ability to recognize postback events caused by any child control.
Finally, a method that is worth mentioning regarding composite controls is EnsureChildControls. This method checks whether all child controls have been created and, if not, it re-creates them. How can the control know about that? It simply reads the value of the ChildControlsCreated Boolean property and calls CreateChildControls if all child controls haven’t been created. The following code snippet illustrates the behavior of EnsureChildControls:
protected virtual void EnsureChildControls()
{
if (!ChildControlsCreated)
{
try {
CreateChildControls();
}
finally {
ChildControlsCreated = true;
}
}
}
The SimpleGaugeBar Control
To get a grip on building new ASP.NET controls, let’s create a control with a limited state but a significant rendering engine. The control, named SimpleGaugeBar, is a simple, non-data-bound gauge bar that you can use to implement a rating system that represents the progress made for certain tasks. Generally, it can be used to give a friendly user interface to measurable quantities.
Defining the Object Model
A gauge control needs to have at least two properties—one to indicate the value being rendered, and one that provides the scale. In addition, you can also give users a chance to control the ruler and the descriptive text for the gauge. Table 12-2 lists the properties of a gauge control.
Table 12-2. Properties of the SimpleGaugeBar Control
Property
Description
FormatString
Formats the string that the control will render alongside the bar. The string can contain up to two placeholders. The first placeholder is set with the value; the second placeholder is set with the scale. The default string has the following form: {0} / {1}.
GridLines
Indicates whether vertical delimiters should be displayed to mark notches.
Maximum
Indicates the maximum value the gauge can represent. It’s set to 100 by default.
Segments
Indicates the number of notches to draw on the gauge ruler. It’s set to 4 by default.
Value
Indicates the value to represent. It’s set to 0 by default, and it cannot be higher than the scale.
The setter method of the Value property adjusts any value provided that exceeds the current Maximum. The value stored in Maximum is the highest value you can assign to Value. The format string should be formed using two parameters in a fixed order: Value and Maximum. In the format string, you can use any HTML formatting and even reference the parameters in the reverse order. The following code snippet shows possible ways of setting the format string:
GaugeBar1.FormatString = "{0} ({1})";
GaugeBar2.FormatString = "Maximum is {1}. Value is {0}";
The SimpleGaugeBar control has no methods and doesn’t fire any events.
Implementing the Object Model
Internally, the control renders the gauge using an HTML table. The Value and Maximum pair are translated as percentages, and the ruler is drawn using table cells. Figure 12-1 shows the control within the Microsoft Visual Studio designer.
Figure 12-1. The SimpleGaugeBar control in action in the Visual Studio designer.
The notches on the ruler are obtained simply by adding as many cells to the underlying table as there are units in the Segments property. The following listing shows the implementation of the control properties:
public class SimpleGaugeBar : CompositeControl
{
private int _dividerCell;
public SimpleGaugeBar()
{
}
// Gets and sets the value to represent in the gauge bar
public float Value
{
get
{
var o = ViewState["Value"];
if (o == null)
return 0;
return (float) o;
}
set
{
ViewState["Value"] = value;
if (value > Maximum)
ViewState["Value"] = Maximum;
}
}
// Gets and sets the maximum value representable in the gauge bar
public float Maximum
{
get
{
var o = ViewState["Maximum"];