Este documento presenta una introducción a Ext JS, incluyendo sus objetivos, temas clave como AJAX, JSON, DOM y programación orientada a objetos en JavaScript. Explica conceptos como el comportamiento de aplicaciones web tradicionales vs. con AJAX, y componentes clave como XMLHttpRequest y marcos AJAX.

1. Ext JS Introducción Mayer Horna García copyright © 2010 [email_address] [email_address] http://www.linkedin.com/in/mayerhorna http://mayerhorna.blogspot.com @mayerhorna

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

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

8. JavaScript El problema de toda la vida… function sendData(){ document.write(“Hola Mundo”); } myScript.js Código Fuente Intérprete public class Principal{ public static void main(String…a){ System.out.println(“Hola mundo”); } } JVM Principal.java J A V A S C R I P T J A V A Problema: Cada proveedor, lo interpreta a su manera Existe un solo proveedor(SUN), quien se encarga de hacer las JVM para cada sistema operativo (Window, Linux, etc.)

13. Conversación tradicional Cliente - Servidor

14. Interacción AJAX Cliente - Servidor

15. Flujo del proceso de una aplicación AJAX

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

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

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

20. Clases y Objetos en JavaScript var oCliente = new Cliente(); oCliente.dni = &quot;43035678&quot; ; oCliente.nombres = &quot;Luis&quot; ; oCliente.apellidos = &quot;Perez A.&quot; ; alert( &quot;Hola &quot; + 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.1 Javascript no es un lenguaje de Programación Orientado a Objetos propiamente dicho como Java , pero gracias a que es basado en prototipos, se puede aplicar conceptos de programación orientada a objetos, En Javascript hay tres tipos de objetos: Objetos nativos de Javascript . Por ejemplo: Math, Date, Image, Number, String, Array, Object… 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.

21. Métodos y propiedades privadas var oCliente = new Cliente(); oCliente.nombres = &quot;Luis&quot; ; oCliente.apellidos = &quot;Perez A.&quot; ; alert( &quot; DNI &quot; + oCliente.dni); // muestra undefined oCliente.setDni( &quot;44035698&quot; ); alert( &quot; DNI &quot; + 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.1 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 lenguajes de programación OO

22. 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.1 La herencia en JavaScript no es explicita(no hay una palabra reservada para hacerlo así). Pero logra este objetivo modificando el prototipo de la clase hija. /** 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 */

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

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

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

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

32. Ext JS dividido en 6 áreas de estudio

38. Componentes GUI

39. Componentes GUI

40. Componentes GUI

41. Componentes GUI