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

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


array.exists

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

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

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

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

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.

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

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

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

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

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

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

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

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.

  1. @Name("calculadora")
  2. public class Calculadora {
  3.  
  4.    private float pi = 3.14;
  5.    private float n = 10;
  6.  
  7.     @WebRemote
  8.     public int suma(float a, float b) {
  9.         return a+b
  10.     }
  11.  
  12.     @WebRemote
  13.     public int sumaConstante(float a) {
  14.         return this.n + a;
  15.     }
  16.  
  17.     // Este metodo no está marcado con @WebRemote, por lo que no se puede invocar desde javascript
  18.     public void metodoNoAjax() {
  19.     }
  20.  
  21.     public float getPi() { return this.pi;}
  22. }

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:

  1. <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

  1. <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:

  1. <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.

  1. <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

  1. <script type="text/javascript">
  2.   //<![CDATA[
  3.  
  4.   function suma() {
  5.     Seam.Component.getInstance("calculadora").suma(1, 5, muestraResultado);
  6.   }
  7.  
  8.   function muestraResultado(result) {
  9.     alert(result); // --> mostrará un 6
  10.   }
  11.  
  12.    // ]]>
  13. </script>

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

  1. <script type="text/javascript">
  2.   //<![CDATA[
  3.  
  4.   var calc = Seam.Component.getInstance("calculadora");
  5.   function suma() {
  6.     calc.n = 25;
  7.     calc.sumaConstante(5, muestraResultado)
  8.   }
  9.  
  10.   function muestraResultado(result) {
  11.     alert(result);   // --> mostrará 30
  12.     alert(calc.pi); // --> mostrará 3.14
  13.   }
  14.  
  15.    // ]]>
  16. </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.

  1. @In
  2. 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.

  1. // PERSISTENCE_UNIT_NAME es el nombre del persistence-unit definido en el archivo persistence.xml
  2. EntityManagerFactory emf = Persistence.createEntityManagerFactory(PERSISTENCE_UNIT_NAME);
  3. 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á.

  1. <script type="text/javascript">
  2. //<![CDATA[
  3.  
  4.  alert("<Ésto & y ésto <<  es compatible con XHTML>");
  5.  
  6. //]]>
  7. </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

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

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.

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

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

Crear un cliente java de Web Services para Exchange 2007

Para crear el cliente he usado el IDE eclipse-Red Hat Developer Studio, pero el procedimiento será similar para cualquier IDE.
Supondremos que la dirección del servidor es "my.exchange.com".

El primer paso es bajarse del servidor exchange estos 3 archivos y guardarlos en local:
* https://my.exchange.com/ews/Services.wsdl
* https://my.exchange.com/ews/messages.xsd
* https://my.exchange.com/ews/types.xsd
Después hay que modificar el archivo "Services.wsdl" para añadir el servicio y su url.

Debes añadir al final del archivo (antes de cerrar la etiqueta <wsdl:definitions>) las siguientes lineas:

  1. <wsdl :service name="ExchangeServices">
  2.      </wsdl><wsdl :port name="ExchangeServicePort" binding="tns:ExchangeServiceBinding">
  3.        <soap :address location="https://my.exchange.com/EWS/Exchange.asmx"/>
  4.      </wsdl>

Ahora tendrás que modificar los archivos "types.xsd" y "messages.xsd" para que maneje correctamente los arrays, mapeandolos a colecciones.
Para cada tipo llamado "ArrayOf..." o "NonEmpyArrayOf..." tendrás que añadirle el atributo maxOccurs="unbounded"
Ejemplo:

  1. <xs :complexType name="ArrayOfFoldersType">
  2.     </xs><xs :choice minOccurs="0" maxOccurs="unbounded">
  3.       <xs :element name="Folder" type="t:FolderType" maxOccurs="unbounded"/>
  4.       <xs :element name="CalendarFolder" type="t:CalendarFolderType" maxOccurs="unbounded"/>
  5.       <xs :element name="ContactsFolder" type="t:ContactsFolderType" maxOccurs="unbounded"/>
  6.       <xs :element name="SearchFolder" type="t:SearchFolderType" maxOccurs="unbounded"/>
  7.       <xs :element name="TasksFolder" type="t:TasksFolderType" maxOccurs="unbounded"/>
  8.     </xs>

Si ya has generado el cliente y sin haber cambiado esto, las clases "ArrayOf..." y "NonEmpyArrayOf..." y generadas serán incapaces de manejar arrays.
Pero aún tiene solución. Deber añadir a cada clase un campo de tipo List (cualquier Collection vale), y en cada método setXXX añadir el objeto pasado como parámetro al array.
Por ejemplo, en la clase ArrayOfRealItemsType:

  1. // declaras la lista:
  2. private List&lt;ItemType&gt; items = new ArrayList&lt;ItemType&gt;();
  3.  
  4. //sobreescribes los setters para añadir los parametros a la lista:
  5. public void setPostItem(com.microsoft.schemas.exchange.services._2006.types.PostItemType postItem) {
  6.     this.items.add(postItem);
  7.     this.postItem = postItem;
  8. }
  9.  
  10. public void setMessage(com.microsoft.schemas.exchange.services._2006.types.MessageType message) {
  11.     this.items.add(message);
  12.     this.message = message;
  13. }
  14.  
  15. // etc..

Una vez que has generado el cliente verás que te da algunos fallos de compilación.
Esto es porque por algún motivo los constructores no se generan bien.
Tras arreglar los fallos podemos continuar.

La clase principal para realizar las llamadas al Web Service es ExchangeServiceBindingStub.
Creamos el objeto y le ponemos los parametros de usuario, password y servidor.

  1. ExchangeServiceBindingStub esb = (ExchangeServiceBindingStub) new ExchangeServicesLocator().getExchangeServicePort(new  URL(locator.getExchangeServicePortAddress()));
  2. esb.setUsername("usuario");
  3. esb.setPassword("password");
  4. esb._setProperty(javax.xml.rpc.Stub.ENDPOINT_ADDRESS_PROPERTY, "https://my.exchange.com/EWS/Exchange.asmx");

Antes de continuar debes asegurarte que el servidor tiene activada la autentificación básica, si no te saldrá un error HTTP 402.2 "acceso denegado debido a la configuración del servidor"

Ahora solo queda invocar al método del Web Service que quieras y rellenar los parámetros requeridos.

Comments (1)

Acción por defecto de un form JSF

Al rellenar un formulario, si le das al enter cuando el foco está en uno de los input, el fomulario se envía.

En la mayoría de los casos esto está bien, ¿pero qué ocurre si queremos modificar ese comportamiento?
Concretamente, ¿como podemos modificar ese comportamiento si trabajamos con JSF? Lamentablemente, la especificación no contempla este caso.

Si estás utilizando Seam, esto lo puedes hacer con la etiqueta <s:defaultAction>, que permite cambiar la acción que se ejecuta por defecto al presionar el enter. Si no estás utilizando Seam, puedes usar la libreria javascript4jsf , y su tag <j4j:defaultAction>, que tiene el mismo comportamiento.

Pero si quieres algo rápido, lo más sencillo es incluir un h:commandButton oculto y desactivado. Así al presionar el enter, lanzará la acción del commandButton en vez de enviar el form.

  1. <h :commandButton action="#{mi.accion}" style="display:none;" disabled="true" />

Comments (2)

checkbox y evento onclick

Si alguna vez has usado la funcion toggle de jQuery con un checkbox habrás comprobado que las acciones del toggle se ejecutan, pero el checkbox no se marca (o no se desmarca).
Esto ocurre porque estamos reemplazando el comportamiento nativo del checkbox por el nuestro propio. Para evitar este comportamiento, debemos registrar el listener con el evento onchange o el evento onclick. (NOTA: Parece ser que internet explorer 6 no maneja bien el evento onchange).

Para solucionar este problemilla, podemos escribir nuestra propia función toggle para checkboxes:

  1. $('#checkbox').click(function(){
  2.   if (this.checked) alert('checkbox activado');
  3.   else alert('checkbox desactivado')                
  4. });

Aqui puedes ver un ejemplo completo

Comments (2)

XML, tildes y javascript

Al leer un documento xml codificado en UTF-8 que contiene tildes o eñes con javascript, las interpretará como simbolos extraños .
Para solucionar este problema se debe establecer la codificacion en latin9 (ISO-8859-15), modificando la primera linea del archivo XML.

  1. <?xml version="1.0" encoding="ISO-8859-15"?>

Leave a Comment

Problemas con Google Maps

Como siempre que se desarrolla una aplicación, aparecen errores que nos dan multitud de quebraderos de cabeza.
Ahí van unos cuantos con los que me he enfrentado trabajando con Google Maps.

  • El fondo del mapa se ve totalmente en gris
    Casi seguro es porque alguna propiedad css está interfiriendo con el mapa. Un caso en el que aparece es con la propiedada overflow:hidden.
  • El fondo del mapa se ve parcialmente gris, y el centro se sitúa en la esquina superior izquierda
    Esto ocurre porque cuando la api de google maps carga el mapa, el div contenedor que ha sido pasado como argumento al constructor GMap2 tiene tamaño cero. El trozo de mapa que se ve es realmente el trozos que queda fuera de los limites de visión pero es cargado para mejorar el rendimiento al desplazar el mapa.
    Que el div contendor tenga tamaño cero, suele ocurrir cuando está dentro de una tabla o tiene el tamaño especificado con porcentajes. Hasta que el DOM no se carga completamente, el div no adquiere un tamaño definido, y en el momento en el que se carga el mapa aun no tiene su tamaño final.
    Se puede solucionar especificando el ancho (width) y alto (height) del contendor sin porcentajes o especificando directamente el tamaño del mapa con un argumento en el constructor GMap2:

    new GMap2(container, {size:new GSize(width,  height)})
  • Object cannot be created in this context" code: "9" ... (NS_ERROR_DOM_NOT_SUPPORTED_ERR)
    Este error suele aparecer en firefox cuando el mapa se inserta en una pagina JSF con Facelets.Es debido a que el objeto 'document' de javascript creado por firefox cuando el mime type es 'application/xhtml+xml', no tiene el metodo write().
    Para solucionarlo tienes que establecer el content type de la pagina como text/html. Con JSF se puede hacer añadiendo el tag

    		<f contenttype="text/html" />

    en la página que contenga el mapa (No afecta a facelets ni al funcionamiento de la pagina).

Leave a Comment