Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Java / Crea código HTML5 desde java con j2html

Crea código HTML5 desde java con j2html

Por jc mouse jueves, agosto 9, 2018

j2html es una biblioteca para java que permite generar código html seguro desde código java utilizando sus propias etiquetas similares a las de html de una manera bastante sencilla. La versión mínima con la funciona es el JDK 8 ya que hace uso la sintaxis lambda.

html5 y java

Para poder hacer uso de esta librería se puede utilizar desde Maven:

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

desde Gradle:

compile 'com.j2html:j2html:1.3.0'

O clonando el proyecto desde Github: https://github.com/tipsy/j2html

A continuación un ejemplo de uso de esta librería donde se crea el código necesario para una pagina web en HTML5.

import static j2html.TagCreator.*;

/**
 * @see https://www.jc-mouse.net/
 * @author mouse
 */
public class Main {

    public static void main(String[] args) {

        String style_section = "background-color: #ffff99;";
        String style_p1 = "margin: 6px; color:#3333cc;";
        String style_p2 = "margin: 6px; font-style: italic;";
        String style_anuncio = "border:1px solid black; padding:4px; margin: 6px 0; ";
        String style_footer = "margin: 4px 0; background-color: #52E396; padding:4px; border:1px solid black;";

        String output
                = html(head(
                        title("Hola Mundo"),
                        link().withRel("stylesheet").withHref("style.css"),
                        meta().withName("description").withContent("Descripcion de sitio web")
                ),
                        body(header(
                                img().withSrc("https://j2html.com/img/logo_teal.png"),
                                h1("Mi Primera Pagina Web")
                        ),
                                j2html.TagCreator.main(attrs("#main.content"),
                                        section(
                                                article(
                                                        p("Lorem ipsum dolor sit amet, consectetur adipiscing elit").withStyle(style_p1),
                                                        p("Excepteur sint occaecat cupidatat non proident").withStyle(style_p2))
                                        ).withStyle(style_section),
                                        aside("publicidad").withStyle(style_anuncio),
                                        section(
                                                article(
                                                        p("Sed quia consequuntur magni dolores eos qui ratione voluptatem").withStyle(style_p1),
                                                        p("Quis autem vel eum iure reprehenderit qui in ea").withStyle(style_p2))
                                        ).withStyle(style_section)
                                ),
                                footer(
                                        div().withId("footer").with(
                                        join(span("Bolivia - "),
                                                a("JC Mouse").withHref("https://www.jc-mouse.net"))
                                )
                                ).withStyle(style_footer)
                        )).render();

        System.out.println(output);
    }

}

Nota: Se utiliza j2html.TagCreator.main para evitar conflicto con el método main de la clase principal

El código anterior, daría como resultado el siguiente código HTML5 en consola

<html>
   <head>
      <title>Hola Mundo</title>
      <link rel="stylesheet" href="style.css">
      <meta name="description" content="Descripcion de sitio web">
   </head>
   <body>
      <header>
         <img src="https://j2html.com/img/logo_teal.png">
         <h1>Mi Primera Pagina Web</h1>
      </header>
      <main id="main" class="content">
         <section style="background-color: #ffff99;">
            <article>
               <p style="margin: 6px; color:#33cc33;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
               <p style="margin: 6px; font-style: italic;">Excepteur sint occaecat cupidatat non proident</p>
            </article>
         </section>
         <aside style="border:1px solid black; padding:4px; margin: 6px 0; ">publicidad</aside>
         <section style="background-color: #ffff99;">
            <article>
               <p style="margin: 6px; color:#33cc33;">Sed quia consequuntur magni dolores eos qui ratione voluptatem</p>
               <p style="margin: 6px; font-style: italic;">Quis autem vel eum iure reprehenderit qui in ea</p>
            </article>
         </section>
      </main>
      <footer style="margin: 4px 0; background-color: #52E396; padding:4px; border:1px solid black;">
         <div id="footer"><span>Bolivia - </span> <a href="https://www.jc-mouse.net">JC Mouse</a></div>
      </footer>
   </body>
</html>

Y probando el código en un Servlet obtenemos:

j2html Servlet

Este es un sencillo ejemplo de las capacidades de j2html, la librería también cuenta con la capacidad de crear código CSS y JavaScript:

script(
   rawHtml("alert('Hola Mundo')")
);

style(
   rawHtml("body{ background-color: #52E396; }")
);

De igual forma, tiene lo necesario para trabajar con colecciones, formularios, tablas, etc.

enjoy!!!

Tags

Artículos similares

PanoramaImageView: Vista panorámica

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°[...]

TextView Autocompletado

Un TextView autocompletado nos facilita el ingreso de información en aplicaciones móviles ya que te muestra posibles opc[...]

Microsoft Bing laza un mapa interactivo para seguir el avance de la pandemia a nivel mundial

El gigante de la tecnología Microsoft ha lanzado un mapa interactivo para proporcionar información sobre la propagación[...]

Entornos de programación visual para Arduino

A continuación dejo a consideración 4 entornos de desarrollo visual para Arduino todos gratuitos y de código abierto. Si[...]

¿Como paginar con Laravel 11?

Se utiliza la paginación para poder mostrar al usuario una gran cantidad de datos de una forma ordenada en forma de «pag[...]

Ejecutar JAR con parámetros de entrada

Java nos permite pasar parámetros a una aplicación empaquetada en un *.JAR mediante el MAIN de nuestro programa, pero cl[...]