47
Ext JS Introducción Mayer Horna García copyright © 2010 [email protected] [email protected] http://www.linkedin.com/in/mayerhorn a http://mayerhorna.blogspot.com @mayerhorna
| Date post: | 01-Jun-2015 |
| Category: |
Documents |
| Upload: | mayer-horna |
| View: | 7,409 times |
| Download: | 4 times |
Ext JSIntroducción
Mayer Horna García
copyright © 2010
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?
BD
BD
Comportamiento de una aplicación de escritorio
SELECT * FROM Provincia
WHERE departamento_id = 2
provincia
ServidorCliente
departamentoId=2request
MantenimientoCalles_jsp.html
<<build>>
MantenimientoCalles.jsp
response
Comportamiento de una aplicación de web
departamentoId=2
distrito SELECT * FROM Distrito
WHERE provincia_id = 12 SELECT * FROM Calle
WHERE distrito_id = 23
provinciaId=12distritoId=23
calle
SELECT * FROM Provincia
WHERE departamento_id = 2
distritoId=23request
MantenimientoCalles_jsp.html
<<build>>
MantenimientoCalles.jsp
SELECT * FROM CalleWHERE distrito_id = 23
response
SELECT * FROM Provincia
WHERE departamento_id = 2
i1.1
BD
Comportamiento de una aplicación Web + AJAX
ServidorCliente
request
response
SELECT * FROM Provincia WHERE departamento_id = 2
<?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
MotorAJAX
Objeto XMLHttpRequest
departamentoId=2new XMLHttpRequest()request
response
SELECT * FROM CalleWHERE distrito_id = 23
distritoId=23new XMLHttpRequest()
i1.2
i2
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”);
}
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”);
}
}
public class Principal{
public static void main(String…a){
System.out.println(“Hola mundo”);
}
}
JVM
Principal.java
JAVASCRIPT
JAVA
Problema:Cada proveedor, lo interpreta a su
manera
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
Extensible Markup Language (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” ?>
<!-- Este es el DTD de Edit_Mensaje --><!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 iniciada1 = Cargando2 = Cargado3 = Interactivo4 = 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 undefinedoCliente.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 privadathis.nombres = null; // propiedad públicathis.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 : valorcolor : “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.ToolbarExt.Button
Ext.grid.GridPanel
Ext.Window
Ext.grid.ColumnModel
Ext.PagingToolbar
Componentes GUI•Desktop
Componentes GUI
Componentes GUI
Componentes GUI
Componentes GUI
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/
