RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Custom Web Controls Demystified, Part 2 : Page 5

In Part 1 you learned how to build a custom rendered control. In Part 2 you'll learn how to build a composite control.

Rendering Styles
Unlike the composite control I'll show you how to develop later (yes, can you believe there's more?), you need to turn the properties of the Style object into HTML properties that will get rendered into the tag. Since I stated that I'll only demonstrate the CaptionStyle property, the tag that you need to add attributes for is the "span" tag that gets rendered as a control's caption.


   If Me._CaptionStyle.Font.Name <> "" Then
      output.AddStyleAttribute( _
         HtmlTextWriterStyle.FontFamily, _
   End If
   output.AddAttribute( _
      HtmlTextWriterAttribute.Class, _
   If Me._CaptionStyle.Font.Bold Then
      output.AddStyleAttribute( _
      HtmlTextWriterStyle.FontWeight, "bold")
   End If
In C#:

   if(this._CaptionStyle.Font.Name != "")
      HtmlTextWriterStyle.FontWeight, "bold");
As in the previous code examples where you have added to the rendering of your control, I've shown you the RenderBeginTag statement so you can see where the code is placed within the Render method.

Note how the control uses the AddStyleAttribute method. As in the case of the "width" style, elements need to be rendered as part of the HTML "style" attribute, not as attributes of the "span" tag. The exception to this is the Style object's CssClass property which maps to the Class attribute in HTML.

I want to touch on something I mentioned when you began to develop this control. If you recall, you made the FormField class inherit from the WebControl class because I said it adds more styling ability than the Control class. The styling I'm referring to is accessible directly from the FormField class. I explained that the Style object contains properties such as Font, BackColor, CssClass, etc., and that these are accessible to any of the three styles your control contains. If you drop a FormField control on a page and examine its properties in the Visual Studio Property Browser, you'll notice these "style" properties in the "Appearance" category of the Property Browser. These are the result of inheriting from the WebControl class and affect the way the FormField control looks in the context of a container of other elements. The CaptionStyle property affects the caption and the FieldStyle property affects the textbox, but both of these are still contained within the Web control's class, the actual custom Web control, and this "container" can have styling as well. Just like you can set the border-style of the caption or the button through the CaptionStyle property, you can use the BorderStyle property built into the FormField control itself to alter the border of the control as a whole. This can give you even more visual versatility and more reusability for the control.

Unfortunately, rendering all the properties of the Style object to each of three tags can be a bit of code. But remember, the point of writing a rendered control is to get the most performance during the rendering time, and sometimes performance gains require programming "lower-level," fine-grain programming. (Are there any old assembler people out there?). In the finished control, I've refactored this into a method that gets called during the rendering of each HTML element.

I want to add one more thing to this control. By decorating the control's class with the ValidationProperty attribute, you can assign an existing property to serve as that which gets checked by any Form validators the Web Form developers want to use. The constructor of the attribute takes the name of the property, which for these purposes will be the Text property.

Now the FormField control is fully compatible with the validation controls that ship with Visual Studio. This brings me back to something I mentioned in Part 1 of this article. The textbox element in this control received a value in its ID and Name attributes that was the same as that of the actual Web control. When you use a validator control on a Web Form, the JavaScript creates links to the validation code with an HTML element. This link is made using the ID of the Web control being validated. If all the internal elements of a Web control have a hierarchical naming scheme, the validation code will not be tied to anything on the rendered HTML page. It is for that reason that the textbox element retains the same name as the Web control that contains it. The <input> tag that is rendered later to represent the textbox gets validated by the JavaScript code generated by the validator used.

Well, you've finished the FormField control. Play around with this and I think you'll find this control very useful in your Web forms. But wait, there's more!

The downloadable code contains a finished version of this control with much more functionality than what I've had time to show you how to create here. Here's a list of just some of the features in the final FormField control:

  • Variable button location where the button can be placed on the left or right of the textbox. If the caption is turned off (CaptionVisible property), the button can be placed on the left of the textbox and serve as a clickable caption.
  • The caption can be placed either to the left of the control or above it, giving you maximum flexibility for creating data-entry forms.
  • The TextMode can be set so that control can be used as a single-line textbox, a multi-line, or a password field. This actually affects whether the textbox gets rendered as an "input" tag or a "textarea" tag.
  • Our button has the same 'confirmation message' feature as in the inherited control we developed earlier has.
  • Validation capability, including field requirement and regular expression validation.
  • The control can be set to automatically convert the text in the textbox to upper or lower case when the focus leaves.
  • Vertical and Horizontal alignment for each of the elements within its own space. This allows the control to display a large, multi-line textbox with the caption still appearing vertically aligned with the top. This is accomplished by rendering table elements around the tags you created here.
One other very cool feature that the finished product has is an extra style property called ReadOnlyFieldStyle. This style gets applied to the internal textbox based on the value of another property called ReadOnly. The beauty here is that you can set two styles to the text field and toggle between the two simply by changing the value of the ReadOnly property, which incidentally also locks the textbox so its value cannot be edited. Check out the pictures of the FormField control in action shown in Figure 2 and Figure 3. Keep in mind that these are the same control type, though they look drastically different.

Figure 2. Control Styling: You might use this style for the EmailContact control on a blog for posting feedback. This style for the EmailContact control can be used on a blog for posting feedback for blog postings.
During the creation of the FormField control, you have essentially duplicated the functionality that is provided by ASP.NET's Label, Textbox, and Button Web Controls (and in the final version, the LinkButton as well). Because of the nature of rendered controls and their ultimate goal of rendering speed, using instances of the existing ASP.NET controls is not possible. The exact opposite is the case with composite controls as you will soon see.

It's not safe to come back into the water yet. You have one more control to develop. The EmailContact composite control will leverage both the ConfirmationButton and FormField button. This control will be developed differently but will repeat many of the same techniques you've learned thus far. When I talk about creating properties or styling or state management, I will not be including too much detail as they would be handled the same as I explained them before.

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