Archive for May, 2008

Extendiendo el objeto Array

Una de las mejores características de javascript es que se pueden añadir funciones a las 'clases' en cualquier momento a traves de la propiedad prototype.
Aprovechando esta capacidad podemos extender el objeto Array para añadirle funcionalidades de búsqueda y eliminación.

array.indexOf
Devuelve el indice del array en el que se encuentra el elemento. Devuelve -1 si no encuentra el elemento

Array.prototype.indexOf = function(element) {
  for (var i = 0; i <this.length; i++) {
    if(this[i] == element) return i;
  }
  return -1;
};


array.exists

Devuelve true si el elemento se encuentra en el array, haciendo uso de la funcion indexOf

Array.prototype.exists = function(element) {
  return this.indoexOf(element) != -1;
};

array.filter
Devuelve un array que contiene solo los elementos para los que la función pasada como argumento devuelve true

Array.prototype.filter = function(fn) {
  var array = [];
  for (var i = 0; i <this.length; i++) if(fn(this[i])) array.push(this[i]);
  return array;
};

array.removeIndex
Elimina todos los elementos del array que están entre los índices from y to. Si solo se especifica valor para from, se elimina solo el elemento que se encuentra en ese índice.

Array.prototype.removeIndex = function(from, to) {
  if (from <0) return;
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from <0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

array.remove
Elimina un elemento del array, usando las funciones removeIndex e indexOf

Array.prototype.remove = function(e) {
  return this.removeIndex(this.indexOf(e));
};

array.execute
Ejecuta la función fn pasandole como argumento cada elemento del array
si le pasamos el argument obj, se ejecutara la funcion fn como si perteneciese al objeto obj

Array.prototype.execute = function(fn, owner) {
  for (var i=0; i<;this.length; i++){
    if (owner) fn.call(owner, this[i]);
    else if (typeof this[i] != 'function') fn(this[i]);
  }
}

array.foreach
Ejecuta la función fn en cada elemento del array, pasandole como argumentos los elementos contenidos en el array args
si le pasamos el argument obj, se ejecutara la funcion fn como si perteneciese al objeto obj

Array.prototype.foreach = function(fn, args) {
  for (var i=0; i<this.length; i++) {
    fn.apply(this[i], args);
  }
}

Leave a Comment

Seam y Ajax con Seam Remoting

Realizar peticiones Ajax a tus componentes en Seam es increíblemente fácil gracias al framework Seam Remoting.
Con solo añadir un par de lineas de javascript, tu componente escrito en Java se convierte en un componente javascript, pudiendo acceder a sus campos y ejecutar sus métodos asíncronamente.
En simplemente tres pasos podemos invocar a un componente y manejar la respuesta.

1) Indica los métodos que van a invocarse vía Ajax
Simplemente marca con la anotación @WebRemote los métodos que quieras invocar por Ajax.

@Name("calculadora")
public class Calculadora {

   private float pi = 3.14;
   private float n = 10;

    @WebRemote
    public int suma(float a, float b) {
        return a+b
    }

    @WebRemote
    public int sumaConstante(float a) {
        return this.n + a;
    }

    // Este metodo no está marcado con @WebRemote, por lo que no se puede invocar desde javascript
    public void metodoNoAjax() {
    }
 
    public float getPi() { return this.pi;}
}

Si quisieses invocar un EJB en lugar de un POJO, las anotaciones @WebRemote deberán estar en la declaración los métodos de la interface del EJB.

2) Importa los scripts necesarios
Primero debes importar el script que contiene el código que permite las llamadas remotas:

<script type="text/javascript" src="seam/resource/remoting/resource/remote.js"></script>

Ahora por cada componente que contenga métodos que quieras invocar vía Ajax debes importar otro script en el que indicas el nombre del componente (el que has definido en la anotacion @Name).
Este script contiene el stub del componente, que indica los métodos a los que puedes llamar y la definición de sus tipos.
Por ejemplo, si tienes un componente anotado con @Name("calculadora") deberás incluir la siguiente linea

<script type="text/javascript" src="seam/resource/remoting/interface.js?calculadora"></script>

Si quisieses acceder a más de un componente en la misma página puedes especificar varios componentes:

<script type="text/javascript" src="seam/resource/remoting/interface.js?calculadora&componente2&componente3"></script>

También puedes importar el javascript de los componentes usando el tag s:remote.

<s :remote include="calculadora,componente2,componente3"/>

3) Invoca el método y maneja la respuesta
Ahora podemos invocar los métodos de nuestra calculadora marcados con @WebRemote.
Para obtener los objetos javascript que representan nuestros componentes debemos hacerlo a través de Seam.Component.
En la llamada le pasamos los parámetros que tenga el método al que estemos invocando (admite sobrecarga) y un último parámetro que será la función a la que se invocará con el resultado de la invocación

<script type="text/javascript">
  //<![CDATA[

  function suma() {
    Seam.Component.getInstance("calculadora").suma(1, 5, muestraResultado);
  }

  function muestraResultado(result) {
    alert(result); // --> mostrará un 6
  }

   // ]]>
</script>

También puedes acceder a los campos del componente que tengan un getter asignar un valor a los que tengan un setter.

<script type="text/javascript">
  //<![CDATA[

  var calc = Seam.Component.getInstance("calculadora");
  function suma() {
    calc.n = 25;
    calc.sumaConstante(5, muestraResultado)
  }

  function muestraResultado(result) {
    alert(result);   // --> mostrará 30
    alert(calc.pi); // --> mostrará 3.14
  }

   // ]]>
</script>

Seam Remoting también permite evaluar EL Expressions, trabajar con Collections, hacer debug de las llamadas enviadas y recibidas, suscribirse a una cola JMS.
Toda esta información y más se encuentra disponible en la documentación en inglés

Leave a Comment

Obtener un EntityManager sin inyección de dependencias

Para obtener un EntityManager en un componente Seam, la vía más fácil es usar la anotación @In y disfrutar de las ventajas del mecanismo de inyección de dependencias de Seam.

@In
EntityManager entityManager;

Pero estas ventajas solo están disponibles dentro de los componentes, es decir, en aquellas clases anotadas con @Name.
Si en una clase normal quisiésemos obtener el EntityManager, deberíamos hacerlo manualmente.

// PERSISTENCE_UNIT_NAME es el nombre del persistence-unit definido en el archivo persistence.xml
EntityManagerFactory emf = Persistence.createEntityManagerFactory(PERSISTENCE_UNIT_NAME);
EntityManager em = emf.createEntityManager();

Leave a Comment

Incluir código javascript en un documento XHTML

Si estás trabajando con Seam, muy probablemente estés utilizando Facelets para la vista y páginas xhtml.
Si intentas incluir código javascript en un documento XHTML directamente puede que de algunos problemas con los símbolos < ("menor que",&lt;) y & (amperstand), ya que el navegador los intentará interpretar como partes de etiquetas xhtml y dará algún error de sintaxis.

Para evitar ésto podemos escribir nuestro javascript entre etiquetas CDATA. Ésta etiqueta lo que hace es indicarle al validador de XHTML que ignore todo lo que se encuentre en su interior. El problema es que algunos navegadores no entienden la etiqueta CDATA, por lo que deberemos comentar la etiqueta CDATA. De esta forma, si el navegador no la sabe interpretar, la ignorará.

<script type="text/javascript">
//<![CDATA[

 alert("<Ésto & y ésto <<  es compatible con XHTML>");

//]]>
</script>

Leave a Comment

Bloquear la pantalla con javascript

Hay ocasiones en las aplicaciones web que nos interesa bloquear la pantalla del navegador para impedir al usuario interactuar con la aplicación.
Un ejemplo es durante una llamada ajax que tarda un cierto tiempo y queremos mostrar el típico mensaje "loading" y poner el fondo con un tono oscuro, o para pedir nombre de usuario y contraseña.

Una solución simple para este problema consiste en poner un div que ocupe toda la pantalla y se sitúe por encima del resto de componentes. Así todos los clicks del ratón se realizarán sobre nuestro div en vez de sobre el botón que se ve debajo.
Después, mediante javascript muestras el div bloqueador. No te olvides de proporcionar alguna forma para quitar este elemento.
Estas propiedades del div se pueden especificar en una clase css

.blocker {
position: absolute;
top: 0px;
left: 0px;
height:100%;
width:100%;        /* hacemos que ocupe toda la pantalla a cualquier resolución*/
z-index: 50;        /* lo colocamos por encima del resto de componentes*/
background: url(b.png) repeat/*Color de fondo semitransparente*/
}

Si queremos añadir algun mensaje o una ventana con la que se desee interactuar, solo tenemos que colocar un div que quede por encima del anterior.

.popup{
z-index: 100;                     /* un z-index mayor al del blocker */
background-color: white/* Un color de fondo para que se vea sobre la capa anterior*/
}

Ver ejemplo de bloqueo de pantalla

Si usas jQuery (o librerias similares) dispondrás de buenos plugins (como facebox) para hacer esto mismo con muchas mas opciones y efectos.

Leave a Comment