6 April, 2009

Gwt > smartclient: Por un puñetero punto y coma


Desde que hace algo mas de 1 año dejé de luchar a fondo con el html+css (ahora priorizamos funcionalidad a diseño) no me había topado con un problema tan tonto, de esos tan tontos que te tocan lo que ya sabeis. Un puñetero punto y coma.

El caso es que hace un par de semanas que he decidido retomar mis pinitos de hace 9 meses con gwt, esta vez algo mas en serio y centrandome sobre todo en la construcción de la interfaz.

Todavía no había escrito nada sobre gwt, entre otras cosas porque no tengo tiempo, pero vamos, que dando una vuelta por la documentación oficial la idea queda clara. Un framework que pretende hacer mas sencilla la generación de la interfaz para aplicaciones web (y sobre todo mas próxima a los programadores que no se llevan bien con el html+css+javascript, cuando menos la mayoría que han programado siempre en escritorio).

La idea básica es programar en java (como para swing) y mediante el compilador gwt generar toda la capa cliente html+css+javascript. Pero bueno dejamos para otro post generalidades sobre gwt, y vamos con mi estúpido problema.

Primero probé gwt sin más, componentes muy muy básicos, pero que funcionan.

Continuamos con gxt, componentes muy elaborados, demostración de interfaz MDI, tablas, formularios, etc. Aunque a veces se hace un lio con la generación de estilos, y otras no hace caso a los tamaños que inyectas desde java y debes atacar directamente al css generado (es un peligro). Además desde hace un tiempo la versión comercial es de pago.

Llegamos a smartgwt, componentes muy parecidos a gxt, un wrapper sobre smartclient, esta última de pago, pero parece que la versión gwt es gratuita. La verdad: menudo jaleo de licencias, cada vez entiendo menos. Pruebo esta versión, combinando con controles de gwt nativos para depender lo menos posible de una tercera librería.

Por el momento me gusta smartclient (incluso el codigo generado no parece ser tan “cochino” como el de gxt), sigo con las pruebas…, inserto un DisclosurePanel dentro de un Window de smartgwt, problema, aparece con un height que yo no pongo, no se de donde sale (el problema de gwt cuando las cosas no salen a la 1ª). Le pongo un tamaño dpContentSearch.setHeight(”40px;”), ni caso. Además no es el height del DisclosurePanel sino el del contenedor, el del layout del Window de smartgwt. Cambio el DisclosurePanel por un HorizontalPanel, nada, lo cambio por un Canvas de smartgwt a ver si el problema va a ser la mezcla de componentes, tampoco.

Se me acaban las ideas, navego por los foros de smartclient, por los fuentes de los diversos componentes buscando algún método que lo solucione, vueltas y mas vueltas… ya por desesperación y tras largo tiempo intentando mas cosas cambio de nuevo el 40 y funciona!, cosa mas rara. Intento buscar la diferencia… el punto y coma del 40, dpContentSearch.setHeight(”40px”) no, no es lo mismo. Y que conste que el “;” no era ninguna tontería, por ejemplo en gxt se permite, incluso se permite insertar un “40px !important;”, por eso este método recibe un string, además de para especificar el tamaño en la unidad que necesites.

Isa se ríe de mi (parece q a las químicas no les pasan estas cosas), me piro a la siesta, es domingo y toca descansar, aunque con este sentimiento de rabia-euforia-emoción-soyunpocotonto es imposible, mejor leo y punto: “El quinto día (Franz Schätzing)” ahora que llego al final me he enganchao :-) .

24 June, 2008

Hacks ie

Como veis me he puesto en plan diseñador-meticuloso-pejillero y gracias a los conocimientos de css/xhtml adquiridos en mi etapa de interacción he podido cambiar un poquillo el layout de este espacio.

Mas espacio en la columna de navegación, nuevo menú de navegación superior donde en los próximos días encontrareis un enlace al nuevo wiki, menos importancia al titulo de este blog (el cual me sigue sonrojando :$ estaba falto de ideas aquel día), el buscador en la cabecera, la nube de etiquetas y algunos cambios de colorines.

Como no podía ser de otra forma me topé con los siempre cojoneros problemas de visualización en ie. Este vez le tocaba a los bloques que contienen otros bloques flotantes. El bloque padre no se adapta a la altura de su contenido así que toca utilizar los hacks para ie6 y ie7.
Lo primero añadir las css con los bloques condicionales para los ie's.

  1. <!--[if IE 6]>
  2.      <style type="text/css">
  3.          @import url( /ie6.css );
  4.      </style>
  5. <![endif]-->
  6. <!--[if IE 7]>
  7.      <style type="text/css">
  8.          @import url( /ie7.css );
  9.      </style>
  10. <![endif]-->

Luego en ie6.css declaramos la altura del contenedor padre como:

  1. #header {
  2.     height:1%;
  3. }

Y para ie7.css así:

  1. #header {
  2.     display:inline-block;
  3. }

Esta vez he tenido suerte y no han sido necesarias mas personalizaciones.

Powered by WordPress
Bajo licencia Creative Commons
Contacto sanroman.javier at gmail.com