Programación dulce para la boca, suave en el estomago

JQuery: Limitando la entrada de carácteres en los input[type=text]

2010-08-20T12:21:00.000-07:00

Hay veces en la que queremos que en una caja de texto sólo podamos ingresar ciertos carácteres, por ejemplo una caja de texto donde sólo puedo escribir números.

Con este plugin de jquery, podemos realizar la tarea de manera sencilla: ver demo

Para usar el plugin usamos el método filter_input

$(function(){
//Limita la entrada en la caja de texto a los carácteres que pasen la expresión regular.
$('#numbers').filter_input({regex:'[02468]'});
});

La url del plugin es: http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input

JQuery: Usando Máscaras en los input[type=text]

2010-08-20T07:27:00.000-07:00

Las máscaras de texto limitan el contenido que puede ser entrado en una caja de texto y aplica formato al mismo tiempo al contenido.

El demo muestra una máscara que sólo permite incluir números seis números y dos números decimales.

El plugin usado para fectuar este demo es: http://digitalbush.com/projects/masked-input-plugin/

El código javascript para aplicar la máscara es sencillo:


$(function(){
  //Uamos la función para seleccionar nodos de jquery y usamos el plugin mask.
  $('#numero').mask('999999.99');
});

El formato de las máscara es sencillo:

a Representa carácteres alfabéticos
9 Representa carácteres numéricos
* Representa carácteres alfabéticos y numéricos

Es posible configurar un evento con este plugin que se activa cuando la entrada de los datos ha completado la máscara configurada para la caja de texto:


$(function(){
  //Uamos la función para seleccionar nodos de jquery y usamos el plugin mask.
  $('#numero').mask('999999.99', {completed: function(){ alert("Mascara completada, valor ingreado: " + this.val()); }});
});

Obteniendo los caracteres invalidos a partir de un RegExp

2009-05-12T06:54:00.000-07:00

Hoy, tuve que hacer una función en Javascript que analiza una cadena y retorna que fragmentos de la cadena son inválidos o no son compatibles con la expresión regular dada.

Les comparto la función:


function extractBadCharsInRegexp(regexp, str, whiteSpaceLabel, errorLabel){
 var splitResult = str.split(regexp);
 var resultArray = []; 
 
 //limpio el array de cadenas vacias
 for(var i = 0; i < splitResult.length; i++){
  var tmp = splitResult[i];
  if(tmp.length > 0){
   resultArray.push(tmp);
  }
 }
 //si el nuevo array tiene elementos hay un error
 if(resultArray.length > 0){
  var result = resultArray.join(",")
  var nowhiteResult = result.replace(/\s/g, '');
  if(nowhiteResult != result){
   alert(whiteSpaceLabel);
  }
  //muestro mensaje si hay caracteres distintos a espacio
  if(nowhiteResult.replace(',', '').length > 0){
   alert([errorLabel, ' [', nowhiteResult, "]"].join(''));
  }
 }
 return resultArray;
}

Concejos para vencer la Procrastinación

2009-04-16T11:15:00.001-07:00

La Procrastincación es la acción (o arte cultivada) de postergar actividades o situaciones que uno debe atender, por otras situaciones más irrelevantes y agradables.

Thinkwasabi nos comparte la siguiente lista para combatir la procrastinación:

Valora lo que ganaras a terminar esa tarea
Piensa en que retrasarlo va a ser peor
Si es una tarea grande, divídela en pequeñas partes
Míralo como un reto directo a tu fortaleza y determinación
Corta las mentiras, no te engañes
Piensa en los demás, a veces son quienes pagan cara tu Procrastinación
Generalmente luego "no es para tanto"
Aplica la regla hazlo ahora
Si es una tarea compleja, no busques la perfección a la primera
Si utilizas el GTD ojo con el "algún día"
Piensa que si vences serás un "mejor profesional"
Si te han asignado una tarea que otro debía hacer, no culpes al mensajero
Si te vas a poner a ello, corta cualquier distracción
"Es que es mucho, no se por donde empezar", divide la tarea en partes y hazlo
Aplica la regla de los 2 minutos del GTD a las tareas que sabes que las puedes completar rápido
Hazlo para evitar el estrés y la frustración
Encuentra el lado positivo de esa tarea
Elimina todo lo demás de tu cabeza, sólo cuenta eso
Piensa que destruye tu Organización y Productividad
Enfréntate a la Procrastinación que viene del miedo
¿Necesitas un estimulo?, recurre a tu canción favorita.
Saborea el momento de la victoria

La confianza en los equipos de desarrollo

2009-04-16T05:50:00.001-07:00

Les dejo este articulo sobre la confianza en los equipos de trabajo

Lo primero que se necesita en el entorno laboral es la confianza profesional. La confianza profesional nos dice "Yo confio que usted es competente para hacer el trabajo, que va a compatir información relevante, y que tiene buenas intenciones para el equipo". Es decir, estamos hablando de la comunicación, el compromiso, y la competencia.

5 formas para ganarse la confianza de un equipo

El articulo referencia cinco prácticas interesantes que nos ayudan a mantener confianza en un equipo de trabajo o a ganarla:

Tratar los temas directamente
Compartir información relevante
Cumplir los compromisos o dar aviso temprano de que no se puede
Decir "No" cuando queremos decir no
Mostrar lo que sabemos y lo que no sabemos

Tip: Como extraer los caracteres de un archivo pdf

2009-02-26T05:07:00.001-08:00

Les dejo este tipo acerca de como extraer los caracteres de un archivo pdf.


  import com.lowagie.text.pdf.PRTokeniser;
  import com.lowagie.text.pdf.PdfReader;
  import java.io.InputStream;
  ...
  InputStream stream = ...;
  PdfReader pdfReader = new PdfReader(stream);
  try{
   int numberOfPages = pdfReader.getNumberOfPages();
   for(int page = 1; page <= numberOfPages; page++){
    PRTokeniser tokeniser = new PRTokeniser(pdfReader.getPageContent(page));
    while(tokeniser.nextToken()){
     if (tokeniser.getTokenType() == PRTokeniser.TK_STRING) {
      System.out.println("Pagina: " + page);
      System.out.println("Parrafo: " + tokeniser.getStringValue());
      System.out.println("---------------------------------------");
     }  
    }
   }
  }finally{
   pdfReader.close();
  }

El framework de aplicaciones Seam

2009-02-13T05:53:00.001-08:00

Seams es un framework para construir aplicaciones de internet ricas en Java. Seam integra tecnologías tales como AJAX, JSF, JPA, EJB 3.0 y BPM dentro de una solución unificada y completa.

Seams ha sido diseñado desde el comienzo con el fin de eliminar complejidad en ambos nivels de arquitectura y APIs.

Algunas de las mejoras que Seam trae a la plataforma Java EE son:

Eliminar los problemas de JSF que han sido el tema de incontables peleas
Enmendar la comunicación entre JSF y componentes de negocio transaccionales
Colapsar capas innecesarias
Ofrece una solución para la administración de estado, desanimando el uso de arquitecturas sin estado.
Administra el contexto de persistencia para evitar excepciones de inicialización peresoza en la vista y subsecuentes peticiones.
Conecta varias vistas, con un flujo de páginas con estado
Trae los procesos de negocio al mundo de las aplicaciones web
Conecta mecanismos de autenticación y autorización basada en POJOs y soportados por JAAS.
Provee un contenedor embebido para pruebas.

Cuando puedo usar X característica en la Web

2009-02-12T07:44:00.001-08:00

Html, Css, Javascript son las tecnologías por excelencia en el mundillo de la Web, pero la plataforma sobre la cual estas tecnologías juegan su papel no es muy estandar, estamos hablando de los navegadores web (IE, Firefox, Safari, WebKit, Opera, etc).

Navegando por la Web me he encontrado con este sitio When can I use ..., este sitio muestra tablas de compatibilidad de las características de las tecnologías HTML5, DOM, CSS3, CSS2, Canvas, etc; entre los distintos navegadores.

Transiciones con MooTools

2009-02-12T07:10:00.001-08:00

Vamos a realizar una pequeña animación usando el framework para javascript Mootools

Primero empezamos con la página html de nuestra animación:

       .....
 <div id="fxDiv" class="red">Click aquí para iniciar la animación</div>
 .....

Crearemos una hoja de estilos anim.css, este archivo contiene la animación de rojo (.red) a azul (.blue).


#fxDiv {
padding: 5px;
position: absolute;
}

.red {
background-color: #f00;
left: 100px;
top: 100px;
border: 1px solid black;
}

.blue {
background-color: #00f;
left: 400px;
top: 200px;
width: 400px;
height: 400px;
border: 5px solid black;
}

Ahora el script que ejecuta la animación:


$("fxDiv").addEvent('click', function() {
var fx = new Fx.Morph($("fxDiv"),
                  {duration: 1000,
                   transition: Fx.Transitions.Sine.easeOut});
fx.start(".blue");
});

El objeto Fx.Morph recibe dos parámetros:

Primero el elemento que se quiere animar, en este caso es un div
Un objeto de opciones de configuración para la animación recibe varios propiedades, en este ejemplo especificamos la duración de la animación y que tipo de transición quiero para la animación. Aquí encuentras un ejemplo de las transiciones de MooTools

La página html final, vinculando los estilos y código javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Tween en MooTools</title>
     <link type="text/css" rel="stylesheet" href="css/anim.css"></link>
 </head>
 <body>
     <div id="fxDiv" class="red">Click Aqui para iniciar la animación</div>
     <script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script>
     <script type="text/javascript" src="js/anim.js"></script>
 </body>
</html>

Este es un simple ejemplo de animaciones con MooTools, aquí puede ver muchos ejemplos más de esta gran libreria

EJB usando sólo Tomcat

2009-02-12T05:37:00.001-08:00

La primera pregunta que uno podría hacerse es: ¿Por qué necesito usar EJBs? La respuesta está en su definición. Los EJB son Javabeans que modelan lógica de negocio, y son administrados por un contenedor, conocido como el Contenedor EJB. Este contenedor provee a los EJB de las siguientes características, que se dicen son características que todo proyecto Empresarial (hecho en Java) debería tener o por lo menos considerar: Transaccionalidad, manejo de estado en invocaciones, concurrencia, ejecución de invocaciones de manera distribuida, invocación como un Web Service, persistencia, pool de beans, seguridad.

Pero si el proyecto sólo puede ser desarrollado en un contenedor Web como Tomcat. ¿Entonces, no puedo usar EJB? La respuesta es sí puede, pero necesitas de un contenedor EJB.

La fundación Apache tiene un proyecto que se integra con tomcat, y que cumple la función de un contenedor EJB, OpenEJB.

Para instalarlo es muy sencillo:

Descargar el openejb.war
Copiar el openejb.war al directorio webapps del tomcat. Este war debe llamarse siempre openejb.war
Iniciar tomcat
subir el proyecto Web

Los EJBs se empaquetan dentro del war del proyecto o en un war aparte.

Hola Mundo a la EJB

2009-02-11T12:44:00.001-08:00

Con la liberación de Java 5 tiempo atrás, y la llegada a java de las anotaciones, los frameworks que eran difíciles de usar se han simplificado grandemente.

A continuación muestro un pequeño ejemplo de EJB (HolaMundo para ser exactos), usando la especificación EJB 3.0 de Java EE 5.

Todo comienza con una Interfaz...

package prueba;
import javax.ejb.Local;

/**
* Simple bean de session que saluda a alguien
*/
@Local
public interface HolaMundo {

/**
* Imprime un saludo
* @param aQuien El nombre de la persona a saludar
* @return El saludo
*/
String saludar(String aQuien);

}

... y su implementación:

package prueba;

import javax.ejb.Stateless;

@Stateless
public class HolaMundoBean implements HolaMundo {

/* (non-Javadoc)
* @see prueba.HolaMundo#saludar(java.lang.String)
*/
@Override
public String saludar(String aQuien){
 return "Hola " + aQuien;
}

}

Este EJB es un bean sin estado, es decir que no guarda ninguna información de estado en cada invocación, de hecho el contenedor de EJB puede retornar en cada invocación una instancia diferente del EJB. Este tipo de EJB se definen usando la anotación @Stateless.

Para probar a nuestro amigo HolaMundo usare un servlet que debe desplegarse dentro del mismo servidor, pues el EJB sólo tiene interfaz local:


package prueba;

import java.io.IOException;
import java.io.PrintWriter;

import javax.ejb.EJB;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class HolaMundoServlet
*/
public final class HolaMundoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

@EJB
private HolaMundo holaMundo;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 saludar(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 saludar(request, response);
}

private void saludar(HttpServletRequest request, HttpServletResponse response) throws IOException {
 PrintWriter writer = response.getWriter();
 String aQuien = request.getParameter("nombre");
 if(aQuien == null || aQuien.trim().length() == 0) aQuien = "Desconocido";
 writer.println(holaMundo.saludar(aQuien));
 writer.close();
}
}

Noten como a través del uso de la anotación @EJB, inyecto el bean en el servlet para usar su método. (Esto era muy complicado de hacer en EJB 2.0 en el que tocaba usar JNDI)

El software que use para implementar y desplegar este pequeño proyecto fue:

IDE de desarrollo Eclipse con WTP
Servidor de Aplicaciones JBoss 5.0

Frases célebres

2009-02-11T11:59:00.001-08:00

Esta frase la voy recordar toda mi vida.

La optimización prematura es la raíz de todos los males

La optimización debe venir después de un diseño bien definido y basado en medidas.

Integrado Mootols con Peppy o Sizzle

2009-02-11T11:43:00.001-08:00

Para los que deseen integrar Mootools con Peppy o con Sizzle (Aunque no veo alguna razón valida)

Con Sizzle:

Window.$$ = function(selector){
return new Elements(new Sizzle(selector));
}

Con Peppy:

Window.$$ = function(selector){
return new Elements(new peppy.query(selector));
}

Aqui les dejo adicionalmente algunas páginas donde se compara el rendimiento de estos selectores:

Mootools vs Sizzle
Peppy vs los Otros Selectores

El Selector de Mootools es muy efeciente para mis necesidades.

Manejos de paquetes en Javascript

2009-02-11T06:39:00.000-08:00

En un post pasado vimos como manejar el alcance privado en Javascript, esta funcionalidad es esencial para definir que es accesible y que no (encapsulamiento).

Los paquetes nos permiten a nosotros organizar funciones y variables y evitar colisión en nombres de la funciones. Los paquetes son muy comunes en otros lenguajes como ruby, java, c#, etc.

Nuestra herramienta para trabajar con paquetes en Javascript es el Objeto object, es decir el paquete prueba.urbanidad realmente es un objeto urbanidad dentro de un objeto prueba.

La siguiente función obtiene una paquete en javascript, El paquete raíz sera El Objeto window, si un paquete no existe la función lo creará, al final la función retorna el objeto que representa el paquete:


function obtener_paquete(paquete){
 var ultimoPq = window;
 /* convertimos la cadena en un lista de paquetes */
 var partes = paquete.split(/\./);
 /* recorremos el array de paquetes */
 for(var i = 0; i < partes.length; i++){
     var tmp = ultimoPq[partes[i]];
     if(!tmp){
       tmp = ultimoPq[partes[i]] = {};
     }
     ultimoPq =tmp;
 }
 return ultimoPq;
}

Aqui tenemos un uso de la función:

/* Obtengo el paquete prueba.urbanidad*/
obtener_paquete("prueba.urbanidad");
prueba.urbanidad.saludar = function(){
return "Hola";
};

/* Obtengo el paquete prueba.mala.urbanidad*/
obtener_paquete("prueba.mala.urbanidad");
prueba.mala.urbanidad.saludar = function(){
  return "Adios";
};

/*Muestra el mensaje Hola */
alert(prueba.urbanidad.saludar());

/*Muestra el mensaje Adios */
alert(prueba.mala.urbanidad.saludar());

Alcance privado en Javascript

2009-02-11T04:59:00.000-08:00

Esta técnica en Javascript permite hacer funciones y variables inaccesibles a otros scripts, muy a la manera como en lenguajes de Java, C# funciona la palabra reservada private:

El patrón es:

(function(){
/* código va aqui. */
})();

Ejemplo de uso, aqui se usa el objecto window para exportar una función (saludar):

(function(){
var msg = "Hola ";

window["saludar"] = function(aQuien){
return msg + aQuien;
}
})();

/* Esta linea fallará porque la variable msg no es accesible fuera de la función anonima */
alert(msg);

/* Muestra el mensaje Hola Heli Fernando Jerez */
alert(saludar("Helí Fernando Jerez"));

otro ejemplo de uso en el que no se modifica el objeto window sino retorna que se retorna un objeto con los elementos publicos:

var Saludar = (function(){
var msg = "Hola ";

return {
saludar : function(aQuien){
return msg + aQuien;
}
};
})();

/* Muestra el mensaje Hola Heli Fernando Jerez */
Saludar.saludar("Helí Fernando Jerez");