GWT 1.4

(1)

Google Web Toolkit (GWT) 1.4, con nuevos widgets, montones de correciones de bugs, aplicaciones un 30% más pequeñas y entre 20%-50% más rápidas y un montón de nuevas funcionalidades interesantes.

Si os interesa el desarrollo web no dudéis en echarle un vistazo.

IDEs y GWT

(8)

AJAX se ha convertido por derecho propio en una de las tecnologías más populares para la creación de aplicaciones web dinámicas, con resultados tan interesantes como los conseguidos en Gmail.

Sus siglas, acrónimo de Asynchronous JavaScript And XML, nos indican que esta tecnología nos permite mantener una comunicación asíncrona entre el navegador y el servidor utilizando JavaScript Y XML. Esto implica que podemos realizar cambios en la página sin necesidad de recargarla.

La simple mención de JavaScript puede causar ciertas reticencias entre muchos programadores, ya sea por la pereza de aprender un nuevo lenguaje, porque las herramientas no son tan maduras como en otras plataformas, o por las dificultades que nacen de las incoherencias con los estándares de algunos navegadores.

Y aquí es donde entra en juego el framework Google Web Toolkit (GWT), del que ya hemos hablado anteriormente. GWT nos ahorra dolores de cabeza permitiéndonos escribir nuestra interfaz en Java y obtener, una vez compilada, XHTML y JavaScript compatible con todos los navegadores.

Y aunque podemos desarrollar interfaces basadas en GWT con cualquier editor de texto nunca está de más utilizar herramientas que nos hagan la vida un poco más fácil.

GWT ha tenido una acogida increíble y a pesar de su juventud ya contamos con distintas alternativas, la mayor parte de ellas basadas en Eclipse:

Seguir leyendo IDEs y GWT…

Google Web Toolkit

(6)

Google Web Toolkit (GWT) es un framework para la creación de interfaces para aplicaciones web que permite aprovecharnos de toda la potencia de AJAX sin necesidad de aprender Javascript, simplemente escribiendo código Java parecido a cualquier otro framework para la creación de GUIs, como AWT o Swing.

Para crear un botón que muestre un alert al ser pulsado, por ejemplo, basta con escribir algo tan familiar como esto:

Button b = new Button("Pulsa", new ClickListener() {
  public void onClick(Widget sender) {
    Window.alert("Hola Mundo");
  }
});

Y el framework se ocupará de traducir nuestro código Java a XHTML y Javascript.

Algunas de las novedades para su próxima versión, que está prevista aparezca durante este mes, son:

  • Localización

  • Clases XML
    Una librería basada en el DOM del W3C
  • Clases JSON
  • Widget para subida de archivos
  • Widget FormPanel
    Para enviar facilmente formularios HTML tradicionales desde aplicaciones GWT
  • Optimizaciones en RPC (Remote Procedure Call)
  • Mejoras en JUnit
  • GoogieSpell es un script con licencia LGPL que permite añadir una función de corrección ortografica a cualquier campo o área de texto. (1) #
  • Trixie, una pseudo imitación de Greasemonkey para Internet Explorer. (3) #

Muere Greasemonkey, muere

(17)

Hace unos días hablaba de la extensión para Firefox Greasemonkey, que permite al usuario ejecutar código JavaScript para modificar cualquier aspecto de una página web.

A algunos desarrolladores web el que sus usuarios puedan hacer lo que deseen con sus páginas no les debe hacer demasiada gracia, entre otras cosas porque Greasemonkey puede ser utilizado para desactivar la publicidad de los sitios web. Es por esto que Dean Edwards ha publicado una forma sencilla de impedir su ejecución con un simple JavaScript que podeis ver a continuación.

document._createElement = document.createElement;
document.createElement = function(tagName, password) {
if (tagName == "SCRIPT" && password != "My scripts are OK!") {
if (!confirm("Some GreaseMonkey user scripts can adversely affect the display of this page.\n" +
"Do you want to allow user scripts on this page?")) return;
}
return document._createElement(tagName);
};

Un truco útil para depurar Javascript en Firefox

(3)

Un pequeño apunte útil para depurar Javacript en Firefox. Si no quieres o no sabes utilizar Venkman para depurar, y prefieres métodos más clásicos y rudimentarios, tus opciones se reducen a mostrar mensajes por pantalla de tres formas: con alerts, con window.status o con document.write o sus contrapartidas DOM.

Sin embargo Firefox nos ofrece un método mucho más cómodo y conveniente, permitiéndonos escribir los mensajes en una consola mediante el método dump. Para ello tenemos que activar primero en las opciones de configuración el uso de la función dump, abriendo about:config (escribe about:config en la barra de dirección y pulsa enter) y creando una nueva entrada de tipo lógico con nombre browser.dom.window.dump.enabled y valor true (botón derecho del ratón, Nuevo -> Lógico).

Una vez hecho esto, al abrir Firefox en modo consola (iniciar con firefox -console) podremos utilizar dump(cadena) para escribir texto en la consola.

Usando el depurador de Javascript Venkman

(5)

Acabo de terminar de traducir ‘Learning the JavaScript debugger Venkman’, de Svend Tofte, una guía de uso de este depurador de JavaScript con multitud de imágenes, apta para todos los públicos, aunque no sean programadores.

La traducción la podéis encontrar en la nueva sección de la web, que como muestra de originalidad he llamado traducciones (un poco triste aún, porque no contiene mas que la guía de Venkman).

Dado que la traducción tendrá miles de faltas de ortografía, incoherencias, fallos de traducción y otros, os agradecería que si veis algo que se deba corregir me enviéis un correo o me dejéis un comentario (y no, el haber llamado a la guía "Usando el depurador de JavaScript Venkman" en lugar de aprendiendo, que sería la traducción correcta, no es un fallo, es que no cabía :P).

Traduciendo 'Learning the JavaScript debugger Venkman'

(2)

Estoy empezando a traducir el tutorial 'Learning the JavaScript debugger Venkman' de Svend Tofte, sobre el depurador de Javascript 'Venkman', como complemento del tutorial sobre este lenguaje de programación que estuve escribiendo hace poco. He hablado con Sven y no tiene constancia de que ya exista una tradución pero en todo caso si alguno sabeis que exista ya me avisais y me ahorro el trabajo xD
En cuanto termine de traducirlo se lo enviaré a Sven o lo colgaré en la bitácora. Eso es todo hasta nuevo aviso xD

Javascript: El DOM Style

(1)

Utilizando lo que hemos visto hasta ahora podríamos modificar el estilo de una etiqueta, cambiando el valor del atributo style por ejemplo:

Código
<p id="texto" style="background-color: red;">Esto es un texto</p>
<input type="button" value="Pulsame" onclick="getElementById('texto').style = 'background-color: red;'" />

Pero en DOM Nivel 2 se nos da la posibilidad de modificar el estilo del documento incluso cuando el estilo no está definido como un atributo de la etiqueta correspondiente, sino como una serie de reglas en el head del documento o en un archivo css aparte. Para ello nos valemos de la matriz styleSheets, una propiedad del objeto document, en la que cada posición de la matriz alberga un objeto que representa una hoja de estilo. Cada uno de estos objetos tiene una matriz de las reglas de la hoja de estilo, de nombre cssRules en el estándar de la W3C y rules en IE. De forma que para acceder por ejemplo a la tercera regla de la primera hoja de estilo se utilizaría:

Código
//W3C
miRegla = document.styleSheets[0].cssRules[2];
//IE
miRegla = document.styleSheets[0].rules[2];

Como ya vimos, cada una de las propiedades de estilo de cada regla se representan como propiedades del objeto style, propiedad a su vez del objeto que representa la regla. Para cambiar el color de fondo de los enlaces de la página, por ejemplo, usaríamos:

Código
/*Recomendado por la W3C, los argumentos son nombre de la propiedad, valor y prioridad (por ejemplo "important")*/
miRegla.style.setProperty('background-color','red',null);
//Otra forma
miRegla.style.color = 'red';

Y para obtener el contenido de la regla podríamos usar las propiedades de style selectorText, una cadena que representa al selector y cssText, una cadena que representa el contenido de la regla.

Código
<script>
regla = document.styleSheets[0].cssRules[0].style;
alert("El contenido de la regla para la etiqueta A es " + regla.cssText);
</script>
<a href="http://mundogeek.net">Zootropo. Diario del Mundo Geek</a>
<input type="button" value="Pulsame" onclick="document.styleSheets[0].cssRules[0].style.setProperty('background-color','red',null);" />

Por último además de consultar y modificar reglas ya existentes, podemos crear y eliminar reglas mediante los métodos insertRule(regla, posicion) y deleteRule(posicion) perteneciente a cada uno de los objetos de la matriz styleSheets:

Código
<a href="http://mundogeek.net">Zootropo. Diario del Mundo Geek</a>
<input type="button" value="Añadir regla" onclick="document.styleSheets[0].insertRule('a {color:red;}',0);">
<input type="button" value="Eliminar regla" onclick="document.styleSheets[0].deleteRule(0);">

Hay que tener en cuenta también que IE tiene un par de métodos propietarios que cumplen exactamente la misma función, addRule(regla) y removeRule(posicion).

Página 1 de 212»