Rendering child styles
I actually had the joy of writing code these last few days -- creating a simple prototype RSS Viewer control for ASP.NET.
For a while, there was no joy, however. I had a number of Styles exposed as properties of my control, and they weren't being used -- I couldn't get them to render properly. For the record, they looked like this:
[Bindable(true),
Category("Style"),
Description("Style to be applied to the title for each weblog.")]
public Style BlogTitleStyle {
get { return _blogTitleStyle; }
set { _blogTitleStyle = value; }
}
Similarly, my attempts in the Render were being ignored.
writer.AddAttribute(HtmlTextWriterAttribute.Valign, "top");
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
WRITER.ADDATTRIBUTE(HTMLTEXTWRITERATTRIBUTE.STYLE, this.BlogTitleStyle.ToString(),true);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
The first problem was solved with more attributes on the property:
[Bindable(
true),
Category("Style"),
Description("Style to be applied to the title for each weblog."),
DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
NotifyParentProperty(true),
PersistenceMode(PersistenceMode.InnerProperty)]
public Style BlogTitleStyle {
get { return _blogTitleStyle; }
set { _blogTitleStyle = value; }
}
This caused the child property -- BlogTitleStyle -- to insert itself into the Server control as a child element:
<aspnetdc:RssView id="RssView4" style="Z-INDEX: 101; LEFT: 40px; POSITION: absolute; TOP: 80px" runat="server"
Width="849px" Height="416px" RssUrl="http://weblogs.asp.net/ksharkey/rss.aspx" ShowDescription="True">
<BlogTitleStyle Font-Size="Large" Font-Overline="True" Font-Names="Verdana" Font-Bold="True" Height="64px"></BlogTitleStyle>
<EntryTitleStyle Font-Size="Large" Font-Names="Tahoma" Font-Bold="True"></EntryTitleStyle>
<BlogDescriptionStyle Font-Names="Verdana" Font-Italic="True" Font-Bold="True" BackColor="#C0FFC0"></BlogDescriptionStyle>
<EntryDateStyle Font-Size="X-Small" Font-Names="Verdana"></EntryDateStyle>
</aspnetdc:RssView>
However, the styles were still not rendering in the final output. This was fixed by asking the style to render itself:
writer.AddAttribute(HtmlTextWriterAttribute.Valign, "top");
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
this.BlogTitleStyle.AddAttributesToRender(writer, this);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
BlogTitleStyle.AddAttributesToRender converts itself to a style upon the render (depending on the incoming browser, of course):
<td style="font-family:Verdana;font-size:Large;font-weight:bold;text-decoration: overline;height:64px;">Kent Sharkey's blog</td>
So, to summarize:
- Mark your child properties with DesignerSerializationVisibilityAttribute.Content to serialize their content into the parent's tag.
- Mark your child properties with NotifyParentPropertyAttribute to get it to reflect automatically.
- Render styles by asking them nicely to render themselves
And I suppose the main lesson is by using writer.Render instead of writer.Write(“<td>some text</td>”), you can reduce the browser compatibility issues, as the writer will render based on the incoming browser.
TTFN - Kent
[Listening to: Chicken Farm by The Dead Kennedys]
