www.i2e.com.es El framework Google Web Toolkit Emilio Emilio Bravo Garcia www.i2e.com.es  usuario mejorar Ricas desarrollo Google tecnología adelante Google realizar En esta de . presentación una la Web GWT) para Internet desarrollada de experiencia introducción . Apli acelerar Toolkit GWT c (RIA) aciones se es va una por (en del el a a y Aplicaciones de Ejemplo Despliegue Compilación Depuración yTest Comunicación conel Servidor Construyendo la Interfaz Arquitectura de GWT Introducción www.i2e.com.es El framework Google WebGoogle Toolkit www.i2e.com.es   velocidad y recargarlas, que aumentarsignificalo interactividad, la realizar cambiosnecesidad sobrede sin páginas las estaDe plano. en segundo forma servidor posible es mientras se mantienela comunicación aplicaciones se ejecutan en el interactivas o una técnica de desarrollo AJAX,acrónimode AJAX (http://es.wikipedia.org/wiki/AJAX) usabilidad RIA (Rich (Rich InternetEstasApplications). A synchronous en aplicaciones. en las web navegador para crear aplicaciones J avaScript asíncrona de los usuarios usuarios de los A nd X conel ML , es , www.i2e.com.es  de de datos con el servidor JSON para transferenciala XMLHttpRequest, XML o XTML, CSS, JavaScript, trabajan conjuntamente, a un grupo de éstas que es término un engloba que tecnología en sí, sino que AJAX no constituye una . www.i2e.com.es   sandboxes maquinas virtuales. o plugins navegador,del independientemente o vía estándaresbasadas en los navegadores,de los vía normalmente entregadas ya medio de webs sea por las características de de escritorio, aplicaciones las web aplicaciones RIAmuchas de Lason con aplicaciones ons RIA( ) http://en.wikipedia.org/wiki/Rich_internet_applicati www.i2e.com.es  una una serie de inconvenientes: DesarrollarRIAutilizandoaplicaciones JavaScript tiene ◦ ◦ ◦ ◦ JavaScript para obtener aplicaciones optimizadas. Necesidad de tener conocimientoun avanzado en JavaScript. Falta de herramientas avanzadas para el desarrollo con Modularizacion del código cuando las aplicaciones crecen. (funcione sin problemas en la mayoría de navegadores). Conseguir nuestroque código JavaScript sea cross - browser www.i2e.com.es  FrameworksJavaScript. Una primeraproblemaslos a solución anteriores los son www.i2e.com.es   experiencia usuario. del en AJAX aplicaciones RIAbasadas mejorando la herramientas para acelerar el desarrolladode En decidieron realizarGoogle nueva una de caja problemas. todos los no solucionan en muchos casos,solución los problemasanteriores buena una y pueden ser Aunque frameworkslos JavaScript de alguno solucionan www.i2e.com.es  Manifiesto GWT independientes construir las permitiendo la La experiencia misión herramientas de GWT a de los del aplicaciones los es desarrolladores navegador Java mejorar usuarios existentes radicalmente . con la utilizar para web Ajax www.i2e.com.es   Código optimizado Java aplicaciones Google que disponible Web para son AJAX los compiladas Toolkit bajo en principales el la licencia lenguaje (GWT) en navegadores Apache código de permite programación 2 . JavaScript 0 . crear www.i2e.com.es      Despliegas en JavaScript GWT compila de Pruebas en Depuras en Programas en Java Java Java Java a JavaScripta www.i2e.com.es  Porque Java? este de fuertemente También artículos existentes, Google compilación requerimiento eligió y necesitaban la además amplia tipado Java y java . sobre comunidad para cumplía un de lenguaje todo por la fase con de por las desarrolladores las librerías, herramientas libros, . www.i2e.com.es  ya necesario usuario interfaz Mejora no tendremos de la con llamar usuario experiencia la el aplicación al efecto servidor en el de de navegador, es para pagina usuario mas renderizar en . fluida, la Al blanco interacción ejecutarse las al . paginas no del ser la www.i2e.com.es  tradicionales escalabilidad Obtenemos . un que mayor con rendimiento las aplicaciones y una mejor web www.i2e.com.es El framework WebGoogle Toolkit www.i2e.com.es  GWT ◦ ◦ ◦ ◦ GWT JRE Hosted Java Emulation tiene - to Web - Web JavaScript cuatro UI Browser Class Library componentes Compiler Library . . . principales www.i2e.com.es  navegadores Java componente GWT al Java lenguaje - to mas - es JavaScript traducir utilizados JavaScript el Compiler . código compatible : desarrollado la función con del los en www.i2e.com.es  servidor embebido. servidor de Java. virtual máquina usando Utiliza la Jetty como aplicación Javasin traducirlaa JavaScript, host en modo HostedWeb Browser: este componenteejecuta la www.i2e.com.es   ES/webtoolkit/doc/ http de importantes JRE ◦ ◦ ◦ ◦ ◦ java java java java java la : Emulation //code . . . . . API sql io util lang lang de . annotation . google Java de Library las . . com/intl/es 1 clases . 6 : /RefJreEmulation contiene de Java - . las GWT bibliotecas . html emula parte más www.i2e.com.es  texto, creación elementos GWT Web imágenes de UI de objetos Class interfaz , botones Library tales de y : otros usuario contiene como widgets textos, que un conjunto . permite cajas de de la www.i2e.com.es www.i2e.com.es El framework WebGoogle Toolkit www.i2e.com.es    Podemos Componentes, similares Las clases a dar Swing de estilo contendores GWT o SWT a para los . widgets la y interfaz eventos utilizando de . usuario CSS . son www.i2e.com.es    otros crear Empaquetando diseño Podemos (Eclipse,NetBeans, de Al desarrollar proyectos desarrollo módulos orientados realizar en . las reutilizables Java, abstracciones a IntelliJ) mas clases objetos podemos . en populares (OO) fáciles archivos y utilizar basados utilizar de jar los para patrones utilizar en podemos entornos Java Java . en de www.i2e.com.es  Patrón MVP en vez de MVC www.i2e.com.es  Ficheros ◦ ◦ ◦ ◦ GWT) Clase Fichero JavaScript Fichero dependencias Fichero . Java de CSS gwt Html que configuración con . xml . implementa desde los donde estilos el definimos . para que el EntryPoint una iniciamos la aplicaci aplicaci (el ó el main n ó n GWT código y para sus www.i2e.com.es  Modulo point . gwt . xml www.i2e.com.es src="  Html javascript" content='es.i2e.jornadasjava.web.JornadasJava'/>Wrapper forHTML JornadasJava jornadasJava/jornadasJava.nocache.js -- OPTIONAL: include this if this include you OPTIONAL: wanthistory support de inicio (JornadasJava "> . html) -- > www.i2e.com.es  JornadasJava } .gwt } .gwt } .gwt - - - PasswordTextBox{ RadioButton{ { Label border:1px #990000solid; background color: #FFFFFF; font font font font font font ------size:12px; family: Verdana, sans Arial, family:Verdana, sans Arial, size:12px; family:Verdana, sans Arial, size:12px; . css - color: #C89191; - - - serif; serif; serif; www.i2e.com.es  } PrincipalpublicimplementsEntryPoint,class HistoryListener { import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.EntryPoint; package es.i2e.jornadasjava.web.client; EntryPoint } publicvoidonHistoryChanged(String historyToken) { } { publicvoidonModuleLoad() (JornadasJava rootPanel.add(panel); panel.setSize("100%","100%"); privateDockPanelDockPanel();= newpanel rootPanel.setSize("100%", "100%"); final RootPanelrootPanel RootPanel.get(); = History.addHistoryListener(this); //controlamos la navegacionla aplicacionpor . java) www.i2e.com.es   del usando Si interfaz manualmente necesidades, Si } return $wnd.first_name; getFirstName()/*public nativeString var“Frank”; =first_name - */; la ya equipo biblioteca tienes JSNI JSNI pueda y o código crear JSO en de puedes reutilizarlo el . clases un código JavaScript paquete de - { fuente fácilmente mezclar GWT jar puedes Java para no . satisface mediante que envolverlo JavaScript el resto tus la www.i2e.com.es } Customer{ extendsJavaScriptObject public class  public final native/* int computeAge() final public /* getLastName()native String final public getFirstName()/* native String final public final native String getArea();native String final JSO ◦ fueran tipos Nos permite utilizar código externo de de java. - { return this.getComputedAge(); } return this.getComputedAge();{ - - { return this.last_name; } return this.last_name; { { return this.first_name;} { JavaScript como si - - */; */; - */; www.i2e.com.es   estándar aplicaciones ARIA vinculación internacionalizadas Puedes es crear del la aplazada especificación RIA DOM fácilmente accesibles . con de GWT las bibliotecas del a . potentes través W 3 C de para y propiedades técnicas aplicaciones hacer las de www.i2e.com.es       GWT mosaic IT Mill Toolkit GWT Smart GWT GWT Incubator GWT - Ext www.i2e.com.es  . . GWT Designer (NetBeans) Cypal Studio for GWT, IntelliJ IDEA, gwt4nb Eclipse Google Plugin www.i2e.com.es   http://code.google.com/p/gwt Integración sencilla con apis las de Google - google - apis/ www.i2e.com.es  Mejoras ◦ ◦ ◦ ◦ programador código Particiones Construcción (StyleInjector) Inyección Interfaces introducidas JavaScript de de de usuario de . (GWT código recursos CSS . se runAsync() en declarativas guiadas en descargar GWT via función ClientBundle 2 por ) . 0 con bajo el UiBinder desarrollador del . peticion navegador . . del El www.i2e.com.es    incubator/wiki/UiBinder http sencillo Permite UIBinder

Hello, .

: //code definir definir . google la la . estructura interfaz com/p/google mediante de - la web interfaz - xml, toolkit lo de - que usuario hace . mas www.i2e.com.es       toolkit/wiki/CssResource http Modularización Diferentes CssResource En diferentes GWT La CSS : //code la Abstrae no versión se navegadores Css . google . interpreta para de de } \ @if user.agentsafari{ la . Css, 2 - com/p/google diferentes webkit . 0 implementacion igual solo pero han - border se en no navegadores descarga introducido - todos de radius: 5px; radius: - web la CSS los - de cuando . navegadores JavaScript . StyleInjector se necesita para . los . + www.i2e.com.es  public { public interfaceextendsImageBundleJornadasJavaImageBundle } ImageBundle public AbstractImagePrototypepublic cancelButtonIcon(); @Resource("es/i2e/jornadasjava/icons/btn_cancel_icon.png") y ClientBundle www.i2e.com.es     toolkit/wiki/CodeSplitting http://code.google.com/p/google Automáticamente de GWT compilador el por manejado los utilice. recursos vienen msgs)imágenes,el concódigo que (CSS, Descarga lo necesites,necesites,que lo cuando lo de GWT. GWT.runAsync() señala un punto de corte al compilador } onNewWaveClicked()publicvoid { }); GWT.runAsync(new{ RunAsyncCallback() } { void onSuccess() public WaveCreator.createNewWave(); - web - www.i2e.com.es El framework WebGoogle Toolkit www.i2e.com.es  transportando servidor, GWT puede realizando la comunicarse información llamadas utilizando con AJAX cualquier JSON desde o tecnología XML el cliente . de y www.i2e.com.es    En clases En en para GWT cual GWT ◦ ◦ ◦ JornadasJavaServiceImpl JornadasJavaServiceAsyn JornadasJavaService la Java el nos realizar parte proporciona se : cliente . encarga permite servidor las tenemos llamada de por realizar implementamos la . defecto java serializacion . que Es . . llamadas java java un implementar el mecanismo mecanismo : entre remotas Java similar las GWT a < siguiente Servlets - > RPC a JSON RMI el , www.i2e.com.es  JornadasJavsa.Util.getInstance().cargarConfiguracion(asyncCallback); }; new LoggingAsyncHandler(){ = AsyncCallbackasyncCallback asíncrona Código } { result) public void handleSuccess(Object } public void handleFailure(Throwable{ caught) en a System.out.println("Cargadaconfiguracion");la System.err.println("Fallo cargaen la configuracion");de la un el servicio cliente GWT para RPC realizar . una llamada www.i2e.com.es } JornadasJavaImplpublicclass extendsRemoteServiceServletimplementsJornadasJava { import es.i2e.jornadasJava.web.client.util.GwtServiceException; import es.i2e.jornadasjava.web.client.servicios.inicio.JornadasJava; import com.google.gwt.user.server.rpc.RemoteServiceServlet; package es.i2e.jornadasjava.web.server.servicios.inicio;  cliente Código } publicvoidcargarConfiguracion() throws GwtServiceException{ JavaScript en el servidor . que recibe las llamas del www.i2e.com.es  y directamente tecnología Podemos servidor . realizar de en servidor, XML llamadas o JSON en remotas este los datos caso a servicios enviados deberemos en entre cualquier manejar cliente www.i2e.com.es El framework WebGoogle Toolkit www.i2e.com.es   GWT depurador como El compilar (hosted código ver Durante código inmediatamente . bytecode mediante mode) el el se código desarrollo de ejecutará Java de . en el Todo GWT se JavaScript los navegador de en aplicará . lo una la cambios No maquina que es aplicación, . también necesario de pueda realizados modo virtual se al hacer volver pueden de alojado código en Java el el a www.i2e.com.es  los los errores.. programa, lo que aumenta la productividadreducey de la creación del código, no durante la ejecucióndel ortográficos, tipos no coincidentes)enel momento permite detectar unaclase de errores (errores La comprobaciónde tipo estático en lenguajeJava www.i2e.com.es  mientras depuramos Eclipse.desde nuestra utilizarherramientaselección y como firebug Podemos ejecutar aplicaci la navegador (Out de GWT 2.0 puede depurarA se partir el desde - of - process Hostedprocess (OOPHM), Mode ó n en n en el navegador de www.i2e.com.es     interfaz Selenium También necesario Mediante ejecutar GWT proporciona GWT lanza incluye de los para la o podemos usuario test herramienta la WebDriver una integración poder . la instancia . clase ejecutar utilizar para junitCreator con base del realizar los J herramientas u hosted nit GWTTestCase test . . genera los mode test todo como de para que lo la www.i2e.com.es  Java Podremos Java navegador tanto de GWTTestCase basado E n los . GWT no ejecutar navegadores en . necesitaremos depurar 2 Al GWTTestCase, . 0 estar estaba se los HtmlUnit HtmlUnit los basado para test test ejecutar antes ejecutar desde en escrito requerìa para SWT de ejecutar el los enteramente y el la depurador código ejecutar tets versión navegador . los Por nativo test 2 de en . lo el 0 . www.i2e.com.es El framework WebGoogle Toolkit www.i2e.com.es  el navegador decada usuario. JavaScript más adecuado para convertirá al formato el código una vez GWT y lo Mozilla, Safari y Opera. Escribe navegadores IE, Firefox, automáticamente los aplicaciones GWT admiten cualquier servidor web. Las disponibles a través de independientes queestarán archivos JavaScript GWT compila el código Java en www.i2e.com.es www.i2e.com.es   cliente tamaño El podemos gwt Los compilador desarrolladores genera sea de obtener lo los mas mejor tambien archivos rapido desarrollandolo codigo de realiza gwt posible GWT javaScript creen una para manualmente optimizacion firmemente que que el envio el . que que del al www.i2e.com.es El framework WebGoogle Toolkit www.i2e.com.es    despliegue proceso Se como podemos Si Servlets se Las no puede pueden aplicaciones hemos Apache estándar desplegar de utilizar . desplegar utilizado . compilación, de . ant GWT en Java o en cualquier maven se para cualquier empaquetan empaquetamiento los para servidor servicios contenedor automatizar en web un remotos war http de el y y www.i2e.com.es   navegador generado envía navegador nocache conecta Cuando compilador navegador optimizado GWT el genera . js a un . código soportado . del GWT navegador detecta para para cliente un el JavaScript archivo archivo por cada y ese se le el el www.i2e.com.es El framework WebGoogle Toolkit www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es www.i2e.com.es      Toolkit http://groups.google.com/group/Google ES/events/io/sessions.html#gwt http://code.google.com/intl/es http://gwtgallery.appspot.com/ ES/webtoolkit/doc/1.6/DevGuide.html http://code.google.com/intl/es http://code.google.com/intl/es - - - ES/webtoolkit/ - Web - www.i2e.com.es www.i2e.com.es     http://www.i2e.com.es [email protected] [email protected] T witter: i2e_es