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. Esteban Ramírez.

Presentaciones similares


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

1 Introducción a las aplicaciones WEB y GWT Google Web Toolkit Prof. Ing. Esteban Ramírez

2 ContenidoDIATEMA1 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 Introduccion a GWT, Caracteristicas. Componentes de GWT, Primeros pasos. Html, JavaScript, Ajax y CSS.

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 Usuario Browser Servidor DNS ¿IP de Servidor Web Conexión TCP al puerto 80 del host Solicitar recurso cursoWeb.pdf Solicitud en formato HTTP 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 Hola Mundo 2011

14 Composición de las interfaces Web JavaScript function mostrarMensaje() { alert(Usted ha hecho click); } Las funciones JavaScript pueden estar en archivos separados

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 { font-family: Georgia, Times, "Times New Roman", serif; color: #030; } Puede estar dentro de la misma página o en archivos externos

16 HTML – Hypertext Markup Language Estructura de un documento HTML My first HTML document My first HTML document Hello, World Wide Web! Un link

17 HTML – Hypertext Markup Language Hipertexto ó Enlaces … Link a otro sitio … Link relativo al mismo sitio …

18 HTML – Hypertext Markup Language Formularios Cedula: Nombre: Contraseña: Sexo: Masculino Femenino Nacionalidad: Paraguaya Brasilera Argentina

19 HTML – Hypertext Markup Language Formularios visualización

20 HTML – Hypertext Markup Language Tablas Cédula Nombre Juan Pérez María González Datos en forma tabular. Disposición de elementos en una página.

21 CSS – Cascading Style Sheets Inline styles … Título en azul y cursiva … Párrafo en negrita y arial …

22 CSS – Cascading Style Sheets Document level styles Página de párrafos en azul p {color: blue; font-style: italic} Un párrafo en azul... Otro párrafo en azul …

23 CSS – Cascading Style Sheets External Style Sheets En el archivo estilos.css: p {color: blue; font-style: italic} En el archivo pagina.html: Página de párrafos en azul Un párrafo en azul... Otro párrafo en azul …

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; } Texto 1 Texto 2 Texto 3

25 DHTML, JavaScript y CSS Definición de estilos con JavaScript tags.H1.color = "red" tags.H1.textTransform = "capitalize" tags.P.color = "blue" Some heading Some paragraph text.

26 J2EE Java Platform, Enterprise Edition o Java EE

27 Servlets - Funcionamiento 1 Usuario Servidor de aplicaciones

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

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

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

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

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) Apache Tomcat C:\apache-tomcat Registrar Tomcat en Eclipse Windows -> Preferences -> Server -> Runtime Environments

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

36 Servlets – Properties ->Java Build Path

37 Servlets - Ejemplo

38 Servlets – Test.java

39

40 Servlets – Web.xml

41 Servlets – Run

42 Servlets - Ejemplo

43 Servlets - Ejemplo

44 Servlets - Ejemplo

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

46 Frameworks

47 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

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 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 Model clásico Vs Ajax Fuente: adaptivepath.com Servidor Web

55 Model clásico Vs Ajax Fuente: adaptivepath.com Se obtiene un mayor rendimiento y una mejor escalabilidad que con las aplicaciones web tradicionales.

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 JAVA to JS COMPILER JSNI JREEMULATION GWT API

62 Arquitectura de GWT Compilador Java To JavaScript Convierte código Java a código JavaScript. T iene 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 widget Un widget es un componente de control utilizado por el usuario (Botones, TextBox, Labels, etc.) panel Un panel es un contenedor en el que pueden ser colocados los widgets. similares a Swing o SWT 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

68

69

70 Ejemplo: Google Wave

71 GWT API Remote Procedure Call (RPC) Remote Procedure Call 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 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 Junit 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 Copiar la carpeta /eclipse del directorio: C:\gwt\GwtEclipsePlugin A la carpeta: C:\eclipse\dropins Iniciar Eclipse. Instalación del Plugin para 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 Nuevo Proyecto GWT Nombre: TestGWT Paquete base: com.test Google Web Toolkit Google Web Toolkit C:\gwt\gwt App Engine App Engine C:\gwt\appengine-java-sdk Run -> Run As -> Web Aplication

78 Ejemplo Send

79 Ejemplo Send Servidor Web

80 Ejemplo Servidor Web

81 Ejemplo Servidor Web

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

83 Bibliografía sugerida


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

Presentaciones similares


Anuncios Google