Categoría: desarrollo

  • Repositorio de Eclipse en Dropbox

    Repositorio de Eclipse en Dropbox

    Cuando desarrollamos un proyecto, uno de los problemas que nos podemos encontrar es el de llevar con nosotros el código del mismo. Ya sea almacenado en un sistema de almacenamiento en la nube o en un dispositivo USB, puede ocurrir que se nos olvide actualizarlo o bien que nos dejemos el USB olvidado.

    Una solución pasa por usar Dropbox para almacenar el repositorio de Eclipse. Dropbox, como ya analicé en otro post, es un servicio de almacenamiento online gratuito hasta 2 Gb con un programa de sincronización integrado. Funciona en los tres sistemas operativos más utilizados (Windows, Mac y Linux). Simplemente con tener conexión a Internet puedes instalar la aplicación (o acceder al servicio vía navegador). Se trata pues de una buena solución para llevar el código contigo. Dropbox lo puedes obtener en la página www.dropbox.com.

    Uno de los IDEs más utilizados en el desarrollo de aplicaciones es Eclipse. Veamos cómo configurar un repositorio dónde almacenar nuestros proyectos cuyo código se va a sincronizar en todas los equipos dónde tengamos instalado Dropbox.

    Una vez que tengamos instalada la aplicación podemos crear una carpeta donde almacenar el proyecto. Para ello abrimos la carpeta Dropbox y creamos una carpeta con el nombre que deseemos, por ejemplo Eclipse.

    En el caso de que ya tengamos un proyecto y queremos pasarlo a Dropbox y modificar Eclipse para que abra el nuevo repositorio seguiremos los siguientes pasos:

    1. Abrimos Eclipse normalmente y borramos el proyecto del workspace, pero cuando aparezca el cuadro de diálogo pidiendo la confirmación debemos estar seguros de no marcar la casilla para borrar también los contenidos del disco.
    2. Una vez borrado, navegamos con el explorador de archivos de Windows (o el equivalente en los diferentes Sistemas Operativos) hasta la carpeta del repositorio actual, y movemos la carpeta con el proyecto que acabamos de borrar, a la carpeta que hemos creado en Dropbox.
    3. Volvemos a Eclipse y seleccionamos File -> Switch Workspace -> Other…
    4. Seleccionamos la carpeta que hemos creado en Dropbox y pulsamos Ok.
    5. Esto hace que Eclipse se reinicie para cargar el nuevo repositorio.
    6. Una vez cargado seleccionamos File -> Import… -> General -> Existing Projects into Workspace, desde el menú.
    7. En la caja de texto Select root directory, seleccionamos la carpeta del nuevo repositorio dentro de Dropbox y en la lista de proyectos aparecerá el proyecto copiado. Lo seleccionamos y pulsamos Finish.
    8. Repetiremos los pasos del 3 al 7 para cada uno de los equipos que utilicemos (casa, oficina, portátil, etc.).

    En el caso de que no tuviéramos un proyecto previo el proceso sería más sencillo. Simplemente realizaríamos los pasos 3 al 5 en cada uno de los equipos.

    La sincronización entre las diferentes máquinas puede llevar algo de tiempo. Si modificamos el código en el trabajo y queremos recuperarlo cuando lleguemos a casa, simplemente refrescamos el workspace desde Eclipse y ya estará preparado para trabajar desde donde lo dejamos. Con 2 Gb. es más que suficiente para almacenar tus proyectos, aunque si necesitas más espacio puedes aumentarlo (Ver tarifas).

    Otra de las características de Dropbox es que puedes hacer pública la carpeta y compartir enlaces entre las personas que tú autorices a la misma para compartir el código.

    Cómo ves esta solución nos puede sacar de un apuro cuando no tenemos el código pero disponemos de una conexión a Internet y cuando queremos trabajar con el mismo desde diferentes equipos.

     

  • Introducción a Aplicaciones REST con Spring 3.0 Web MVC Framework

    Introducción a Aplicaciones REST con Spring 3.0 Web MVC Framework

    El Framework Web MVC (modelo-vista-controlador) de Spring está diseñado alrededor de un Servlet (DispatcherServlet) encargado de enviar las peticiones a los diferentes manejadores (handlers) de la aplicación, a partir de la configuración del mapeo de manejadores, la resolución de las vistas, locale, etc. Es decir, al configurar este serlvet en el fichero web.xml de tu aplicación web, todas las peticiones pasarán por él y se encargará de redirigir a los diferentes manejadores. Los manejadores por defecto se basan en las anotaciones @Controller y @RequestMapping como veremos a continuación. A partir de la versión 3.0 de Spring es posible crear aplicaciones Web RESTfull a través de la anotación @PathVariable.

    En esto último se va a centrar este artículo, en la implementación de los controladores a través de anotaciones y en la configuración de los mismos para crear aplicaciones REST.

    Dispatcher Servlet

    Cómo comentamos al principio, el framework MVC de Spring está diseñado alrededor de un servlet que reenvía las peticiones a los diferentes controladores. Este servlet está plenamente integrado con el contenedor IoC (Inversion of Control) lo que permite usar todas las características del framework Spring.

    Workflow del Servlet

    Se trata de un servlet (hereda de la clase base HttpServlet) y como tal se declara en el fichero de configuración web.xml de tu aplicación web:

    <web-app>
    
        <servlet>
            <servlet-name>buscar</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <load-on-startup>1</load-on-startup>
        </servlet>
    
        <servlet-mapping>
            <servlet-name>buscar</servlet-name>
            <url-pattern>*.do</url-pattern>
        </servlet-mapping>
    
    </web-app>

    En el ejemplo anterior, tal como se puede ver en el mapeo del servlet, todas las peticiones que acaben en .do serán manejados por el DispatcherServlet buscar.

    En el framework Web MVC cada DispatcherServlet tiene asociado su propio WebApplicactionContext, el cuál hereda todos los beans definidos en el WebApplicationContext raíz que pueden ser sobreescritos. Una vez inicializado el DispatcherServlet, el framework busca un fichero llamado [servlet-name]-servlet.xml en el directorio WEB-INF de tu aplicación web y crea los beans allí definidos (si hay beans con el mismo nombre que los del contexto raíz los sobreescribe). En el ejemplo anterior debemos tener un fichero llamado buscar-servlet.xml.

    El DispatcherServlet de Spring usa beans especiales para procesar las peticiones y mostrar las vistas apropiadas. Estos beans son parte del Framework y pueden ser configurados en el contexto WebApplicationContext como harías con otros beans. Sin embargo, para la mayoría de los beans se proporcionan parámetros por defecto y no necesitan configuración.

    Contexto del DispatcherSerlvet

    Implementando Controladores

    Los controladores proveen acceso al comportamiento de la aplicación, interpretan los inputs del usuario y los transforman en un modelo que es representado al usuario por una vista (modelo-vista-controlador). Spring implementa un controller de una manera abstracta, lo que permite crear una gran variedad de controladores.

    A partir de la versión 2.5, y la mantiene también en la versión 3.0, Spring introdujo el modelo de programación basado en anotaciones, que usa anotaciones como @RequestMapping, @RequestParam, @ModelAttribute, etc. Los controladores implementados a través de este estilo no necesitan heredar de ninguna clase base o implementar ninguna interfaz específica:

    @Controller
    public class HelloWorldController {
    
        @RequestMapping("/helloWorld")
        public ModelAndView helloWorld() {
            ModelAndView mav = new ModelAndView();
            mav.setViewName("helloWorld");
            mav.addObject("message", "Hello World!");
            return mav;
        }
    }

    Definiendo un controlador con @Controller

    La anotación @Controller indica que una clase tendrá el rol Controlador. No se requiere heredar de ninguna clase base o del API de Servlet, como ocurría en la versión 2.0. El Dispatcher busca las clases «marcadas» con dicha anotación para mapear los métodos y detectar todas las anotaciones @RequestMapping (ver más abajo).

    Para activar la autodetección de los controllers que contienen la anotación, debes añadir a tu configuración el componente que los escanea:

    <?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-3.0.xsd
            http://www.springframework.org/schema/context
            http://www.springframework.org/schema/context/spring-context-3.0.xsd">
    
        <context:component-scan base-package="com.paquete.ejemplo.controllers"/>
    
        // ...
    
    </beans>

    Mapeando peticiones con @RequestMapping

    Se usa la anotación @RequestMapping para mapear URLs como por ejemplo «/mostrareventos» con una clase, o bien un método dentro de la clase. Si es a nivel de clase, se suele mapear una URL concreta con métodos adicionales que acotan el mapeo a través de métodos HTTP específicos (POST, GET, etc.) o bien mediante parámetros en la petición.

    @Controller
    @RequestMapping("/mostrareventos")
    public class AppointmentsController {
    
        private final AppointmentBook appointmentBook;
    
        @Autowired
        public AppointmentsController(AppointmentBook appointmentBook) {
            this.appointmentBook = appointmentBook;
        }
    
        @RequestMapping(method = RequestMethod.GET)
        public Map<String, Appointment> get() {
            return appointmentBook.getAppointmentsForToday();
        }
    
        @RequestMapping(value="/{dia}", method = RequestMethod.GET)
        public Map<String, Appointment> getForDay(
                    @PathVariable @DateTimeFormat(iso=ISO.DATE) Date dia,
                    Model model) {
            return appointmentBook.getAppointmentsForDay(dia);
        }
    
        @RequestMapping(value="/new", method = RequestMethod.GET)
        public AppointmentForm getNewForm() {
            return new AppointmentForm();
        }
    
        @RequestMapping(method = RequestMethod.POST)
        public String add(@Valid AppointmentForm evento,
                           BindingResult result) {
            if (result.hasErrors()) {
                return "mostrareventos/new";
            }
            appointmentBook.addAppointment(evento);
            return "redirect:/mostrareventos";
        }
    }

    En el ejemplo anterior la anotación @RequestMapping se usa primero a nivel de clase. De esa manera indica que todos los métodos de este controlador manejarán las peticiones con el path relativo «/mostrareventos». El métdo get() refina dicha URL y se ejecuta únicamente cuando se trata de un método GET. El método add(), por el contrario, se ejecuta cuando se realiza un POST de un formulario del sitio web.

    Los métodos getForDay() y getNewForm() se ejecutarán cuando se trate de una petición GET y además la URL contenga «/mostrareventos/díaEvento» o «/mostrareventos/new», respectivamente.

    URI Templates

    Para acceder a partes de la URL en los métodos manejadores usamos los patrones de URI o URI Templates, dando valores dentro del path de @RequestMapping. Luego podemos usar la anotación @PathVariable para indicar que un parámetro del método se va a enlazar con un valor que viene en una variable de la URI. Veamos un ejemplo:

    @RequestMapping(value="/alumnos/{alumnoId}", method=RequestMethod.GET)
    public String findAlumno(@PathVariable String alumnoId, Model model) {
      Alumno alumno = alumnoService.findAlumno(alumnoId);
      model.addAttribute("alumno", alumno);
      return "displayAlumno";
    }

    La URI Template «/alumnos/{alumnoId}» especifica la variable con el nombre alumnoId. Cuando un controlador maneja esta petición, el valor de alumnoId se establece con el valor que viene en la URL. Por ejemplo, cuando llega una petición con esta URL «/alumnos/francisco» el valor «francisco» se asociará al parámetro alumnoId de tipo String del método manejador.

    Puedes usar varias anotaciones @PathVariable para enlazar múltiples variables URI Templates:

    @RequestMapping(value="/alumno/{alumnoId}/asignatura/{asignaturaId}",
                     method=RequestMethod.GET)
    public String findAsignatura(@PathVariable String alumnoId,
                     @PathVariable String asignaturaId, Model model) {
      Alumno alu = alumnoService.findAlumno(alumnoId);
      Asignatura asig = alumno.getSignatura(signaturaId);
      model.addAttribute("Asignatura", asignatura);
      return "displayAsignatura";
    }

    El método findAsignatura se ejecutaría al invocar, por ejemplo la URL «/alumno/245/asignatura/32«. Podemos indicar una parte a nivel de clase y otra a nivel de método como en el siguiente ejemplo:

    @Controller
    @RequestMapping("/alumno/{alumnoId}")
    public class RelativePathUriTemplateController {
    
      @RequestMapping("/asignatura/{asignaturaId}")
      public void findPet(@PathVariable String alumnoId,
                           @PathVariable String asignaturaId,
                             Model model) {
        // implementación omitida
      }
    }

    Conclusiones

    Tal y cómo nos propusimos al inicio de este artículo pretendíamos realizar una introducción a la programación de aplicaciones REST con Spring 3.0. Cómo cualquier aplicación Spring MVC, hemos configurado el DispatcherServlet, hemos aprendido a declarar controladores mediante la anotación @Controller. También hemos mapeado peticiones con la anotación @RequestMapping y por último hemos asociado valores de variables de la URL a parámetros de los métodos manejadores de los controladores mediante URI Templates y la anotación @PathVariable. Con todo esto podemos comenzar a construir una aplicación REST en la que cada recurso sea accesible mediante una URL amigable del tipo:

    http://mi-dominio/gestionalumnos/
    http://mi-dominio/gestionalumnos/alumno/new
    http://mi-dominio/gestionalumnos/alumno/234
    http://mi-dominio/gestionalumnos/alumno/234/asignatura/32
    http://mi-dominio/gestionalumnos/asignatura/new
    http://mi-dominio/gestionalumnos/asignatura/32
    etc...

    Este artículo está basado en la documentación de referencia de Spring. Para ampliar estos y otros temas puedes consultar la Referencia del framework Spring MVC.

  • Configura tu Entorno de Desarrollo Android y Crea tu Primera Aplicación

    Configura tu Entorno de Desarrollo Android y Crea tu Primera Aplicación

    En este post aprenderemos a configurar el entorno de desarrollo Android. Al final del mismo tendremos configurado el Sistema y seremos capaces de desarrollar, compilar y ejecutar una pequeña aplicación en el emulador. Para ello vamos a seguir los siguientes pasos:

    1. Instalar el SDK de Android
    2. Instalar el entorno de desarrollo Eclipse y el plugin ADT (Android Development Tools)
    3. Configuración del ADT e instalación de los paquetes del SDK con las versiones del S.O.
    4. Desarrollar y ejecutar un proyecto.

    Debemos tener en cuenta que necesitamos previamente tener instalada una versión de Java, se requiere JDK 5 o superior.

    Instalación del SDK

    El SDK de Android está dividido en dos partes, el paquete principal y los componentes del mismo. Hay versiones para Mac OS X, Windows y Linux.

    Descargamos el paquete principal desde la dirección http://developer.android.com/sdk/index.html para el sistema operativo que deseemos.

    Descomprimimos el fichero descargado en una carpeta de fácil acceso. Por defecto los ficheros del SDK vienen comprimidos en un directorio llamado android-sdk-<plataforma de la máquina>.

    Instalación de Eclipse

    Eclipse es un entorno de desarrollo open source que incluye una colección de herramientas y que fue originalmente creado por IBM para Java. Actualmente es el IDE (Integrated Development Environment) favorito para la comunidad de desarrolladores de Java.

    Descarga «Eclipse for Java Developers» (es una versión del entorno de desarrollo orientado a la programación con Java) desde http://www.eclipse.org/downloads. Instala Eclipse descomprimiendo el fichero descargado.

    Eclipse organiza el trabajo en proyectos y los proyectos se almacenan en Workspaces y cada workspace se almacena en el directorio que tú elijas. La primera vez que ejecutes Eclipse te pedirá la localización del workspace. Si trabajas en Windows te recomiendo que elijas un directorio sin espacios (ej: c:workspace) y en linux (/home/usuario/workspace).

    Eclipse IDE

    Instalación del plugin ADT

    Una vez ejecutado Eclipse pulsa el menú Help->Install New Software…

    Pulsa Add, en la esquina superior derecha

    En el diálogo que aparece para añadir repositorio, tecleamos «ADT Plugin» para el nombre y la siguiente URL para la localización:

    https://dl-ssl.google.com/android/eclipse/

    Pulsamos OK

    Instalar ADT

    En el diálogo de Software disponible, seleccionamos el checkbox de la opción Developer Tools y pulsamos Next.

    En la siguiente ventana veremos la lista de herramientas a descargar. Pulsamos Next.

    Leemos y aceptamos los acuerdos de licencia, y pulsamos Finish. Si aparece una advertencia de seguridad diciendo que la autenticidad o validez del software no puede ser contrastada, pulsamos OK.

    Una vez completada la instalación, reiniciamos Eclipse.

    Para configurar el ADT y especificar dónde está instalado el SDK de Android, pulsamos Window->Preferences y a la izquierda del diálogo que aparece pulsamos sobre Android. En la caja de texto con la etiqueta SDK location debemos introducir la ruta del SDK (ejemplo en linux: /home/usuario/android-sdk-linux_x86) y pulsamos OK.

    Preferencias ADT

    Instalación de los componentes del SDK

    Para la instalación de los componentes que faltan debemos ejecutar el SDK. Esta vez lo podemos hacer desde el propio Eclipse, pulsando sobre el  botón de la barra de herramientas que abre la aplicación Android SDK y AVD Manager. Esta opción también la encontraremos desde el menú Window.

    AndroidToolEclipse

    Pulsamos sobre la opción Available Packages en la parte izquierda de la aplicación, para seleccionar los paquetes que queramos. Los componentes básicos son SDK Tools, SDK Platform Tools y al menos una versión de la plataforma, los recomendados son la documentación y los ejemplos y si queremos instalarlo por completo podemos marcar las herramientas de terceros y las APIS de Google. Marcaremos todos los paquetes en el caso de que no tengamos problemas de espacio y pulsamos Install. El proceso de instalación lleva bastante tiempo por lo que mejor dejamos que se vaya instalando mientras hacemos cualquier otra cosa.

    Pantallazo-Android SDK and AVD Manager

    Hello World!

    Para ver que está todo configurado correctamente vamos a desarrollar nuestro primer proyecto Android, un sencillo Hello World. Ejecutamos Eclipse, si es que no lo tenemos ya en ejecución, y seleccionamos  File->New->Android Project. Si esta opción no se encuentra en el menú, seleccionamos la opción Other… y en el cuadro de diálogo desplegamos Android y pulsamos sobre Android Project.

    Especificamos un nombre al proyecto (HelloWorld), más abajo la versión de Android para la que vamos a desarrollar; seleccionamos la versión 2.2 y especificamos el nombre del paquete. En Android los paquetes son importantes, entre otras cosas, a efectos de firmas de aplicaciones. Suele ser el nombre del dominio y opcionalmente uno o varios subdominios al estilo Java (por ejemplo com.example.calculator). Pulsamos Finish y Eclipse nos generará una estructura básica de proyecto con los ficheros necesarios:

    • AndroidManifest.xml en el directorio raíz es el fichero que une todos los componentes de la aplicación, los bloques que la componen y los permisos que requiere.
    • Layout: main.xml, en el directorio res->Layout especifica el layout de la pantalla. En este sencillo caso es un layout lineal con un texto, cuyo valor viene dado por la etiqueta @string/hello.
    • Strings.xml en el directorio res->values es el que almacena los valores de las cadenas de texto a visualizar en la pantalla. Aquí se encuentra el valor de la cadena a mostrar en la pantalla, y que podemos modificar si deseamos.
    • En el directorio gen/nombrepaquete/R.java, el fichero responsable de enlazar los recursos y las clases java. Es un fichero autogenerado y no debemos editarlo.
    • En el diretorio src se encuentran las clases java.  Es el código que se convertirá en ejecutable y correrá en la máquina java virtual Dalvik (la máquina virtual Java de Android). Automáticamente nos ha generado una clase HelloWorldActivity.java que hereda de la clase Activity. En Android las Activity representan pantallas de aplicación. Una aplicación puede tener una, varias o ninguna Activity. En este ejemplo sencillo invocamos al método setContentView() pasándole cómo parámetro el código para el layout principal (y único definido en la aplicación).

    El Emulador

    Ejecutar la aplicación en un dispositivo físico o en un dispositivo emulado es similar, ejecuta el mismo código base al igual que en el dispositivo. Para usar el emulador debemos crearnos uno desde las herramientas Android.
    Abrimos el SDK y seleccionamos Virtual Devices. Como no tenemos ninguno pulsamos New… y seleccionamos un nombre (GingerBread, por ejemplo), la versión de Android que se ejecuta en él (2.3) y el tamaño de la SD externa en Mb. Pulsamos Create AVD y a continuación seleccionamos de la lista el dispositivo creado y pulsamos Start… para ejecutarlo. En unos breves instantes aparecerá en la pantalla un sistema Android, con ciertas carencias, como localización gps y acelerómetro pero totalmente funcional para la mayoría de los desarrollos.
    Para ejecutar el proyecto, desde Eclipse lo seleccionamos y pulsamos el botón derecho del ratón para hacer clic sobre Run As->Android Application. Automáticamente, en el dispositivo virtual, aparecerá la siguiente ventana:
    Emulador
    Si has llegado a este punto sin problemas, ¡enhorabuena! Ya has configurado tu entorno de desarrollo y has ejecutado una sencilla aplicación. Ahora se abre un mundo de posibilidades para ti en el ecosistema Android.
  • Nivo Slider, un slideshow con jQuery

    Nivo Slider, un slideshow con jQuery

    Para los que nos dedicamos al desarrollo y diseño de aplicaciones para Internet nos ha sorprendido la rapidez con la que se han propagado los slideshows (también llamados sliders). No hay web actual que se precie que no tenga uno. ¿Y qué es y para qué sirve? Se trata de un componente que presenta una serie de imágenes ordenadas con información seleccionada, que se van presentando una tras otra manteniendo cada una visible un breve periodo de tiempo. Estas imágenes representan una información seleccionada que queremos destacar y pueden incluir un enlace a dicha información ampliada e incluso una etiqueta con una breve descripción. Es muy útil en páginas muy densas con mucha información para, en el mismo espacio, destacar más de un tema.

    Existen multitud de estos componentes dependiendo de la funcionalidad que incorporan. En nuestro caso, para una nueva web, el usuario nos pidió incorporar un sencillo slideshow y nos hemos decantado por Nivo Slider. Incorpora 16 efectos de transición, soporta enlaces a imágenes y navegación entre imágenes mediante teclado. Su utilización es sencilla y la versión empaquetada sólo ocupa 15Kb. por lo que se agradece su ligereza. Es un código de libre uso bajo la licencia MIT. Funciona en los siguientes navegadores:

    • Internet Explorer v7+
    • Firefox v3+
    • Google Chrome v4+
    • Safari v4+
    • Opera v10+

    Para usarlo en nuestros proyectos necesitamos incluir jQuery, el script de Nivo Slider (jquery.nivo.slider.pack.js) y el CSS de Nivo Slider (nivo-slider.css). Además necesitamos añadir un poco de código HTML  a nuestra página. Suele ser un div con imágenes (images), de hecho, sólo imágenes o imágenes dentro de enlaces están permitidas dentro del div que representa el slider. Cualquier otro código HTML hará que no funcione el control.

    <!-- Dentro de la sección <body> de la página --> 
    <div id="slider"> 
     <img src="images/slide1.jpg" alt="" /> 
     <a href="http://dev7studios.com">
     <img src="images/slide2.jpg" alt="" title="#htmlcaption"/>
     </a> 
     <img src="images/slide3.jpg" alt="" title="Este es un ejemplo de un caption"/> 
     <img src="images/slide4.jpg" alt="" /> 
    </div> 
    <div id="htmlcaption" class="nivo-html-caption"> 
     <strong>Esto</strong> es un ejemplo de un caption <em>HTML</em> con <a href="#">un enlace</a>. 
    </div> 

    Para que el slider se vea correctamente mientras está cargando añadiremos algo de estilos CSS:

    #slider { position:relative; width:618px; /* Change this to your images width */ 
     height:246px; /* Change this to your images height */ 
     background:url(images/loading.gif) no-repeat 50% 50%; 
     } 
    #slider img { position:absolute; 
     top:0px; left:0px; display:none; 
     } 
    #slider a { border:0; display:block; }

    Para enlazar la funcionalidad del slider con la capa que hemos cargado previamente cuando cargamos la página, llamamos al método nivoSlider() de la siguiente forma:

    <script type="text/javascript"> 
     $(window).load(function() { 
     $('#slider').nivoSlider(); 
     }); 
    </script> 

    Este método puede invocarse sin parámetros o bien con alguna de las opciones disponibles:

    $('#slider').nivoSlider({
     effect:'random', // Efecto de transición: 'fold,fade,sliceDown'
     slices:15, // Para animaciones 'slice'
     boxCols: 8, // Para animaciones 'box'
     boxRows: 4, // Para animaciones 'box'
     animSpeed:500, // Velocidad de la transición
     pauseTime:3000, // Cuánto tiempo en milisegundos se visualiza una imagen
     startSlide:0, // Imagen de comienzo (empezando por cero)
     directionNav:true, // Si queremos que aparezcan controles para siguiente y anterior
     directionNavHide:true, // Sólo cuando el cursor se sitúa sobre el componente
                                se visualizará la navegación
     controlNav:true, // 1,2,3... navegación
     controlNavThumbs:false, // Usar miniaturas para el control de la navegación
     controlNavThumbsFromRel:false, // Usar imagen rel para miniaturas
     controlNavThumbsSearch: '.jpg', // Reemplazar este patrón del nombre de la imagen...
     controlNavThumbsReplace: '_thumb.jpg', // ...con esto para las imágenes miniatura
     keyboardNav:true, // Usar las flechas izquierda y derecha para navegación
     pauseOnHover:true, // Parar navegación al pasar el ratón sobre el componente
     manualAdvance:false, // Forzar transiciones manuales
     captionOpacity:0.8, // Opacidad para los caption o títulos de las imágenes
     prevText: 'Ant', // Texto de navegación hacia la izquierda
     nextText: 'Sig', // Texto de navegación hacia la derecha
     beforeChange: function(){}, // Función que se ejecuta antes de una transición
     afterChange: function(){}, // Función que se ejecuta después de una transición
     slideshowEnd: function(){}, // Función que se ejecuta después de que todas
                                    las imágenes se han mostrado
     lastSlide: function(){}, // Función que se ejecuta cuando la última imagen se visualiza
     afterLoad: function(){} // Función que se ejecuta cuando se carga el componente
    });
    
     

    Hay gran variedad de efectos para las transiciones. Los valores posibles para la opción effect son: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse,boxRainGrow, boxRainGrowReverse. Para un uso avanzado, incluir Nivo Slider en WordPress o el uso de imágenes miniatura, podemos visitar la página oficial http://nivo.dev7studios.com/.

  • Deshabilitar el botón Submit manteniendo el nombre/valor en el formulario

    Deshabilitar el botón Submit manteniendo el nombre/valor en el formulario

    Cuando desarrollamos aplicaciones web en las que se muestra uno o varios formularios, en ocasiones nos encontramos con que al enviar éstos, el tiempo de proceso o consulta a la Base de Datos es mayor de lo deseable. Cómo todavía no conozco un usuario paciente, lo más probable es que mientras espera haya pulsado el botón enviar el formulario varias veces más, saturando el servidor con más peticiones y haciendo que el tiempo de proceso sea aún mayor.

    Lo primero que se nos ocurre es deshabilitar el botón Submit para que el usuario no vuelva a pulsar y de esa manera evitamos recibir en el servidor varias peticiones idénticas. Esta solución funciona en la mayoría de los casos pero puede darse el caso en el que tengamos varios botones de tipo Submit dentro del mismo formulario (buscar, imprimir, ordenar, completar desplegable), y nos interese consultar en el servidor cuál de ellos ha pulsado mediante una sentencia similar a:

    if (request.getParameter("nombre_del_input_submit_pulsado") != null) {     ... }

    En el caso de que hayamos deshabilitado el botón no es posible recuperar si ha pulsado dicho botón puesto que los elementos deshabilitados de un formulario no se envían en la petición.

    Existe un plugin en jQuery llamado Lock Submit que deshabilita el botón submit después de su pulsación manteniendo el par nombre / valor pasado en el formulario. Como dice en el título de la página del plugin:

    Stop Double Clicks on form submits… without losing the submits name/value

    Para usarlo necesitas tener jQuery, del que ya os he hablado en más de una ocasión y seguir estos pasos:

    1. Descarga el plugin
    2. Incluye tanto jQuery como el plugin en tu página
    3. Incluye el siguiente código adaptándolo al selector de tu botón:
    <script type="text/javascript"> jQuery(document).ready(function() { jQuery('id_boton_submit').lockSubmit({ submitText: "Please wait" }); }); </script>

    Internamente no deshabilita el botón, realmente el botón original se encuentra oculto y el que se muestra en la página deshabilitado es una copia del primero. La propiedad submitText permite modificar y personalizar el texto que se muestra dentro del botón. También tiene propiedades para modificar el estilo css.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para su aceptación y la de nuestra política de cookies.

ACEPTAR
Aviso de cookies