Interfaz de usuario sobre GWT - Utilizando UBinder


En esta actividad vamos a trabajar en el desarrollo de la UI en GWT mediante UiBinder, el objetivo es incrementar la productividad del desarrollo de la UI. UiBinder es un framework de GWT que permite a los desarrolladores crear UI de una forma declarativa en XML.
UiBinder tiene algunas ventajas con respecto al escenario de desarrollo de UI programático, les dejo algunas:

●     Separación del código de UI del código Java de implementación.
●     Verificación de la sintaxis en tiempo de compilación.
●     Verificación del CSS (estilos) en tiempo de compilación.

Introducción

El objetivo de esta actividad es tomar contacto con el framework UiBinder  y construir UI en GWT de una forma mucho más productiva. La UI que vamos a diseñar tiene algo más de complejidad que la implementada un el articulo sobre UI programático en GWT.
Veamos en primer lugar el diseño en un prototipo de dibujo, como muestra la Fig. 1.


Fig. 1 - Diseño general de la UI a desarrollar.

La teoría de los bloques de construcción sobre la UI siguen el mismo concepto que el desarrollado uh artículo sobre UI programático, solo que en este caso la implementación es diversa lógicamente.

Vamos a trabajar con la receta que utilizamos siempre que tengamos que diseñar una UI en el marco de GWT.

Ya conocemos el diseño porque es lo que propongo en la actividad, veamos:
●     Seleccionar los widgets a incluir en la UI.
●     Seleccionar los paneles y su organización.
●     Añadir la aplicación diseñada a la página principal.
●     Implementar los widgets y paneles.

Seleccionando los widgets a incluir en la UI

En esta actividad estaríamos seleccionando los widgets a utilizar, según nuestra actividad:
●     2 Textbox (Main)
●     Button (Main)
●     HTML (Header)
●     HTML en lista simulada (West)

Seleccionando los paneles y la organización de widgets en los mismos.

En esta actividad estaríamos analizando los paneles a utilizar y la organización de los mismos junto con los widgets, según nuestra actividad:
●     RootPanel
●     HTMLPanel
●     VerticalPanel
●     DockLayoutPanel

Añadir la aplicación de UI en la página principal

Para esta actividad seguiremos con la típica clase “Entrypoint” y desde ahí añadiremos las UI haciendo uso de UiBinder.

package ar.com.comunidadxcloud.nbortolotti.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;
public class presentacionUI implements EntryPoint {

            @Override
            public void onModuleLoad()
            {
                        principal p = new principal("Aceptar");
                        RootLayoutPanel.get().add(p);
            }
}
Code 1 - Clase EntryPoint

La clase Entrypoint en Code 1 se muestra segmentada en 3 partes:
●     Parte 1: paquete donde se desempeña el código fuente
●     Parte 2: importaciones de librería necesarias para el desempeño de la clase.
●     Parte 3: clase y evento de carga.

Como muestra el Code 1, en este caso utilizaremos la clase “RootLayoutPanel”. Solo se me solicita que genere una instancia del widget uibinder, esto es el caso de “principal”, en Code 1 remarcado en amarillo y luego agregue este mismo widget a la raíz, remarcado en azul.

Implementar los widgets y paneles

Para implementar los widgets y paneles en primer lugar y para esta simple tarea vamos agenerar solo una UI UiBinder. Le colocaremos de nombre principal. Se generarán dos archivos, uno con la parte de UI específica en XML “principal.ui.xml” y otra con el código Java de interacción “principal.java”.

En primer lugar vamos a analizar el código fuente de la UI, para esta actividad he segmentado su organización para un mejor estudio.
●     Parte 1: propone la declaración de la UIBinder y además se encuentran las importaciones necesarias para trabajar en la UI.
●     Parte 2: contiene los estilos de la UI.
●     Parte 3: contienelos paneles y widgets necesarios para la organización de la UI.
En esta parte les comento que tenemos varios elementos a detallar:
●     DockLayoutPanel: este panel contiene zonas de trabajo y se hace muy atractivo para un UI que propone zonas de actividades segmentadas, ejemplo de esta actividad y según la Fig. 1 necesitamos un zona superior, una zona central y una zona izquierda.
●     HTMLPanel: este panel lo utilizamos dentro de las zonas, para incorporar contenido HTML tradicional.
●     VerticalPanel: este panel lo utilizamos para organizar los widgets de la zona central.



Code 2 - Análisis del código de UI

Una vez diseñada la UI, pasemos a analizar el código de interacción. También he segmentado esta clase para un mejor análisis.
●     Parte 1: paqueteen donde se realiza la operación.
●     Parte 2: importaciones necesarias para el desarrollo de las actividades de la clase.
●     Parte 3:clase principal, que extiende de “Composite”, resaltado en amarillo podemos encontrar el mecanismo de UiBinder con la interface, resaltado en azul, podemos encontrar los widgets con sus correspondientes etiquetas y finalmente resaltado en anaranjado podemos ver la inicialización de la UI.

package ar.com.comunidadxcloud.nbortolotti.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
public class principal extends Composite
{

            private static principalUiBinder uiBinder = GWT.create(principalUiBinder.class);

            interface principalUiBinder extends UiBinder
            {
            }
           
            @UiField
            Button button;
            @UiField
            TextBox usuario;
            @UiField
            TextBox descripcion;
                       

            public principal(String firstName)
            {
                        initWidget(uiBinder.createAndBindUi(this));
                        button.setText(firstName);               
                                      
            }

            @UiHandler("button")
            void onClick(ClickEvent e)
            {
                        Window.alert("Hello!");
            }

            public void setText(String text)
            {
                        button.setText(text);
            }

            public String getText()
            {
                        return button.getText();
            }

}
Code 3 - Código de interacción de la UI.

Prueba de la Aplicación

Finalmente vamos a realizar la ejecución de la actividad que terminamos de implementar.


Fig. 2 - Implementación finalizada de la actividad.

Les dejo la implementación en el siguiente vídeo:



Espero les sea de utilidad…

Comentarios

Publicar un comentario

Entradas más populares de este blog

Modelando relaciones en UML, un acercamiento a las Asociaciones

Imagen
En este artículo les traigo un análisis sobre las relaciones típicas de UML, como trabajar con ellas y algunas nociones de modelado. Al modelar los elementos que constituyen el vocabulario de un sistema, también hay que modelar como se relacionen entre si estos elementos. Pero típicamente encontramos complejidad en estas redes de relaciones, para sortear este inconveniente tenemos que tener un acabado conocimiento del uso de la relaciones. Hablando con diseñadores en diversos escenarios manifiestan conocimiento sobre relaciones, "utilizo a diario en mis diseños, dependencias, generalizaciones y asociaciones", pero el interrogante que emerge "¿Es suficiente la utilización básica de las relaciones para capturar los detalles de los sistemas actuales?" Para niveles aceptables de diseño, muchas veces es necesario profundizar sobre las relaciones y este objetivo intentaré cubrir en este artículo, como sería muy extenso tratar todas las relaciones voy a optar por definir c...
Leer más

Entendiendo la personalidad de mi equipo, cual es tu estilo?

Imagen
Cada equipo es una mezcla de personalidades, muchos líderes se preguntan cómo obtener la mejor combinación de las mismas y optimizar el equipo de trabajo. También ocurre un comportamiento frecuente, muchos equipos no están a la altura de su potencial, y una posible explicación es que los líderes no saben cómo manejar la diferencia en cómo las personas se acercan a su trabajo. Para abordar esta discusión me pareció muy interesante la siguiente propuesta de "Suzanne Johnson Vickberg and Kim Christfort, en el trabajo Pioneers, Drivers, integrators, & Guardians" donde se proponen 4 estilos de trabajo: Pioneros : valoran las posibilidades, la energía (chispas de energía) y la imaginación en sus equipos. Ellos creen que los riesgos valen la pena. Su enfoque es BigPicture. Ellos son atraídos a las nuevas ideas, enfoques creativos. Guardianes : valoran la estabilidad, ponen orden y rigor. Son pragmáticos, y no se atreven a abrazar el riesgo. Datos y hechos son requisi...
Leer más

Utilizando Intents implícitos para crear actividades

Imagen
Antes de comenzar la actividad de desarrollo vamos a definir de que se trata, cuando establecemos que utilizaremos intents implícitos en la solución mobile de Android. Los intents implícitos se utilizan cuando no se especifica un componente exacto a utilizar, en su lugar, se especifica la funcionalidad requerida a través de una acción (por ejemplo, 'ver', 'hacer búsqueda', 'marcar') y un dato (por exemplo, la URL de la página que se desea ver, el número que se desea marcar), y Android debe determinar el mejor componente para su utilización. Esa es una de las características más interesantes de Android, porque permite que una aplicación desencadene un “Intent” sin conocer exactamente cuál será la aplicación o componente que lo recibirá, y por eso puede interactuar con otras aplicaciones de manera muy flexible El filtro más comunmente utilizado es una acción, y la acción más común tiene que ver con el modo ACTION_VIEW. Los pasos básicos para lanzar una activid...
Leer más