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
If Me._CaptionStyle.Font.Bold Then
if(this._CaptionStyle.Font.Name != "")
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
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
, 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
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.