GWT Designer,

Organización del proyecto

GWTGoogle Web Toolkit

Prof. Ing. Esteban Ramírez

GWT Designer,

Organización del proyecto

GWTGoogle Web Toolkit

Prof. Ing. Esteban Ramírez

Contenido

Plugin para eclipse / browser

Pasos básicos en proyectos GWT

Organización interna del proyecto

Componentes de GWT, Primeros pasos.

Plugin GWT Designer para eclipse

Plataforma de desarrollo

• Eclipse

• Plugins de GWT para eclipse

• GWT Development Kit

• Browser (Firefox, IE, Chrome)

• Plugin para browser específico

Plataforma de desarrollo

• Eclipse

• Plugin de GWT para eclipse

• GWT Development Kit

• Browser (Firefox, IE, Chrome)

• Plugin para browser específico

Ejemplo

• Nuevo Proyecto GWT• Nombre: TestGWT• Paquete base: com.test

• Google Web Toolkit• C:\gwt\gwt-2.1.0

• App Engine• C:\gwt\appengine-java-sdk-1.4.0

Run -> Run As -> Web Aplication

Plugins para navegadores

gwt-dev-plugin.crx

gwt-dev-plugin.xpi

GwtDevPluginSetupIE.exe

Plugins para navegadores

gwt-dev-plugin.crx

Ejemplo

Send

Ejemplo

Send

Servidor Web

Ejemplo

Servidor Web

Ejemplo

Servidor Web

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Pasos básicos

GWT Designer

Es una poderosa y fácil de usar herramienta bidireccional para diseñar interfaces graficas Java para aplicaciones GWT sin tener que gastar un montón de tiempo escribiendo código para mostrar las formas simples.

GWT Designer – Code designer

GWT Designer – Visual designer

GWT Designer – Visual designer

Widgets por default

GWT Designer – Paleta Standar

GWT Designer – Paleta GWT Ext

GWT Designer – Paleta Smart GWT

GWT Designer – Toolbar

GWT Designer – Contextual Menu

Add event handler

Implement an event handler for an event triggered by the selected component.

Widget Morphing

Morph the selected components into another type.

Order 

Change the relative z-order of the selected component. 

Expose Component

Add a public or protected accessor for the selected component.

Rename Components

Rename the selected components and/or convert them to fields or

local variables.

Enhanced Compilation

java.io.File can not be found in source packages. Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly.

GWT Designer – Instalación

12

3

C:\gwt\GWTDesigner_v8.1.1_UpdateSite_for_Eclipse3.6

GWT Organización de proyecto

FUENTE CLIENTE

FUENTE SERVIDOR

LIBRERIAS

WAR DEPLOY

CONF. MODULO

GWT HTML Host Pages

GWT HTML Host Pages

GWT Module Configuration  .gwt.xml.

GWT Module Configuration  .gwt.xml.

Ejemplo

Ejemplo

Project Name: TestDesigner

Ejemplo

Check : Create GWT ModuleModule name: TestDesignerPackage Name: com.cursojava.ejemploCheck : Create entry pointCheck : use standar GWT librery

Ejemplo

Ejemplo

Ejemplo

Ejercicio 1

Modificar el ejemplo anterior para presentar un TextBox y un Label como se muestra en la siguiente figura además de un botón con el texto Validar.

Ejercicio 1

Ejercicio 1

RootPanel rootPanel = RootPanel.get();

Ejercicio 2

Interacción HTML host con GWT.

Modificar el ejercicio 1 para que se visualice de la siguiente manera:

Ejercicio 21 - Comentar la linea:

// RootPanel rootPanel = RootPanel.get();

2- En el HTML host (/TestDesigner/war/TestDesigner.html):

3- En el java client:

Ejemplos on-line

http://gwt.google.com/samples/Showcase/Showcase.html

Ejercicio 3Probar la utilización y verificar el código generado

de otros tipos de Paneles.

Ejercicio 3Probar la utilización y verificar el código generado

de otros tipos de Widgets.