La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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:

1 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

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

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

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

5 Ejemplos de Aplicaciones web

6 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

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

8 Evolucion de las tecnologias para aplicaciones web

9 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

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

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

12 Lenguaje en el cliente HTML - HyperText Markup Language JavaScript
CSS (Cascading Style Sheets) Flash Others resources

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

14 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

Las funciones JavaScript pueden estar en archivos separados.", "width": "800" }

15 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

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

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

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

19 HTML – Hypertext Markup Language
Formularios visualización

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

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

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

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

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

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

26 Java Platform, Enterprise Edition
J2EE Java Platform, Enterprise Edition  o Java EE

27 Servlets - Funcionamiento
Usuario 1 Servidor de aplicaciones

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

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

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

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

32 Servlets Conteiner (Servidores de aplicaciones J2EE)
Apache Tomcat GlassFish

33 Servlets Conteiner (Servidores de aplicaciones J2EE)
Apache Tomcat GlassFish

34 Servlets Conteiner (Servidores de aplicaciones J2EE)
C:\apache-tomcat-7.0.5 Apache Tomcat Registrar Tomcat en Eclipse Windows -> Preferences -> Server -> Runtime Environments

35 Servlets - Ejemplo Nuevo Proyecto Web New -> Name: Test
Project -> Web -> DynamicWebProject Name: Test Generate web.xml

36 Servlets – Properties ->Java Build Path

37 Servlets - Ejemplo

38 Servlets – Test.java

39 Servlets – Test.java

40 Servlets – Web.xml

41 Servlets – Run

42 Servlets - Ejemplo

43 Servlets - Ejemplo

44 Servlets - Ejemplo

45 Estructura de una App Web
(Web Application Archive) .war

46 Frameworks

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

48 Frameworks web java

49 Frameworks web java

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

51 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

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

53 Asynchronous JavaScript And XML

54 Fuente: adaptivepath.com
Model clásico Vs Ajax Servidor Web Servidor Web Fuente: adaptivepath.com

55 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

56 Modo de trabajo de GWT Fuente: Google 2007

57 Modo de trabajo de GWT

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

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

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

61 Arquitectura de GWT JSNI JAVA to JS COMPILER JRE EMULATION GWT API

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

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

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

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

66 GWT API

67 GWT API

68 GWT API

69 GWT API

70 GWT API Ejemplo: Google Wave

71 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).

72 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");

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

74 Plataforma de desarrollo
Eclipse Plugin de GWT para eclipse GWT Development Kit Browser (Firefox, IE, Chrome) Plugin para browser específico

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

76 Plataforma de desarrollo
Eclipse Plugin de GWT para eclipse GWT Development Kit Browser (Firefox, IE, Chrome) Plugin para browser específico

77 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

78 Ejemplo Send

79 Ejemplo Send Servidor Web

80 Ejemplo Servidor Web

81 Ejemplo Servidor Web

82 Ejercicio Traducir el ejemplo anterior. Clases y archivos a modificar:
com.test.client.TestGwt com.test.server.GreetingServiceImpl /war/TestGwt.html Servidor Web

83 Bibliografía sugerida


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

Presentaciones similares


Anuncios Google