Hispanopedia Wiki
Articulo de referencia

Sencha Touch

Sencha Touch es una biblioteca de JavaScript para interfaces de usuario (UI) , o framework web , específicamente diseñada para la web móvil . Los desarrolladores web pueden usar...

Hispanopedia WikiContenido en espanolLectura gratuita

Sencha Touch es una biblioteca de JavaScript para interfaces de usuario (UI) , o framework web , específicamente diseñada para la web móvil . Los desarrolladores web pueden usarla para crear interfaces de usuario para aplicaciones web móviles que se vean y se sientan como aplicaciones nativas en dispositivos móviles compatibles. Se basa en estándares web como HTML5 , CSS3 y JavaScript . El objetivo de Sencha Touch es facilitar el desarrollo rápido y sencillo de aplicaciones móviles basadas en HTML5 que se ejecutan en dispositivos Android , iOS , Windows , Tizen y BlackBerry , permitiendo al mismo tiempo que las aplicaciones tengan una apariencia y una sensación nativas.

Historial de versiones y soporte

Sencha Touch es un producto de Sencha, que se formó tras la fusión de los populares proyectos de bibliotecas JavaScript Ext JS , jQTouch y Raphaël . La primera versión de Sencha Touch, la versión 0.90 beta, se lanzó el 17 de julio de 2010. Esta versión beta era compatible con dispositivos Android e iOS ( iPhone , iPod Touch e iPad ).

Posteriormente, la primera versión estable, la 1.0, se lanzó en noviembre de 2010. La versión 1.1.0 añadió compatibilidad con dispositivos que ejecutan BlackBerry OS 6.0.

La última versión, Sencha Touch 2.4.2, se lanzó en junio de 2015 [ 1 ] y está diseñada para ejecutarse en los siguientes navegadores y plataformas:

No hay planes anunciados para ofrecer soporte para Firefox Mobile .

Características

Arquitectura MVC

Sencha Touch sigue el patrón MVC , que separa los datos de la aplicación, el código de control y la interfaz. Esta separación permite que las aplicaciones a gran escala sean flexibles y fáciles de mantener.

Componentes de widgets y temas personalizables

Sencha Touch cuenta con una interfaz de manipulación DOM integrada que elimina la dependencia de otros frameworks de interfaz de usuario como jQuery. Incluye un conjunto de controles (o componentes) de interfaz gráfica de usuario (GUI ) para su uso en aplicaciones web móviles. Estos componentes están optimizados para la entrada táctil. Los componentes son: [ 2 ]

  • Botones con temas y efectos específicos para cada dispositivo.
  • Elementos de formulario como campos de texto para correo electrónico
  • Selector de fecha y dirección
  • Deslizadores, selectores y cuadros combinados
  • Un componente de lista con desplazamiento dinámico y una barra de índice.
  • Un conjunto de iconos minimalista
  • Barras de herramientas y menús
  • Pestañas móviles, barras de herramientas inferiores
  • Un componente de mapa compatible con gestos multitáctiles como pellizcar y hacer zoom.
  • Carruseles

Todos los componentes pueden personalizarse según el dispositivo de destino. Esto se logra mediante Sass , un lenguaje de hojas de estilo basado en CSS. Algunos de los temas con apariencia nativa son Cupertino Classic (para iOS 6.x y versiones anteriores), Cupertino (para iOS 7) y Mountain View (para Android). [ 3 ]

Transiciones, animaciones e interfaz de usuario adaptativa

Sencha Touch cuenta con ocho efectos de transición integrados, entre los que se incluyen deslizar sobre o debajo del elemento actual, pop, flip y cube. Admite gestos táctiles comunes basados ​​en eventos táctiles , que son estándares web pero compatibles únicamente con Android , iOS y algunos dispositivos táctiles. Estos gestos son: tocar, doble toque, deslizar, desplazar y pellizcar.

Dado que Sencha Touch se basa en HTML5, los diseños que ofrece son extremadamente adaptables.

Elaboración de gráficos

Sencha Touch también admite componentes gráficos, como gráficos circulares, gráficos de barras, series de líneas, etc., con leyendas explicativas. Estos componentes admiten interactividad, como pellizcar y hacer zoom. Al igual que los componentes Grid en ExtJS , Sencha Touch ofrece la funcionalidad TouchGrid. [ 4 ]

Perfiles

La creación de perfiles en Sencha Touch permite crear diferentes perfiles adaptados a distintos tamaños de pantalla. Al cargar la aplicación, el framework determina el tipo de dispositivo y su perfil correspondiente define qué componentes y funcionalidades deben intercambiarse, así como las vistas y controladores específicos que deben invocarse, lo que evita al desarrollador la tarea de crear una aplicación diferente para cada tipo de dispositivo. [ 5 ]

Estructura básica del directorio de la aplicación

Las aplicaciones Sencha Touch tienen una estructura básica de archivos y directorios como sigue: [ 2 ] [ 6 ]

Herramientas y complementos para desarrolladores

Sencha Touch ofrece complementos para IDE que facilitan el desarrollo. Entre las ventajas de estos complementos se incluyen la generación y el autocompletado de código , la refactorización de código y la facilidad de navegación al código fuente del framework y a las clases personalizadas. Sencha Touch cuenta con complementos para IDE populares como JetBrains , Visual Studio y Eclipse .

Existe un creador de aplicaciones visuales, Sencha Architect, para crear aplicaciones HTML5 multiplataforma. Ofrece funciones adicionales como temas e integración de línea de comandos . [ 7 ]

Ejemplo de uso

Sencha Touch facilita el uso de un mapa en su aplicación mediante el componente Ext.Map. [ 8 ] La inclusión del archivo JavaScript "Google Maps API" es esencial para que la API de Google Maps funcione. [ 9 ]

< ! DOCTYPE HTML > <html> <head> <title> Prueba táctil </title>​​​<!-- CSS de Sencha Touch --> < link rel = "stylesheet" type = "text/css" href = "sencha-touch/resources/css/sencha-touch-debug.css" /><!-- API de Google Maps --> < script type = " text/javascript" src = "//maps.google.com/maps/api/js?sensor=true" > </script><!-- Código JavaScript de Sencha Touch --> < script type = "text/javascript" src = "sencha-touch/sencha-touch-debug.js" > </script>< !-- Script de la aplicación --> < script type = " text/javascript" > Ext.setup ( { onReady : function () { // crea el panel raíz new Ext.Panel ({ fullscreen : true , items : [ { xtype : " map " } ] }); } }) ; </script></head>​​<body> </body> </html>​​​​​​

Ext.setup() es el punto de partida para inicializar la aplicación, configurando la ventana gráfica y el sistema de eventos. [ 10 ]

Comparación con aplicaciones nativas

Sencha Touch es compatible con PhoneGap [ 11 ] y las API de Apache Cordova para acelerómetro , cámara, brújula, geolocalización , captura [ 12 ] , navegador integrado, multimedia, notificaciones, pantalla de inicio , almacenamiento (SQLite) , etc., que antes solo eran accesibles para aplicaciones nativas. Sencha Touch utiliza JavaScript para crear la mayoría de los componentes de la interfaz de usuario y modificar el CSS de los elementos del DOM sobre la marcha. Gracias a que los motores JavaScript son más eficientes y rápidos que antes, las aplicaciones web se ejecutan casi con la misma fluidez que las aplicaciones nativas.

Véase también

Referencias

  1. ↑ "Anuncio de Sencha Touch 2.4.2 con una experiencia mejorada en BlackBerry 10.3" . sencha.com . 15 de junio de 2015.
  2. 1 2 Allen, Sarah; Graupera, Vidal; Lundrigan, Lee (2010). Desarrollo multiplataforma para smartphones profesionales . Estados Unidos de América: APress. pág. 226. ISBN  978-1-4302-2869-1.
  3. ↑ "Notas de la versión de Sencha Touch 2" . cdn.sencha.com .
  4. ↑ "Anuncio de Sencha Touch 2.3: Touch Grid, compatibilidad con Cordova y nuevos temas" . sencha.com . 1 de octubre de 2013.
  5. ↑ Clark, John Earl; Johnson, Bryan P. (abril de 2013). Creación de aplicaciones móviles con Sencha Touch 2. Birmingham, Reino Unido: Packt Publishing. págs. 233, 234. ISBN  978-1-84951-890-1.
  6. ↑ "Guías táctiles: Primeros pasos con Sencha Touch" . docs.sencha.com .
  7. ↑ "Sencha Architect" . sencha.com . 25 de marzo de 2015.
  8. ↑ «Toque - Sencha Docs» . docs.sencha.com .
  9. ↑ "IBM Developer Works: crea aplicaciones web móviles con Sencha Touch" . IBM .
  10. ↑ "Guías táctiles - Eventos" . docs.sencha.com .
  11. ↑ "Aprovechando PhoneGap dentro de Sencha Touch" . phonegap.com .
  12. ↑ "Guías táctiles: uso de API nativas " . docs.sencha.com

Bibliografía

  • Jesús García y Anthony De Moss, Mitchell Simoens, Sencha Touch en acción , ISBN 978-1-61729-037-4
  • Ajit Kumar, Libro de cocina Sencha Touch , ISBN 978-1-84951-544-3.
  • Hiren J. Dave, Toque Sencha instantáneo, ISBN 9781782165996.
  • Ajit Kumar, Sencha Touch Cookbook - Segunda edición , ISBN 978-1-78216-918-5.
  • Lee Boonstra, Sencha Touch 2 práctico: Un enfoque de aplicación para el mundo real, 1.ª edición, ISBN 978-1-44936-652-0.
  • Ajit Kumar, Arquitectura MVC de Sencha , ISBN 978-1-84951-888-8.
  • Matthew David, Sitios web móviles HTML5, Potenciando HTML5 con jQuery, Sencha Touch y otros frameworks, ISBN 978-0-24081-814-6.
  • https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch
  • Sitio web oficial
Obtenido de " https://en.wikipedia.org/w/index.php?title=Sencha_Touch&oldid=1265937793 "