Diferencia entre revisiones de «Sencha Ext JS»
(ExtJS) (Etiqueta: nuestro-nuestra) |
m (Texto reemplazado: «<div align="justify">» por «») |
||
| (No se muestran 26 ediciones intermedias de 7 usuarios) | |||
| Línea 1: | Línea 1: | ||
| − | {{ | + | {{Ficha Software |
| − | == | + | |nombre=Sencha Ext JS |
| + | |familia= | ||
| + | |imagen=Sencha_Ext_.jpg | ||
| + | |tamaño= | ||
| + | |descripción=[[Framework]] [[JavaScript]] | ||
| + | |imagen2= | ||
| + | |tamaño2= | ||
| + | |descripción2= | ||
| + | |creador=[[Jack Slocum]]<br>[[Brian Moeskau]]<br>[[Aaron Conran]]<br>[[Rich Waters]] | ||
| + | |desarrollador= | ||
| + | |diseñador= | ||
| + | |modelo de desarrollo= | ||
| + | |lanzamiento inicial=[[1 de abril]] de [[2007]] | ||
| + | |versiones= | ||
| + | |última versión estable= | ||
| + | |género= | ||
| + | |sistemas operativos= | ||
| + | |idioma= | ||
| + | |licencia= | ||
| + | |premios= | ||
| + | |web=[http://www.sencha.com Web oficial] | ||
| + | }} | ||
| + | '''Sencha Ext JS''' (anterior '''ExtJS''') es una biblioteca de [[JavaScript|JavaScript]] para el desarrollo de aplicaciones web interactivas que además de flexibilizar el manejo de componentes de la página como el DOM, Peticiones [[AJAX|AJAX]], [[HTML Dinámico|DHTML]], tiene la gran funcionalidad de crear interfaces de usuario bastante funcionales. Creado por Jack Slocum, Brian Moeskau, Aaron Conran, Rich Waters. | ||
| + | == ¿Qué es ExtJS? == | ||
| − | ExtJS es una librería Javascript que permite construir aplicaciones complejas en Internet | + | ExtJS es una librería [[JavaScript|Javascript]] que permite construir aplicaciones complejas en [[Internet|internet]] además de flexibilizar el manejo de componentes de la página como el DOM, Peticiones [[AJAX|AJAX]], [[HTML Dinámico|DHTML]], tiene la gran funcionalidad de crear interfaces de usuario bastante funcionales. |
| − | *Componentes UI del alto performance y personalizables. | + | Esta librería incluye: |
| + | |||
| + | *Componentes [[Interfaz gráfica de usuario|UI]] del alto performance y personalizables. | ||
*Modelo de componentes extensibles. | *Modelo de componentes extensibles. | ||
| − | *Un API fácil de usar. | + | *Un [[API|API]] fácil de usar. |
| − | *Licencias Open | + | *Licencias Open Source ([[GPL|GPL]]) y [[Licencias Comerciales de los Software|comerciales]] |
| − | + | == Orígenes == | |
| − | + | Originalmente construida como una extensión de la biblioteca [[Yahoo! UI Library|YUI]], y sale al mercado el [[1 de abril]] de [[2007]] con la versión ExtJs 1.0. Desde la versión 1.1 puede ejecutarse como una aplicación independiente. Ya en la versión 3.0 se convierte en Sencha ExtJs. en la actualidad puede usarse como extensión para las bibliotecas [[JQuery|jQuery]] y [[Prototype|Prototype]]. | |
| − | + | == Funcionalidades == | |
| − | + | Lo primero es contar con el [[Framework|framework]] Ext JS, disponible en el sitio oficial de Sencha y tener conocimiento sobre los términos de su uso descritos en su [[GPL|licencia]]. Se recomienda el uso del [[Navegador Web|navegador]] [[Araña web|web]] [[Mozilla Firefox|Firefox]] en conjugación con su extensión [[Firebug|Firebug]], la cual permite la inspección de código [[JavaScript|javascript]] y otros elementos del DOM. | |
| − | + | Este [[Framework|framework]] cuenta con un conjunto de componentes (widgets) para incluir dentro de una aplicación [[Araña web|web]], como: | |
| − | |||
| − | Este framework cuenta con un conjunto de componentes (widgets) para incluir dentro de una aplicación web, como: | ||
*Cuadros y áreas de texto. | *Cuadros y áreas de texto. | ||
| Línea 26: | Línea 49: | ||
*Combos. | *Combos. | ||
*Radiobuttons y checkboxs. | *Radiobuttons y checkboxs. | ||
| − | *Editor HTML. | + | *Editor [[HTML|HTML]]. |
*Elementos de datos (con modos de sólo lectura, datos ordenables, columnas que se pueden bloquear y arrastrar, etc.). | *Elementos de datos (con modos de sólo lectura, datos ordenables, columnas que se pueden bloquear y arrastrar, etc.). | ||
*Árbol de datos. | *Árbol de datos. | ||
*Pestañas. | *Pestañas. | ||
*Barra de herramientas. | *Barra de herramientas. | ||
| − | *Menús al estilo de Windows. | + | *Menús al estilo de [[Las ventanas de Windows|Windows]]. |
*Paneles divisibles en secciones. | *Paneles divisibles en secciones. | ||
| − | *Sliders. | + | *Sliders. |
| − | Varios de estos componentes están dotados de | + | Varios de estos componentes están dotados de comunicación con el servidor usando [[AJAX|AJAX]]. También contiene numerosas funcionalidades que permiten añadir interactividad a las páginas [[HTML|HTML]], como: |
*Cuadros de diálogo. | *Cuadros de diálogo. | ||
*'''quicktips''' para mostrar mensajes de validación e información sobre campos individuales.<br> | *'''quicktips''' para mostrar mensajes de validación e información sobre campos individuales.<br> | ||
| − | === | + | === Navegadores Compatibles === |
| − | + | Ext JS soporta todos los [[Navegadores Web|navegadores]] [[Araña web|web]] más importantes, incluyendo: | |
| − | + | *[[Mozilla Firefox|FireFox]] 1.5+ (PC, Mac) | |
| + | *[[Safari|Safari]] 3+ | ||
| + | *[[Google Chrome|Chrome]] 3+ | ||
| + | *[[Opera|Opera]] 9+ (PC, Mac) | ||
| + | *[[Internet Explorer|Internet Explorer]] 6+ | ||
| − | + | === Librerías Importantes === | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | Existe una condición primaria para el uso de esta herramienta y es la correcta ubicación dentro del código [[HTML|HTML]] de las siguientes librerías, imprescindible para su correcto funcionamiento: | |
| − | + | Ficheros comunes: | |
| + | #'''ext-all.css''': contiene todos los [[CSS|estilos]] para visualizar correctamente los componentes. | ||
| + | #'''ext-all.js:''' contiene todos los componentes y características disponibles en Ext JS. | ||
| + | #'''ext-lang-XX.js:''' contiene segmentos de textos traducidos al lenguaje que se solicite según el listado internacional de siglas para lenguajes. Para el español el fichero deberá llamarse '''ext-lang-es.js''' | ||
| − | + | Hasta la versión 3.X.X | |
| + | #'''ext-base.js''': contiene unas pocas clases y funciones que sirven para ir manipulando el mínimo de eventos hasta que se cargue el paquete principal completo y esté listo para su correcto funcionamiento. | ||
| + | #'''chart.swf''' es un fichero [[flash]] que sirve para la creación y visualización de gráficos. | ||
| − | .. | + | Hasta la versión 4.X.X |
| + | #'''ext-core.js''': similar al '''ext-base.js''' de las anteriores versiones. | ||
| − | + | === Ejemplo de como incluir las librerías === | |
| − | == | + | ==== Hasta la versión 3.X.X ==== |
| − | + | <head> | |
| + | <title>Primeros pasos con Ext JS</title> | ||
| + | |||
| + | <!--IMPORTANTE AGREGAR LA HOJA DE ESTILOS --> | ||
| + | <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css" /> | ||
| + | |||
| + | <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> | ||
| + | <script type="text/javascript" src="ext/ext-all.js" ></script> | ||
| + | <script type="text/javascript" src="ext/src/locale/ext-lang-es.js"></script> | ||
| + | </head> | ||
| − | === | + | ==== Desde la versión 4.X.X ==== |
| − | + | <head> | |
| + | <title>Primeros pasos con Ext JS</title> | ||
| + | |||
| + | <!--IMPORTANTE AGREGAR LA HOJA DE ESTILOS --> | ||
| + | <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css" /> | ||
| + | |||
| + | <script type="text/javascript" src="ext/ext-core.js"></script> | ||
| + | <script type="text/javascript" src="ext/ext-all.js" ></script> | ||
| + | <script type="text/javascript" src="ext/src/locale/ext-lang-es.js"></script> | ||
| + | </head> | ||
| − | == | + | == Ventajas y Desventajas == |
| − | + | ExtJS ha marcado la diferencia en la preferencia de muchos desarrolladores. Y no solo para aplicaciones [[Araña web|web]] sino que ya es útil para productos de alta demanda en el mercado como [[Iphone|iPhone]] y IPAD. | |
| − | == | + | === Ventajas === |
| − | + | #Una de las grandes ventajas de utilizar ExtJS es que nos permite crear aplicaciones complejas utilizando componentes predefinidos. | |
| + | #Evita el problema de tener que validar el código para que funcione bien en cada uno de los [[Navegadores Web|navegadores]] ([[Mozilla Firefox|Firefox]], [[Internet Explorer|IE]], [[Safari|Safari]], [[Opera|Opera]] etc.). | ||
| + | #El funcionamiento de las ventanas flotantes lo pone por encima de cualquier otro. | ||
| + | #Relación entre [[Arquitectura Cliente Servidor|Cliente-Servidor]] balanceado: Se distribuye la carga de procesamiento entre, permitiendo que el servidor pueda atender más clientes al mismo tiempo. | ||
| + | #Eficiencia de la red: Disminuye el trafico en la red pues las aplicaciones cuentan con las posibilidad de elegir que datos desea trasmitir al servidor y viceversa (Criterio este que puede variar con el uso de aplicaciones de pre-carga). | ||
| + | #Comunicación asíncrona. En este tipo de aplicación el motor de render puede comunicarse con el servidor sin necesidad de estar sujeta a un clic o una acción del usuario, dándole la libertad de cargar información sin que el cliente se de cuenta. | ||
| − | + | === Desventajas === | |
| − | + | #Necesidad de una plataforma: Pues dependemos del paquete ExtJS para obtener los resultados deseados. | |
| + | #Para algunos el no contar con una licencia [[LGPL|LGPL]]. | ||
| − | + | ==Lista de aplicaciones desarrolladas bajo Ext JS== | |
| − | + | [[Image:Opengoo.jpg|thumb|right|Opengoo.jpg]]'''opengoo.org''', es una completa suite ofimática de [[Código abierto|código abierto]] que se puede instalar en nuestro propio [[Servidores Web|servidor web]], esto es muy útil para ser usado en la [[Intranet|intranet]] de una empresa y que los documentos se almacenen de manera centralizada en el servidor de la empresa. | |
| − | + | <br> | |
| − | + | <br> | |
| − | + | <br> | |
<br> | <br> | ||
| − | + | [[Image:Conjoon1.jpg|thumb|right|Conjoon.jpg]] | |
| + | |||
| + | '''conjoon''', es un administrador de información personal con un fuerte énfasis en el intercambio de mensajes. Su ambición es convertirse en uno de los '''groupware''' basado en [[Araña web|web]].<br> | ||
| − | + | <br> | |
| − | |||
<br> | <br> | ||
| − | + | <br> | |
| − | + | <br> | |
| − | + | [[Image:Express.jpg|thumb|right|Express.jpg]]<br>'''Express Web''', es un sistema web de courier, para realizar envíos de encomiendas, facturación, cobros créditos, etc, realizado para la empresa geomil, una de las empresas principales para el envío y recepción de encomiendas del [[Ecuador|Ecuador]] – [[ESPAÑA|España]]. | |
| − | + | <br> | |
| − | + | <br> | |
<br> | <br> | ||
| + | |||
| + | '''Cedrux''', es un sistema de gestión integral que en el futuro será un sistema de Planificación de Recursos Empresariales ('''Enterprise Resource Planning''', '''ERP'''), se desarrolla actualmente en la Universidad de las Ciencias Informáticas([[Universidad de Ciencias Informáticas|UCI]]) mediante el uso de este [[Framework|framework]]. | ||
| + | |||
| + | ==Otros Productos de Sencha== | ||
| + | |||
| + | [[Image:Sencha Touch.jpeg|border|right|169x123px|Aplicaciones para Android, iPhone yIPAD.]]<br> | ||
| + | |||
| + | '''Sencha Touch:''' Construir aplicaciones web ricas ('''Rich Internet Applications''', [[Aplicaciones de Internet Ricas|RIA]]) para [[Android]], [[Iphone|iPhone]] y [[IPAD]]. | ||
| + | |||
| + | <br> | ||
| + | |||
| + | <br> | ||
| + | |||
| + | |||
| + | [[Image:Ext_Desinger.jpg|border|right|167x118px|Diseñador de interfaz.]] | ||
| + | |||
| + | '''Ext Designer:''' Crear impresionantes [[Interfaz gráfica de usuario|interfaces]] [[Araña web|web]] con un simple arrastrar y soltar.<br> | ||
| + | |||
| + | <br> | ||
| + | |||
| + | <br> | ||
| + | |||
| + | <br> | ||
| + | |||
| + | '''Ext GWT:''' Librería de [[Java|Java]] para la creación de [[Aplicaciones de Internet Ricas|RIA]] con GWT. <br> | ||
| + | |||
| + | == Enlaces Relacionados== | ||
| + | |||
| + | *[http://www.sencha.com www.sencha.com] | ||
| + | *[http://www.extjses.com www.extjses.com] | ||
| + | |||
| + | ==Fuentes== | ||
| + | |||
| + | *[http://www.pri.jovenclub.cu Sitio Web de los Joven Club en Pinar del Río] | ||
| + | *[http://www.gutl.jovenclub.cu www.gutl.jovenclub.cu] | ||
| + | *[http://www.sencha.com www.sencha.com] | ||
| + | *[http://www.opengoo.org www.opengoo.org] | ||
| + | *[http://www.conjoon.org www.conjoon.org] | ||
</div> | </div> | ||
[[Category:Ciencias_Aplicadas_y_Tecnologías]] [[Category:Programación]] [[Category:Desarrollo_web]] | [[Category:Ciencias_Aplicadas_y_Tecnologías]] [[Category:Programación]] [[Category:Desarrollo_web]] | ||
última versión al 15:56 13 ago 2019
| ||||||||||
Sencha Ext JS (anterior ExtJS) es una biblioteca de JavaScript para el desarrollo de aplicaciones web interactivas que además de flexibilizar el manejo de componentes de la página como el DOM, Peticiones AJAX, DHTML, tiene la gran funcionalidad de crear interfaces de usuario bastante funcionales. Creado por Jack Slocum, Brian Moeskau, Aaron Conran, Rich Waters.
Sumario
¿Qué es ExtJS?
ExtJS es una librería Javascript que permite construir aplicaciones complejas en internet además de flexibilizar el manejo de componentes de la página como el DOM, Peticiones AJAX, DHTML, tiene la gran funcionalidad de crear interfaces de usuario bastante funcionales.
Esta librería incluye:
- Componentes UI del alto performance y personalizables.
- Modelo de componentes extensibles.
- Un API fácil de usar.
- Licencias Open Source (GPL) y comerciales
Orígenes
Originalmente construida como una extensión de la biblioteca YUI, y sale al mercado el 1 de abril de 2007 con la versión ExtJs 1.0. Desde la versión 1.1 puede ejecutarse como una aplicación independiente. Ya en la versión 3.0 se convierte en Sencha ExtJs. en la actualidad puede usarse como extensión para las bibliotecas jQuery y Prototype.
Funcionalidades
Lo primero es contar con el framework Ext JS, disponible en el sitio oficial de Sencha y tener conocimiento sobre los términos de su uso descritos en su licencia. Se recomienda el uso del navegador web Firefox en conjugación con su extensión Firebug, la cual permite la inspección de código javascript y otros elementos del DOM.
Este framework cuenta con un conjunto de componentes (widgets) para incluir dentro de una aplicación web, como:
- Cuadros y áreas de texto.
- Campos para fechas.
- Campos numéricos.
- Combos.
- Radiobuttons y checkboxs.
- Editor HTML.
- Elementos de datos (con modos de sólo lectura, datos ordenables, columnas que se pueden bloquear y arrastrar, etc.).
- Árbol de datos.
- Pestañas.
- Barra de herramientas.
- Menús al estilo de Windows.
- Paneles divisibles en secciones.
- Sliders.
Varios de estos componentes están dotados de comunicación con el servidor usando AJAX. También contiene numerosas funcionalidades que permiten añadir interactividad a las páginas HTML, como:
- Cuadros de diálogo.
- quicktips para mostrar mensajes de validación e información sobre campos individuales.
Ext JS soporta todos los navegadores web más importantes, incluyendo:
- FireFox 1.5+ (PC, Mac)
- Safari 3+
- Chrome 3+
- Opera 9+ (PC, Mac)
- Internet Explorer 6+
Librerías Importantes
Existe una condición primaria para el uso de esta herramienta y es la correcta ubicación dentro del código HTML de las siguientes librerías, imprescindible para su correcto funcionamiento:
Ficheros comunes:
- ext-all.css: contiene todos los estilos para visualizar correctamente los componentes.
- ext-all.js: contiene todos los componentes y características disponibles en Ext JS.
- ext-lang-XX.js: contiene segmentos de textos traducidos al lenguaje que se solicite según el listado internacional de siglas para lenguajes. Para el español el fichero deberá llamarse ext-lang-es.js
Hasta la versión 3.X.X
- ext-base.js: contiene unas pocas clases y funciones que sirven para ir manipulando el mínimo de eventos hasta que se cargue el paquete principal completo y esté listo para su correcto funcionamiento.
- chart.swf es un fichero flash que sirve para la creación y visualización de gráficos.
Hasta la versión 4.X.X
- ext-core.js: similar al ext-base.js de las anteriores versiones.
Ejemplo de como incluir las librerías
Hasta la versión 3.X.X
<head> <title>Primeros pasos con Ext JS</title> <!--IMPORTANTE AGREGAR LA HOJA DE ESTILOS --> <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js" ></script> <script type="text/javascript" src="ext/src/locale/ext-lang-es.js"></script> </head>
Desde la versión 4.X.X
<head> <title>Primeros pasos con Ext JS</title> <!--IMPORTANTE AGREGAR LA HOJA DE ESTILOS --> <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/ext-core.js"></script> <script type="text/javascript" src="ext/ext-all.js" ></script> <script type="text/javascript" src="ext/src/locale/ext-lang-es.js"></script> </head>
Ventajas y Desventajas
ExtJS ha marcado la diferencia en la preferencia de muchos desarrolladores. Y no solo para aplicaciones web sino que ya es útil para productos de alta demanda en el mercado como iPhone y IPAD.
Ventajas
- Una de las grandes ventajas de utilizar ExtJS es que nos permite crear aplicaciones complejas utilizando componentes predefinidos.
- Evita el problema de tener que validar el código para que funcione bien en cada uno de los navegadores (Firefox, IE, Safari, Opera etc.).
- El funcionamiento de las ventanas flotantes lo pone por encima de cualquier otro.
- Relación entre Cliente-Servidor balanceado: Se distribuye la carga de procesamiento entre, permitiendo que el servidor pueda atender más clientes al mismo tiempo.
- Eficiencia de la red: Disminuye el trafico en la red pues las aplicaciones cuentan con las posibilidad de elegir que datos desea trasmitir al servidor y viceversa (Criterio este que puede variar con el uso de aplicaciones de pre-carga).
- Comunicación asíncrona. En este tipo de aplicación el motor de render puede comunicarse con el servidor sin necesidad de estar sujeta a un clic o una acción del usuario, dándole la libertad de cargar información sin que el cliente se de cuenta.
Desventajas
- Necesidad de una plataforma: Pues dependemos del paquete ExtJS para obtener los resultados deseados.
- Para algunos el no contar con una licencia LGPL.
Lista de aplicaciones desarrolladas bajo Ext JS
opengoo.org, es una completa suite ofimática de código abierto que se puede instalar en nuestro propio servidor web, esto es muy útil para ser usado en la intranet de una empresa y que los documentos se almacenen de manera centralizada en el servidor de la empresa.
conjoon, es un administrador de información personal con un fuerte énfasis en el intercambio de mensajes. Su ambición es convertirse en uno de los groupware basado en web.
Express Web, es un sistema web de courier, para realizar envíos de encomiendas, facturación, cobros créditos, etc, realizado para la empresa geomil, una de las empresas principales para el envío y recepción de encomiendas del Ecuador – España.
Cedrux, es un sistema de gestión integral que en el futuro será un sistema de Planificación de Recursos Empresariales (Enterprise Resource Planning, ERP), se desarrolla actualmente en la Universidad de las Ciencias Informáticas(UCI) mediante el uso de este framework.
Otros Productos de Sencha
Sencha Touch: Construir aplicaciones web ricas (Rich Internet Applications, RIA) para Android, iPhone y IPAD.
Ext Designer: Crear impresionantes interfaces web con un simple arrastrar y soltar.
Ext GWT: Librería de Java para la creación de RIA con GWT.
