01 Ext Js Introduccion

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

Objetivos Entender el comportamiento de una aplicación AJAX y la importancia del objeto XMLHTTPRequest. Aprender sobre JSON. Aprender como aplicar POO con Javascript Hacer una introducción a Ext JS.

Temas Comparativa entre aplicaciones de escritorio, web y web + ajax Conceptos básicos Javascript XML JSON CSS DOM Anatomía de una aplicación AJAX El objeto XMLHTTPRequest Conversación con el servidor Trabajar con datos devueltos como XML Trabajar con datos devueltos como JSON Frameworks AJAX ¿Qué es Ext JS?

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

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=\"1.0\" ?> <provincias> <provincia> Huara </provincia> <provincia> Trujillo </provincia> <provincia> Chimbote </provincia> </provincias> provincias.xml <?xml version=\"1.0\" ?> <provincias> <provincia> Huara </provincia> <provincia> Trujillo </provincia> <provincia> Chimbote </provincia> </provincias> distrito.xml

AJAX “Asynchronous Javascript y XML” (JavaScript asíncrono y XML) Es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Implica el uso coordinado de distintas tecnologías que en conjunto permiten una mayor rapidez y eficacia para las aplicaciones basadas en la web. Estas aplicaciones se ejecutan en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la velocidad y usabilidad en las aplicaciones.

Javascript Fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, más tarde renombrado a LiveScript, y finalmente a JavaScript. El cambio de nombre de LiveScript a JavaScript coincidió aproximadamente con el momento en que Netscape agregó soporte para la tecnología Java en su navegador web Netscape Navigator. JavaScript fue presentado y desarrollado en diciembre de 1995. La denominación ha causado confusión, dando la impresión de que el lenguaje es un prolongación de Java, y se ha caracterizado por muchos como una estrategia de marketing de Netscape. JavaScript es un lenguaje de programación interpretado(scripting), es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java. No es un lenguaje de Programación Orientada a Objetos propiamente dicho como Java , pero gracias a que es basado en prototipos, se puede aplicar conceptos de programación orientada a objetos ,

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

XML E x tensible M arkup L anguage (lenguaje de marcas ampliable), XML no ha nacido sólo para su aplicación en Internet, sino que se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas.

Estructura de un documento XML La tecnología XML busca dar solución al problema de expresar información estructurada de la manera más abstracta y reutilizable. <?xml version="1.0“ encoding=“UTF-8” ?> <!DOCTYPE movimientos SYSTEM “movimientos.dtd" [<!ELEMENT movimientos ( movimiento )*>]> <movimientos> <movimiento> <fecha> 06/09/2008 </fecha> <descripcion> Retiro por cajero </descripcion> <monto> -100.00 </monto> </movimiento> <movimiento> <fecha> 05/09/2008 </fecha> <descripcion> Transferencia de otra cuenta </descripcion> <monto> 320.00 </monto> </movimiento> </movimientos> Y el DTD(Document Type Definition) para este XML sería: <?xml version="1.0" enconding=“UTF-8” ?>  <!ELEMENT movimiento (fecha, descripcion, monto)*> <!ELEMENT fecha (#PCDATA)> <!ELEMENT descripcion (#PCDATA)> <!ELEMENT monto (#PCDATA)> movimientos.xml movimientos.dtd

CSS (Cascading Style Sheets) Es un mecanismo simple para añadir estilos(fonts, colors, spacing) a los documentos Web. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. <style type= "text/css" > h1 em {color: gray;} ul ol ul em {color:gray;} td.sidebar {background-color:#000066;} td.sidebar a:link {color:#FFFFFF;} .advertencia {font-weight:bold;} p.advertencia {font-style:italic;} #miEstiloID { background:#000000;} </style>

DOM El DOM es una plataforma neutral, y el lenguaje que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de los documentos. El documento puede ser procesado y los resultados de la transformación se pueden incorporar de nuevo en la misma página. La siguiente imagen muestra una parte del nodo del árbol y la relación entre los nodos:

Conversación tradicional Cliente - Servidor

Interacción AJAX Cliente - Servidor

Flujo del proceso de una aplicación AJAX

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

El objeto XMLHTTPRequest Su objetivo es hacer peticiones asíncronas al servidor. Es la columna vertebral de todas las aplicaciones AJAX. Es admitido por todos los navegadores. Microsoft lo introdujo en IE 5 como un objeto ActiveX

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)

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.

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 + " " + 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.

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

Herencia en JavaScript var oEmpleado = new Empleado(); oEmpleado.nombres = "43035678"; oEmpleado.apellidos = "Luis"; oEmpleado.salario = 3000; alert("Metodo del padre " + oEmpleado.obtenerNombreCompleto() ); alert("Metodo del hijo " + oEmpleado.obtenerSalario() ); /** Clase Persona **/ function Persona(){ this .nombres = null; this .apellidos = null; this .obtenerNombreCompleto = function (){ return this .nombres + " " + 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 */

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

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

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

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

Librerías AJAX Existen cientos de frameworks en el mercado, de acuerdo con una encuesta del 2008, estos son los más usados: Dojo toolkit , Toolkit Modular JavaScript. Ext JS , una librería que extiende Prototype, Jquery y YUI. jQuery , provee un framework Ajax y muchas otras utilidades. Mootools , un framework compacto y modular mejor conocido por sus transiciones y efectos. Prototype , provee framework Ajax y muchas otras utilidades. qooxdoo , framework de aplicaciones Ajax. Es multiproposito e incluye un toolkit GUI. Script.aculo.us , es utilizado con Prototype principalmente para animaciones y desarrollo de interfaces. Yahoo! UI Library , un conjunto de utilidades y controles para construir aplicaciones web enriquecidas usando técnicas como DOM scripting y AJAX.

Ext JS ExtJS, es una librería JavaScript para el desarrollo de aplicaciones RIA utilizando AJAX, DHTML, CSS y DOM. Extiende de Prototype, JQuery y YUI. Cuenta con: un API fácil de usar, un modelo de componentes extensibles, licencias open source y comerciales.

Ext JS como solución RIA “ Jack Slocum” comienza a desarrollar Ext JS en el 2006 como una extensión para YUI Posteriormente se agrega soporte para librerías como jQuery, Prototype + Scriptaculous En el 2007 la librería funciona en modo “Stand alone” (versión 1.1)

En diciembre del 2007 aparece la versión 2.0 del framework, una re-ingeniería total En agosto de 2008 aparece la versión 2.2 del framework, se agregan nuevos componentes En febrero del 2009 se realiza la primera conferencia y se presenta Ext Core En junio del 2009 se libera Ext 3.0 con soporte REST, Remoting y varios componentes mas Ext JS como solución RIA

http://www.extjs.com/products/extjs/roadmap.php Ext JS – Lo que se viene

Ext JS dividido en 6 áreas de estudio

Licencias Open Source License. Este tipo de licencia aplica cuando vas a desarrollar un proyecto open source, lo que significa liberar tu proyecto con licencia GNU GPL. Comercial License. Esta licencia debes comprar cuando necesites desarrollar software propietario. El precio varía de acuerdo al numero de desarrolladores: 1 desarrollador es de $329 5 desarrolladores $1299 25 desarrolladores $5749 +100 desarrolladores $16449 Reseller License. Este tipo de licencia es necesaria adquirirla cuando deseas realizar un framework o librería basada sobre Ext JS. Para saber el costo es necesario ponerse en contacto con el equipo de Ext JS

Ext JS http://www.extjs.com/products/extjs/download.php En la carpeta examples se encuentran todos los ejemplos de como crear formularios, paneles, grillas, etc. Donde encuentro Ext JS y su API ?

Componentes GUI FormPanel Ext.form.TextField Ext.form.Label Ext.Button Ext.form.ComboBox Ext.form.HtmlEditor Ext.form.FormPanel

Componentes GUI GridPanel Ext.Toolbar Ext.Button Ext.grid.GridPanel Ext.Window Ext.grid.ColumnModel Ext.PagingToolbar

Ext JS en acción Reserva de pasajes http://ilaboratorios.com/motors/

Ext JS en acción Modelador de base de datos http://draw.schemabank.com/demo.html

Ext JS en acción ERP y CRM https://www.3etrade.com

Ext JS en acción Qwikioffice (Desktop) http://www.qwikioffice.com/desktop-demo/

Ext JS en acción Uso de Google Map http://www.dreamhomesmap.com/

Links de ayuda Web oficial de ExtJS http://www.extjs.com/ Api de ExtJS http://extjs.com/deploy/dev/docs/ Foro oficial de ExtJS http://extjs.com/forum/ Foro oficial de Ext JS en español http://extjses.com Tutoriales en español de Ext JS y JavaScript http://quizzpot.com Tutoriales de JavaScript, HTML, CSS, etc http://www.w3school.com Videos tutoriales de JavaScript, CSS, HTML, y más http://www.illasaron.com/html/

01 Ext Js Introduccion

Más contenido relacionado

Similar a 01 Ext Js Introduccion (20)

01 Ext Js Introduccion