Tutorial - hypirinha - fluent interface library for generating html

Tutorial

Featured, Examples, Tutorial, Top

Updated May 31, 2009 by alistair...@gmail.com

This is a basic tutorial on generating HTML using Hypirinha.

First steps

Add hypirinha to your classpath
Import some classes
Create an element
Choose an adapter
Hello world

Building a document

Calling a method on an element creates a child element and returns that new child element
Parameters passed to any method call are attributes for the element being created
Special method text adds text node to element
Special method contains adds existing elements as children
Iteration works well with standard java control sructures
Elements work well as method return values

First steps

Add hypirinha to your classpath

Download the latest release version from the downloads tab. Add it to your application's classpath. Hypirinha has no runtime dependencies other than what comes as standard with Java 5 or above, so you don't need to download anything else.

However, you may find it useful to also download the source jar and configure your IDE to use it when you drill down into the compiled classes.

Import some classes

Choose a new or existing class and add the following imports to the top of the file. These wildcard imports cover all of the types and methods in the rest of this page.

import static org.hypirinha.html.AttributeFactory.*;
import static org.hypirinha.html.ElementFactory.*;
import org.hypirinha.html.elements.*;
import org.hypirinha.html.output.PrintAdapter;

Create an element

The first step in creating markup is to create a root element. For convenience, all elements can be created standalone using one of the static methods on ElementFactory.

For example:

Html html = html();

Choose an adapter

After creating to some markup, you need to do something with it. Hypirinha objects need translating before they are useful in the outside world. Currently two adapter classes are provided for this purpose:

PrintAdapter converts Hypirinha objects to text, with line breaks and indenting. The print() methods send the text to a stream, while the asString() method simply returns a String.
DomAdapter converts Hypirinha objects to org.w3c.dom.Document. This is useful for evaluating XPath expressions, or performing some kind of downstream processing.

For example, to send text to stdout, use code like this:

new PrintAdapter().print(html(), System.out);

Hello world

With all these steps completed, we can now create a very simple document:

import static org.hypirinha.html.AttributeFactory.*;
import static org.hypirinha.html.ElementFactory.*;
import org.hypirinha.html.elements.*;
import org.hypirinha.html.output.PrintAdapter;

public class HelloWorldCommandLine {

public static void main(String[] args) {
Html html = html();
html.head().link(rel("stylesheet"), href("styles.css"));
html.body().p(classs("greeting")).text("Hello World");

new PrintAdapter().print(html, System.out);
}
}

produces on stdout:

<html>
  <head>
    <link rel="stylesheet" href="styles.css"></link>
  </head>
  <body>
    <p class="greeting">Hello World</p>
  </body>
</html>

Building a document

If you can follow the examples below, you will understand the whole of the Hypirinha API. Combining these techniques you'll be able to produce any HTML structure you like.

Calling a method on an element creates a child element and returns that new child element

Html html = html();
html.body().table().tbody().tr().td().span();

html renders to:

<html>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <span></span>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Parameters passed to any method call are attributes for the element being created

Div div = div(id("menuContainer1"), classs("menuContainer"));
div.ul(classs("menuItems"));

div renders to:

<div id="menuContainer1" class="menuContainer">
  <ul class="menuItems"></ul>
</div>

Special method text adds text node to element

Title title = title();
title.text("Important Page");

title renders to:

<title>Important Page</title>

Special method contains adds existing elements as children

Tr tr = tr().contains(th(), th());

tr renders to:

<tr>
  <th></th>
  <th></th>
</tr>

Iteration works well with standard java control sructures

int[] domain = new int[]{1, 2, 3, 4, 5};

Table table = table();
table.tr().contains(th().text("x"), th().text("x + 2"));

for (int x : domain) {
    table.tr().contains(td().text(valueOf(x)), td().text(valueOf(x + 2)));
}

table renders to:

<table>
  <tr>
    <th>x</th>
    <th>x + 2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
  </tr>
  <tr>
    <td>3</td>
    <td>5</td>
  </tr>
  <tr>
    <td>4</td>
    <td>6</td>
  </tr>
  <tr>
    <td>5</td>
    <td>7</td>
  </tr>
</table>

Elements work well as method return values

class AddTwo {
    Tr headerRow() {
        return tr().contains(th().text("x"), th().text("x + 2"));
    }

    Tr bodyRow(int x) {
        return tr().contains(td().text(valueOf(x)), td().text(valueOf(x + 2)));
    }
}

int[] domain = new int[]{1, 2, 3, 4, 5};

AddTwo function = new AddTwo();

Table table = table();
table.contains(function.headerRow());

for (int x : domain) {
    table.contains(function.bodyRow(x));
}

table renders to:

<table>
  <tr>
    <th>x</th>
    <th>x + 2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
  </tr>
  <tr>
    <td>3</td>
    <td>5</td>
  </tr>
  <tr>
    <td>4</td>
    <td>6</td>
  </tr>
  <tr>
    <td>5</td>
    <td>7</td>
  </tr>
</table>

► Sign in to add a comment