Improved Rendering in Padarn

Every time we start a new project using our Padarn Web Server, I always like to see if we can improve the server’s capabilities to make our job a little easier.  On the last project that turned into adding custom IHttpHandler support so we could easily serve up REST-based web services.


Well we started a new project last week, and unlike the last one, this one is UI-focused (the last one used Padarn strictly for services).  With that in mind, I went about looking at how to improve and simply building pages.


Of course I came back to our lack of support for server controls.  I did a little more playing and decided once again that it’s a gigantic amount of work and it requires a boatload of RegEx and string manipulation – not necessarily a recipe for success on a low-memory, slow-CPU Windows CE device.


Still, there had to be other thing that full-blown ASP.NET offers that would be reasonable to add and that would help.  The existing samples we’d created in the past used overrode Page_Load method and then went about doing Response.Writes to emit page code.  The first time I did it I found it painful, so I created a class library that had objects for a lot of the basic HTML constructs and used that to at least help in generating well-formed code.


Still, I didn’t really like the object model – it was still way too verbose – and it wasn’t really like what anyone does on the desktop.  Additionally, rending in Page_Load really didn’t feel right.


So I started looking around and found that the ASP.NET Page class provides a Render method.  That sounds a lot more like where I should be, oh maybe *rendering* a page.  Of course it required implementing the HtmlTextWriter, but that wasn’t too terrible.


Once I implemented the Render method and started using the HtmlTextWriter, I quickly concluded that it, too, really sucked for generating page code.  It’s just crazy verbose, it doesn’t read anything like the page you’re attempting to render and it’s got things that just feel plain wrong (like having to add attributes before the tag they apply to? WTF is that?).


So I started looking at how ASP.NET developers who render their own controls with this monstrosity got around in.  It turns out that there is a pretty nice fluent interface to the HtmlTextWriter available on CodePlex.  It was missing a lot of stuff that I needed (and had a load of non-HtmlTextWriter stuff I didn’t need), but it was a great start.  So after expanding the object model there I can now render a page in something that doesn’t give me quite so much heartburn.


What originally looked like this:


protected override void Page_Load(object sender, EventArgs e)
{
  Response.Write(DoctypeTags.XHTML1);

  Response.Write(“<html xmlns=”http://www.w3.org/1999/xhtml”>&#8221;);
  Response.Write(“<head>”);
  Response.Write(“<link rel=”stylesheet” type=”text/css” href=”css/mystyle.css” />”);
  Response.Write(“</head>”);

  Response.Write(“<body>”);

  Response.Write(“<h1>”);
  Response.Write(“Hello World!”);
  Response.Write(“</h1>”);

  Response.Write(“</body>”);
  Response.Write(“</html>”);
  Response.Flush();
}


Ends up looking more like this:


protected override void Render2(HtmlTextWriter writer)
{
  writer.Write(DoctypeTags.XHTML1);

  writer
    .Tag(HtmlTextWriterTag.Html, t => t[“xmlns”, http://www.w3.org/1999/xhtml&#8221;])

      .Tag(HtmlTextWriterTag.Head)
        .StylesheetLink(“/css/mystyle.css”)
      .EndTag() // head

      .Tag(HtmlTextWriterTag.Body)
        .H1(“Hello World!”)
      .EndTag() // body
    .EndTag(); // html
}


And it gets much cleaner looking the larger the page is.  I also find I’m doing a lot less searching for where I malformed my HTML.


I think the next Item I’ll look into is the __doPostBack Javascript method that IIS injects into pretty much every page.  It’s probably the next incremental step toward better productivity.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s