RSS
people

GWT Glass Pane – El efecto LightBox en Gwt

Muchas veces he usado el objeto DialogBox de GWT para mostrar mensajes emergentes en vez de los intrusivos alerts, sin embargo siempre me había parecido que estos a pesar de tener una buena estética, no dan la impresión que lo que está detrás de él está congelado, entrando así en un problema de usabilidad en nuestras aplicaciones. Hoy, sin necesidad de estarlo buscando, me encontré con GWT Glass Pane, un composite que además se encarga de oscurecer el fondo de nuestra página al mejor estilo de LightBox.

En el sitio además explican como implementarlo de forma muy sencilla en nuestros proyectos, sin necesidad de tener que agregar un nuevo módulo a él, sino creando una clase nueva.

Pruebalo>>

No Comments | Tags: , , , , , , ,

Depurando tomcat como servicio

Ya hace tiempo un amigo me enseñó como podía depurar mis aplicaciones web desplegadas en el servidor Apache Tomcat, este método me había venido funcionando perfectamente cuando usaba el tomcat iniciado con el script startup.bat o startup.sh, la cosa se complicó hace aproximadamente un mes cuando tuve que depurar un tomcat como servicio, en ese entonces tuve que buscar mucho sobre el tema, afortunadamente lo encontré, el día de hoy una compañera lo necesitó así que decidí colocarlo aquí en el blog por si alguién más lo llegase a necesitar.

La solución es bastente sencilla y basta con seguir los siguientes pasos:

  • Abre una consola de MS-DOS y navega hasta la barpeta bin del tomcat, generalmente es C:\Archivos de programa\Apache Software Foundation\Tomcat6.0\bin.
  • Estando ahí, ejecuta el siguiente comando: tomcat6w.exe //ES//tomcat6. Esto es equivalente a iniciar el monitor del tomcat, y presionar en la opción Configurar.
  • Pásate a la pestaña de Java, y en la sección de Opciones de la máquina virtual (Java Options) escribe las siguientes 2 líneas:
    -Xdebug
    -Xrunjdwp:transport=dt_socket,address=127.0.0.1:1044,server=y,suspend=n

    Es muy importante que estás líneas queden en la primera posición, antes de las opciones que ya están ahí, como se puede ver en la imagen.
    el parámetro address, te dice la dirección y el puerto desde el que se conectará el eclipse, en este caso será un debug local y usaremos el puerto 1044.
  • Presiona el botón aceptar y reinicia el servicio tomcat, con esto el tomcat iniciará en modo depuración.
  • Ahora desde eclipse puedes configurar un perfil de depuración, solo tienes que dar click en el menú Run y luego en Debug Configurations.
  • Agrega una nueva configuración de aplicación remota, seleccionando la opción Remote Java Application. Asigna un nombre para tu configuración y coloca la dirección IP de la máquina en la que se ejecuta el tomcat en el campo Host de la sección Connection Properties, tambien asígna el puerto que configuraste en las opciones de inicio del tomcat, en nuestro caso era el 1044 en el campo Port de la misma sección.
  • En la pestaña Source selecciona tus proyectos mediante el botón Add, luego Java Project y selecciona los proyectos que quiera vigilar con el depurador.
  • Ahora sólo nos hace falta colocar los puntos de depuración e iniciar el depurado mediante el botón Debug.

Eso es todo por ahora, espero que les sea de mucha utilidad.

No Comments | Tags: , , , ,

Reemplazando animaciones flash con Javascript

De antemano sé que surgiran muchas ideas contradictorias a este post, sin embargo quiero exponerles a todos estos 16 ejemplos de cuando javascript hace una arremetida contra flash para tratar de quitarle dominio en el campo de las animaciones en la web.

Gracias aNieto2k>>

1 Comment | Tags: , , , , , ,

Columnas fijas y flexibles?

En el diseño de un sitio con columnas siempre vas a tener dos opciones: columnas de ancho fijo ó columnas flexibles, las dos con ventajas y uno que otro inconveniente, en mi caso prefiero las columnas flexibles ya que usan mejor las pantallas grandes. Sin embargo siempre hay quien se le daña el diseño si las columnas se crecen, pues gracias a un script de JQuery se ha logrado que podamos definir el tamaño de nuestras columnas de forma fija y repartir el espacio de forma uniforme.

Gracias Alma de WebMasterLibre>>

No Comments | Tags: , , ,

Check My Colours – Un sitio para validar la armonía de color

El contraste de los colores de un sitio web es un aspecto que puede llevarlo a fracasar rápidamente, es fundamental lograr un punto de armonía visual para el lector, de manera que le permita sentirse a gusto, captando su atención en los aspectos más imprtante y sin ir a provocar molestias, cansancio y en peor caso problemas visuales.

Otro lado del diseño en cuanto a colores lograr un buen contraste de los colores de manera que sea sencillo identificar los diferentes objetos de tus páginas, esto último es precisamente en lo que checkMyColours busca ayudarte.

El sitio de checkmycolours te permite validar el contraste de los colores de un elemento y su fondo de manera que sean claramente diferenciables, si bien es recomendable escuchar (o leer?) sus consejos, creo que no debes tomartelo muy a pecho ya que incluso te muestra sugerencias de objetos que no son visibles en tu página.

Para terminar quiero colocar el resultado de efectuar la compriobación en el propio blog ya que me imagino que intentarás hacerlo xD…

Si tu segunda opción es hacerlo a google, también lo intenté y no funciona jeje…

Gracias a KaBytes>>

CheckMyColours>>

1 Comment | Tags: , , , ,

dhtmlxScheduler – Un completo calendario para tus aplicaciones web

Aunque he visto algunas implementaciones de calendarios en javascript y html, tengo que confesar que dhtmlxScheduler me ha dejado realmente sorprendido, no solo por su apariencia sino por por el diseño de interacción que nos presenta, muy al estilo de cualquier aplicación de escritorio, basta con arrastrar y soltar para delimitar el inicio y duración del evento y/o modificar su ubicación en el tiempo.

Entre las características que he podido probar puedo enumerar:

  • Permite añadir, modificar y eliminar evento sin necesidad de refrescar la página (el poder de ajax que llaman xD) .
  • El comportamiento intuitivo de arrastrar y soltar para configurar eventos permite modificar el inicio, duración e incluso fecha de los mismo, importante que estos se puede transferir de un día a otro, o incluso entre meses.
  • El valendariop permite vistas de días, semana y mes.
  • La librería viene con compresión GZip, lo que garantiza un menor tamaño (cerca de 19 Kb).
  • Además en la página aseguran que es de fácil personalización, por ejemplo cambiar el formato de las fecha, el idioma del calendario y los estilos, y la independencia para el manejo en el lado del servidor (Java, Php, Asp, etc.), ya que es un componente puramente javascript.
  • Soporta tanto una licencia GPL como su variante comercial.

Puedes encontrar un demo aquí>>

El sitio original de dhtmlxScheduler>>

No Comments | Tags: , , , , , ,

Formularios y Alertas para tu sitio

El día de hoy un amigo me preguntaba si era posible en un desarrollo suyo lograr que al presionar un enlace de la página apareciera un formulario de contacto al mejor estilo lightbox, para mis adentros me dije si, es posible hacerlo con algunas de las muchas librerías que nos permiten hacer cargas mediante ajax de forma elegante, sin embargo me entero que ya existe un plugin para JQuery, que hace precisamente esto, cómo bien dicen que una imagen vale más que mil palabras, yo añado que un demo vale más que mil imagenes xD.

 

Clic en la imagen para ver el demo

Clic en la imagen para ver el demo

Otra funcionalidad que podemos agregar en nuestros sitios es la posibilidad de mostrar mensajes al mejor estilo de twitter, estos nos permiten informar al usuario sobre diferentes eventos que vayan ocurriendo.

Estos son solo un par de recursos que al ser incorporados en nuestros sitios harán más amena la estadía por parte de los visitantes.

Ver demo del formulario>>

Descargar ejemplo de carga de formulario con ajax>>

Ver demos de mesajes estilo twitter>>

Descargar el ejemplo de mensajes>>

Una y otra vez gracias a Ribosomatic.

1 Comment | Tags: , , , , , ,

JSP Documents – JSP en formato XML

JSP Documents o documentos JSP, son páginas JSP escritas con sintaxis XML, esto nos brinda algunas ventajas sobre la forma estándar de escribir estos archivos:

  • Las páginas JSP pueden ser creadas usando cualquiera de las muchas herramientas de generación de XML, lo que además le garantizará que su documento estará bien formado.
  • Las páginas JSP pueden ser creadas usando cualquiera de las muchas herramientas de generación de XML, lo que además le garantizará que su documento estará bien formado.
  • Podría validar el contenido de la página JSP contra un descriptor DTD (definición de tipo de documento), obteniendo así los beneficios que esto nos puede traer.
  • Podría anidar y extender namespaces dentro de las páginas JSP.
    Las páginas JSP pueden ser usadas para intercambiar datos entre aplicaciones web.

Además de estos beneficios, el escribir documentos JSP reduce la complejidad mientras aumenta la flexibilidad, ya que podemos tener tanto páginas JSP como documentos JSP en nuestras aplicaciones, y por otra parte, los elementos en sintaxis XML puede ir sin ningún problema dentro de una página JSP con sintaxis estándar, lo que nos permite ir haciendo una migración gradual hacía documentos JSP.

Cómo crear un documento JSP?

Como ya dije anteriormente un documento JSP tiene que ceñirse a la sintaxis XML, y esto tiene sus restricciones, lo más básico es que cada elemento debe tener su elemento de cierre correspondiente y que sólo debemos tener un elemento raíz.  Pero esto no es algo que sea tan difícil como cualquiera pensaría, si nos ponemos a pensar, la gran mayoría de los elementos de una página JSP convencional ya cumplen con la sintaxis XML, aquellos que no cumplen, los he clasificado en la siguiente tabla, junto con su equivalencia:

Elemento

Sintaxis estándar

Sintaxis XML

Comentarios

<%– … –%>

<!– … –>

Declaraciones

<%! … %>

<jsp:declaration> … </jsp:declaratio>

Directivas

<%@ include … %>

<jsp:directive.include … />

<%@ page … %>

<jsp:directive.page … />

<%@ taglib … %>

xmlns:prefijo=”tag library URL”

Expresiones

<%= … %>

<jsp:expression> … </jsp:expression>

Scriptlets

<% … %>

<jsp:scriptlet> … </jsp:scriptlet>

Página JSP en format estándar

<%@ taglib uri=http://java.sun.com/jsp/jstl/core prefix="c" %>
<%@ taglib uri=http://java.sun.com/jsp/jstl/functions prefix="fn" %>
  <html>
    <head><title>Hola</title></head>
    <body bgcolor="white">
      <img src="image.gif">
      <h2>Hola Documentos JSP</h2>
      <form method="get">
        <input type="text" name="username" size="25">
        <p></p>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
      </form>
      <jsp:useBean id="userNameBean" class="hello.UserNameBean" scope="request"/>
      <jsp:setProperty name="userNameBean" property="name" value="${param.username}" />
      <c:if test="${fn:length(userNameBean.name) > 0}" >
        <%@include file="response.jsp" %>
      </c:if>
    </body>
  </html>

Documento JSP en formato XML

<html
  xmlns:c="http://java.sun.com/jsp/jstl/core"
  xmlns:fn="http://java.sun.com/jsp/jstl/functions" >
  <head><title>Hello</title></head>
  <body bgcolor="white" />
    <img src="duke.waving.gif" />
    <h2>My name is Duke. What is yours?</h2>
    <form method="get">
      <input type="text" name="username" size="25" />
      <p></p>
      <input type="submit" value="Submit" />
      <input type="reset" value="Reset" />
    </form>
    <jsp:useBean id="userNameBean" class="hello.UserNameBean" scope="request"/>
    <jsp:setProperty name="userNameBean" property="name" value="${param.username}" />
    <c:if test="${fn:length(userNameBean.name) gt 0}" >
      <jsp:directive.include="response.jsp" />
    </c:if>
  </body>
</html>
No Comments | Tags: , , ,

IceFaces – Framework JSF

Aunque he hablado un poco de gwt y personalmente me ha parecido la mejor opción a la hora de realizar aplicaciones ricas en internet, he decidido investigar un poco sobre la tecnología JSF de sun ya que después de todo es el estándar, la idea es conocer más sobre esta opción de desarrollo y a la postre poder hacer un comparativo sobre ellas. Ya hace tiempo venia buscando una implementación para enfocarme en ella, probé con RichFaces de JBoss pero con la salida del más reciente podcats de la asociación de javahispano me he decidido por IceFaces.

Qué es ICEFaces?

Bueno pues podemos decir que es un framework de desarrollo web creado sobre la especificación jsf y con capacidad de procesamiento de solicitudes ajax, que nos permiten a los desarrolladores web construir aplicaciones con contenido enriquecido, programando únicamente en java y sin tener que agregar un applet u objetos que dependan de complementos propios de x navegador.

Qué beneficios me aporta usarlo?

Los beneficios son numerosos pero podemos destacar:

  • Una mejor experiencia del usuario: Usando los componentes con soporte ajax y con la posibilidad de crear nuevos, se puede mejorar la experiencia del usuario al usar la aplicación.
  • Es open source: ICEFaces es un proyecto liberado de código abierto, lo que garantiza que siempre tendremos un soporte por parte de la comunidad, actualmente existen alrededor de 70,000 desarrolladores involucrados con su mejoramiento.
  • Basado en estándares: Esto nos permite integrar el framework ya sea en aplicaciones nuevas o existentes, y con la posibilidad de usar las ventajas que ofrecen los mejores ides del mercado como eclipse o netbeans.
  • Compatibilidad: Ha sido probado en una gran cantidad de servidores, ides y navegadores. Además es posible integralo con otros productos como hibernate o librerías para el manejo de javascript.
  • Ajax push: No encontré una buena forma de traducir esto, pero lo que nos permite no es más que hacer un renderizado de la página en el navegador del cliente que sea iniciado por un evento en el servidor, es decir un renderizado iniciado por el servidor y no por el cliente.
  • Seguridad: Es uno de los frameworks más seguros (si no el más) que actualmente podemos encontrar en el mercado. Tiene compatibilidad con SSL, previene la inyección de códogo malicioso XSS, es una tecnología del lado del servidor, lo que nos garantiza que la lógica de negocio de nuestra aplicación no será mostrada al cliente (esto tiene su contraparte en el consumo de recursos de la maquina servidor).

Versiones de java soportadas:

  • Sun JDK 1.4 o superior.
  • MyFaces y Sun JSF 1.1
  • Sun JSF 1.2

Integración con IDES:

Es posible integrarlo en los siguientes IDES.

  • Eclipse.
  • My Eclipse Enterprise Workbench.
  • Sun Netbeans.
  • Oracle Jdeveloper.
  • IBM RAD.

Servidores de aplicaciones soportados:

  • Apache Tomcat.
  • BEA Weblogic Server.
  • JBOSS Application server.
  • IBM WebSphere Application Server.
  • Oracle Aplication Server Container for J2EE (OC4J).
  • SAP NetWeaver.
  • Sun GlassFish.
  • Sun Java System Application Server.
  • Webtide Jetty.

Compatibilidad con los siguientes navegadores web:

  • Microsoft Internet Explorer 6.x, 7.x, 8.x.
  • Firefox 2.x, 3x.
  • Safari 3.x.
  • Google Chrome 1.x.
  • Apple Safari (iPhone, iPod Touch).
  • Opera Mobile.
  • RIM Blackberry Bold.

Información tomada de la documentación de IceFaces.

Ir al sitio de IceFaces.

2 Comments | Tags: , , , , ,

GwtXeyes – Xeyes hecho con gwt

Hace poco hablaba sobre xeyes en javascript, esto tenía 2 motivos, primero mostrar lo que se puede hacer con un poco javascript y segundo realizar el ejemplo usando únicamente GWT, con el fin de aplicar los conocimientos que he ido adquiriendo sobre el tema y también mostrar que con este framework podemos hacer grandes cosas.

Una reflexión que he hecho luego de esta actividad es que aunque tengamos un buen framework para programar las aplicaciones web, esto debe ser complementado con un buen uso de css ya que en este aspecto gwt si es muy flexible, y máxime cuando seguimos sufriendo el carma de Internet explorer que interpeta nuestras aplicaciones como se le da la gana.

La aplicación la he probado en Firefox 3.0.8, Opera 9.5, Safari 3.0 y Chrome 2.0, en IExplore he realizado la prueba y no ha funcionado de primera y tampoco he sacado el tiempo para revisar por que ya que esto para mi tiene menos relevancia incluso que el tema del scroll en una resolución de 800 por 600 xD…

Pueden ver el ejemplo realizado con gwt aquí

Esperen en un próximo post el código fuente, ahora no lo he publicado ya que aún no lo he documentado como es debido.

No Comments | Tags: , , , ,