Download - Introducción a Ext JS - SG09
![Page 1: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/1.jpg)
Crysfel Villa RománIngeniero de Software
Quizzpot
Ext JS: La herramienta que revolucionó el front-end
![Page 2: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/2.jpg)
2
Objetivo
La importancia de desarrollar aplicaciones RIA y la solución
propuesta por Ext JS
![Page 3: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/3.jpg)
3
Agenda
• Aplicaciones RIA• JavaScript en el front-end• Ext JS como herramienta RIA• Algunos Componentes del Framework• Ejemplos de aplicaciones con Ext JS• Donde encontrar Ayuda• Licencias y costos
![Page 4: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/4.jpg)
Aplicaciones RIA
• Rich Internet Applications.• Término introducido por compañías como
Macromedia en el 2002.• Aplicaciones que tienen el objetivo de mejorar la experiencia del usuario.
• Flash, Flex, JavaFX, JavaScript, Silverlight.
![Page 5: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/5.jpg)
Ejemplos
![Page 6: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/6.jpg)
El diseño importa
• La mayoría de las personas dan su confianza a sitios con un buen diseño.
• Normalmente juzgamos solo por las apariencias.
• ¡El diseño/apariencia importa!
![Page 7: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/7.jpg)
¿En donde comprarías?
![Page 8: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/8.jpg)
JavaScript
• JavaScript como solución para el desarrollo de aplicaciones RIA.
• Soporte Ajax• Modificación del DOM• Aporta dinamismo a un sitio
![Page 9: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/9.jpg)
Problemas al usar JS
• Incompatibilidad entre exploradores.• Mala implementación en algunos
navegadores.• Complicado para depurar (debug).• Malas prácticas en el desarrollo.• Muchos desarrolladores subestiman a
JavaScript por su mala fama en los 90’s.• Es un lenguaje complejo y “misterioso”
para muchos
![Page 10: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/10.jpg)
¡Librerías!
• jQuery• Prototype• Mootools• Ext Core• Yahoo UI
![Page 11: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/11.jpg)
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).
![Page 12: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/12.jpg)
Ext JS como solución RIA
• 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 más.
![Page 13: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/13.jpg)
Arquitectura de Ext JS
![Page 14: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/14.jpg)
Arquitectura de Ext JS
![Page 15: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/15.jpg)
Dividido en seis áreas
Ext Core
Componentes UI
Remoting
Data services
Drag & Drop
Utilerías
![Page 16: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/16.jpg)
Componentes populares
• El “venerable” GridPanel– Ordenar Asc/Desc– Seleccionar filas– Redimensionar Col.– Ocultar columnas– Paginar datos
![Page 17: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/17.jpg)
Componentes populares
• Grid editable– Editar celdas al vuelo– Utilizar diferentes
controles.– Validaciones
![Page 18: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/18.jpg)
Componentes populares
• Mensajes y alertas– Alertas con un buen
“look and field”– Personalizables– Intuitivas
![Page 19: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/19.jpg)
Componentes populares
• Formularios– Validaciones– Máscaras– Envío por Ajax– Combos con “autocomplete”
![Page 20: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/20.jpg)
Componentes populares
• TreePanel– Estructura de árbol– Drag and Drop– Colapsables con animación
![Page 21: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/21.jpg)
Componentes populares
• Charts– Linear– Columnas– De pastel– Barras– Series
![Page 22: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/22.jpg)
Componentes populares
• Tabs– Con “scroll” automático– Creados desde el DOM– Creados con JS– Contenedor
![Page 23: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/23.jpg)
Componentes populares
• Toolbar– Botones en diferentes tamaños– Desplegar columnas– Agrupación – Submenús– Iconos en diferentes
posiciones y tamaños
![Page 24: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/24.jpg)
Desktop
![Page 25: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/25.jpg)
Ejemplos: Motors
![Page 26: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/26.jpg)
Ejemplos: Dream Homes Map
![Page 27: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/27.jpg)
Ejemplos: Schema Bank
![Page 28: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/28.jpg)
¿Dónde encontrar ayuda?
http://www.extjs.com/deploy/dev/docs/
![Page 29: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/29.jpg)
¿Dónde encontrar ayuda?
http://www.extjs.com/forum/
![Page 30: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/30.jpg)
¿Dónde encontrar ayuda?
http://foro.quizzpot.com/
![Page 31: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/31.jpg)
¿Dónde encontrar ayuda?
http://extjses.com
![Page 32: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/32.jpg)
¿Dónde encontrar ayuda?
http://www.extjs.com/learn
![Page 33: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/33.jpg)
¿Dónde encontrar ayuda?
http://www.quizzpot.com/
![Page 34: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/34.jpg)
Libros: Learning Ext JS
• Shea Frederick• Colin Ramsay• Steve 'Cutter' Blades
– En Amazon $35.99– Basado en Ext JS v2
![Page 35: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/35.jpg)
Libros: Ext JS in Action
• Jesus "Jay" Garcia– En Manning $27.50 y $44.99– Basado en Ext JS v3
![Page 36: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/36.jpg)
Licencias y Costos
• OpenSource (GPL v3)
• Commercial license
• Reseller license
![Page 37: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/37.jpg)
Licencias y Costos
• OpenSource (GPL v3)– Sin costo
• Commercial license– $329 (1); $1,299 (5); $5,749 (25); $16,449 (+100)
• Reseller license– Depende del proyecto
![Page 38: Introducción a Ext JS - SG09](https://reader035.vdocuments.pub/reader035/viewer/2022062303/558d25d9d8b42a27638b4606/html5/thumbnails/38.jpg)
Links de referencia
• Sitio oficial– http://www.extjs.com/
• Documentación– http://www.extjs.com/deploy/dev/docs/
• Costos y licencias– http://www.extjs.com/products/license.php
• Ejemplos– http://www.extjs.com/deploy/dev/examples/samples.html
• Tutoriales en español– http://www.quizzpot.com/