Skip to main content

HTML Builder

Posted by evanx on January 25, 2007 at 5:31 AM PST

Having defined style objects in the
Hyper Style prequel,
we build an "HTML builder"
to generate HTML/CSS, eg. for this series
of articles using quitehyper.dev.java.net.

href="http://aptframework.dev.java.net/hyper/htmlBuilder.html">

border="0" width="32" height="32" align="left" hspace="8"/>
Click here to read "HTML Builder"

from the "Hyper Beans" part of a trilogy in 42 parts"

style="text-decoration: none;">



Code Snippet

public class QHyperArticleHtmlBuilder extends QHtmlBuilder {
    QStyle anchorStyle = createStyle("anchorStyle", a);
    QStyle sectionStyle = createStyle("sectionStyle", div);
    QStyle subsectionStyle = createStyle("subsectionStyle", div);
    ...   
    public String buildSubSectionHeading(String anchorName, String text) {
        return buildAnchorHeading(subsectionStyle, anchorName, text);
    }
   
    protected String buildAnchorHeading(QStyle divStyle,
            String anchorName, String text) {
        QMutableElement element = create(p);
        element.add(br);
        element.add(create(a, anchorStyle, name.create(anchorName)))
        .add(create(div, divStyle, text));
        return element.buildHtml();
    }

    public String buildLink(String url, String label) {
        QMutableElement element = create(a, anchorStyle, href.create(url));
        element.add(create(span, underlineStyle))
        .add(create(span, linkStyle, label));
        return element.buildHtml();
    }
}

where QHtmlBuilder defines the "immutable HTML elements" eg. pre, div, p, et al,
from which we create mutable elements, with attributes (eg. name, href, et al),
a given style ie. CSS class, child elements, and/or text content.

Besides HTML fragments for sections headings and what-not,
we get out the CSS text as follows.

<style>
pre.javaStyle {
  font-family: courier new, courier, mono;
  background-color: #fbfbfb;
  font-size: 11pt;
  width: 800px;
  border: dashed 1px;
  border-color: lightgray;
  padding-left: 4px;
}
...
</style>


style="text-decoration: none;">
style="text-decoration: none;">
style="text-decoration: none;">