• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
01 Ext Js   Introduccion
 

01 Ext Js Introduccion

on

  • 9,534 views

Presentación de introducción a Ext JS

Presentación de introducción a Ext JS

Statistics

Views

Total Views
9,534
Views on SlideShare
9,457
Embed Views
77

Actions

Likes
0
Downloads
272
Comments
1

4 Embeds 77

http://www.slideshare.net 69
http://www.linkedin.com 6
http://health.medicbd.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    01 Ext Js   Introduccion 01 Ext Js Introduccion Presentation Transcript

    • 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=&quot;1.0&quot; ?> <provincias> <provincia> Huara </provincia> <provincia> Trujillo </provincia> <provincia> Chimbote </provincia> </provincias> provincias.xml <?xml version=&quot;1.0&quot; ?> <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=&quot;1.0“ encoding=“UTF-8” ?> <!DOCTYPE movimientos SYSTEM “movimientos.dtd&quot; [<!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=&quot;1.0&quot; 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= &quot;text/css&quot; > 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 = &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.
    • 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
    • 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 */
    • 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
    • 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/