tags:

views:

441

answers:

6
+3  Q: 

Techniques for building HTML in code.

An html template is compiled into the application as a resource. A fragment of the HTML template looks like:

<A href="%PANELLINK%" target="_blank">
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
</A><BR>
%CAPTIONTEXT%

i like it like this because the larger resource HTML file contains styling, no-quirks mode, etc.

But as is always the case, they now want the option that the Anchor tag should be omitted if there is no link. Also if there is no caption, then the BR tag should be omitted.

Considered Technique Nº1

Given that i don't want to have to build entire HTML fragments in C# code, i considered something like:

%ANCHORSTARTTAGPREFIX%<A href="%PANELLINK%" target="_blank">%ANCHORSTARTTAGPOSTFIX%
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
%ANCHORENDTAGPREFIX%</A>%ANCHORENDTAGPOSTFIX%CAPTIONPREFIX%<BR>
%CAPTIONTEXT%%CAPTIONPOSTFIX%

with the idea that i could use the pre and postfixes to turn the HTML code into:

<!--<A href="%PANELLINK%" target="_blank">-->
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
<!--</A>--><!--<BR>
%CAPTIONTEXT%-->

But that is just rediculous, plus one answerer reminds us that it wastes bandwith, and can be buggy.

Considered Technique Nº2

Wholesale replacement of tags:

%AnchorStartTag%
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
%AnchorEndTag%%CaptionStuff%

and doing a find-replace to change

%AnchorStartTag%

with

"<A href=\"foo\" target=\"blank\""

Considered Technique Nº3

i considered giving an ID to the important HTML elements:

<A id="anchor" href="%PANELLINK%" target="_blank">
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
</A><BR id="captionBreak">
%CAPTIONTEXT%

and then using an HTML DOM parser to programatically delete nodes. But there is no easy access to a trustworthy HTML DOM parser. If the HTML was instead xhtml i would use various built-in/nativly available xml DOM parsers.

Considered Technique Nº4

What i actually have so far is:

private const String htmlEmptyTemplate = 
    @"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01//EN\"""+Environment.NewLine+
    @"   ""http://www.w3.org/TR/html4/strict.dtd""&gt;"+Environment.NewLine+
    @"<HTML>"+Environment.NewLine+
    @"<HEAD>"+Environment.NewLine+
    @"  <TITLE>New Document</TITLE>"+Environment.NewLine+
    @"  <META http-equiv=""X-UA-Compatible"" content=""IE=edge"">"""+Environment.NewLine+
    @"  <META http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"">"+Environment.NewLine+
    @"</HEAD>"+Environment.NewLine+
    @""+Environment.NewLine+
    @"<BODY style=""margin: 0 auto"">"+Environment.NewLine+
    @"  <DIV style=""text-align:center;"">"+Environment.NewLine+
    @"   %ContentArea%"+Environment.NewLine+
    @"  </DIV>" + Environment.NewLine +
    @"</BODY>" + Environment.NewLine +
    @"</HTML>";

private const String htmlAnchorStartTag = 
    @"<A href=""%PANELLINK%"" target=""_blank"">";

//Image is forbidden from having end tag
private const String htmlImageTag = 
    @"<IMG border=""0"" src=""%PANELIMAGE%"" style=""%IMAGESTYLE%"">";

private const String htmlCaptionArea =
    @"<BR>%CAPTIONTEXT%";

And i already want to gouge my eyeballs out. Building HTML in code is a nightmare. It's a nightmare to write, a nightmare to debug, and a nightmare to maintain - and it will makes things difficult on the next guy. i'm hoping for another solution - since i am the next guy.

+11  A: 

My reputation points in this game already being low gives me the freedom to tell you quite plainly that you, sir or madame, are in serious need of XSLT. Failing this (and you probably will) you need to look at XML literals in VB.NET (which provides you with the template-based solution you are looking for...). Since I prefer to stay in C# (even though I was born and raised on VBA), I use XSLT.

Both of my unwelcome recommendations require the use of XHTML instead of HTML. This requirement alone is quite a turn off to many traditional developers. I can already see through your use of capital letters for HTML elements that you will find my remarks utterly useless. So I should stop writing now.

rasx  2008-12-17 20:48:02
i'll use an xml-based solution as soon as the situtation starts using xhtml
Ian Boyd  2008-12-17 20:50:46
XHTML is no requirement at all. See my solution.
Tomalak  2008-12-17 21:07:14
you'll get +1 for XSLT and I'd give you another for the humour if I could
annakata  2008-12-17 21:09:38
+1 for XSLT, one of the most appropriate tools for the job IMHO
seanb  2008-12-17 21:16:27
You have +1 from me for the humour :). I am complementing the point by annakata, Of course, XSLT is the most powerful, natural and appropriate tool for generation of HTML.
Dimitre Novatchev  2008-12-20 04:10:43
Yes guys I look forward to Microsoft supporting XSLT 2.0!
rasx  2009-01-07 19:46:54
A: 

1.) Don't use comments, you'll send useless data to the browser wasting bandwidth and encountering BUGs in IE.

2.) Would this not be better as some sort of method? (I'm not familiar with C#) but something like this makes more sense to me.

//using PHP in this example
function HTMLImage($imageData, $linkData){
  var str = '';
  //if there is link data, start <a> tag
  $str .= '<a '.{expand any attributes}.'>';

  //add image tag and attributes from $imageData
  $str .= '<img '.{expand any attributes}.'/>';

  //if there is link data, close <a> tag
  $str .= '</a>';
  return $str;
}
scunliffe  2008-12-17 20:48:53
i just updated my original question, i do have something like that - and something like that is what i'm trying desperately to avoid.
Ian Boyd  2008-12-17 20:54:25
+2  A: 

What about this: Store XML as your fragment:

<fragment type="link_img_caption">
  <link href="%PANELLINK%" />
  <img src="%PANELIMAGE%" style="%IMAGESTYLE%" />
  <caption text="%CAPTIONTEXT%" />
</fragment>

Pull it out, replace the placeholders with the "real" strings (that you have carefully XML-escaped of course),

...and use a simple XML transformation to produce HTML output:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  <xsl:output method="html" version="4.0" encoding="iso-8859-1" indent="yes"/>

  <xsl:template match="/">
    <xsl:apply-templates select="fragment" />
  </xsl:template>

  <xsl:template match="fragment[@type = 'link_img_caption']">
    <xsl:choose>
      <xsl:when test="link[@href != '']">
        <a href="{link/@href}" target="_blank">
          <img src="{img/@src}" style="{img/@style}" border="0" />
        </a>
      </xsl:when>
      <xsl:otherwise>
        <img src="{img/@src}" style="{img/@style}" border="0" />
      </xsl:otherwise>
    </xsl:choose>
    <xsl:if test="caption[@text !='']">
      <br />
      <xsl:value-of select="caption/@text" />
    </xsl:if>
  </xsl:template>

</xsl:stylesheet>

Other fragment types could be added because of the type attribute. There is much room to improve this, so look at it as an example of how it could be done.

Output:

<a href="%PANELLINK%" target="_blank">
  <img src="%PANELIMAGE%" style="%IMAGESTYLE%" border="0">
</a>
<br>
%CAPTIONTEXT%

and, if the link href is empty in the XML:

<img src="%PANELIMAGE%" style="%IMAGESTYLE%" border="0">
<br>
%CAPTIONTEXT%
Tomalak  2008-12-17 21:06:38
This seems like something that would work, although a) xslt isn't very friendly for web-developer to write b) i assume it would take me two or three days to adapt it to my situation c) can xslt output full html, including a doctype?
Ian Boyd  2008-12-17 21:33:09
Because although i am familiar with xslt, i am not familiar to the extent to understand anything that you wrote - and the half-hour change is now on hour three.
Ian Boyd  2008-12-17 21:34:19
You sounded like in need for a general solution, and this is as general as it gets for this task. Depending on your codebase, this will take it's time to implement, even more so since you seem to be relatively new to XSLT. Oh and yes, XSLT can output doctypes as well, if you tell it to do so.
Tomalak  2008-12-17 21:45:09
Although i will not use this in this case - because i don't have the time to learn all of XSLT, it probably is a good solution in general.
Ian Boyd  2008-12-19 16:56:09
A: 

I would use Template Toolkit, unfortunately it is currently only implemented in Perl and Python.

test.pl:

use Template;

my $template = Template->new({
  VARIABLES => {
    ImageStyle  => "default",
    CaptionText => "Place Caption Here"
  },
});

$template->process( 'test.tt', {
    panel => {
      link  => "http://Stackoverflow.com/",
      image => "/Content/Img/stackoverflow-logo-250.png",
      alt   => "logo link to homepage"
    }
} );

test.tt:


[% IF panel.link -%]
<A href="[% panel.link %]" alt="[% panel.alt %]" target="_blank">
[%- END -%]

[%- IF panel.image -%]
   <IMG border="0" src="[% panel.image %]" style="[% ImageStyle %]">
[%- END -%]

[%- IF panel.link %]</A>[% END %]<BR>
[% CaptionText %]
##Outputs: 
<A href="http://Stackoverflow.com/" alt="logo link to homepage" target="_blank">
   <IMG border="0" src="/Content/Img/stackoverflow-logo-250.png" style="default">
</A><BR>
Place Caption Here

If the variable panel.link isn't defined it skips the anchor tags.

   <IMG border="0" src="/Content/Img/stackoverflow-logo-250.png" style="default">
<BR>
Place Caption Here
Brad Gilbert  2008-12-17 23:08:34
I can't get this to highlight the way I want.
Brad Gilbert  2008-12-24 21:00:06
+2  A: 

Use a templating engine, like one of these.

Mauricio Scheffer  2008-12-17 23:12:36
A: 

Templates are a serious code smell. Take a look at how Seaside generates html.

[Edit] Another one where someone without a clue downvoted.

Stephan Eggermont  2008-12-24 21:20:06
Well, your answer is a bit short, you might want to detail that it's a DSL, a builder pattern, that refactorings works on it, etc :)
Damien Pollet  2009-04-25 20:07:48

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?