VIII COREIS

1. Aplicaciones AJAX Presentado por : Mayer Horna García Jonathan Lara Vasquez 15 de Octubre, 2008 [email_address] COREIS - Huancayo [email_address]

3. Comportamiento de una aplicación de escritorio BD BD SELECT * FROM Provincia WHERE departamento_id = 2 Servidor Cliente departamentoId=2 request MantenimientoCalles_jsp.html <<build>> MantenimientoCalles.jsp response Comportamiento de una aplicación de web departamentoId=2 SELECT * FROM Distrito WHERE provincia_id = 12 SELECT * FROM Calle WHERE distrito_id = 23 provinciaId=12 distritoId=23 SELECT * FROM Provincia WHERE departamento_id = 2 distritoId=23 request MantenimientoCalles_jsp.html <<build>> MantenimientoCalles.jsp SELECT * FROM Calle WHERE distrito_id = 23 response SELECT * FROM Provincia WHERE departamento_id = 2 i1.1 provincia distrito calle

4. Comportamiento de una aplicación Web + AJAX BD Servidor Cliente request response SELECT * FROM Provincia WHERE departamento_id = 2 Motor AJAX Objeto XMLHttpRequest departamentoId=2 new XMLHttpRequest() request response SELECT * FROM Calle WHERE distrito_id = 23 distritoId=23 new XMLHttpRequest() i1.2 i2 <?xml version=amp;quot;1.0amp;quot; ?> <provincias> <provincia> Huara </provincia> <provincia> Trujillo </provincia> <provincia> Chimbote </provincia> </provincias> provincias.xml <?xml version=amp;quot;1.0amp;quot; ?> <provincias> <provincia> Huara </provincia> <provincia> Trujillo </provincia> <provincia> Chimbote </provincia> </provincias> distrito.xml

9. Conversación tradicional Cliente - Servidor

10. Interacción AJAX Cliente - Servidor

11. Flujo del proceso de una aplicación AJAX

12. Respuestas del servidor (HTTP Response) Código de Status Razón Explicación 200 OK Petición correcta 204 No Content Documento sin datos 301 Moved Permanently Recurso Movido 401 Not Authorized Necesita autentificación 403 Forbidden Rechazada por servidor 404 Not Found No existe en servidor 408 Request Timeout Tiempo sobrepasado 500 Server Error Error en el servidor

14. Propiedades del objeto XMLHTTPRequest Propiedades Descripción Onreadystatechange Determina que función será llamada cuando la propiedad readyState del objeto cambie. readyState Número entero que indica el status de la petición: 0 = No iniciada 1 = Cargando 2 = Cargado 3 = Interactivo 4 = Completado responseText Datos devueltos por el servidor en forma de string de texto responseXML Datos devueltos por el servidor expresados como un objeto documento. status Código estatus HTTP devuelto poro el servidor: 200 = OK (Petición correcta) 204 = No Content (Documento sin datos) 301 = Moved Permanently (Recurso Movido) 401 = Not Authorized (Necesita autenticación) 403 = Forbidden (Rechazada por servidor) 404 = Not Found (No existe en servidor) 408 = Request Timeout (Tiempo sobrepasado) 500 = Server Error (Error en el servidor)

15. Métodos del objeto XMLHTTPRequest Propiedades Descripción abort() Detiene la petición actual. getAllResponseHeaders() Devuelve todas las cabeceras como un string. getResponseHeader(x) Devuelve el valor de la cabecera x como un string. open(‘method’, ’URL’, ’a’ ) Especifica el método HTTP (por ejemplo, GET o POST), la URL objetivo, y si la petición debe ser manejada asíncronamente (Si, a=‘True’ defecto; No, a=‘false’.) send(content) Envía la petición setRequestHeader( ‘label’ , ’value’ ) Configura un par parámetro y valor label=value y lo asigna a la cabecera para ser enviado con la petición.

16. Clases y Objetos en JavaScript var oCliente = new Cliente(); oCliente.dni = “43035678”; oCliente.nombres = “Luis”; oCliente.apellidos = “Perez A.”; alert(“Hola ” + oCliente. obtenerNombreCompleto() ); /** Clase Cliente **/ function Cliente(){ this.dni = null; this.nombres = null; this.apellidos = null; this.obtenerNombreCompleto = function(){ return this.nombres + &quot; &quot; + this.apellidos; } } 1 Javascript no es un lenguaje de Programación Orientada a Objetos propiamente dicho como Java , pero sí es un lenguaje de programación basado en objetos . En Javascript hay tres tipos de objetos: Objetos nativos de Javascript . Por ejemplo: Math, Date, Image, Number, String, Array… Objetos de navegador . Aquellos que proporciona el navegador del cliente. Por ejemplo: window, document, forms... Objetos definidos por el usuario : Son aquellos que define el propio programador.

17. Métodos y propiedades privadas var oCliente = new Cliente(); oCliente.nombres = “Luis”; oCliente.apellidos = “Perez A.”; alert(“DNI ” + oCliente.dni); // muestra undefined oCliente.setDni(“44035698”); alert(“DNI ” + oCliente.getDni() ); // muestra 44035698 //alert(oCliente.obtenerSoloNombre() ); // marcaría el siguiente error: “El objeto no acepta esta propiedad o metodo” /** Clase Cliente **/ function Cliente(){ var dni = null; // propiedad privada this.nombres = null; // propiedad pública this.apellidos = null; var that = this; // propiedad privada, almacena la referencia del objeto actual(this), para poder utilizarlo en métodos privados como sucede en obtenerSoloNombre(). function obtenerSoloNombre(){ // método privado return that.nombres; } this.obtenerNombreCompleto = function(){ // método público return this.nombres + &quot; &quot; + this.apellidos; } this.setDni(dni){ this.dni = dni; } this.getDni(){ return this.dni; } } 2 Para privatizar metodos y propiedades basta con ya no poner la palabra this . Para acceder a las propiedades privadas se deberá crear sus getters y setters como se estila hacer en otros lenguajes de programación OO

18. Herencia en JavaScript var oEmpleado = new Empleado(); oEmpleado.nombres = &quot;43035678&quot;; oEmpleado.apellidos = &quot;Luis&quot;; oEmpleado.salario = 3000; alert(&quot;Metodo del padre &quot; + oEmpleado.obtenerNombreCompleto() ); alert(&quot;Metodo del hijo &quot; + oEmpleado.obtenerSalario() ); /** Clase Persona **/ function Persona(){ this.nombres = null; this.apellidos = null; this.obtenerNombreCompleto = function(){ return this.nombres + &quot; &quot; + this.apellidos; } } 3 La herencia en JavaScript no es explicita, es emulada. /** Clase Cliente hereda de Persona **/ function Empleado(){ this.codigo = null; this.salario = null; this.obtenerSalario = function(){ return this.salario; } } Empleado.prototype = new Persona(); /* Clona la funcionalidad de Persona en Empleado */

19. JSON (JavaScript Object Notation) ¿Que es? Basado en sintaxis JavaScript Formato de datos muy ligero Especialmente basado en Arrays literales y Objetos literales Alternativa al formato XML

20. Objetos Literales Almacenan información en pares nombre : valor color : “rojo”, Se puede acceder a Estas propiedades Mediante el nombre del objeto y la sintaxis de punto. Mediante corchetes y nombre de la propiedad 4

21. Arrays Literales Formato de datos muy ligero [ y ] Y por encerrar lista de valores serparados por comas [ “string”, 24 , true, null ] 5

22. Mezclar Literales Es posible mezclar literales objeto y array Array que contiene objetos 6, 7.1 , 7.2 , 8 Objetos que contienen arrays

26. Interfaces hechas bajo Ext Formularios

27. Interfaces hechas bajo Ext Grillas

28. Interfaces hechas bajo Ext Uso de Layouts

29. Interfaces hechas bajo Ext Grillas con datos agrupados

30. Interfaces hechas bajo Ext Desktop

31. Interfaces hechas bajo Ext Manejo de imágenes

34. Gracias