Asumimos que para poder iniciar este tutorial, previamente se configuró correctamente GWT y Google Plugin For Eclipse. Si aún no lo has hecho, puedes revisar esta entrada.
Una vez iniciado Eclipse y teniendo configurado los plugins necesarios para trabajar con GWT procedemos a crear un nuevo proyecto:
A continuación seleccionamos el tipo de proyecto: GWT Java Proyect:
Escogemos un nombre para el proyecto, en este caso “DemoGWT”:
Marcamos la creación del módulo GWT:
Con eso tenemos listo el proyecto, con el ejemplo “automágicamente” generado y listo para ser probado.
Para probar nuestra aplicación pre-fabricada sólo hay que seleccionar el archivo ImageViewer.java (el archivo módulo) y con el botón derecho del mouse abrimos el menú contextual. Podemos usar el “Run as” o “Debug as” según nuestra necesidad. Lo único importante es que se ejecute como Google Web Application:
A continuación en la consola aparecerá un mensaje especial. En la pestaña de “Development Mode” aparece la URL a la que debemos dirigirnos si queremos probar la aplicación:
Copiamos la URL en nuestro navegador y podremos ver la aplicación. Se nos solicita instalar un complemento especial para que nuestro navegador pueda estar en modo de depuración con el GWT. Cuando el sistema entra a producción ya no es solicitado este complemento para el navegador, para mi caso estoy usando Firefox:
Una vez instalado el complemento solicitado por el navegador podemos ver la aplicación:
Y listo, con eso un “Hola Mundo GWT” sin programar. ¿Es rápido y amigable, verdad?
Pero como en desarrollo de software no todo es tan fácil, a continuación probaremos la capacidad de hacer la edición visual de la interface en GWT. Para ello el archivo ImageViewer.java debe ser abierto (con doble click sobre el nombre del archivo en el “Package Explorer”) y luego debemos abrir la pestaña que dice “Design” con el archivo abierto en el editor. Tener paciencia que puede tardar un poco en abrir en modo de diseño:
A continuación veremos cuatro áreas importantes:
- Structure: La estructura o jerarquía de clases, fijarse que en nuestro ejemplo el rootPanel tiene objetos “dentro” de él.
- Properties: Las propiedades de cada objeto, donde incluso puede cambiarse el nombre de la variable con que identificas el objeto.
- Palette: La paleta de objetos.
- Área de trabajo: El área donde modificamos la posición, tamaño y otras propiedades visuales de los objetos. Además se pueden arrastrar nuevos objetos o suprimir los ya existentes.
Para el ejemplo, haremos que la aplicación reciba un nombre en una caja de texto, este nombre se mostrará en el “alert” que aparece al hacer click al botón y posteriormente este mismo nombre se envía a una nueva caja de texto de sólo lectura, a modo de “resultado”.
Para ello modificaremos las líneas 25 y 33 de ImageViewer.java (el número de línea puede variar en su máquina, revise que lo que modifique corresponde a las mismas líneas mostradas en la imagen). Y agregaremos/modificaremos el código en las líneas 47, 48 y 49. La modificación para las líneas 25 y 33 corresponde a hacer las variables finales, de tal forma que el código dentro del “onClick” pueda hacer uso de esas variables:
Para más detalle de las modificaciones, muestro capturas de las propiedades de cada objeto:
Finalmente podemos ver el resultado de la modificación de nuestro ejemplo:
Espero este tutorial haya sido de ayuda.
Tags: Desarrollo, designer, Eclipse, Edición Gráfica, editor visual, GUI, GWT, Java, WYSIWYG
2 Comments
