j2html

https://j2html.com
Admin
j2html is a Java HTML builder that allows developers to create HTML5 elements dynamically and...
Tokens:6,043
Snippets:67
Trust Score:7.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Traditional Templating Include Example

Source: https://j2html.com/examples.html

Illustrates a common, but cumbersome, way to include partials in traditional templating languages, highlighting potential issues.

```text
#include("/path/to/header")
#setTitle("Signup page")
<h1>Please sign up</h1>
<form>
...
</form>
#include("/path/to/footer")


```

--------------------------------

### Render HTML Document with Declaration

Source: https://j2html.com/news.html

Example of using the `document()` method to render an HTML tag along with the HTML5 declaration.

```java
document(html())
```

--------------------------------

### Render Raw HTML Content

Source: https://j2html.com/news.html

Example of using `rawHtml()` to render HTML content without escaping, introduced in j2html 0.88.

```java
rawHtml()
```

--------------------------------

### Render Unsafe HTML Content

Source: https://j2html.com/news.html

Example of using `unsafeHtml()` to render HTML content without escaping, introduced in j2html 0.88.

```java
unsafeHtml()
```

--------------------------------

### Include Escaped File Content as String

Source: https://j2html.com/news.html

Use `fileAsEscapedString` to read a file's content and escape it. This is suitable for including code examples within the website.

```java
fileAsEscapedString(String path)
```

--------------------------------

### j2html Configuration Options

Source: https://j2html.com/examples.html

Demonstrates how to configure j2html globally or per instance. Options include controlling whether empty tags are closed.

```java
TagCreator.class // Static utility class for creating all tags
import static j2html.TagCreator.*; // Use static star import


Config.class // Holds all configuration.  Offers global configuration or customizable instances
Config.closeEmptyTags = true // Global options are public, static and mutable.
Config.global() // Copy all static Config fields into an instance.  Instances are immutable
Config.defaults() // A Config with defaults that are independent of global options
Config.global().withEmptyTagsClosed(true) // A Config that is different from the global options
Config.defaults().withEmptyTagsClosed(true) // A Config that is different from the default options
```

--------------------------------

### Basic HTML Structure with j2html

Source: https://j2html.com/

Demonstrates the basic usage of j2html by importing TagCreator and building a simple HTML body with a heading and an image. Ensure TagCreator is imported statically.

```java
import static j2html.TagCreator.*;

public class Main {
    public static void main(String[] args) {
        body(
            h1("Hello, World!"),
            img().withSrc("/img/hello.png")
        ).render();
    }
}
```

```html
<body>
    <h1>Hello, World!</h1>
    <img src="/img/hello.png">
</body>
```

--------------------------------

### Create a Registration Form using j2html Partials

Source: https://j2html.com/examples.html

This snippet demonstrates how to use the previously defined partials to construct a complete registration form. It shows the conciseness of j2html when leveraging reusable components.

```java
h1("Please sign up"),
form().withMethod("post").with(
    emailInput("Email address"),
    choosePasswordInput("Choose Password"),
    repeatPasswordInput("Repeat Password"),
    submitButton("Sign up")
)


```

```java
h1("Please sign up"),
form().withMethod("post").with(
    emailInput("Email address"),
    choosePasswordInput("Choose Password"),
    repeatPasswordInput("Repeat Password"),
    submitButton("Sign up")
)


```

--------------------------------

### Create Basic HTML Structure with j2html

Source: https://j2html.com/examples.html

Generates a standard HTML document with head and body sections. This is the fundamental way to build HTML with j2html.

```java
html(
    head(
        title("Title"),
        link().withRel("stylesheet").withHref("/css/main.css")
    ),
    body(
        main(attrs("#main.content"),
            h1("Heading!")
        )
    )
)
```

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

--------------------------------

### Rendering HTML with j2html Builders

Source: https://j2html.com/examples.html

Demonstrates rendering HTML into different formats (flat or indented) using `HtmlBuilder` implementations like `FlatHtml` and `IndentedHtml`, and writing to streams or files.

```java
HtmlBuilder.class // Interface for composing HTML. Implemented by FlatHtml and IndentedHtml
FlatHtml.into(Appendable) // Render into a stream, file, etc. without indentation or line breaks
FlatHtml.into(Appendable appendable, Config config) // Customize rendering of flat html
IndentedHtml.into(Appendable) // Render human-readable HTML into an stream, file, etc.
IndentedHtml.into(Appendable appendable, Config config) // Customize rendering of intended html
ul(li("one"), li("two")).render(IndentedHtml.inMemory()).toString() // Similar to renderFormatted()
ul(li("one"), li("two")).render(IndentedHtml.into(filewriter)) // Write HTML into a file
```

--------------------------------

### Create HTML Element with ID and Class using Shorthand Attributes

Source: https://j2html.com/news.html

Shows how to create a div element with an ID and class using j2html's shorthand attribute syntax.

```java
div(attrs("#id.class")
```

--------------------------------

### Rendered HTML Output

Source: https://j2html.com/examples.html

The resulting HTML structure generated by the j2html MainView rendering method, demonstrating the inclusion of the signup form within a header and footer.

```html
<html>
    <head>
        <title>Signup page</title>
    </head>
    <body>
    <header>
        ...
    </header>
    <main>
        <h1>Please sign up</h1>
        <form method="post">
            <input type="email" id="email" name="email" placeholder="Email address" required>
            <input type="password" id="choosePassword" name="choosePassword" placeholder="Choose password" required>
            <input type="password" id="repeatPassword" name="repeatPassword" placeholder="Repeat password" required>
            <button type="submit">Sign up</button>
        </form>
    </main>
    <footer>
        ...
    </footer>
    </body>
</html>


```

--------------------------------

### Join Sentences with Inline HTML using join()

Source: https://j2html.com/news.html

Illustrates using the `join()` method in j2html to concatenate strings and inline HTML elements.

```java
join("Added a", code("join()`), "method to more ea...`
```

--------------------------------

### Include Minimized File Content within Style Tags

Source: https://j2html.com/news.html

Use `styleWithInlineFile_min` to embed minimized CSS content from a file within `<style>` tags, using CSSMin for optimization.

```java
styleWithInlineFile_min(String path)
```

--------------------------------

### j2html MainView Rendering (Version 1.0.0+)

Source: https://j2html.com/examples.html

Demonstrates how to use a MainView in j2html to render a page, accepting a title and child tags as type-safe parameters. This approach ensures all necessary components like headers and footers are included.

```java
public class MainView {
    public static String render(String pageTitle, Tag... tags) {
        return document(
            html(
                head(
                    title(pageTitle)
                ),
                body(
                    header(
                        ...
                    ),
                    main(
                        tags //the view from the partials example
                    ),
                    footer(
                        ...
                    )
                )
            )
        );
    }
}

MainView.render(
    "Signup page",
    h1("Please sign up"),
    form().withMethod("post").with(
        emailInput("Email address"),
        choosePasswordInput("Choose Password"),
        repeatPasswordInput("Repeat Password"),
        submitButton("Sign up")
    )
);


```

--------------------------------

### Add Multiple Classes to an Element with withClasses()

Source: https://j2html.com/news.html

Shows how to add multiple CSS classes to an HTML element using the `withClasses()` method, often in conjunction with `iff()`.

```java
withClasses()
```

--------------------------------

### Conditional Element Rendering with iff()

Source: https://j2html.com/news.html

Demonstrates the use of the generic `iff()` method for conditional rendering of elements in j2html.

```java
iff() / iffElse()
```

--------------------------------

### Define Reusable Form Input Partials with j2html

Source: https://j2html.com/examples.html

This snippet defines several static helper methods (partials) for creating common form input elements like password, email, and submit buttons. These methods encapsulate repetitive HTML generation logic.

```java
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(text).withType("submit");
}


```

```java
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);
}


```

--------------------------------

### j2html Tag and Attribute Manipulation

Source: https://j2html.com/examples.html

Explains the base `Tag` class and how to set attributes using generic `attr` or specific `withXyz` methods.

```java
Tag.class // Is extended by ContainerTag (ex <div></div> and EmptyTag (ex <br>)
Tag.attr(String attribute, Object value) // Set an attribute on the tag
Tag.withXyz(String value) // Calls attr with predefined attribute (ex .withId, .withClass, etc.)
```

--------------------------------

### Generate Two-Dimensional Table with j2html

Source: https://j2html.com/examples.html

This snippet demonstrates generating a two-dimensional table by iterating over a list of numbers. It shows two variations of the j2html syntax for achieving the same result.

```java
List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 9, 10);
...
table(attr("#table-example"),
    tbody(
        each(numbers, i -> tr(
            each(numbers, j -> td(
                String.valueOf(i * j)
            ))
        ))
    )
)
```

```java
List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 9, 10);
...
table().withId("table-example").with(
    tbody().with(
        each(numbers, i -> tr().with(
            each(numbers, j -> td().with(
                String.valueOf(i * j)
            ))
        ))
    )
)


```

--------------------------------

### Include Minimized File Content within Script Tags

Source: https://j2html.com/news.html

Use `scriptWithInlineFile_min` to embed minimized JavaScript content from a file within `<script>` tags, using Google Closure for optimization.

```java
scriptWithInlineFile_min(String path)
```

--------------------------------

### Include File Content as String

Source: https://j2html.com/news.html

Use `fileAsString` to read the content of a file into a String. This is useful for embedding static HTML content, such as analytics code.

```java
fileAsString(String path)
```

--------------------------------

### j2html MainView Rendering (Earlier Versions)

Source: https://j2html.com/examples.html

Shows an alternative MainView rendering method for earlier versions of j2html, which concatenates document rendering with HTML structure rendering.

```java
public class MainView {
    public static String render(String pageTitle, Tag... tags) {
        return document().render() +
            html().with(
                head().with(
                    title(pageTitle)
                ),
                body().with(
                    header().with(
                        ...
                    ),
                    main().with(
                        tags //the view from the partials example
                    ),
                    footer().with(
                        ...
                    )
                )
            ).render();
    }
}

MainView.render(
    "Signup page",
    h1("Please sign up"),
    form().withMethod("post").with(
        emailInput("Email address"),
        choosePasswordInput("Choose Password"),
        repeatPasswordInput("Repeat Password"),
        submitButton("Sign up")
    )
);


```

--------------------------------

### Iterate Employees with Java 8 Streams

Source: https://j2html.com/examples.html

Use Java 8 streams to map employee objects to HTML divs. Ensure 'employees' collection is available and Java 8+ is used.

```java
body(
    div(attrs("#employees"),
        employees.stream().map(employee ->
            div(attrs(".employee"),
                h2(employee.getName()),
                img().withSrc(employee.getImgPath()),
                p(employee.getTitle())
            )
        ).toArray(ContainerTag[]::new)
    )
)
```

```java
body().with(
    div().withId("employees").with(
        employees.stream().map(employee ->
            div().withClass("employee").with(
                h2(employee.getName()),
                img().withSrc(employee.getImgPath()),
                p(employee.getTitle())
            )
        ).toArray(ContainerTag[]::new)
    )
)
```

--------------------------------

### Check Tag Equality based on Rendered HTML

Source: https://j2html.com/news.html

Demonstrates the `.equals()` method for Tag objects in j2html, which checks if two tags render the same HTML.

```java
.equals()
```

--------------------------------

### Include File Content within Style Tags

Source: https://j2html.com/news.html

Use `styleWithInlineFile` to embed the content of a file directly within `<style>` tags.

```java
styleWithInlineFile(String path)
```

--------------------------------

### Add j2html Maven Dependency

Source: https://j2html.com/download.html

Include this dependency in your project's POM file to use j2html for generating HTML.

```xml
<dependency>
    <groupId>com.j2html</groupId>
    <artifactId>j2html</artifactId>
    <version>1.6.0</version>
</dependency>

```

--------------------------------

### Join Text Snippets with j2html

Source: https://j2html.com/examples.html

Combines multiple text fragments, including bold and italic elements, into a single paragraph using the `join` method.

```java
TagCreator.join() // Method for joining small snippets, like:
p(join("This paragraph has", b("bold"), "and", i("italic"), "text."))
```

--------------------------------

### Conditional Rendering with j2html

Source: https://j2html.com/examples.html

Uses `iff` and `iffElse` expressions for conditionally adding CSS classes to a div based on a boolean variable.

```java
TagCreator.iff(boolean condition, T ifValue) // If-expression for use in method calls
div().withClasses("menu-element", iff(isActive, "active"))
```

```java
TagCreator.iffElse(boolean condition, T ifValue, T elseValue) // If/else-expression for use in method calls
div().withClasses("menu-element", iffElse(isActive, "active", "not-active"))
```

--------------------------------

### Customize TextEscaper in j2html

Source: https://j2html.com/news.html

Demonstrates how to customize the TextEscaper in j2html version 1.1.0 using a lambda expression.

```java
Config.textEscaper = text -> {}
```

--------------------------------

### Iterate Employees with j2html each() Method

Source: https://j2html.com/examples.html

Utilize j2html's custom each() method for iterating collections. This method allows adding sibling elements, unlike the stream API approach.

```java
// each() lets you iterate through a collection and returns the generated HTML
// as a DomContent object, meaning you can add siblings, which is not possible
// using the stream api in the previous example
body(
    div(attrs("#employees"),
        p("Some sibling element"),
        each(employees, employee ->
            div(attrs(".employee"),
                h2(employee.getName()),
                img().withSrc(employee.getImgPath()),
                p(employee.getTitle())
            )
        )
    )
)
```

```java
// each() lets you iterate through a collection and returns the generated HTML
// as a DomContent object, meaning you can add siblings, which is not possible
// using the stream api in the previous example
body().with(
    div().withId("employees").with(
        p("Some sibling element"),
        each(employees, employee ->
            div().withClass("employee").with(
                h2(employee.getName()),
                img().withSrc(employee.getImgPath()),
                p(employee.getTitle())
            )
        )
    )
)
```

--------------------------------

### Generated HTML for Employee List

Source: https://j2html.com/examples.html

This is the resulting HTML structure generated by the provided j2html code snippets for a list of three employees.

```html
<body>
    <div id="employees">
        <div class="employee">
            <h2>David</h2>
            <img src="/img/david.png">
            <p>Creator of Bad Libraries</p>
        </div>
        <div class="employee">
            <h2>Christian</h2>
            <img src="/img/christian.png">
            <p>Fanboi of Jenkins</p>
        </div>
        <div class="employee">
            <h2>Paul</h2>
            <img src="/img/paul.png">
            <p>Hater of Lambda Expressions</p>
        </div>
    </div>
</body>
```

--------------------------------

### Include File Content within Script Tags

Source: https://j2html.com/news.html

Use `scriptWithInlineFile` to embed the content of a JavaScript file directly within `<script>` tags.

```java
scriptWithInlineFile(String path)
```

--------------------------------

### Filter and Iterate Employees with j2html

Source: https://j2html.com/examples.html

Combine j2html's filter() function with each() to process collections. The filter() function simplifies standard stream filtering operations.

```java
// filter() is meant to be used with each(). It just calls the normal
// stream().filter() method, but hides all the boilerplate Java code
// to keep your j2html code neat
body(
    div(attrs("#employees"),
        p("Some sibling element"),
        each(filter(employees, employee -> employee != null), employee ->
            div(attrs(".employee"),
                h2(employee.getName()),
                img().withSrc(employee.getImgPath()),
                p(employee.getTitle())
            )
        )
    )
)
```

```java
// filter() is meant to be used with each(). It just calls the normal
// stream().filter() method, but hides all the boilerplate Java code
// to keep your j2html code neat
body().with(
    div().withId("employees").with(
        p("Some sibling element"),
        each(filter(employees, employee -> employee != null), employee ->
            div().withClass("employee").with(
                h2(employee.getName()),
                img().withSrc(employee.getImgPath()),
                p(employee.getTitle())
            )
        )
    )
)
```
Tokens:
Raw