Sencha Touch es una biblioteca de JavaScript de interfaz de usuario (UI) , o marco web , diseñado específicamente para la Web móvil . Los desarrolladores web pueden utilizarlo para desarrollar interfaces de usuario para aplicaciones web móviles que se ven y se sienten como aplicaciones nativas en dispositivos móviles compatibles. Está basado 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 Android , iOS , Windows., Tizen y BlackBerry , permitiendo simultáneamente una apariencia nativa de las aplicaciones.
Desarrollador (es) | Sencha |
---|---|
Lanzamiento final | 2.4.2 / 15 de junio de 2015 |
Escrito en | JavaScript |
Sistema operativo | Android , iOS , BlackBerry , Kindle , Windows Phone , Tizen |
Disponible en | inglés |
Tipo | Biblioteca de JavaScript |
Licencia | GPLv3 o comercial |
Sitio web | www |
Historial de versiones y soporte
Sencha Touch es un producto de Sencha, que se formó después de que se combinaran los populares proyectos de biblioteca de JavaScript Ext JS , jQTouch y Raphaël . La primera versión de Sencha Touch, versión 0.90 beta, estuvo disponible el 17 de julio de 2010. Esta versión beta admitía dispositivos con Android e iOS (en iPhone , iPod touch , iPad ).
Posteriormente, la primera versión estable, 1.0, fue lanzada en noviembre de 2010. La versión 1.1.0 agregó soporte para 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:
- Navegador de Android, Google Chrome para Android
- BlackBerry 10
- Navegador móvil Bada
- Navegador Kindle Fire
- Tizen
- Windows Phone 8 y Windows 8 IE10
- Safari móvil
No hay planes anunciados para admitir 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 vista. 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 tiene una interfaz de manipulación DOM incorporada que niega la dependencia de otros marcos de interfaz de usuario como jQuery. Incluye un conjunto de controles (o componentes) de interfaz gráfica de usuario basados en 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 del 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 de impulso y una barra de índice
- Un conjunto de iconos mínimo.
- 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 tener un tema de acuerdo con el dispositivo de destino. Esto se hace usando Sass , un lenguaje de hojas de estilo construido sobre CSS. Algunos de los temas de aspecto nativo son Cupertino Classic (para iOS6.xy inferior), Cupertino (para iOS 7) y Mountain View (para Android). [3]
Transiciones, animaciones y UI adaptable
Sencha Touch tiene ocho efectos de transición incorporados que incluyen deslizamiento sobre o debajo del elemento actual, pop, flip y cube. Admite gestos táctiles comunes creados a partir de eventos táctiles , que son estándares web pero solo son compatibles con Android , iOS y algunos dispositivos táctiles. Estos son tocar, tocar dos veces, deslizar, desplazarse y pellizcar.
Dado que Sencha touch está basado en HTML5, los diseños que ofrece son de naturaleza extremadamente adaptativa.
Gráficos
Sencha Touch también admite componentes de gráficos, incluidos gráficos circulares, gráficos de barras, series de líneas, etc., con leyendas explicativas. Estos componentes admiten la 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 le permite crear diferentes perfiles que se adaptan a diferentes tamaños de pantalla. Cuando se carga la aplicación, el marco determina el tipo de dispositivo y su perfil correspondiente determina qué componentes y funcionalidades deben intercambiarse, y las vistas y controladores específicos que deben invocarse, lo que le ahorra al desarrollador la tarea de crear un dispositivo diferente. aplicación 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 de la siguiente manera: [2] [6]
Directorio / Archivo | Descripción |
---|---|
aplicación | El directorio principal que contiene los modelos, vistas, controladores, tiendas y perfiles de la aplicación. |
app.js | Archivo que contiene la configuración general de la aplicación. Las referencias a todos los modelos, vistas, controladores, tiendas y perfiles se pueden encontrar aquí. Una vez que se cargan estas referencias, se llama a la función de inicio de la aplicación principal. Esta función carga la primera vista y, por lo tanto, puede considerarse como el primer punto de la aplicación. |
index.html | Archivo HTML principal de la aplicación. Puede abarcar muchas páginas / pantallas para la aplicación móvil. |
recursos | Directorio que contiene todas las imágenes, CSS y cualquier otro archivo externo que necesite la aplicación |
app.json | Archivo de configuración de la aplicación |
packager.json | Archivo utilizado para crear paquetes nativos |
ext-touch.js | Esta es la biblioteca JavaScript de Sencha (se recomienda ext-touchdebug.js durante la fase de desarrollo) |
ext-touch.css | Esta es la biblioteca CSS de Sencha |
Complementos y herramientas para desarrolladores
Sencha Touch proporciona complementos IDE para facilitar el desarrollo. Los beneficios de estos complementos incluyen generación de código y autocompletado , refactorización de código y facilidad de navegación a la base de código del marco y clases personalizadas. Sencha Touch tiene complementos para IDE populares como JetBrains , Visual Studio y Eclipse .
Hay un creador de aplicaciones visual, Sencha Architect, para crear aplicaciones HTML5 multiplataforma. Proporciona funciones de adicción como tematización e integración de línea de comandos . [7]
Uso de muestra
Sencha Touch hace que sea conveniente utilizar un mapa en su aplicación utilizando el componente Ext.Map. [8] La inclusión del archivo JavaScript "API de Google Maps" es esencial para que funcione la API de GoogleMaps . [9]
< html > < head > < title > Prueba táctil title > < link rel = "stylesheet" type = "text / css" href = "sencha-touch / resources / css / sencha-touch-debug.css" /> < script type = "text / javascript" src = "//maps.google.com/maps/api/js?sensor=true" > script > < script type = "text / javascript" src = "sencha-touch / sencha-touch-debug.js" > script > < tipo de secuencia de comandos = "texto / javascript" > Ext . setup ( { onReady : function () { // crea el panel raíz nuevo Ext . Panel ({ fullscreen : true , items : [ { xtype : "map" } ] }); } }); script > cabeza >< cuerpo > cuerpo > 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] InAppBrowser, medios, notificación, pantalla de presentación , almacenamiento (SQLite) , etc., que antes solo eran accesibles para aplicaciones nativas. Sencha Touch aprovecha JavaScript para crear la mayoría de los componentes de la interfaz de usuario y cambiar el CSS de los elementos DOM sobre la marcha. Dado que los motores de JavaScript son más eficientes y rápidos que antes, las aplicaciones web se ejecutan casi tan bien como las aplicaciones nativas.
Ver también
- Marco de aplicaciones basado en web para múltiples teléfonos
- Comparación de marcos de JavaScript
- jQuery Mobile
- Tizen
- Android (sistema operativo)
- iOS
Referencias
- ^ "Anuncio de Sencha Touch 2.4.2 con experiencia mejorada de BlackBerry 10.3" . sencha.com . 15 de junio de 2015.
- ^ a b Allen, Sarah; Graupera, Vidal; Lundrigan, Lee (2010). Desarrollo multiplataforma para teléfonos inteligentes profesionales . Estados Unidos de América: APulse. pag. 226. ISBN 978-1-4302-2869-1.
- ^ "Notas de la versión de Sencha Touch 2" . cdn.sencha.com .
- ^ "Anuncio de Sencha Touch 2.3 - Touch Grid, soporte de Cordova y nuevos temas" . sencha.com . 1 de octubre de 2013.
- ^ 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 - a través de Ebrary.com.
- ^ "Guías táctiles - Introducción a Sencha Touch" . docs.sencha.com .
- ^ "Arquitecto Sencha" . sencha.com . 25 de marzo de 2015.
- ^ "Toque - Sencha Docs" . docs.sencha.com .
- ^ "IBM Developer Works- Construye aplicaciones web móviles con Sencha Touch" .
- ^ "Guías táctiles - Eventos" . docs.sencha.com .
- ^ "Aprovechando PhoneGap dentro de Sencha Touch" . phonegap.com .
- ^ "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, Instant Sencha Touch, ISBN 9781782165996 .
- Ajit Kumar, Sencha Touch Cookbook - Segunda edición , ISBN 978-1-78216-918-5 .
- Lee Boonstra, Hands-On Sencha Touch 2: Un enfoque de aplicación del mundo real 1.a edición, ISBN 978-1-44936-652-0 .
- Ajit Kumar, Sencha MVC Architecture , ISBN 978-1-84951-888-8 .
- Matthew David, sitios web móviles HTML5, turboalimentación de HTML5 con jQuery, Sencha Touch y otros marcos, ISBN 978-0-24081-814-6 .
- https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch
enlaces externos
- Página web oficial