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
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 Browser Conexión TCP al puerto 80 del host 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.

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>

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

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=“ link</a> </body> </html>

Hipertexto ó Enlaces … <a href=" a otro sitio</a> <a href=“otraPagina.html”>Link relativo al mismo sitio</a>

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>

Formularios visualización

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>

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>

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> …

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

Servlets - Funcionamiento
Usuario 1 Servidor de aplicaciones

javax.servlet.http.HttpServlet
Servlets - Funcionamiento javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones

Servlets - Funcionamiento javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 pagina.html

Servlets - Funcionamiento javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 4 pagina.html

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)
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 – Web.xml

Servlets – Run

Servlets - Ejemplo

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

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 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

Instalación del Plugin para eclipse Copiar la carpeta /eclipse del directorio: C:\gwt\GwtEclipsePlugin A la carpeta: C:\eclipse\dropins Iniciar Eclipse.

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

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

Introducción a las aplicaciones WEB y GWT Google Web Toolkit Prof. Ing

Presentaciones similares

Presentación del tema: "Introducción a las aplicaciones WEB y GWT Google Web Toolkit Prof. Ing"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Introducción a las aplicaciones WEB y GWT Google Web Toolkit Prof. Ing

Presentaciones similares

Presentación del tema: "Introducción a las aplicaciones WEB y GWT Google Web Toolkit Prof. Ing"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback