Minimal

HtmlCanvas html = new HtmlCanvas();
html
  .html()
    .body()
      .h1().content("renderSnake it")
    ._body()
  ._html();
<html><body><h1>renderSnake it</h1></body></html>

Table

  html
  .table(class_("city-table"))
    .tr()
      .th().content("City")
      .th().content("Country")
      ._tr()
    .tr()
      .td().content("Amsterdam")
      .td().content("The Netherlands")
      ._tr()
  ._table();
CityCountry
AmsterdamThe Netherlands

Full Source

GotoTop link

public class GotoTop implements Renderable {

    public void renderOn(HtmlCanvas html) throws IOException {
        html.a(href("#top").class_("toplink")).content("top");
    }
}

Insert Javascript

By writing the Javascript source using write. The second parameter (here false) means no HTML escape needed.

html
	.script(type("text/javascript"))
	.write("SyntaxHighlighter.all();",false)
	._script();

Or using a StringResource for getting (and caching) the Javascript source from a resource file.

html
	.script(type("text/javascript"))
	.render(new StringResource("/js/highlight.js",false))
	._script();

Encapsulate a Javascript library

public class SyntaxHighlighterLibary implements Renderable {

    public void renderOn(HtmlCanvas html) throws IOException {
        html.macros().javascript("/js/shCore.js"));
        html.macros().javascript("/js/shBrushJScript.js"));
        html.macros().stylesheet("/js/shBrushJava.js"));
        html.macros().stylesheet("/shCore.css"));
        html.macros().stylesheet("/shThemeDefault.css"));
    }
}

Head component

public class Head implements Renderable {

    public void renderOn(HtmlCanvas html) throws IOException {
        
        html
            .head()
                .title().content(canvas.getPageContext().getString("title"))
                .meta(name("description").add("content","renderSnake documentation and examples",false))
                .macros().stylesheet("htdocs/style-01.css"))
                .render(JQueryLibrary.core("1.4.3"))
                .render(JQueryLibrary.ui("1.8.6"))
                .render(JQueryLibrary.baseTheme("1.8"))
            ._head();            
    }
}

Footer component

public class Footer implements Renderable {

    public void renderOn(HtmlCanvas html) throws IOException {
        html
            .div(id("footer"))
                .write("Copyright © renderSnake.org |",false)
                .a(href("http://www.html5webtemplates.co.uk"))
                     .content("design from HTML5webtemplates.co.uk")
            ._div()
            .render(new GoogleAnalyticsTracker());
    }
}

Image Helper component

Capture a recurring HTML snippet into a component in which you define the defaults. In this example, all icon images have the same location, width and height.

public class IconImage implements Renderable {

    public HtmlAttributes attributes = new HtmlAttributes();
    
    public IconImage(String name) {
        super();
        this.attributes
            .src("/static/images/icons/" + name)
            .width("16")
            .height("16");
    }
    public void renderOn(HtmlCanvas html) throws IOException {
        html.img(attributes);
    }  
    public IconImage alt(String alt) {
        this.attributes.alt(alt);
        return this;
    }              
}

Now you can use this component for rendering on a canvas.

html.render(new IconImage("tool_tip.png").alt("happy")))

And the following HTML is produced.

<img src="/static/images/icons/tooltip.png" width="16" height="16" alt="happy"/>

Login Form

This component implements Renderable for displaying the Form, FormValidator to validate incoming data and FormHandler to process the validated data.

html
  .form(action("/login").method("post"))
	  .label(for_(ID_USERNAME)).write("Username")._label()
	  .input(id(ID_USERNAME).name(VAR_USERNAME).value(username))

	  .label(for_(ID_PASSWORD)).write("Password")._label()
	  .input(type("password").id(ID_PASSWORD).name(VAR_PASSWORD).value(password))

	  .input(type("submit").value("Log me in"))
  ._form();
  


Full Source

Include static content

Place static content in resource files which can be loaded and cached by StringResource. In the example below, the famous Google tracker script is loaded and written on the canvas. The NO_ESCAPE (false) parameter says that the content will not be HTML-escaped. A StringResource can be used for any content, HTML, Javascript, CSS or plain text.

public class GoogleAnalyticsTracker implements Renderable {

    public void renderOn(HtmlCanvas html) throws IOException {
        String host = RequestUtils.getHeaderValue(html, "HOST");
        if(host.startsWith("localhost"))
            return;
        html.write(StringResource.get("content/googletracker.js"),NO_ESCAPE);      
    }
}

Full source of this page