Función periódica con javascript

En ocasiones es necesario realizar comportamientos javascript en pantalla de forma reiterada cada cierto intervalo de tiempo.

Por ejemplo realizar el refresco de una parte de la página, o esperar a que aparezca algo en pantalla para realizar cierta acción.

En algún caso lo he necesitado, y lo resolví de este modo, teniendo disponible la librería Prototype:

Prueba = {
  atributo1:      '',
  atributo2:      1,
  hemosTerminado: false,

  inicializarComportamientoPeriodico: function(){

    new PeriodicalExecuter(

      function actualizacionDeLoQueSea(timer){
        //Aquí realizamos las acciones que queramos
        this.atributo1 = this.atributo1 + 'vuelta ' + this.atributo2 + ',';
        this.atributo2 = this.atributo2 + 1;

        //Comprobamos la condición de finalización
        this.hemosTerminado = ........

        if(this.hemosTerminado)
          timer.stop();

      }.bind(this),
      2
    );
  }
}

Event.observe(window, "load", Prueba.inicializarComportamientoPeriodico.bindAsEventListener(Prueba));

Como vemos tenemos un objeto que hemos llamado Prueba.

Cuando la página se haya cargado llamaremos al método que inicializa nuestra función periódica.
El método que inicializa el comportamiento periódico crea un objeto PeriodicalExecuter que recibe como parámetros:

• la función que ejecutará (en este caso le pasamos una función que definimos ahí mismo)


• el intervalo de tiempo en segundos

Observaciones:
- Hay que tener en cuenta que será necesario en esta implementación el uso de bind al pasar la función a PeriodicalExecuter.
- Se ha incluido una condición de parada de las repeticiones que hace que deje de ejecutarse nuestra función.

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

Implementación SEO básico

Cuando queramos lanzar un site que queramos posicionar bien en Google de forma natural, tendremos que tener algunas consideraciones en cuenta en el periodo de implementación y otras en el momento del lanzamiento.

Voy a hablar en este caso del periodo de implementación. Veamos qué es lo básico que tenemos que tener en cuenta:

Meta tags

Las meta tags añaden información asociada a una página. El propósito de las meta tags es muy variado, desde proporcionar información al navegador del cliente que nos visite (como por ejemplo el idioma), hasta indicar a los buscadores cómo queremos que nos muestren en sus listados.

En SEO las etiquetas que no pueden faltar son:

keywords

<meta name="keywords" content="zapatillas etnies,calzado skate,etc" />

Indica las palabras clave relacionadas con la página.

Entre 30 y 40 palabras son las que los buscadores tendrán en cuenta. No deben repetirse, pues penaliza.

Por ejemplo poner:
“libros cocina, libros comida, etc.”
puede ser aceptable, pero no lo sería:
“libros, libros, etc.”

Se dice que lo mejor es 4 a 6 grupos de palabras separados por comas, pensando en que las palabras se heredan, es decir, que las que se pongan en la página principal no hay que ponerlas en páginas interiores, así que hay que elegirlas de muy genérico a muy concreto.

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();             }       } }