CAPITULO 3 WIDGETS

Este captulo trata especficamente acerca de los widgets, que son los componentes y partes visuales de una aplicacin GWT los cuales son vistos por los usuarios que usan la pagina web, como por ejemplo labels, botones, imgenes, mens, grids etc. La GUI de una aplicacin GWT est basada en Widgets. Una definicin formal de widget puede ser la siguiente: Los widgets son los componentes visibles de una aplicacin GWT que un usuario puede ver en la pgina por la que esta navegando. Como ya se dijo, este captulo abarca los widgets, y empezaremos por mirar exactamente que son esas cosas que se llaman widgets. Una vez que tengamos una buena idea de lo que es un widget es, tomaremos una mirada a los widgets que vienen con GWT, incluida la forma de usarlos en los diferentes componentes que nos proporciona GWT.

3.1 Qu es un Widget? El paquete com.google.gwt.user.client.ui contiene las clases que nos permiten crear interfaces de usuario dinmicas usando tcnicas que ya se han probado exitosamente con otros frameworks que proveen esta funcionalidad como por ejemplo el paquete AWT de Java. Las clases en este paquete aprovechan las caractersticas de las interfaces de usuario de un navegador web para proveer componentes dinmicos reutilizables, los cuales tienen el mismo comportamiento en las versiones e implementaciones de los navegadores soportados. La librera de interface de usuario de GWT llama a estos componentes widgets, y estos van desde simples botones o labels hasta controles ms complejos como tabs o arboles. Algunos de estos widgets se traducen directamente en elementos HTML que normalmente uno usara en la elaboracin de una pgina web, mientras que otros son la composicin de muchos elementos HTML combinados con scripts y manejo de eventos.

Los Widgets son uno de los 4 cuatro bloques fundamentales de construccin de aplicaciones GWT(los otros son los panels, eventos y la comunicacin con el servidor). Cuando un usuario est utilizando una aplicacin GWT hecha por ti, lo que se encuentra mirando es un grupo de Widgets distribuidos de cierta manera en paneles y que respondern a eventos. Los widgets son los componentes con los que el usuario interacta. GWT proporciona muchos widgets diferentes, entre estos los controles ms usados en las interfaces graficas como lo son los botones, labels, mens cuadros de textos, etc.

Ejemplo de un widget (botn) Muchas de nuestras aplicaciones sern construidas usando varios widgets los cuales distribuiremos de cierta manera dentro de paneles para darle alguna estructura a la interfaz de la aplicacin.

Un buen ejemplo de mostrar lo anterior es la interfaz grafica de una calculadora

Ejemplo de la distribucin de widgets en una interfaz grafica

El propsito general de GWT es desarrollar rich internet applications en Java y despus el compilador de GWT (como ya vimos en captulos anteriores) genera el cdigo HTML y java script necesario para que la aplicacin funcione bien en los diferentes navegadores existentes. Para eso se hace

necesaria una manera de representar varios objetos del navegador, es decir los llamados widgets de GWT, en nuestro cdigo Java. Tomaremos ventaja de la habilidad de la programacin orientada a objetos para modelar objetos y conceptos como objetos de programacin. Por ejemplo, en una aplicacin GWT cualquiera haremos uso de un objeto Java llamado Button este objeto Button modelara varias propiedades que esperamos que un botn tenga, como la habilidad de asignarle un texto adems de permitir oprimir dicho botn. As como modelamos un botn podemos modelar los dems componentes que deseemos ver en la aplicacin, es decir los widgets, como objetos Java con mtodos y propiedades. Entonces, en nuestra programacin diaria en GWT nos veremos considerando todos los widgets como objetos naturales de Java. El botn del que hablamos anteriormente se crea llamando al constructor del Button de GWT como sigue: Button boton = new Button(Aceptar); Este cdigo crea un nuevo objeto Button de GWT del cual despus podemos usar varios mtodos. Esta vista de los widgets es bastante sencilla para cualquiera familiarizado con la programacin en Java u otro lenguaje orientado a objetos como C#, creamos objetos de clases y llamamos a los mtodos de esas clases. Lo que no nos da esta manera de ver las cosas es el entendimiento de cmo los widgets son mostrados en la pgina web, esta cuestin es dada por una representacin alternativa de los widgets la cual es la DOM.

3.3 Considerando Widgets como elementos DOMLa representacin Java de los widgets que acabamos de ver funciona muy bien en nuestro cdigo java y nos permite construir una aplicacin GWT como queramos, usando cualquiera cantidad de widgets y usando sus mtodos asociados para construir la funcionalidad de la aplicacin. Sin embargo no podemos mostrar esos objetos Java en el navegador, as que no tenemos todava una aplicacin Ajax. Aqu es donde la representacin DOM de los widgets entra en juego. Todos los Widgets de GWT tienen una alternativa representacin DOM que es construida paralelamente con el objeto Java. El constructor por lo general es el responsable de crear esta representacin DOM, as que si miramos ms en detalle el constructor de la clase Button, veremos algo como esto: public Button() { super(DOM.createButton()); adjustType(getElement()); setStyleName("gwt-Button"); }

La llamada a DOM.createButton() crea el elemento DOM a travs de las clases DOM de GWT. Adems en el constructor del padre, el mtodo setElement es llamado para asignar la representacin DOM a este nuevo elemento . Es usando este valor asignado por el mtodo setElement que tenemos acceso a la representacin DOM desde la perspectiva java. Si furamos a ver la representacin DOM de un Button de GWT veramos algo como esto:

Para utilizar un Hyperlink creamos una instancia de la clase Hyperlink y luego agregamos el widget a un panel. Hyperlink h1 = new Hyperlink("Hyperlink 1","imagen1"); El constructor del Hyperlink recibe como parmetros 2 Strings, el primero el texto del link, y el segundo una cadena que se convierte en el estado del objeto History q mencionamos anteriormente, al dar clic en un Hyperlink esta cadena se concatena junto con un carcter #a la url de la aplicacin. A continuacin mostraremos un ejemplo

En la aplicacin del ejemplo lo que hacemos agregar 2 Hyperlinks llamados h1 y h2 los cuales al hacer clic en cada uno de ellos cambian una imagen que se muestra en el browser. El mtodo onValueChange recibe como parmetro la cadena que se encuentra en el estado actual del objeto History, dicho estado ya sabemos que lo cambia el Hyperlink al dar clic sobre l. Lo que realizamos en el ejemplo es algo muy sencillo, primero capturamos el valor del estado y luego comparamos dicho valor con el valor de los Hyperlinks y dependiendo de que Hyperlink fue activado se muestra una u otra imagen. La aplicacin se vera algo as:

Al dar clic en el Hyperlink Imagen 2, la url cambia y se muestra la otra imagen.

Con los Hyperlinks podemos agregar controles dinmicamente a nuestra aplicacin, eliminar paneles o widgets, en fin nos permite tener una experiencia de navegacin dentro de nuestro sitio web. Otra buena forma de navegacin dentro de nuestra aplicacin seria utilizando mens pero eso lo veremos ms adelante. Los Hyperlinks funcionan muy bien para navegar dentro de nuestra aplicacin, pero si lo que queremos son links hacia otros sitios sera mejor utilizar un link HTML usando el widget HTML que ya vimos. Ya terminamos de dar un recorrido por los widgets que llamamos bsicos, ahora veremos los widgets de formulario

3.4.2 Widgets de FormularioLos que llamamos Widgets de formulario son aquellos que son usados normalmente en formularios HTML. Sin embargo los formularios HTML envan informacin al servidor y luego se muestra el resultado refrescando la pgina. Las aplicaciones ajax intentan eliminar el refresco de la pgina y en cambio envan y reciben informacin del servidor de manera asncrona. Estos Widgets de formulario proporcionados con GWT no necesitan ser

incluidos dentro de un formulario HTML son muy flexibles y pueden ser usados de manera muy similar a widgets de aplicaciones de escritorio. Los widgets que veremos a continuacin son los siguientes: Button ToggleButton, PushButton, RichTextArea, CheckBox, RadioButton, ListBox, TextBox, PasswordTextBox, TextArea y FileUpload.

3.4.2.1 Button, ToggleButton y PushButtonHablaremos primero del Button. El widget Button se comporta como los botones clsicos de cualquier aplicacin de escritorio o web, es el widget GWT equivalente input de tipo Button de un formulario HTM. El funcionamiento de este widget es igual al de cualquier botn, normalmente los botones se usan en un formulario HTML para enviar informacin al servidor, pero en GWT podemos usar un botn para ejecutar cualquier accin que necesitemos. Para crear un botn debemos hacer algo como lo que sigue: Button boton = new Button(Click) Para poder utilizar el evento clic tendremos que agregar al botn un ClickHandler que es la interface que se encarga de manejar los eventos clic de algunos widgets. Esto lo hacemos as: Botn.addClickHandler(clickhandler); Donde clickhandler es la implementacin de dicha interface, la cual podemos hacerla utilizando una clase annima, o implementando la interface en la clase que utiliza el botn, esto es algo conocido para los programadores java. A continuacin mostraremos un ejemplo en el cual utilizamos un botn

En el ejemplo anterior creamos un botn y lo agregamos al panel principal, a dicho botn le agregamos un manejador del evento click el cual definimos con una clase annima. El mtodo onClick es el que se ejecutara al invocar al evento click, lo que hace el ejemplo es mostrar un Hola Mundo cada vez que hagamos clic en el botn.

El ToggleButton y PushButton son otros 2 tipos de botones que vienen dentro de la librera de la interface de usuario que pueden ser usados de manera similar a un widget Button normal. Un ToggleButton se diferencia de un Button en que cuando se hace clic en estos se mantienen presionados hasta que el usuario hace clic de nuevo. Adems el ToggleButton tiene varios constructores que no tiene el Button los cuales aceptan una imagen como parmetro para reemplazar la cara del botn. El PushButton tambin puede recibir una imagen en el constructor como el ToggleButton. Los eventos de clic y dems es igual a como definimos los del Button anteriormente. El siguiente ejemplo muestra un uso del ToggleButton

Lo que vemos en el ejemplo es la definicin de un ToggleButton llamado botn al cual en el constructor le pasamos como parmetros 2 imgenes, la primera es la que se mostrara en el botn cuando est en su estado normal y la segunda se mostrara cuando el botn quede presionado debido a que el usuario hizo clic en l. Los ToggleButton pueden definirse con un string que ser el texto que aparecer en el botn, con una imagen que se mostrara en el botn, o con 2 imgenes para ambos estados del ToggleButton.

ToggleButton en su estado natural.

ToggleButton presionado debido al clic del usuario

Un PushButton funciona igual que un Button con la diferencia de que el PushButton soporta algo de personalizacin en cuanto a estilo, igual que el ToggleButton acepta una imagen para mostrar, adems comparte varios estados con el ToggleButton que pueden ser personalizables desde una hoja de estilo CSS los cuales no son soportados por un simple Button. Estos estados son seis y los describimos a continuacin. Button up: es el estado normal de un PushButton o ToggleButton. Button down: el estado cuando el clic del mouse est presionando un PushButton o el estado down de un ToggleButton. Button up mouse hovering: es la misma que el Button up con la diferencia que el mouse en esos momentos se encuentra encima del PushButton o ToggleButton. Button up disable: igual que el Button up pero el botn en ese momento se encuentra deshabilitado por el mtodo setDisable del botn. Button down mouse hovering: mismo estado que el Button down pero el mouse se encuentra encima del botn en esos momentos. Para el caso del PushButton es equivalente al Button down ya que el para que el PushButton este en estado down el mouse debe estar presionando el botn. Button down disable: este estado nada ms funciona para el ToggleButton ya que es el nico que puede estar deshabilitado y en el estado down al mismo tiempo.

Estado de los botones.

3.4.2.2 CheckBox

El widget CheckBox es la implementacin del CheckBox estndar de HTML. En una aplicacin web normal este widget usualmente se encontrara en una form y su valor sera enviado al servidor cuando el formulario es enviado. En aplicaciones Ajax no tenemos estas restricciones. Este widget soporta eventos de cambio de foco y eventos de clic. Cuenta con un estado que nos dice si el widget esta checkeado o no, que es la funcin getValue la cual nos dira true si se encuentra checkeado y false obviamente lo contrario. A continuacin mostraremos un ejemplo del uso del CheckBox haciendo una lista de acciones pendientes.

Lo que hacemos en este ejemplo es simplemente definir 4 CheckBox y agregarlos a un VerticalPanel (luego veremos cmo funciona) para que los CheckBox se agreguen uno debajo del otro. Luego como hicimos con los botones les agregamos un ClickHandler para manejar el evento cuando el usuario checkea cada tem. En el evento onClick lo nico que hacemos es que cuando el CheckBox se encuentre checkeado le cambiamos el nombre del estilo CSS en el cual definimos esta propiedad: .gwt-CheckBox-checked{text-decoration: line-through;} Quedando nuestra aplicacin como se muestra a continuacin:

3.4.2.3 RadioButton

Este widget es igual de sencillo y parecido al CheckBox que acabamos de ver, con la diferencia de que varios RadioButton asociados al mismo grupo no pueden estar seleccionados a la vez. Este widget es til cuando necesitamos que el usuario elija un solo tem entre un grupo de la misma categora. Como el RadioButton hereda de CheckBox tiene la misma funcionalidad y los mismos mtodos de getValue y el mismo manejo de eventos. Un ejemplo de RadioButton

El ejemplo muestra como definimos 3 RadioButtons, el primer parmetro del constructor es el grupo al que pertenecen, el segundo es el texto que se mostrara.

3.4.2.4 ListBoxUn ListBox es un widget parecido al RadioButton, es decir muestra al usuario varias opciones y lo pone a elegir una sola dentro de las mltiples opciones. La diferencia con el RadioButton es la forma de mostrar las opciones. El ListBox muestra las opciones de 2 maneras, la primera como un combo o lista desplegable, y la segunda como un cuadro donde muestran todas las opciones y el usuario selecciona la que desee. Esta es una muestra de cmo se ven ambas formas de mostrar el ListBox.

La primera forma muestra al ListBox como una lista desplegable que nos muestra solo la opcin seleccionada, cuando el usuario hace clic en la flecha se despliega las dems opciones como se ve en la figura. La forma de crear este ListBox es la siguiente

Instanciamos el ListBox y luego con el mtodo addItem agregamos las opciones al ListBox. La segunda forma para mostrar un ListBox consiste en una lista de las opciones, donde la opcin que se encuentra seleccionada se encuentra resaltada (como se vio en la figura anterior). La forma de definir un ListBox de esta manera es igual a la que ya mostramos con una lnea adicional donde definimos el nmero de tems que deseamos mostrar usando el mtodo setVisibleItemCount, si definimos un numero de tems menor al total de las opciones del ListBox se agregara un scroll que nos permite ver las dems opciones. Como los widgets de esta seccin el ListBox maneja los eventos de foco y el cambio de valor del widget o change event, el cual ocurre cuando el usuario cambia de opcin en el ListBox. Esto lo hacemos agregndole un ChangeHandler usando el mtodo addChangeHandler. Esto funciona de la misma manera que los eventos de clic que hemos visto. A continuacin mostraremos un ejemplo de esto usando el ListBox que creamos anteriormente, donde el browser nos mostrara un aviso cada vez que seleccionemos una opcin del ListBox dicindonos que opcin seleccionamos. El cdigo sera algo as:

Vemos en el cdigo que es el mismo del ejemplo anterior con la diferencia de que ac definimos el tamao del ListBox con el mtodo setSize, adems

usamos el mtodo addChangeHandler con el que definimos el evento del ListBox para que ejecute lo que explicamos anteriormente. La aplicacin se vera algo as:

3.4.2.5 TextBoxEl TextBox es la equivalencia en GWT de la etiqueta input de tipo input de HTML, la cual es la forma estndar de capturar texto del usuario. Es un widget muy sencillo y fcil de usar. Podemos crear un TextBox de la siguiente manera:

Como el ListBox soporta eventos de clic, y eventos por cambios en su valor y tambin un evento que se dispara cuando el usuario presiona una tecla en el llamado KeyPressEvent el cual lo podemos manejar con un KeyPressHandler. A continuacin mostraremos un ejemplo de una aplicacin donde se pide el nombre al usuario y al presionar la tecla enter el browser muestra una ventana con el nombre que digito el usuario, el cdigo seria este:

En este cdigo KeyPressHandler

podemos observar cmo le agregamos un el cual es la misma clase que implemento de la

interface KeyPressHandler. En el mtodo onKeyPress vemos la accin que se ejecuta al dispararse el evento, lo que hace es que al presionar la tecla ENTER en el TextBox se manda un mensaje. La aplicacin quedara algo como esto:

3.4.2.6 PasswordTextBox

Este widget funciona exactamente igual que el TextBox que acabamos de ver con la diferencia que su contenido est oculto del usuario para proteger datos como contraseas. Normalmente este widget lo usamos en un formulario de login. A continuacin mostramos como se vera en una aplicacin el PasswordTextBox.

3.4.2.7 TextArea

El TextArea es otro widget que nos permite capturar texto del usuario, es parecido al TextBox que ya vimos con la diferencia que permite textos de mltiples lneas mientras que el TextBox nada ms nos permite una sola lnea. A continuacin veremos un ejemplo del uso de un TextArea.

En el cdigo anterior vemos como definimos un TextArea llamado blog, luego usamos 2 mtodos de este widget. El mtodo setCharacterWidth nos permite fijar el nmero de caracteres que recibe el TextArea a lo ancho. Con el mtodo setVisibleLines decimos cuantas lneas sern visibles en el TextBox, si el usuario ingresa ms lneas de las que nosotros definimos el widget mostrara un scroll con el que se puede ver el texto. El ejemplo lucira algo as:

El TextArea soporta los mismos eventos que el TextBox y los podemos usar de la manera que ya vimos con el TextBox.

3.4.2.8 RichTextAreaLos anteriores widgets de captura de texto nos permitan usar texto simple, es decir texto plano sin formato, pero hay caso en los que queramos usar texto en negrilla o de algn color en especial u otros tipos de formato. Para esto usamos el widget RichTextArea, que como su nombre lo indica es un TextArea pero que maneja texto enriquecido podramos decir, se maneja de manera similar al TextArea, tiene los mtodos getText y setText que nos permiten recuperar o asignar texto plano, pero adems tiene 2 mtodos adicionales que son getHTML y setHTML que nos permiten usar texto en formato HTML para as poder utilizar texto formateado. Este es un ejemplo de un RichTextArea:

El RichTextArea es solo el cuadro de texto que vemos debajo de la barra de herramientas, eso ya es un control aparte, como vemos hay parte del texto que se encuentra en negrilla y parte subrayado, en el ejemplo el RichTextArea junto con la barra de herramientas es similar a un procesador de texto.

3.4.2.9 FileUploadEl FileUpload widget es el que nos da la posibilidad de permitirle al usuario seleccionar un archivo de su PC. Este widget solo funciona del lado del cliente por lo que permite al usuario seleccionar un archivo mas no enviarlo al servidor, ya eso depende de nosotros implementar la funcionalidad que no nos da el widget. Lo mximo que podemos obtener de este widget es el nombre del archivo que selecciono el usuario con el mtodo getFileName. La mayora de los navegadores tienen muchas restricciones de seguridad en cuanto al envi de archivos se refiere, por ejemplo nada ms permiten enviar el archivo seleccionado por el usuario y no otros que uno haya intentado enviar mediante programacin, adems el archivo solo es enviado al servidor por el browser cuando el formulario es enviado. Esto ltimo implicara un refresco de la pgina, pero la idea de GWT es que todo se Ajax por lo que nos brinda un panel llamado FormPanel, cuyo funcionamiento veremos ms adelante, que nos permite incluir el FileUpload y enviar archivos al servidor de manera asncrona y cumpliendo con la metodologa Ajax. Ms adelante veremos la manera de enviar los archivos al servidor. Un FileUpload se vera ms o menos as:

3.4.3 Widgets ComplejosCuando los navegadores empezaron a aceptar JavaScript y HTML dinmico, empezamos a ver interfaces de usuario compuestas por objetos los cuales no tenan una etiqueta HTML equivalente. Estos objetos fueron creados por la composicin de etiquetas y el manejo de los eventos fue realizado con

JavaScript. Estos widgets los podemos crear con GWT tambin, adems que ya vienen algunos con el framework, estos son a los que llamamos widgets complejos. En esta categora encontramos al Tree y al MenuBar

3.4.3.1 TreeEl Tree es parecido a los controles Tree de aplicaciones de escritorio, nos permite mostrar una vista jerrquica de datos que se puede contraer y colapsar. Los elementos que mostramos en un Tree pueden ser TreeItem, a los que podemos llamar ramas del rbol. Podemos agregar TreeItem a los TreeItem para agregar subniveles al rbol. Tambin podemos agregar una cadena u otros widgets al rbol Instanciar un Tree widget y agregarlo a un panel es igual de sencillo que los dems widgets:

Mencionamos anteriormente que podemos agregar TreeItem a nuestro Tree, pero que son los TreeItem? los TreeItem, como dijimos antes, podemos considerarlos como widgets que tienen el papel de ramas en el rbol. Podemos agregarle texto, imgenes u otros widgets a cada TreeItem, adems que podemos agregarle subniveles con ms TreeItems. A continuacin mostraremos un ejemplo agregando los tems del Tree manualmente, pero podemos hacer esto dinmicamente con datos que nos traigamos de una base de datos que se encuentra en el servidor.

En el ejemplo vemos que en la lnea 20 instanciamos el Tree, luego definimos 4 TreeItem cada uno de los cuales le agregamos un tem ya sea

una cadena, un widget u otro TreeItem. El resultado de ese ejemplo seria el siguiente:

Si estamos usando el Tree que muestra diferentes vistas u opciones dependiendo del tem que seleccionemos o alguna operacin que tenga que ver con seleccin de tems necesitaremos que el widget nos diga cuando se hizo una seleccin de un determinado tem y cual tem es el que se encuentra seleccionado. Para esto el Tree soporta varios eventos que son SelectionHandler (para manejar el evento de seleccin de tems del rbol), OpenHandler (se dispara cuando se abre un tem o rama del rbol, es decir cuando se colapsa una opcin) y el CloseHandler (que funciona cuando se cierra o contrae un tem o rama del rbol).

3.4.3.2 MenuBarOtro widget que entra en la categora de widgets complejos es este llamado MenuBar. Como su nombre lo supone, es la equivalencia a los mens de las aplicaciones de escritorio. Tiene cierta similitud con el Tree que vimos, con la diferencia que solo podemos ver una subcategora al tiempo. Normalmente usamos este widget para mostrar una lista de opciones o aplicaciones dentro de nuestra aplicacin. Para instanciar un MenuBar solo falta una lnea:

Si en el constructor no recibe ningn parmetro o el valor booleano false, el men se muestra horizontalmente, mientras que si se inicializa con true se muestra vertical. Se maneja de la misma forma que el Tree que ya vimos, para agregar un tem al men usamos su mtodo addItem. Con la diferencia que podemos usar este mtodo de varias maneras. Podemos pasarle como parmetros una cadena con el texto que se mostrara en el tem del men y un objeto de tipo Command, el cual ejecutara un cdigo cada vez que seleccionamos ese tem. Tambin podemos en vez del objeto tipo Command, pasarle como parmetro otro MenuBar para llamar a un submen. Adems tambin podemos una clase llama MenuItem que funciona de manera similar al TreeItem que ya hemos visto. Ahora veamos un ejemplo de un men sencillo.

En este ejemplo definimos un objeto de tipo Command vaco, es decir con el mtodo execute que es el que se ejecuta cuando se selecciona un tem del men, adems definimos el men principal llamado menu". Luego definimos los submens que vamos a agregarle al men principal, vemos que los submens los instanciamos con el parmetro true para que se despliegue de manera vertical. Finalmente agregamos el men principal al panel. El resultado sera la siguiente aplicacin:

5. Creando widgets compuestos Ya hemos visto el uso de varios de los widgets que nos provee GWT en su framework. Ahora veremos lo que son los widgets compuestos o composite widgets. Los composite widgets son elementos potentes de GWT los cuales son widgets creados por nosotros combinando los widgets y paneles que ya hemos visto en captulos anteriores. Esto es muy til si queremos crear controles de usuario personalizados y reutilizables. Esto puede resultar familiar para aquellos desarrolladores que crean este tipo de controles reutilizables en java o .Net. La idea es la misma. Se puede considerar a estos widgets compuestos como mini aplicaciones GWT, ya que estn compuestas por widgets y proporcionan una funcionalidad dada por el creador del control. Para crear un widget compuesto lo que hacemos es crear una clase y hacer que herede de Composite, la implementacin de interfaces depende de los eventos que vayamos a manejar en el widget. Luego como atributos de la clase agregar los widgets que vayamos a utilizar. A continuacin veremos un ejemplo de un widget que estar compuesto de un TextBox y un Button, y que al dar clic en el botn mostrara lo escrito en el TextBox en un mensaje del browser.

En el ejemplo vemos que el widget hereda de Composite e implementa la interface ClickHandler para manejar el evento del botn. Como atributos de la clase tenemos un TextBox y un Button a los cuales les asignamos un valor al heigh, aunque eso lo podemos hacer por CSS. Ambos widgets los agregamos a un FlowPanel y finalmente con el mtodo initWidget le decimos que el widget que va a mostrar nuestro composite ser el panel que contiene a los dems objetos. El manejo del evento clic del botn ya lo hemos visto as que no es nada nuevo para nosotros.

La aplicacin se vera algo as:

Crear un widget compuesto es como si realizramos una mini aplicacin, as que debemos resolver varias preguntas como las que hacemos al construir otras aplicaciones: que widgets usar y como los quiero mostrar, que paneles me sirven para el diseo que quiero montar, que interfaces debe implementar nuestro widget, el manejo de eventos que debemos utilizar. Para esto aconsejamos una serie de pasos para armar nuestros widgets compuestos los cuales son los siguientes: Identificar los widgets: como sabemos los widgets compuestos son hechos de varios widgets los cuales pueden ser los estndares de GWT u otro widget compuesto, por eso es bueno que antes de construir nuestro widget identificramos los widgets que vamos a incluir en l. Elegir el diseo: despus de elegir los widgets que usaremos debemos definir el diseo a usar, es decir la disposicin de los widgets dentro de nuestro control.

Identificar interfaces: esto se refiere a las interfaces que vamos a implementar en nuestro widget para el manejo de los eventos, depende de las necesidades y de las funcionalidades que vayamos a implementar. Implementaremos las interfaces que nos sean tiles para nuestro propsito. Construccin del widget: como se imaginaran por el nombre, es la construccin del widget como tal, ya que hemos definido la estructura es hora de implementar dicha estructura. Este paso tiene sub-etapas que son: Implementar las interfaces identificadas. Implementar mtodos adicionales a los requeridos por las interfaces que implementamos.

Crear la estructura del widget y establecer el manejo de eventos. Implementar el cdigo que manejara los eventos esperados. Establecer los estilos: en esta etapa ms que todo lo hacemos es establecer una convencin para los nombres de estilo de cada componente widget o panel. Pruebas: como todo desarrollo de software la etapa final es la prueba de nuestro widget. la idea es que nuestro widget se comporte bien y haga lo que tiene que hacer para evitarnos sorpresas ms tardes.

6. RPC (Remote Procedure Calls)

Hasta ahora lo que hemos visto es la construccin de interfaces grficas, manejo de eventos pero todo esto del lado del cliente. La mayora de las aplicaciones web necesitan la comunicacin con el servidor, ya sea para recibir o enviar informacin. Para esto GWT implemento un mtodo de comunicacin con el servidor llamado GWT-RPC, para los que han trabajado en java esto les parecer algo conocido. Este mecanismo permite ejecutar mtodos que se encuentran en otras computadoras y traer el resultado. Ya hemos descrito algunas cosas sobre RPC en el inicio. El cdigo del lado del servidor que es invocado desde el cliente es frecuentemente llamado servicio, por lo que el llamar procedimientos remotos es comnmente llamado como invocacin de servicios. No debe confundirse estos llamados a RPC con los web-services, estos servicios del RPC de GWT no es lo mismo que el SOAP (Simple Object Access Protocol). Podemos decir que hay 3 partes o piezas que debemos ensamblar para poner a funcionar una aplicacin que use RPC. La primera es el servicio que corre en el servidor, la segunda es el cliente en el browser que llama al servicio, y la tercera son los objetos que son transportados entre el cliente y el servidor. Tanto el cliente como el servidor tienen la habilidad de serializar y deserializar datos, por lo que los objetos pueden ser enviados entre ambos como texto ordinario. En la siguiente imagen mostramos un bosquejo de una comunicacin entre un servidor y el cliente.

Estructura RPC

A continuacin vamos a ver las partes bsicas requeridas para invocar un servicio. Cada servicio tiene una pequea familia de interfaces y clases. Algunas de esas clases, como el servicio Proxy, son generados automticamente y generalmente nunca te percatars de que existen. El patrn de clases es idntico para todos los servicios que implementas, por lo que es una buena idea familiarizarse un poco con los trminos y el propsito de cada capa, en el procesamiento de llamadas al servidor. Si ests familiarizado con el mecanismo tradicional de RPC, probablemente ya conocers la mayora de la terminologa. Veremos estas partes mas en detalle luego.

Grafico tomado de la pagina oficial de google web toolkit Como ya dijimos antes las 3 partes bsicas del mecanismo de RPC son el servicio, el cliente y los objetos que viajan entre ellos. Vamos a explicar estas partes, comenzando por los objetos y explicando un poco de la serializacin. Empezaremos explicando con los objetos porque los datos son los que le dan vida al GWT-RPC. Como ya dijimos RPC consiste en llamar mtodos que se encuentran en un servicio en el servidor el cual enviara el resultado de la ejecucin del mtodo hacia el cliente. Como cualquier mtodo de Java podemos pasar parmetros a los mtodos los cuales pueden ser tipos primitivos u objetos. Ya dijimos anteriormente que los objetos se pasan serializados entre el cliente y el servicio as que hay lmites entre los tipos de datos que se pueden enviar, los cuales estn en la siguiente tabla: Tipos primitivos boolean, byte, char, double, float , int, long , shot Contenedores de los tipos Boolean, Byte, Character, Double, Integer,

primitivos Subconjuntos de objetos java Clases definidas usuario Arreglos por

Float Solo ArrayList, Date, HashMap, HashSet, String, Vector el Cualquier clase que implemente IsSerializable Arreglos de cualquier tipo serializable

Los tipos de datos propios de java son limitados y son los incluidos en la librera de GWT que emula la JRE de java. Con respecto a los otros tipos de datos definidos por el usuario deben implementar la interface IsSerializable, la cual no tiene mtodos que implementar y que utilizamos para que GWT sepa que ese objeto podr ser serializado. Las clases implementaran la interface com.google.gwt.user.client.rpc.IsSerializable, todos los atributos que no tengan el modificador transient son serializables, y adems la clase tendr un constructor sin parmetros o no tendr constructor.

El prximo paso para usar RPC es definir e implementar el servicio que ser executado en el servidor. Esto consistir en una interface de java, la cual describira el servicio y la implementacin del mismo. Para definir nuestro servicio necesitamos crear una interface y hacerla heredar de la interface que provee GWT llamada RemoteService. Esto es tan fcil como suena. Sera algo como esto:

Como vemos es tan sencillo como definir el nombre de la interface, heredar de la interface com.google.gwt.user.client.rpc.RemoteService, definir los mtodos que deseamos en el servicio teniendo en cuenta que los parmetros y los valores de retorno deben ser serializables. Esta interface la debemos colocar en el packete cliente de nuestro modulo. Aunque si usamos algn IDE de desarrollo como eclipse con algn plugin este se encargara de todo esto, ya veremos despus como hacer esto con eclipse. Ya hemos creado nuestra interface para el servicio, ahora es momento de implementar sus mtodos. Hacemos esto creando un servlet que herede de RemoteServiceServlet y que implemente nuestra interface de servicio. El cdigo sera algo como esto:

No hay mucho que explicar, en el servlet implementaremos los mtodos del servicio que deseamos crear. Vemos que el nombre del servlet es el mismo que el de la interface con el sufijo Impl el cual es notacin de GWT para reconocer a ese servlet como la implementacin del servicio que define la interface que creamos anteriormente. Cuando llamamos al servicio desde el cliente GWT hace la mayor parte del trabajo por nosotros, sin embargo todava necesitamos crear una ltima interface. Esta interface ser usada por el compilador de GWT cuando este genere el objeto proxy del servicio. Un objeto proxy es la instancia de un objeto que reenvia la peticin a otro objetivo. En este caso se estar llamando a un mtodo local y el objeto proxy ser el encargado de serializar los parmetros, llamar al servicio remoto, y manejar la deserializacion del resultado. Todo esto lo hace GWT por nosotros. En nuestro cdigo del lado del cliente creamos el objeto proxy con la siguiente lnea:

Aqu llamamos al mtodo esttico create de la clase com.google.gwt.core.client.GWT pasndole como parmetro la clase de nuestra interface del servicio. Esto nos devuelve un objeto proxy el cual podemos usar para asignar la URL del servicio y llamar los mtodos del servicio remoto. El objeto proxy que obtenemos implementara 2 interfaces, una que debemos crear nosotros y otra que provee GWT.

En la figura vemos un ejemplo con un servicio llamado ServeStatus, la interface ServiceDefTarget es la que viene con GWT, incluye el mtodo setServiceEntryPoint para especificar la URL del servicio. La segunda es la que definimos nosotros y nos provee mtodos asncronos para llamar el servicio remoto. Como vemos es el nombre del servicio con el sufijo Async. Los mtodos en esta interface deben coincidir con los nombres de los mtodos de nuestra interface de servicio pero cambiando algo en la firma de los mtodos, el valor de retorno debe ser void y adems debemos agregar un parmetro de tipo com.google.gwt.user.client.rpc.AsyncCallback. En esta figura nos muestra un ejemplo de esto:

Esta interface es usada del lado del cliente por lo que debe ser ubicada en el paquete cliente. Ahora que hemos definido todas las interfaces necesarias podemos realizar el llamado al servicio desde el cliente y para esto debemos hacer lo siguiente: Instanciar un objeto proxy como ya vimos. Especificar la URL del servicio. Crear un mtodo callback para manejar el resultado de la llamada asncrona del mtodo. Llamar al mtodo. Veamos estos 4 pasos ms detalladamente. Instanciar el objeto proxy Hacemos esto llamando al mtodo esttico GWT.create() pasndole como parmetro la clase de la interface del servicio que creamos. Luego necesitamos realizar un casting de esto objeto a la interface asncrona que ya hemos creado anteriormente.

Especificar la URL del servicio Para este paso necesitamos realizar otro casting del objeto proxy que capturamos al tipo ServiceDefTarget para de esta manera definir la URL de nuestro servicio remoto.

La URL web.xml.

debe ser la misma que est en la definicin del servlet en el

Crear un objeto callback En este paso crearemos un objeto callback, este objeto implementara la interface com.google.gwt.user.client.rpc.AsyncCallback y ser ejecutado cuando el resultado sea recibido del servidor. Como ya recordaran se ha aadido un parmetro AsyncCallback en los parmetros de los mtodos de la interface asncrona que definimos, este objeto ser el parmetro extra que enviaremos en el llamado a la funcin. Aqu crearemos un objeto annimo que implementa la interface AsyncCallback.

La interface AsyncCallback tiene 2 mtodos que deben ser implementados que son onFailure que se ejecuta cuando hay algn error en la ejecucin del mtodo. Y el mtodo onSuccess cuando el mtodo fue ejecutado exitosamente y el resultado fue recibido del servidor, en este caso el resultado es recibido por el mtodo en el parmetro result el cual podemos usar para cualquier operacin que deseemos realizar. Llamando al servicio remoto El ltimo paso es llamar al servicio, lo cual es bastante simple y consiste en una sola lnea que sera: