j2HTML - Java HTML5 generation Library » Tell Me How

j2HTML – Java HTML5 generation Library

By Tell Me How April 8, 2017 #j2html, #java html library, #Java Library, #java to html conversion library, #java ui library

If you’re a Java lover and want to make UI interface in java instead of using HTML5. Then j2HTML is a java library of Java to HTML generator. You can enjoy typesafe HTML generation.

How to add j2html in project

Add the maven dependency

<dependency>
    <groupId>com.j2html</groupId>
    <artifactId>j2html</artifactId>
    <version>0.88</version>
</dependency>

Import TagCreator and start building HTML

import static j2html.TagCreator.*;

public class Main {
    public static void main(String[] args) {
        body().with(
                h1("Heading!").withClass("example"),
                img().withSrc("img/hello.png")
        ).render();
    }
}

The above Java will result in the following HTML:

<body>
    <h1 class="example">Heading!</h1>
    <img src="img/hello.png">
</body>

Basic example

Creating a basic webpage in j2html is pretty similar to HTML. This Java code:

html().with(
    head().with(
        title("Title"),
        link().withRel("stylesheet").withHref("/css/main.css")
    ),
    body().with(
        main().with(
            h1("Heading!")
        )
    )
)

Becomes this HTML:

<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="/css/main.css">
    </head>
    <body>
        <main>
            <h1>Heading!</h1>
        </main>
    </body>
<html>

It’s literally impossible to forget to close a div, mistype an attribute name, or forget an attribute quote! Remember to include the Java wrapping code though, j2html is not a template language, all files are .java.

Partials

You can create partials for elements you use a lot:

public static Tag enterPasswordInput(String placeholder) {
    return passwordInput("enterPassword", placeholder);
}

public static Tag choosePasswordInput(String placeholder) {
    return passwordInput("choosePassword", placeholder);
}

public static Tag repeatPasswordInput(String placeholder) {
    return passwordInput("repeatPassword", placeholder);
}

public static Tag passwordInput(String identifier, String placeholder) {
    return input()
        .withType("password")
        .withId(identifier)
        .withName(identifier)
        .withPlaceholder(placeholder)
        .isRequired();
}

public static Tag emailInput(String placeholder) {
    return input()
        .withType("email")
        .withId("email")
        .withName("email")
        .withPlaceholder(placeholder)
        .isRequired();
}

public static Tag submitButton(String text) {
    return button().withType("submit").withText(text);
}

The equivalent HTML would be:

<input
    type="password"
    id="enterPassword"
    name="enterPassword"
    placeholder="Enter password"
    required
    >

<input
    type="password"
    id="choosePassword"
    name="choosePassword"
    placeholder="Choose password"
    required
    >

<input
    type="password"
    id="repeatPassword"
    name="repeatPassword"
    placeholder="Repeat password"
    required
    >

<input
    type="email"
    id="email"
    name="email"
    placeholder="Email"
    required
    >

<button type="submit">Text</button>

For more example you can see above given button.

Hope you like this tutorial please comment below your thoughts.