jueves, 4 de junio de 2015

Jugando con Spark web framework (I). Utilizar FreeMarker

Introducción

Primeramente debemos crear un proyecto Maven y Spark según la entrada anterior.

El principal problema que tendremos es como definir la ruta de los recursos a utilizar la plantilla FreeMarker.

Modificación del pom.xml

El fichero pom.xml hay que añadirle lo que se indica en esta pantalla de la documentación de Spark


Quedando

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.ximodante</groupId>
  <artifactId>WebSpark01</artifactId>
  <version>0.0.1-SNAPSHOT</version>

  <name>WebSpark01</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
   
    <!-- SPARK 2.2 dependencies -->
    <dependency>
      <groupId>com.sparkjava</groupId>
      <artifactId>spark-core</artifactId>
      <version>2.2</version>
    </dependency>
  
    <!-- FreeMaker template Engine -->
    <dependency>
      <groupId>com.sparkjava</groupId>
      <artifactId>spark-template-freemarker</artifactId>
      <version>2.0.0</version>
    </dependency>

   
   
  </dependencies>
</project>


Definición de la jerarquía de carpetas de trabajo

Veamos la jerarquia de carpetas de trabajo

src
|--->main
       |---> java (Paquetes y Fuentes de Java *.java)
       |
       |---> resources (Recursos diversos de Spark)
                  |
                  |---> views (Plantillas de FreeMarker *.ftl)
                          |
                          |---> css (Archivos *.css)


Cabe destacar la carpeta "resources" (que debe de colgar de la carpeta "main"), que contendrá los diversos recursos de Spark.  Se ha optado por meter las plantillas de freemarker en la subcarpeta "views" y las plantillas de estilo css en la subcarpeta "css". Tal y como se indica en el esquema anterior.

Creación de la plantilla FreeMarker

Se creará el siguiente archivo  "hello1.ftl" en la carpeta:
 "src/main/resources/views"

<html>
    <head>
        <link rel="stylesheet" href="/css/main.css" />
    </head>
    <body>
        <h1>Freemarker template served by Spark</h1>
        <p>Hello ${name}!</p>
    </body>
</html>



Creación de la plantilla css

 Se creará el archivo "main.css" que es la que se referencia en el archivo de la plantilla freemarker (mostrado en azul"). Se guardará en:
"src/main/resources/views/css"

h1{ color: red; } 


Codigo fuente java

Para que la plantilla freemarker en esta línea:

<link rel="stylesheet" href="/css/main.css" />

pueda localizar la plantilla main.css, es necesario que la carpeta "views" sea accesible como si fuera la raíz. Para ello en java se utiliza:

staticFileLocation("/views");

Por otra parte para abrir las plantillas freemarker desde java conviene indicar las siguientes líneas:

Configuration viewDir = new Configuration();
viewDir.setClassForTemplateLoading(FreeMarkerExampleGood.class, "/views");


 
Ahora solo queda definir la negociación tipo REST. Veamos el código:

import static spark.Spark.*;

import java.util.HashMap;

import spark.ModelAndView; import spark.template.freemarker.FreeMarkerEngine; import freemarker.template.Configuration; public class FreeMarkerExampleGood {     public static void main(String[] args)     {         // Configure that static files directory.         staticFileLocation("/views");         // This will configure the view directory. /src/main/resources/views         Configuration viewDir = new Configuration();         viewDir.setClassForTemplateLoading(FreeMarkerExampleGood.class, "/views");         get("/ping", (req, res) -> "pong\n");         // Creates a very simple model and         // returns the template ‘hello1.ftl’ when         // http://localhost:4568/hello1 is called.         get("/hello1", (request, response) -> {             HashMap<String, Object> model = new HashMap<>();             model.put("name", "Liuardo");             return new ModelAndView(model, "hello1.ftl");         }, new FreeMarkerEngine(viewDir));     } }

Prueba

 Dar al navegador la dirección:

http://localhost:4567/hello1

Y aparece la pantalla que hemos definido en "hello1.ftl"

Agradecimientos

  • Demetrious Taylor Wilson's blog.
  • mswiggs blog.



No hay comentarios :

Publicar un comentario