Archive for June, 2008

Marcas de Google Maps con tooltip personalizado

Al situar el ratón encima de una imagen o cualquier elemento del DOM, éste es capaz de mostrar en un tooltip el texto de su atributo 'title',

ejemplo

En las marcas de Google Maps este efecto puede conseguirse especificando el atributo 'title' en el constructor de la marca.

  1. var coords = new GLatLng(41.647471, -0.885569);
  2. var mark = new GMarker(coords,  {title:'texto de ejemplo'})

ver ejemplo

El problema es que esta opción es muy limitada, ya que se restringe al uso de texto plano. Lo ideal sería poder mostrar cualquier elemento del DOM que queramos, con su HTML y su CSS.
Para conseguirlo vamos a seguir estos pasos:

  1. Crear el nodo del DOM que queramos mostrar o coger un nodo ya existente y ponerlo como un atributo de la marca
  2. Al escuchar el evento mouseover de la marca, añadir el nodo al div contenedor del mapa en el la posición en la que se encuentra la marca
  3. Al escuchar el evento mouseout de la marca, eliminar el nodo del div contenedor del mapa para ocultarlo.

ver ejemplo

Leave a Comment

Cómo limitar el zoom y el desplazamiento en Google Maps

En ocasiones nos interesa restringir el desplazamiento del usuario sobre el mapa a un área determinada, o limitar los niveles de zoom máximo y mínimo.

En el caso del zoom la solución es bastante sencilla. Solo hay que sobreescribir los métodos getMinimumResolution() y getMaximumResolution() de cada uno de los tipos de mapas GMapType presentes en nuestro mapa.
Para el caso del desplazamiento, la solución es algo más compleja. Consiste en escuchar el evento move, que es lanzado por el objeto GMap cuando hay un desplazamiento, y comprobar las coordenadas del mapa tras el desplazamiento. Si estas coordenadas quedan fuera del área a la que queremos limitar el desplazamiento, usamos el metodo GMap.setCenter para que el mapa quede dentro de nuesta área.

Esta clase implementa la funcionalidad deseada:

  1. /******  TRestricter  **********************************************/
  2.  
  3. // Constructor
  4. TRestricter = function (map) {
  5. this.map = map;
  6. }
  7. // Función que activa la limitación del desplazamiento entre la esquina inferior izquierda
  8. // y la esquina superior derecha
  9. TRestricter.prototype.restrict = function (sw, ne) {
  10. this.map._allowedBounds = new GLatLngBounds(sw, ne);
  11. GEvent.addListener(this.map, 'move', this.checkBounds);
  12. }
  13. // Función que desactiva la limitación del desplazamiento
  14. TRestricter.prototype.unrestrict = function () {
  15. this.map._allowedBounds = null;
  16. }
  17. // Listener encargado de comprobar el desplazamiento
  18. TRestricter.prototype.checkBounds = function() {
  19. if (!this._allowedBounds || this._allowedBounds.contains(this.getCenter())) return;
  20. var x = Math.min(Math.max(this.getCenter().lng(), this._allowedBounds.getSouthWest().lng()), this._allowedBounds.getNorthEast().lng());
  21. var y = Math.min(Math.max(this.getCenter().lat(), this._allowedBounds.getSouthWest().lat()), this._allowedBounds.getNorthEast().lat());
  22. this.setCenter(new GLatLng(y,x));
  23. }
  24. // Establece los límites de zoom del mapa
  25. TRestricter.prototype.zoomLevels = function (min, max) {
  26. var array = this.map.getMapTypes() || [];
  27. for (var i=0; i
  28. array[i].getMinimumResolution = function () { return min };
  29. array[i].getMaximumResolution = function () { return max };
  30. }
  31. }

Y aquí tenemos un ejemplo de la clase en acción

Leave a Comment

Arrays asociativos en javacript

En javascript se llama array asociativo a aquellos que en vez de estar organizados con indices numericos en funcion de su posicion dentro del array, están organizados por claves no numericas.
Este tipo de arrays puede ser muy útil si tenemos listas de objetos que poseen un identificador.

  1. <br />
  2. var array_asociativo =  new Array();<br />
  3. array_asociativo['uno'] = 'brinkindans';<br />
  4. array_asociativo['dos'] = 'crusaito';<br />
  5. array_asociativo['tres'] = 'maiquel yason';<br />
  6. array_asociativo['cuatro'] = 'robocó';</p>
  7. <p>alert(array_asociativo('tres')); // -->  maiquel yason<br />

Como se puede obervar este tipo de arrays se acerca mas al concepto de Map que al de Array.
Esto ocurre porque los arrays en javascript heredan de la clase Object.
El codigo anterior seria equivalente a este:

  1. <br />
  2. var array_asociativo =  new Object();<br />
  3. array_asociativo.uno = 'brinkindans';<br />
  4. array_asociativo.dos = 'crusaito';<br />
  5. array_asociativo.tres = 'maiquel yason';<br />
  6. array_asociativo.cuatro = 'robocó';</p>
  7. <p>alert(array_asociativo('tres'))//-->  maiquel yason<br />

En ambos casos podemos acceder a sus propiedades utilizando la notación de paréntesis o la notacion de puntos.

  1. <br />
  2. alert(array_asociativo('uno')); //-->  brinkindans<br />
  3. alert(array_asociativo.dos)//-->  crusaito<br />

El principal problema con estos arrays viene cuando queremos iterar por ellos. Al no estar organizados por indices, no nos vale el típico "for( i=0; i Deberemos usar un "for in"

  1. <br />
  2. for(var i in array_asociativo) {<br />
  3.   alert(i)// Nombre de la clave<br />
  4.   alert(array_asociativo(i)); // valor<br />
  5. }<br />

Sin embargo al iterar de esta forma no solo se enumeran las propiedades del objeto en cuestión, si no también sus funciones por lo que deberíamos hacer una comprobación de tipos mediante el operando "typeof". Este operando devuelve un String con el tipo del operador sobre el que se ejecuta.
Aqui están los resultado al ejecutar el operador "typeof" sobre cada uno de los tipos de javascript.

  1. <br />
  2. typeof new Object() //-->   'object'<br />
  3. typeof new Array() //-->     'object' , ya que los arrays heredan de los objetos<br />
  4. typeof alert //-->   'function', ya que alert() es una función<br />
  5. typeof 'cadena' //-->   'string', ya que 'cadena' es un String<br />
  6. typeof 21 //-->   'number', ya que es un numero<br />
  7. typeof true //-->    'boolean'<br />
  8. typeof null //-->    'object', null también es considerado como un objeto<br />
  9. typeof undefined //-->    'undefined'<br />

Leave a Comment

Diferencias entre null y undefined

En javascript existen cinco tipos primitivos de datos: undefined, null, boolean, number y string.
A primera vista no se aprecia la diferencia entre los tipos undefined y null.

El tipo undefined corresponde a las variables que han sido definidas y todavía no se les ha asignado un valor.
El tipo null se suele utilizar para representar objetos que en ese momento no existen.

Sin embargo aunque son conceptos distintos el operando de igualdad los considera iguales. No así el operando typeof o el operador de igualdad estricta ===.

  1. <br />
  2. (undefined == null) //--> true<br />
  3. (undefined === null) //--> false<br />
  4. (typeof undefined == typeof undefined null) //--> false<br />

Si intentamos operar con una variable que tiene valor null, según el contexto devolverá los siguientes resultados.

  1. Boolean: false<br />
  2. Numeric: 0<br />
  3. String: “null

Si intentamos operar con una variable que tiene valor undefined, según el contexto devolverá los siguientes resultados.

  1. Boolean: false<br />
  2. Numeric: NaN<br />
  3. String: “undefined”

Leave a Comment

Añadir logging a un cliente SOAP de web services

Cuando trabajamos con web services en java, a la hora de depurar nos sería muy útil el poder ver el xml (protocolo SOAP) que se envían cliente y servidor.
Sin embargo no existe una forma 'sencilla' de hacerlo.

La idea consiste en hacer una clase que implemente el interface javax.xml.rpc.handler.Handler, capaz de interceptar los mensajes SOAP antes de su envío del cliente al servidor y antes de la recepción por parte del cliente de los mensajes enviados por el servidor.
Pueden añadirse varios handlers en serie para procesar las llamadas (handler chains). Este comportamiento es idéntico al de un ServletFilter en una cadena de filtros.
Desde esta clase tenemos acceso al contenido del mensaje SOAP, por lo que somos capaces de leerlo y escribirlo en un fichero de texto o similar.

En el caso de un cliente hecho con apache axis, podemos obtener la lista de Handlers asociados a un nombre de puerto (javax.xml.namespace.QName) y a un punto de destino a través de la clase org.apache.axis.client.Service. Una vez obtenida la lista, solo nos resta añadir nuestro Handler.

Vamos a ello. En primer lugar implementamos el interfaz javax.xml.rpc.handler.Handler para interceptar la llamada soap:

  1. package com.madeinxpain.seamcity.ws;
  2.  
  3. import java.io.File;
  4. import java.io.FileNotFoundException;
  5. import java.io.FileOutputStream;
  6. import java.io.OutputStream;
  7. import java.util.ArrayList;
  8. import java.util.List;
  9.  
  10. import javax.xml.namespace.QName;
  11. import javax.xml.rpc.handler.Handler;
  12. import javax.xml.rpc.handler.HandlerInfo;
  13. import javax.xml.rpc.handler.MessageContext;
  14. import javax.xml.rpc.handler.soap.SOAPMessageContext;
  15.  
  16. public class SoapLoggingHandler implements Handler{
  17.  
  18. private HandlerInfo handlerInfo;
  19. private List streams;
  20.  
  21. public SoapLoggingHandler() {
  22. streams = new ArrayList();
  23. try {
  24. this.addOutputStreamLog(System.out);
  25. this.addFileLog("soap.xml");
  26. } catch (Exception e) {
  27. e.printStackTrace();
  28. }
  29. }
  30.  
  31. public void addOutputStreamLog(OutputStream os) {
  32. this.streams.add(os);
  33. }
  34.  
  35. public void addFileLog(String rute) throws FileNotFoundException {
  36. FileOutputStream fos = new FileOutputStream(new File(rute));
  37. this.addOutputStreamLog(fos);
  38. }
  39.  
  40. public boolean handleRequest(MessageContext arg0) {
  41. SOAPMessageContext messageContext = (SOAPMessageContext) arg0;
  42. try {
  43. for (OutputStream os : streams) {
  44. os.write(new String("\n\n<!-- REQUEST -->\n").getBytes());
  45. messageContext.getMessage().writeTo(os);
  46. }
  47. } catch (Exception e) {
  48. e.printStackTrace();
  49. }
  50. return true;
  51. }
  52.  
  53. public boolean handleResponse(MessageContext arg0) {
  54. SOAPMessageContext messageContext = (SOAPMessageContext) arg0;
  55. try {
  56. for (OutputStream os : streams) {
  57. os.write(new String("\n\n<!-- RESPONSE -->\n").getBytes());
  58. messageContext.getMessage().writeTo(os);
  59. }
  60. } catch (Exception e) {
  61. }
  62. return true;
  63. }
  64.  
  65. public boolean handleFault(MessageContext arg0) {
  66. SOAPMessageContext messageContext = (SOAPMessageContext) arg0;
  67. try {
  68. for (OutputStream os : streams) {
  69. os.write(new String("\n\n<!-- FAULT -->\n").getBytes());
  70. messageContext.getMessage().writeTo(os);
  71. }
  72. } catch (Exception e) {
  73. }
  74. return true;
  75. }
  76.  
  77. public void init(HandlerInfo arg0) {
  78. this.handlerInfo = arg0;
  79. }
  80.  
  81. public void destroy() {
  82. }
  83.  
  84. public QName[] getHeaders() {
  85. return handlerInfo.getHeaders();
  86. }
  87. }

Esta clase implementa una serie de métodos extra aparte de los obligatorios definidos por el interface. Estos métodos permiten definir una lista de Streams por los que escribir el mensaje.
Estos métodos de logging deben ser invocado desde el constructor, ya que al añadir el Handler a la cadena (como veremos más adelante) no se añade una instancia de un objeto, si no una clase, y es el framework axis el encargado de crear la instancia mediante el método Class.new Instance(), por lo que no es posible definir las formas de logging si no es en el constructor por defecto del handler.

Un a vez codificada la clase, vamos a proceder a añadirla a la cadena. Cada handler debe estar asociado
Tomaremos como ejemplo un cliente WebService para Microsoft Exchange 2007, creado en un post anterior
En primer lugar buscamos la clase que extiende de org.apache.axis.client.Stub, en nuestro caso llamada ExchangeServiceBindingStub, y le añadimos dos campos para almacenar el port por el que se va a realizar la petición soap y el punto de destino.
Estos campos se van a utilizar en el metodo createCall() a la hora de crear la petición soap.
Por simplicidad crearemos los campos como públicos.

  1. public class ExchangeServiceBindingStub extends org.apache.axis.client.Stub implements com.microsoft.schemas.exchange.services._2006.messages.ExchangeServicePortType {
  2.  
  3. public javax.xml.namespace.QName portName;
  4. public String endPoint;
  5.  
  6. // resto del código original de la clase
  7.  
  8. // metodo a modificar
  9. protected org.apache.axis.client.Call createCall() throws java.rmi.RemoteException {
  10. // codigo anterior
  11. if (super.cachedPortName != null) {
  12. _call.setPortName(super.cachedPortName);
  13. }
  14.  
  15. // Tenemos que añadir estas dos lineas
  16. _call.setPortName(this.portName);
  17. _call.setTargetEndpointAddress(this.endPoint);
  18.  
  19. // codigo posterior
  20. java.util.Enumeration keys = super.cachedProperties.keys();
  21.  
  22. }

Cuando instanciamos el objeto org.apache.axis.client.Stub le añadimos el handler:

  1. public class ExchangeWebServiceClient {
  2. private ExchangeServiceBindingStub esb;
  3. private ExchangeServicesLocator locator;
  4.  
  5. public ExchangeWebServiceClient() {
  6. this.locator = new ExchangeServicesLocator();
  7. this.esb = (ExchangeServiceBindingStub) locator.getExchangeServicePort(new URL(locator.getExchangeServicePortAddress()));
  8.  
  9. // Añadimos el handler
  10. QName portName = new QName("http://www.neodoo.es/", locator.getExchangeServicePortWSDDServiceName());
  11. List list = locator.getHandlerRegistry().getHandlerChain(portName);
  12. HandlerInfo handlerInfo = new HandlerInfo();
  13. handlerInfo.setHandlerClass(com.madeinxpain.seamcity.ws.SoapLoggingHandler.class);
  14. list.add(handlerInfo);
  15. this.esb.portName = portName;
  16. this.esb.endPoint = locator.getExchangeServicePortAddress();
  17. }
  18. }

Y con esto y un bizcocho, ya tenemos una forma de depurar las llamadas soap a un webservice desde un cliente hecho con axis.
La optimización del código queda a cargo del desarrollador final ;)

Leave a Comment

Como inyectar un EntityManager en Seam

Con la llegada de EJB 3 y JPA nace la figura del EntityManager para simplificar la persistencia de objetos.
Y gracias a las anotaciones, el EntityManager puede ser inyectado por el contenedor de EJBs.
Vamos a ver diferentes formas de obtener un EntityManager en Seam a través de anotaciones.

    1. @PersistenceContext
    2. EntityManager entityManager;

    El EntityManager es inyectado directamente por el EJB container. El ciclo de vida del EntityManager inyectado de esta forma terminará cuando la transacción sea completada.
    Tras el cierre de la transacción, las entidades son desacopladas del contexto de persistencia, lo que puede dar lugar a una LazyLoadException.

    1. @PersistenceContext(type=PersistenceContextType.EXTENDED)
    2. EntityManager entityManager;

    El EntityManager es inyectado directamente por el EJB container, y estará disponible aún después de que la transacción haya sido completa.
    Las entidades pueden seguir asociadas al contexto de persistencia durante varias interacciones.

    1. @In
    2. EntityManager entityManager;

    De esta forma, el EntityManager es inyectado por Seam y asociado al contexto de conversación, con las mismmas características que un EntityManager de tipo extendido.

    1. @PersistenceUnit
    2. EntityManagerFactory;
    3.  
    4. public void getNewEmInstance() {
    5. return emf.createEntityManager();
    6. }

    Esta anotacion inyecta un EntityManagerFactory, que permite crear objetos EntityManager mediante el método EntityManagerFactory.createEntityManager();

Leave a Comment