Introducción a las aplicaciones WEB y GWT Google Web Toolkit Prof. Ing Introducción a las aplicaciones WEB y GWT Google Web Toolkit Prof. Ing. Esteban Ramírez
Contenido DIA TEMA 1 Introducción a las aplicaciones Web y GWT. 2 Instalación de GWT Designer, organización del proyecto. 3 Interface de usuario, eventos, estilos. 4 Comunicación con el servidor, procedimientos remotos. 5 Compilación y depuración, modos de ejecución. 6 Framework de loggin, handlers, loggin en cliente y servidor. 7 Internacionalización, fichero de propiedades, anotaciones. 8 Pruebas con JUnit, pruebas asíncronas, htmlUnit. 9 Web services, clases serializables. 10 Persistencia, Hibernate, JPQL. 11 Prueba de conocimientos adquiridos GWT.
Contenido Introducción a las aplicaciones Web Arquitectura de las aplicaciones Web Html, JavaScript, Ajax y CSS. Introduccion a GWT, Caracteristicas. Componentes de GWT, Primeros pasos.
Aplicaciones web Aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador.
Ejemplos de Aplicaciones web
Arquitectura de una aplicación Web Servidor DNS Servidor Web ¿IP de www.pol.una.py? http://www.pol.una.py/cursoWeb.pdf 170.51.6.71 Browser Conexión TCP al puerto 80 del host 170.51.6.71 Solicitar recurso cursoWeb.pdf Solicitud en formato HTTP Usuario Servidor envía respuesta sobre Conexión TCP Cerrar Conexión TCP
Arquitectura de una aplicación Web Browser (Firefox, IE, Chrome) Red (Intranet - Internet) Protocolo HTTP (HyperText Transfer Protocol) Servidor Web (Apache, IIS, Tomcat) Servidores de bases de datos (Oracle, MySql) Servicios Web externos (Cotizaciones, Clima)
Evolucion de las tecnologias para aplicaciones web
Tipos de contenido Páginas estáticas: Archivos físicos almacenados en disco Páginas dinámicas: Contenido generado por programas ejecutados en el servidor
Lenguajes Web en servidor PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”. ASP .NET Desarrollado para resolver las limitantes de su antecesor ASP. Para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Completamente orientado a objetos. Ambiente Microsoft. PERL Es la alternativa más popular a PHP, es el acronimo de "Practical Extraction and Report Language" uno de los lenguajes más antiguos para este segmento. Gran cantidad de módulos ya escritos. Deriva ampliamente del lenguaje C. PYTHON Creado en el año 1990, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Programación estructurada y orientada a bojetos. Multiplataforma. Opensource. RUBY Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.
Lenguajes Web en servidor PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”. ASP .NET Desarrollado para resolver las limitantes de su antecesor ASP. Para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Completamente orientado a objetos. Ambiente Microsoft. PERL Es la alternativa más popular a PHP, es el acronimo de "Practical Extraction and Report Language" uno de los lenguajes más antiguos para este segmento. Gran cantidad de módulos ya escritos. Deriva ampliamente del lenguaje C. PYTHON Creado en el año 1990, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Programación estructurada y orientada a bojetos. Multiplataforma. Opensource. RUBY Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.
Lenguaje en el cliente HTML - HyperText Markup Language JavaScript CSS (Cascading Style Sheets) Flash Others resources
Composición de las interfaces Web Ejemplo.html <html> <body> <p> Hola Mundo <b> 2011</b> </p> <form name=“formulario”> <input type=“button” value=“Click aquí”> </form> </body> </html>
Composición de las interfaces Web JavaScript <html> <script> function mostrarMensaje() { alert(“Usted ha hecho click”); } </script> <body> <form name=“formulario”> <input type=“button” value=“Click aquí” onclick=“mostrarMensaje()”> </form> <img src=“imagenes/dibujo1.gif”> </body> </html> Las funciones JavaScript pueden estar en archivos separados
Composición de las interfaces Web CSS (Cascading Style Sheets) body { font-family: Georgia, Times, "Times New Roman", serif; color: #030; } h1, h2, h3 { Puede estar dentro de la misma página o en archivos externos
HTML – Hypertext Markup Language Estructura de un documento HTML <html> <head> <title>My first HTML document</title> </head> <body> <h2>My first HTML document</h2> Hello, <i>World Wide Web!</i> <a hfref=“http://www.pol.una.py”>Un link</a> </body> </html>
HTML – Hypertext Markup Language Hipertexto ó Enlaces … <a href="http://www.oreilly.com">Link a otro sitio</a> <a href=“otraPagina.html”>Link relativo al mismo sitio</a>
HTML – Hypertext Markup Language Formularios <form method=“post” action=“guardarPersona.php”> Cedula: <input type=“text” name=“cedula”> Nombre: <input type=“text” name=“nombre”> Contraseña: <input type=“password” name=“passwd”> Sexo: <input type=“radio” name=“sexo” value=“M”> Masculino <input type=“radio” name=“sexo” value=“F”> Femenino Nacionalidad: <select name=“nacionalidad”> <option value=“py”>Paraguaya</option> <option value=“br”>Brasilera</option> <option value=“ar”>Argentina</option> </select> <input type=“submit” value=“Guardar”> </form>
HTML – Hypertext Markup Language Formularios visualización
HTML – Hypertext Markup Language Tablas <table> <tr> <th>Cédula</th><th>Nombre</th> </tr> <td>123456</td><td>Juan Pérez</td> <td>987432</td><td>María González</td> </table> Datos en forma tabular. Disposición de elementos en una página.
CSS – Cascading Style Sheets Inline styles <html><body> … <h1 style="color: blue; font-style: italic"> Título en azul y cursiva </h1> <p style=“font-family: arial; font-style: bold"> Párrafo en negrita y arial </p> </body></html>
CSS – Cascading Style Sheets Document level styles <html> <head> <title>Página de párrafos en azul</title> <style type="text/css"> p {color: blue; font-style: italic} </style> </head> <body> <p>Un párrafo en azul</p> ... <p>Otro párrafo en azul</p> … </body> </html>
CSS – Cascading Style Sheets External Style Sheets En el archivo estilos.css: p {color: blue; font-style: italic} En el archivo pagina.html: <head> <title>Página de párrafos en azul</title> <link rel=stylesheet type="text/css“ href=“estilos.css"> </head> <body> <p>Un párrafo en azul</p> ... <p> Otro párrafo en azul</p> …
CSS – Cascading Style Sheets Anidamiento #top { background-color: #ccc; padding: 1em ; color: #cccccc; } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } <div id=“top”> <h1>Texto 1</h1> <p>Texto 2</p> <p style=“color:green”>Texto 3</p> </div>
Definición de estilos con JavaScript DHTML, JavaScript y CSS Definición de estilos con JavaScript <HTML> <HEAD> <STYLE TYPE="text/javascript"> tags.H1.color = "red" tags.H1.textTransform = "capitalize" tags.P.color = "blue" </STYLE> </HEAD> <BODY> <H1>Some heading</H1> <P>Some paragraph text.</P> </BODY> </HTML>
Java Platform, Enterprise Edition J2EE Java Platform, Enterprise Edition o Java EE http://es.wikipedia.org/wiki/Java_EE
Servlets - Funcionamiento Usuario 1 Servidor de aplicaciones
javax.servlet.http.HttpServlet Servlets - Funcionamiento javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones
javax.servlet.http.HttpServlet Servlets - Funcionamiento javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 pagina.html
javax.servlet.http.HttpServlet Servlets - Funcionamiento javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 4 pagina.html
javax.servlet.http.HttpServlet Servlets - Funcionamiento javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 5 4 pagina.html
Servlets Conteiner (Servidores de aplicaciones J2EE) Apache Tomcat GlassFish
Servlets Conteiner (Servidores de aplicaciones J2EE) Apache Tomcat GlassFish
Servlets Conteiner (Servidores de aplicaciones J2EE) C:\apache-tomcat-7.0.5 Apache Tomcat Registrar Tomcat en Eclipse Windows -> Preferences -> Server -> Runtime Environments
Servlets - Ejemplo Nuevo Proyecto Web New -> Name: Test Project -> Web -> DynamicWebProject Name: Test Generate web.xml
Servlets – Properties ->Java Build Path
Servlets - Ejemplo
Servlets – Test.java
Servlets – Test.java
Servlets – Web.xml
Servlets – Run
Servlets - Ejemplo http://localhost:8080/Test
Servlets - Ejemplo http://localhost:8080/Test?nombre=CursoJava
Servlets - Ejemplo http://miservidor:8080/Test?nombre=CursoJava
Estructura de una App Web (Web Application Archive) .war
Frameworks
Frameworks En el desarrollo de software, un framework es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o módulos de software concretos, con base en la cual otro proyecto de software puede ser organizado y desarrollado.
Frameworks web java
Frameworks web java
Introducción a GWT Google Web Toolkit (GWT) es un framework de código abierto desarrollado por Google y lanzado en mayo del 2006 bajo la licencia Apache 2.0. para crear aplicaciones Web.
Introducción a GWT GWT permite crear aplicaciones AJAX utilizando el lenguaje de programación Java que son compiladas posteriormente por el compilador de GWT en código JavaScript optimizado para los principales navegadores. Es un compilador Es un linker Es un optimizador Es un SDK
Un manifiesto es una declaración pública de principios e intenciones. GWT. Manifiesto Google Mejorar la experiencia de los usuarios con la web permitiendo a los desarrolladores utilizar herramientas y tecnología Java para construir aplicaciones AJAX de manera sencilla e independientes del navegador utilizado. Un manifiesto es una declaración pública de principios e intenciones.
Asynchronous JavaScript And XML
Fuente: adaptivepath.com Model clásico Vs Ajax Servidor Web Servidor Web Fuente: adaptivepath.com
Fuente: adaptivepath.com Model clásico Vs Ajax Se obtiene un mayor rendimiento y una mejor escalabilidad que con las aplicaciones web tradicionales. Fuente: adaptivepath.com
Modo de trabajo de GWT Fuente: Google 2007
Modo de trabajo de GWT
Ventajas de GWT (I) No se necesita mucho conocimiento de otros lenguajes (JavaScript) Se utiliza el lenguaje de programación Java. Los errores comunes JavaScripts (typos, type mismatches) son capturados por el programador durante compilación en vez de por los usuarios durante la ejecución. Multiplataforma y multinavegador. No se necesita trabajar con las incompatibilidades de los navegadores.
Ventajas de GWT (II) No se necesita mucho conocimiento del DOM API. Se utiliza Java API. Compatible con varias herramientas para desarrollar/depurar/probar las aplicaciones. Integración con JUnit. Internacionalización. Depuración en tiempo real Reduce el ancho de banda utilizado una vez cargada la aplicación Reduce la carga del servidor Mantenido y mejorado por Google Inc.
Desventajas de GWT No es un enfoque estándar de HTML y JavaScript La generación automática de HTML podría hacer más difícil el uso de herramientas estándar de HTML y CSS. No se utiliza directamente código JavaScript en el HTML. Sólo para desarrolladores Java. Muchos entornos Ajax permiten utilizar JavaScript en el cliente y luego elegir el lenguaje en el servidor. GWT se encuentra basado enteramente en Java. Enfoque Inusual. Lo cual hace que la evaluación y administración se más difícil.
Arquitectura de GWT JSNI JAVA to JS COMPILER JRE EMULATION GWT API
Arquitectura de GWT Compilador Java To JavaScript Convierte código Java a código JavaScript. Tiene tres modos en los que puede operar, los cuales determinan cómo se verá: Obfuscate: por defecto. Genera código inentendible y altamente optimizado. Pretty: genera código JavaScript entendible. Detailed: produce código al igual que el modo pretty pero agregando el nombre completo de la clase como parte del nombre de las funciones. El código JavaScript es generado en archivos para cada tipo de navegador e idioma. Al iniciar el navegador el mismo ejecuta código que permite obtener la versión correcta del archivo para la aplicación.
Arquitectura de GWT Java Script Native Interface (JSNI) A pesar de que se programe en Java en vez de JavaScript, en ocasiones se necesitará programar directamente en JavaScript, por ejemplo, para hacer referencia a partes del API del navegador que no esté soportado por GWT o para utilizar alguna librería JavaScript no muy común. JSNI permite ejecutar JavaScript desde Java, como también Java desde JavaScript. Esto hace posible al compilador GWT que pueda mezclar código JavaScript nativo con el código que genera.
Arquitectura de GWT JRE Emulation Library Esta librería da a GWT la habilidad de utilizar clases JRE en los proyectos y ser compilados luego a JavaScript. Las clases pertenecen a un subconjunto de los paquetes java.lang y java.util, que incluyen clases para el manejo de números y fechas, operaciones matemáticas, excepciones, listas y colecciones, etc.
GWT API Widgets y Paneles Un widget es un componente de control utilizado por el usuario (Botones, TextBox, Labels, etc.) Un panel es un contenedor en el que pueden ser colocados los widgets. Las clases GWT para la interfaz de usuario son similares a Swing o SWT. A pesar de que existen más de 30 widgets y paneles, posiblemente no cubran todas las necesidades, por lo que se permite utilizar widgets y paneles de proyectos de código abierto, los que proveen calendarios, tablas ordenables, calculadoras, paneles para dibujo, etc.
GWT API
GWT API
GWT API
GWT API
GWT API Ejemplo: Google Wave
GWT API Remote Procedure Call (RPC) El mecanismo para interactuar con el servidor, de manera a hacer actualizaciones en la interfaz de usuario, es llamado Remote Procedure Call (RPC), también conocido como llamada al servidor (server call).
GWT API Historial del Navegador GWT provee un mecanismo para administrar el historial del navegador que funciona con aplicaciones del tipo Ajax. Para acceder al mismo, es necesario escribir un manejador de eventos que implemente la interfaz HistoryListener y luego éste debe ser registrado en el objeto History: History.addHistoryListener(new MyHistoryListener()); History.newItem("overview"); History.newItem("reports");
GWT API Modos de ejecución Testeo Development Mode (Modo host): Modo de depuración donde se puede interactuar y probar al aplicación GWT sin ser traducida a javascript. Al correr en este modo la JVM esta ejecutando el código de la aplicación como un archivo ByteCode compilado. Production Mode (Modo web): Modo en que la aplicación es traducida a javascript, y ejecutada solamente por el explorador, sin uso de la JVM. Testeo GWT incluye la clase base GWTTestCase que hereda de la clase base TestCase de Junit y de esta forma permite la integración con el mismo.
Plataforma de desarrollo Eclipse Plugin de GWT para eclipse GWT Development Kit Browser (Firefox, IE, Chrome) Plugin para browser específico
Plataforma de desarrollo Instalación del Plugin para eclipse Copiar la carpeta /eclipse del directorio: C:\gwt\GwtEclipsePlugin A la carpeta: C:\eclipse\dropins Iniciar Eclipse.
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 Google Web Toolkit App Engine 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
Ejemplo Send
Ejemplo Send Servidor Web
Ejemplo Servidor Web
Ejemplo Servidor Web
Ejercicio Traducir el ejemplo anterior. Clases y archivos a modificar: com.test.client.TestGwt com.test.server.GreetingServiceImpl /war/TestGwt.html Servidor Web
Bibliografía sugerida http://gwt.google.com/samples/Showcase/Showcase.html http://code.google.com/webtoolkit/doc/latest/DevGuide.html http://code.google.com/webtoolkit/overview.html