Archive for March, 2008

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.

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

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

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.

<?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