Problema con templates javascript #{...} en JSP

Trabajando con Tomcat 6 y jsp, me he encontrado con un problema cuando intento utilizar plantillas (templates) para utilizar desde la parte de javascript con jQuery o Prototype.

La sintaxis para utilizar estos templates tiene esta forma #{...}, pero al compilar las JSPs que tienen estos templates en su contenido, Tomcat arroja esta excepción:

(...)

org.apache.jasper.JasperException: /WEB-INF/jsp/home.jsp(45,5) #{..} no está permitido en texto de plantilla
at org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:40)
at org.apache.jasper.compiler.ErrorDispatcher.dispatch(ErrorDispatcher.java:407)
at org.apache.jasper.compiler.ErrorDispatcher.jspError(ErrorDispatcher.java:102)
at org.apache.jasper.compiler.Validator$ValidateVisitor.visit(Validator.java:706)
at org.apache.jasper.compiler.Node$ELExpression.accept(Node.java:958)

(...)

Buscando por el problema en Internet, la mejor solución que he encontrado es añadir en la JSP la siguiente sentencia:

<%@page deferredSyntaxAllowedAsLiteral="true"%>

En mi caso lo he incluido justo después de declarar las taglib que utilizo, quedando así:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"
%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"
%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"
%><%@ taglib prefix="spring" uri="http://www.springframework.org/tags"
%><%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json"
%><%
/*Para evitar error #{..} is not allowed in template text  */
%><%@page deferredSyntaxAllowedAsLiteral="true"%>

Página donde encontré finalmente la mejor solución: http://mail-archives.apache.org/...

Espero que os sirva.

Herramientas de control de calidad de código

Existen herramientas que nos facilitan 'medir' la calidad del código de nuestras aplicaciones. El uso de estas herramientas resulta muy interesante en proyectos grandes donde sería una locura revisar una a una las clases que componen el proyecto, pero todavía pueden sernos más útiles si nos acostumbramos a utilizarlas desde el inicio de los proyectos, previniendo que nuestro código vaya tomando un volumen de incorrecciones que de otra forma costará mucho tiempo corregir.

Por mencionar alguno de los conceptos de corrección que se pueden medir:

• Código duplicado


• Variables no utilizadas


• Casting imposible de variables


• instanceof siempre devolverá false

Ojo, estas herramientas son altamente configurables, miden cantidad de conceptos de corrección parametrizables, y si no se ajustan correctamente pueden darnos resultados que no se ajustan a la realidad. Es por esto que uno no lo instala tal cual y se fía de todo lo que le dice la herramienta, ya que los ajustes variarán de un proyecto a otro.

Yo utlizo Eclipse, y por eso recomiendo los siguientes plugins que nos ayudan en estas tareas y que son complementarios:

PMD:

Web del proyecto: http://pmd.sourceforge.net/
Ruta para instalar la herramienta desde el menú Ayuda>Instalar software nuevo: http://pmd.sourceforge.net/eclipse

FindBugs:

Web del proyecto: http://findbugs.sourceforge.net/
Ruta para instalar la herramienta desde el menú Ayuda>Instalar software nuevo: http://findbugs.cs.umd.edu/eclipse/

Existen herramientas que actuan como contenedores de herramientas de este tipo y gestionan en un único entorno toda la información que proporcionan. Quizá la que más se está utilizando ahora es Sonar, y dejo aquí la ruta a la web del proyecto para que lo investigues si te parece interesante http://sonar.codehaus.org/.

Primera aplicación Spring

Ya vimos cómo Comenzar un proyecto web con Eclipse y servidor, y partiendo de ese punto queremos hacer un "hola mundo" con Spring.

Lo que haremos es incluir las librerías básicas de Spring y configurarlo para tener una prueba de concepto del patrón MVC.

El objetivo es tener una página de entrada desde la que mediante enlaces accedamos a dos operativas diferentes. Cada operativa funciona mediante un controlador que recibe la petición del navegador, realiza las operaciones necesarias y responde con una pantalla de resultado.

Los pasos que seguiremos son los siguientes:

1. Incluir librerías en el proyecto


2. Configurar el entorno


3. Crear controladores


4. Crear pantallas de resultados (la vista)


5. Trazas de la aplicación


6. Resumen gráfico


7. Arranque de la aplicación

Comenzar un proyecto web con Eclipse y servidor

Cuando empezamos con Eclipse, tenemos delante un completísimo y muy complejo entorno de programación que de primeras puede echarnos para atrás si no estamos convencidos de que realmente nos hará la vida más fácil.

Escribo este tutorial para tenerlo como referencia cuando tenga que crear un proyecto web. El objetivo es tener un proyecto web listo para empezar a programar tanto Java como JSP y poder verlo en un servidor que también montaremos desde el mismo Eclipse.

Los pasos que seguiremos son los siguientes:

1. Configurar Eclipse


2. Añadir el servidor


3. Crear el proyecto


4. Añadir el proyecto al servidor


5. Prueba de que todo está preparado

1 Configurar Eclipse

Vamos a utilizar Java 1.5, así que haremos que sea la JVM por defecto.
Vamos al menú Window -> Preferences, y en el diálogo vamos a Java -> Installed JREs

    

Si no aparece la jre o jdk 1.5, entonces la añadimos con el botón add… Una vez añadida la dejamos marcada como se ve en la imagen anterior para que sea la versión de Java por defecto de ahora en adelante.

2 Añadir el servidor

Si no tenemos la pestaña Servers, la añadimos desde el menú Window -> Show View -> Other, y en el diálogo buscamos Servers



Con esto debería aparecer la pestaña Servers en la parte inferior de la pantalla.

Hacemos clic derecho en el espacio de la pestaña y elegimos New -> Server, y en el diálogo seleccionamos Tomcat v6.0 y damos a Next. En este paso veremos que podemos elegir la carpeta donde está instalado o bien, y esta opción es la más recomendable, así estará todo limpio, descargarlo de Internet.

        

Si lo descargamos nos pide el directorio de instalación y en un momento lo tendremos listo.

3 Crear el proyecto

Vamos a crear un proyecto web, así que seleccionamos el menú File -> New -> Project. Y en el diálogo que aparezca buscamos Web -> Dynamic Web Project

 

4 Añadir el proyecto al servidor

Por último hay que incluir el proyecto que acabamos de crear en el servidor para que este lo cargue al arrancarse.
Vamos a la pestaña de Servers, y sobre nuestro servidor hacemos clic derecho eligiendo Add and remove projects…, y después en el diálogo pasamos de la parte izquierda a la parte derecha nuestro proyecto.

 

5 Prueba de que todo está preparado

Para ver que nuestro servidor y nuestro proyecto están listos, crearemos una jsp, arrancaremos  el servidor y  veremos en el navegador que funciona.

1º Creamos una pagina de inicio

Para crear una jsp vamos a la carpeta del proyecto y hacemos clic derecho, eligiendo New -> Other y después en el diálogo buscando Web -> JSP



En el diálogo siguiente elegimos como nombre index.jsp

2º Editamos la jsp

Entre las etiquetas body lo siguiente:

<h1>Servidor arrancado con aplicación de prueba</h1>

3º Arrancamos el servidor

Desde la pestaña Servers arrancamos el servidor pulsando el botón verde Run ()
El servidor quedará arrancado en el puerto 8080 por defecto.

4º Vemos en el navegador el resultado

Abrimos el navegador y escribimos en la barra de direcciones:

http://localhost:8080/mi_proyecto/ (*)

Veremos la siguiente pantalla:



(*) el nombre del proyecto exacto para poner en la barra de direcciones, se encuentra configurado en eclipse, en la parte de ficheros del servidor que aparece en la izquierda.
Debemos mirar el fichero server.xml al final del mismo. Esta línea define el nombre de la ruta para ver el resultado del proyecto en el explorador:

<Context docBase="Prueba " path="/Prueba_dynamic_spring"

reloadable="true"

source="org.eclipse.jst.jee.server:Prueba dynamic spring"/>

Pues bien, hasta aquí ya tenemos preparado nuestro entorno para empezar nuestro proyecto web.

Tal y como está la configuración, podemos ir creando páginas JSP en la carpeta Web Content para verlas en el explorador, crear clases Java, y añadir librerías etc para dar más funcionalidad al proyecto. En futuros artículos veremos como ir dando forma a proyectos concretos partiendo siempre de esta base.

Subir fichero a Servidor en Web Flow 2

Introducción

El objetivo de este tutorial es explicar paso a paso que necesitamos y como se sube un fichero a servidor.

-          Entorno:

-          Configuración del  Spring MVC.

-          Caso de estudio

Nota: Es necesario conocer web flow 2 y Spring 2.5.5

Nota: Esta guía resuelve el problema del multipart en los web-flow2.

Entorno

Para  poder seguir este manual es necesario es necesario tener,  las siguientes herramientas y configurado un proyecto con webFlow2.

-          Spring 2.5.5.

-          Log4j.

-          Spring MVC.

-          Spring web flow 2.

-          Jdk 1.5

-          Eclipse 3.4.1

A continuación listo los JAR, que tienen que estar instalados con las versiones correspondientes:

Fichero	Producto + Versión	Descripción
spring.jar	Spring 2.5.5	Es el core
spring-webmvc.jar	Spring 2.5.5	La parte del MVC.
commons-logging-1.1.1.jar	Commons-logging 1.1.1	Logs comunes
log4j-1.2.15.jar	log4j 1.2.15
jstl.jar	Jstl 1.1.2	JSTL 1.1 (Es el core no tiene tld)
standard.jar	Jstl 1.1.2	JSTL 1.1 (es donde están definidas las TLD).
ognl-2.6.9.jar	Ognl.2.6.9	Lo usa web-flow 2.
org.springframework.binding-2.0.3.RELEASE.jar	Web Flow 2	Lo utilizamos para bindear los objetos.
org.springframework.js-2.0.3.RELEASE.jar	Web Flow 2	La parte de Java script para web flow 2
org.springframework.webflow-2.0.3.RELEASE.jar	Web Flow 2	El core de web flow 2.

 

Configuración de Spring MVC

 

1º Librerias que necesitamos:

 

Ahora necesitamos instalar  dentro de spring 2.5 el fileUpload  (1.2.1) http://commons.apache.org/fileupload/ .

Nota: Para que funcione es necesario tener el Commons IO (1.4) http://commons.apache.org/io/  

Fichero	Producto + Versión	Descripción
commons-fileupload-1.2.1.jar	Commons fileupload 1.2.1	Este Jar es para subir ficheros al Servidor.
commons-io-1.4.jar	commons io 1.4	Lo utiliza el fileUpload

 

Estos Jar los metemos en las librerías del proyecto

2º Configurar Spring MVC.

 

Ahora tenemos que añadir el multipartResolver  donde tengamos la configuración de nuestro fichero de Spring MVC .

<bean id ="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"        xsi:schemaLocation="            http://www.springframework.org/schema/beans            http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">   <!—Configuraciones de MVC  -->       ...   <!—Configurar el multipart à    <bean id ="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>       </beans>

               

Ahora ya tenemos Spring MVC configurado para que podamos subir ficheros al servidor, con Spring MVC + WebFlow 2.

 

Caso de estudio:

 

Ahora que tenemos configurado todo y funcionando vamos a crear un ejemplo para probar la funcionalidad que va a consistir en:

-          Pantalla en la que metemos la imagen.

-          Action que recoge la imagen y la procesa (En nuestro caso la guardaremos en el disco duro).

-          Pantalla en la que mostramos la imagen.

Creación del Flujo correspondiente.

El flujo:

-          Ejecutamos el SetupForm.

-          Llamamos a la JSP correspondiente

-          Ejecutamos el  método que se encarga de gestionar la descarga.

-          Llamamos al JSP que nos va a mostrar la foro del servidor.

Flujo:

<?xml version="1.0" encoding="UTF-8"?> <flow xmlns="http://www.springframework.org/schema/webflow"       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xsi:schemaLocation="http://www.springframework.org/schema/webflow http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd"       start-state="setupForm">             <action-state id="setupForm" >             <evaluate expression="formAction.setupForm" />             <transition on="success" to="verDescarga"/>       </action-state>                <view-state id="verDescarga" view="upload/descarga">       <transition on="submit" to="descarga">             <evaluate expression="formAction.bind" />       </transition>       </view-state>       <action-state id="descarga" >             <evaluate expression="formAction.descarga" />             <transition on="success" to="verprueba2"/>       </action-state>                  <end-state id="verprueba2" view="upload/resultado">       </end-state>            <bean-import resource="uploadFichero-beans.xml"/>       </flow>

La definición del bean.

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xmlns:p="http://www.springframework.org/schema/p"     xmlns:context="http://www.springframework.org/schema/context"     xsi:schemaLocation="         http://www.springframework.org/schema/beans         http://www.springframework.org/schema/beans/spring-beans-2.5.xsd         http://www.springframework.org/schema/context         http://www.springframework.org/schema/context/spring-context-2.5.xsd">                                                                                            <bean id="formAction" class="spring.mvc.ejemplos.pingpong.action.FicheroUploadFormAction">                   <property name="formObjectName"><value>form</value></property>                   <property name="formObjectClass"><value>spring.mvc.ejemplos.pingpong.form.PruebaForm</value></property>             </bean>              </beans>

 

 

Nota:  Para ejecutar el flujo se llama a la siguiente URL http://localhost:8080/<Despligue del proyecto>/<Controlador de web-flow>?_flowId=uploadFichero  . (Dependiendo de la configuración de nuestro entorno)

 

 

Creación del JSP donde vamos a meter la pantalla.

Los cambios o diferencias con un JSP normal son:

-          La definición del form hay que poner un enctype para indicar que es multipart:

enctype="multipart/form-data">

Nota: Con esto le indicamos que vamos a mandar un multipart.

-          Definimos un input para que el usario le pase el fichero:

<input type="file" name="file">

A continuación vemos un ejemplo de JSP de descarga, con los cambios que hemos indicado.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"     pageEncoding="ISO-8859-1"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> Prueba de la decarga de un Fichero   <!-- Indicamos el action --> <form:form action="iv.do" method="post" enctype="multipart/form-data">       <!-- Parametros necesarios para la configuracion -->       <input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}"/>       <input type="hidden" name="_eventId_submit" value="submit"/>       <input type="hidden" name="_flowId" value="uploadFichero"/>       </br>             <table>                   <tr>                   <td>                         File:                   </td>                   <td>                         <input type="file" name="file">                   </td>             </tr>             </table>       <!-- Boton de subimit -->       <input type="submit"  value="submit"/> </form:form>

 

 

Creación del JSP donde vamos a mostrar la imagen.

Este Jsp solo tiene un img, con referencia a la ruta donde hemos guardado los datos:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"     pageEncoding="ISO-8859-1"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <IMG SRC="imagen.jpg">

 

Creación del Action que va procesar la información.

Aquí definimos el método de la descarga :

Para poder recoger el fichero del contexto como un multipart (“file”, es la referencia  de la request para recoger el fichero.):

MultipartFile file = context.getRequestParameters().getRequiredMultipartFile("file");

 

En file, podemos sacar el fichero, con los byte, pero tiene un método para transferir el fichero a una ubicación  física (Fichero es una variable de tipo file que indica la ruta donde vamos).

file.transferTo(fichero);

 

package spring.mvc.ejemplos.pingpong.action;   import java.io.File;   import org.springframework.web.multipart.MultipartFile; import org.springframework.webflow.action.FormAction; import org.springframework.webflow.execution.Event; import org.springframework.webflow.execution.RequestContext; /**  *  * Ejemplo para el caso de subir un fichero a servidor.  *  * @author tfc  *  */ public class FicheroUploadFormAction extends FormAction{             /**        * No hacemos nada de momento en el Setup Form        */       @Override       public Event setupForm(RequestContext context) throws Exception {             // TODO Auto-generated method stub             return super.setupForm(context);       }       /**        *        * Encargada de subir el fichero a servidor.        *        * @param context        * @return        * @throws Exception        */       public Event descarga(RequestContext context) throws Exception {             System.out.println("Descargar");             MultipartFile file = context.getRequestParameters().getRequiredMultipartFile("file");             System.out.println("Tamanio :" + file.getSize());             System.out.println(" Nombre Longitud" + file.getContentType().toString());             System.out.println(" Nombre Longitud" + file.getContentType().length());             System.out.println(" Nombre originar " + file.getOriginalFilename().toString());             System.out.println(" Nombre original longitud " + file.getOriginalFilename().length());             //System.out.println("Nombre :" + file.getName());             if (file.getSize() > 0) {                   File fichero = new File("C:\\Users\\tfc\\pruebaDavid\\recursos\\imagen.jpg");                   if(fichero.createNewFile()){                         System.out.println("Se ha creado el fichero correctamente");                   }                 file.transferTo(fichero);                                     return success();             } else {                   return success();             }       } }