Google Web Toolkit (GWT) es un juego de herramientas de desarrollo para crear y optimizar aplicaciones complejas basadas en navegador. Muchos productos de Google utilizan GWT, incluidos Google AdWords y orkut.
Las siguientes son las características de GWT:
Google Web Toolkit (GWT) es un juego de herramientas de desarrollo para crear una aplicación de Internet RICA (RIA).
GWT ofrece a los desarrolladores la opción de escribir aplicaciones del lado del cliente en JAVA.
GWT compila el código escrito en JAVA en código JavaScript.
La aplicación escrita en GWT es compatible con varios navegadores. GWT genera automáticamente un código javascript adecuado para cada navegador.
GWT es de código abierto, completamente gratuito y utilizado por miles de desarrolladores en todo el mundo. Tiene licencia de Apache License versión 2.0.
Las siguientes son las razones para preferir GWT para proyectos de desarrollo:
Al estar basado en Java, puede usar IDE de JAVA como Eclipse para desarrollar aplicaciones GWT. Los desarrolladores pueden utilizar código de autocompletar / refactorización / navegación / gestión de proyectos y todas las características de los IDE.
GWT proporciona una capacidad de depuración completa. Los desarrolladores pueden depurar la aplicación del lado del cliente como una aplicación Java.
GWT proporciona una fácil integración con Junit y Maven.
Al estar nuevamente basado en Java, GWT tiene una curva de aprendizaje baja para los desarrolladores de Java.
GWT genera código javascript optimizado, produce el código javascript específico del navegador por sí mismo.
GWT proporciona la biblioteca de widgets que proporciona la mayoría de las tareas necesarias en una aplicación.
GWT es extensible y se puede crear un widget personalizado para satisfacer las necesidades de la aplicación.
Además de todo, las aplicaciones GWT pueden ejecutarse en todos los principales navegadores y teléfonos inteligentes, incluidos teléfonos / tabletas basados en Android e iOS.
Las siguientes son las desventajas de GWT:
Not indexable − Las páginas web generadas por GWT no serían indexadas por los motores de búsqueda porque estas aplicaciones se generan de forma dinámica.
Not degradable − Si el usuario de su aplicación deshabilita Javascript, el usuario solo verá la página básica y nada más.
Not designer's friendly − GWT no es adecuado para diseñadores web que prefieren utilizar HTML simple con marcadores de posición para insertar contenido dinámico en un momento posterior.
Los siguientes son los componentes centrales de GWT:
GWT Java to JavaScript compiler −Esta es la parte más importante de GWT, lo que la convierte en una herramienta poderosa para construir RIA. El compilador GWT se utiliza para traducir todo el código de la aplicación escrito en Java a JavaScript.
JRE Emulation library −Google Web Toolkit incluye una biblioteca que emula un subconjunto de la biblioteca de tiempo de ejecución de Java. La lista incluye java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util y java.util.logging.
GWT UI building library − Esta parte de GWT consta de muchas subpartes que incluyen los componentes reales de la interfaz de usuario, la compatibilidad con RPC, la gestión del historial y mucho más.
GWT Hosted Web Browser − El navegador web alojado de GWT le permite ejecutar y ejecutar sus aplicaciones de GWT en modo alojado, donde su código se ejecuta como Java en la máquina virtual Java sin compilar a JavaScript.
Una solicitud de GWT consta de las siguientes cuatro partes importantes, de las cuales la última parte es opcional, pero las tres primeras son obligatorias:
Descriptores de módulo
Recursos públicos
Código del lado del cliente
Código del lado del servidor
Un descriptor de módulo es el archivo de configuración en forma de XML que se utiliza para configurar una aplicación GWT. Una extensión de archivo descriptor de módulo es * .gwt.xml, donde * es el nombre de la aplicación y este archivo debe residir en la raíz del proyecto.
Esto proporciona el nombre de la aplicación.
Esto agrega otro módulo gwt en la aplicación al igual que lo hace la importación en las aplicaciones Java. De esta manera se puede heredar cualquier número de módulos.
Esto especifica el nombre de la clase que comenzará a cargar la aplicación GWT.
¡Si! Se puede agregar cualquier cantidad de clases de punto de entrada.
Se llama a la función onModuleLoad () y actúa de manera similar al método principal de una aplicación Java.
Se llaman secuencialmente en el orden en que aparecen las clases de punto de entrada en el archivo del módulo. Entonces, cuando el onModuleLoad () de su primer punto de entrada termina, se llama al siguiente punto de entrada inmediatamente.
Esto especifica los nombres de las carpetas de origen que el compilador de GWT buscará para la compilación de origen.
La ruta pública es el lugar de su proyecto donde se almacenan los recursos estáticos a los que hace referencia su módulo GWT, como CSS o imágenes.
La ruta pública predeterminada es el subdirectorio público debajo de donde se almacena el archivo XML del módulo.
Inyecta automáticamente el archivo JavaScript externo ubicado en la ubicación especificada por src.
Inyecta automáticamente el archivo CSS externo ubicado en la ubicación especificada por src.
Un punto de entrada de módulo es cualquier clase que se puede asignar a EntryPoint y que se puede construir sin parámetros. Cuando se carga un módulo, se crea una instancia de cada clase de punto de entrada y se llama a su método EntryPoint.onModuleLoad ().
Contiene el código javascript necesario para resolver las configuraciones de enlace diferido (por ejemplo, la detección del navegador) y para utilizar la tabla de búsqueda generada por el compilador GWT para localizar uno de los .cache.html.
Contiene el programa real de una aplicación GWT.
Los siguientes son los pasos del procedimiento de arranque para la aplicación GWT cuando un navegador carga la aplicación GWT:
El navegador carga la página html del host y el archivo .nocache.js.
El navegador ejecuta el código javascript del archivo .nocache.js.
El código .nocache.js resuelve las configuraciones de enlace diferido (por ejemplo, la detección del navegador) y usa la tabla de búsqueda generada por el compilador GWT para ubicar uno de los .cache.html.
El código .nocache.js luego crea un iframe oculto html, inserta ese iframe en el DOM de la página de host y carga el archivo .cache.html en el mismo iframe.
.cache.html contiene el programa real de una aplicación GWT y una vez cargado en iframe muestra la aplicación GWT en el navegador.
El compilador GWT genera un archivo .nocache.js cada vez con el mismo nombre siempre que se compila una aplicación GWT. Por lo tanto, el navegador siempre debe descargar el archivo .nocache.js para obtener la última aplicación gwt. El código gwt.js en realidad agrega una marca de tiempo única al final del nombre del archivo para que el navegador siempre lo trate como un archivo nuevo y nunca lo almacene en caché.
El recurso público más importante es la página de host, que se utiliza para invocar la aplicación GWT real. Es posible que una página de host HTML típica para una aplicación no incluya ningún contenido de cuerpo HTML visible, pero siempre se espera que incluya la aplicación GWT a través de una etiqueta <script ... />.
Por defecto, el nombre de clase para cada componente es gwt- <classname>. Por ejemplo, el widget Button tiene un estilo predeterminado de gwt-Button y de manera similar, el widget TextBox tiene un estilo predeterminado de gwt-TextBox.
¡No! De forma predeterminada, ni el navegador ni GWT crean atributos de identificación predeterminados para los widgets.
Este método borrará cualquier estilo existente y establecerá el estilo del widget en la nueva clase CSS proporcionada usando style.
Este método agregará un nombre de estilo secundario o dependiente al widget. Un nombre de estilo secundario es un nombre de estilo adicional, es decir, si se aplicaron nombres de estilo anteriores, se mantienen.
Este método eliminará el estilo dado del widget y dejará todos los demás asociados con el widget.
Este método obtiene todos los nombres de estilo del objeto, como una lista separada por espacios.
Este método establece el nombre de estilo principal del objeto y actualiza todos los nombres de estilo dependientes.
De forma predeterminada, el nombre de estilo principal de un widget será el nombre de estilo predeterminado para su clase de widget. Por ejemplo, gwt-Button para widgets de botón. Cuando agregamos y eliminamos nombres de estilo usando el método AddStyleName (), esos estilos se denominan estilos secundarios.
La apariencia final de un widget está determinada por la suma de todos los estilos secundarios que se le agregan, más su estilo principal. Establece el estilo principal de un widget con el método setStylePrimaryName (String).
Existen varios enfoques para asociar archivos CSS con su módulo. Las aplicaciones modernas de GWT suelen utilizar una combinación de CssResource y UiBinder.
Usando una etiqueta <link> en la página HTML del host.
Usando el elemento <stylesheet> en el archivo XML del módulo.
Usando un CssResource contenido dentro de un ClientBundle.
Usando un elemento <ui: style> en línea en una plantilla UiBinder.
La clase UIObject es la superclase para todos los objetos de interfaz de usuario.
La clase UIObject es la superclase para todos los objetos de interfaz de usuario. Simplemente envuelve un elemento DOM y no puede recibir eventos. Proporciona clases secundarias directas como Widget, MenuItem, MenuItemSeparator, TreeItem.
Todos los objetos de UIObject se pueden diseñar con CSS.
Cada UIObject tiene un nombre de estilo principal que identifica la regla de estilo CSS clave que siempre se le debe aplicar.
Se puede lograr un comportamiento de estilo más complejo manipulando los nombres de estilo secundario de un objeto.
La clase Widget es la clase base para la mayoría de los objetos de la interfaz de usuario. Widget agrega soporte para recibir eventos desde el navegador y agregarse directamente a los paneles.
Este widget contiene texto, no interpretado como HTML usando un elemento <div>, lo que hace que se muestre con un diseño de bloque.
Este widget puede contener texto HTML y muestra el contenido html usando un elemento <div>, lo que hace que se muestre con un diseño de bloque.
Este widget muestra una imagen en una URL determinada.
Este widget representa un elemento <a> simple.
El widget de botón representa un botón pulsador estándar.
PushButton representa un botón pulsador normal con estilo personalizado.
El widget ToggleButton representa un elegante botón con estado que permite al usuario alternar entre los estados hacia arriba y hacia abajo.
El widget CheckBox representa un widget de casilla de verificación estándar. Esta clase también sirve como clase base para RadioButton.
El widget RadioButton representa un widget de botón de opción de selección mutuamente excluyente.
El widget ListBox representa una lista de opciones para el usuario, ya sea como un cuadro de lista o como una lista desplegable.
El widget Sugerir cuadro representa un cuadro de texto o un área de texto que muestra un conjunto preconfigurado de selecciones que coinciden con la entrada del usuario. Cada SugerirBox está asociado con un solo SugerirOracle. SugiereOracle se utiliza para proporcionar un conjunto de selecciones dada una cadena de consulta específica.
El widget TextBox representa un cuadro de texto de una sola línea.
El widget PasswordTextBox representa un cuadro de texto que enmascara visualmente su entrada para evitar escuchas.
El widget TextArea representa un cuadro de texto que permite introducir varias líneas de texto.
El widget RichTextArea representa un editor de texto enriquecido que permite un estilo y formato complejos.
El widget FileUpload envuelve el elemento HTML <input type = 'file'>.
El widget oculto representa un campo oculto en un formulario HTML.
El widget de árbol representa un widget de árbol jerárquico estándar. El árbol contiene una jerarquía de TreeItems que el usuario puede abrir, cerrar y seleccionar.
El widget MenuBar representa un widget de barra de menú estándar. Una barra de menú puede contener cualquier número de elementos de menú, cada uno de los cuales puede activar un comando o abrir una barra de menú en cascada.
El widget DatePicker representa un selector de fechas estándar de GWT.
El widget CellTree representa una vista de un árbol. Este widget solo funcionará en modo estándar, lo que requiere que la página HTML en la que se ejecuta tenga una declaración <! DOCTYPE> explícita.
El widget CellList representa una lista de celdas de una sola columna.
El widget CellTable representa una vista tabular que admite paginación y columnas.
El widget CellBrowser representa una vista navegable de un árbol en el que solo un nodo por nivel puede estar abierto a la vez. Este widget solo funcionará en modo estándar, lo que requiere que la página HTML en la que se ejecuta tenga una declaración <! DOCTYPE> explícita.
Los paneles de diseño pueden contener otros widgets. Estos paneles controlan la forma en que se muestran los widgets en la interfaz de usuario. Cada widget Panel hereda propiedades de la clase Panel que a su vez hereda propiedades de la clase Widget y que a su vez hereda propiedades de la clase UIObject.
Panel es la clase base abstracta para todos los paneles, que son widgets que pueden contener otros widgets.
El widget FlowPanel representa un panel que formatea sus widgets secundarios utilizando el comportamiento de diseño HTML predeterminado.
El widget HorizontalPanel representa un panel que coloca todos sus widgets en una sola columna horizontal.
El widget VerticalPanel representa un panel que coloca todos sus widgets en una sola columna vertical.
El widget HorizontalSplitPanel representa un panel que organiza dos widgets en una sola fila horizontal y permite al usuario cambiar de forma interactiva la proporción del ancho dedicado a cada uno de los dos widgets. Los widgets contenidos en HorizontalSplitPanel se decorarán automáticamente con barras de desplazamiento cuando sea necesario.
El widget VerticalSplitPanel representa un panel A que organiza dos widgets en una sola columna vertical y permite al usuario cambiar interactivamente la proporción de la altura dedicada a cada uno de los dos widgets. Los widgets contenidos en un VertialSplitPanel se decorarán automáticamente con barras de desplazamiento cuando sea necesario.
El widget FlexTable representa una tabla flexible que crea celdas a pedido. Puede ser irregular (es decir, cada fila puede contener un número diferente de celdas) y las celdas individuales se pueden configurar para abarcar varias filas o columnas.
El widget de cuadrícula representa una cuadrícula rectangular que puede contener texto, html o un widget secundario dentro de sus celdas. Debe redimensionarse explícitamente al número deseado de filas y columnas.
DeckPanel es un panel que muestra todos sus widgets secundarios en una 'plataforma', donde solo uno puede ser visible a la vez. Es utilizado por TabPanel.
Este widget representa un panel que coloca sus widgets secundarios "acoplados" en sus bordes exteriores y permite que su último widget ocupe el espacio restante en su centro.
Este widget representa un panel que contiene HTML y que puede adjuntar widgets secundarios a elementos identificados dentro de ese HTML.
Este widget representa un panel que representa un conjunto de páginas con pestañas, cada una de las cuales contiene otro widget. Sus widgets secundarios se muestran cuando el usuario selecciona las diversas pestañas asociadas con ellos. Las pestañas pueden contener HTML arbitrario.
Este widget representa un tipo de widget que puede envolver otro widget, ocultando los métodos del widget envuelto. Cuando se agrega a un panel, un compuesto se comporta exactamente como si se hubiera agregado el widget que envuelve.
SimplePanel es la clase base para paneles que contienen solo un widget.
El widget ScrollPanel representa un panel simple que envuelve su contenido en un área desplazable.
El widget FocusPanel representa un panel simple que hace que su contenido sea enfocable y agrega la capacidad de capturar eventos de mouse y teclado.
Este widget representa un panel que envuelve su contenido en un elemento HTML <FORM>.
Este widget representa un panel que puede aparecer sobre otros widgets. Se superpone al área del cliente del navegador (y cualquier ventana emergente creada previamente).
Este widget representa una forma de ventana emergente que tiene un área de título en la parte superior y puede ser arrastrada por el usuario. A diferencia de PopupPanel, las llamadas a PopupPanel.setWidth (String) y PopupPanel.setHeight (String) establecerán el ancho y el alto del cuadro de diálogo, incluso si aún no se ha agregado un widget.
GWT proporciona un modelo de controlador de eventos similar a los marcos de interfaz de usuario de Java AWT o SWING.
Una interfaz de escucha define uno o más métodos que el widget llama para anunciar un evento. GWT proporciona una lista de interfaces correspondientes a varios eventos posibles.
Una clase que desea recibir eventos de un tipo particular implementa la interfaz del controlador asociado y luego pasa una referencia a sí misma al widget para suscribirse a un conjunto de eventos.
Por ejemplo, la clase Button publica eventos de clic, por lo que tendrá que escribir una clase para implementar ClickHandler para manejar el evento de clic.
Todos los controladores de eventos de GWT se han ampliado desde la interfaz EventHandler y cada controlador tiene un único método con un único argumento. Este argumento es siempre un objeto de tipo de evento asociado. Cada objeto de evento tiene varios métodos para manipular el objeto de evento pasado.
GWT ofrece tres formas de crear elementos de interfaz de usuario personalizados. Hay tres estrategias generales a seguir:
Create a widget by extending Composite Class −Esta es la forma más común y sencilla de crear widgets personalizados. Aquí puede utilizar los widgets existentes para crear una vista compuesta con propiedades personalizadas.
Create a widget using GWT DOM API in JAVA −Los widgets básicos de GWT se crean de esta manera. Aún así, es una forma muy complicada de crear un widget personalizado y debe usarse con precaución.
Use JavaScript and wrap it in a widget using JSNI −Por lo general, esto solo debe hacerse como último recurso. Teniendo en cuenta las implicaciones de los métodos nativos en varios navegadores, se vuelve muy complicado y también más difícil de depurar.
UiBinder es un marco diseñado para separar la funcionalidad y la vista de la interfaz de usuario.
El marco UiBinder permite a los desarrolladores crear aplicaciones gwt como páginas HTML con widgets GWT configurados en todas ellas.
El marco UiBinder facilita la colaboración con los diseñadores de UI que se sienten más cómodos con XML, HTML y CSS que con el código fuente de Java.
UIBinder proporciona una forma declarativa de definir la interfaz de usuario.
UIBinder separa la lógica programática de la interfaz de usuario.
El UIBinder es similar a lo que JSP es para Servlets.
RPC, Remote Procedure Call es el mecanismo utilizado por GWT en el que el código del cliente puede ejecutar directamente los métodos del lado del servidor.
GWT RPC está basado en servlets.
GWT RPC es asincrónico y el cliente nunca se bloquea durante la comunicación.
Usando GWT RPC, los objetos Java se pueden enviar directamente entre el cliente y el servidor (que son serializados automáticamente por el marco de GWT).
El servlet del lado del servidor se denomina servicio.
La llamada a procedimiento remoto que llama a métodos de servlets del lado del servidor desde el código del lado del cliente se conoce como invocación de un servicio.
A continuación se muestran los tres componentes utilizados en el mecanismo de comunicación GWT RPC:
Un servicio remoto (servlet del lado del servidor) que se ejecuta en el servidor.
Código de cliente para invocar ese servicio.
Objetos de datos Java que se pasarán entre el cliente y el servidor.
El cliente y el servidor de GWT serializan y deserializan datos automáticamente para que los desarrolladores no estén obligados a serializar / deserializar objetos y los objetos de datos puedan viajar a través de HTTP.
Un objeto de datos java debe implementar la interfaz isSerializable para que pueda transferirse por cable en GWT RPC.
La internacionalización es una forma de mostrar información local específica en un sitio web. Por ejemplo, mostrar el contenido de un sitio web en inglés en Estados Unidos y en danés en Francia.
GWT ofrece tres formas de internacionalizar una aplicación GWT:
Internacionalización de cadenas estáticas.
Internacionalización dinámica de cadenas.
Interfaz localizable.
Esta técnica es la más frecuente y requiere muy poca sobrecarga en tiempo de ejecución; es una técnica muy eficaz para traducir tanto cadenas constantes como parametrizadas; la más sencilla de implementar. La internacionalización de cadenas estáticas utiliza archivos de propiedades Java estándar para almacenar cadenas traducidas y mensajes parametrizados, y se crean interfaces Java fuertemente tipadas para recuperar sus valores.
Esta técnica es muy flexible pero más lenta que la internacionalización de cadenas estáticas. La página del host contiene las cadenas localizadas, por lo tanto, no es necesario volver a compilar las aplicaciones cuando agregamos una nueva configuración regional. Si la aplicación GWT se va a integrar con un sistema de localización del lado del servidor existente, entonces se debe utilizar esta técnica.
Esta técnica es la más poderosa entre las tres técnicas. La implementación de Localizable nos permite crear versiones localizadas de tipos personalizados. Es una técnica de internacionalización avanzada.
etiqueta extend-property con nombre de atributo establecido como configuración regional y valores como configuración regional específica del idioma, por ejemplo, de para la configuración regional alemana.
Para utilizar la compatibilidad con el historial de GWT, primero debemos incrustar el siguiente iframe en nuestra página HTML de host.
<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>El marco de registro emula java.util.logging, por lo que usa la misma sintaxis y tiene el mismo comportamiento que el código de registro del lado del servidor.
El registro de GWT se configura mediante archivos .gwt.xml.
Podemos configurar el registro para que esté habilitado / deshabilitado; podemos habilitar / deshabilitar manejadores particulares y cambiar el nivel de registro predeterminado.
SystemLogHandler se registra en stdout y estos mensajes solo se pueden ver en el modo de desarrollo en la ventana DevMode.
DevelopmentModeLogHandler logs llamando al método GWT.log. Estos mensajes solo se pueden ver en el modo de desarrollo en la ventana DevMode.
ConsoleLogHandler se registra en la consola de JavaScript, que es utilizada por Firebug Lite (para IE), Safari y Chrome.
FirebugLogHandler se registra en la consola de Firebug.
PopupLogHandler inicia sesión en la ventana emergente que se encuentra en la esquina superior izquierda de la aplicación cuando este controlador está habilitado.
Este controlador envía mensajes de registro al servidor, donde se registrarán mediante el mecanismo de registro del lado del servidor.