+ All Categories
Home > Documents > APLICACIONES CON SENCHA TOUCH

APLICACIONES CON SENCHA TOUCH

Date post: 08-Mar-2023
Category:
Upload: harvard
View: 0 times
Download: 0 times
Share this document with a friend
10
APLICACIONES CON SENCHA TOUCH Sencha Touch es el framework que utiliza los estándares web de HTML5, CSS3 y Javascript para desarrollar aplicaciones web para dispositivos móviles con la apariencia de ser nativos de los sistemas IOS, Android y Blackberry. Sencha Touch ha sido creada por la empresa Sencha (los mismos creadores del frameworkExt JS 4 ) y del cual Sencha Touch usa su sistema de clases. Vale la pena mencionar que a la fecha de publicación de este artículo se encuentra en la versión estable 2.0.1. Características Multiplataforma: La misma aplicación que desarrollemos en Sencha Touch va a funcionar en muchos teléfonos móviles inteligentes y tabletas (mediante la configuración de los perfiles de los dispositivos ), acortando la curva de aprendizaje porque ya no tenemos que estar desarrollando apps individualmente para cada sistema operativo de cada dispositivo móvil, sino una sola, provocando un ahorro de tiempo y dinero.
Transcript

APLICACIONES CON SENCHA TOUCH

Sencha Touch es el framework que utiliza losestándares web de HTML5, CSS3 y Javascript paradesarrollar aplicaciones web para dispositivosmóviles con la apariencia de ser nativos de los

sistemas IOS, Android y Blackberry.

Sencha Touch ha sido creada por la empresaSencha (los mismos creadores del frameworkExt JS 4) y del cual Sencha Touchusa su sistema de clases. Vale la pena mencionar que a la fecha de publicación deeste artículo se encuentra en la versión estable 2.0.1.

Características

Multiplataforma: La misma aplicación que desarrollemos en Sencha Touch va a funcionar en muchos teléfonos móviles inteligentes y tabletas (mediante la configuración de los perfiles de los dispositivos), acortando la curva de aprendizaje porque ya no tenemos que estar desarrollando apps individualmente para cada sistema operativo de cada dispositivo móvil, sino una sola, provocando un ahorro de tiempo y dinero.

Dispositivos Táctiles: Esta diseñado principalmente para dispositivos táctiles (aunque también existen estándares para funcionar con el mouse y el teclado), por ello proporciona unavariedad de eventos táctiles como:

o Toque: Tocar con un solo dedo en lapantalla.

o Doble toque: Dos toques rápidos en la pantalla.

o Deslizar: Al mover un dedo por la pantalla de izquierda a derecha o de arriba hacia abajo.

o Apretar o extender: Cuando toca la pantalla con dos dedos acercándolosy alejándolos.

o Girar: Cuando coloca dos dedos en la pantalla y los gira hacia la derecha o hacia la izquierda.

Convertir nuestra aplicación en nativa

Sencha Touch 2 ahora tiene su propio Empaquetado Nativo para convertir nuestra aplicación a IOS o Android, pero también se puede convertir nuestra aplicación en nativa a través PhoneGap Build que utilizaun mecanismo que la empotra en una Shell nativa y se puede acceder a elementos nativos del móvil como la cámara, el GPS, batería, etc.

No discuto la calidad de los dispositivos desarrollados de manera propiamente nativa, pero esta es una buena opción considerando el poco presupuesto con que podamos contar y la cantidad de mercado

que podamos abarcar en los dispositivos móviles.

Licencia

Sencha Touch tiene varios tipos de licenciamiento según las necesidades del usuario, entre los cuales tenemos:

Licencia de software comercial (gratuita)

Licencia de código abierto Licencia de software comercial (dispositivos integrados)

Licencia comercial OEM (licencia de pago)

Ahora realizaremos una aplicación sencillaen Sencha Touch siguiendo los siguientes pasos:

1. Descargar Sencha Touch 2 desde el sitio oficial con la licencia comercial gratuita, para ello digitamos nuestro correo y damos click en el botón “download”,enviarán el link de descarga a nuestro correo electrónico.

2. Revisa el correo y da click en el botón Download Sencha Touch, a continuación iniciara la descarga.

3. Descomprimimos el archivo sencha-touch-2.0.1.1-commercial.zip

4. Creará la carpeta sencha-touch-2.0.1.1, entonces la renombramos con el nombre de “ejemplo” y dentrode ella creamos dos carpetas lib/touch. Ahora cortamos y pegamostodos los archivos de la capeta “ejemplo” en la carpeta touch y creamos el archivo “index.html” dentro de la carpeta “ejemplo”. La estructura de carpetas debe quedar de la siguiente manera:

5. Los archivos a utilizar para realizar nuestra aplicación son: sencha-touch.css y secha touch.js, para lo cual digitar en el archivo “index.html” las siguientes líneas de código:

<!Doctype html><html lang=”es”><head><meta charset=”utf-8″><title>Bienvenido a Sencha Touch

<script src="lib/touch/sencha-touch-all.js" type="text/javascript"></script><link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">Ext.application({launch: function () {Ext.create('Ext.Panel', {fullscreen: true,html: 'Mi primera aplicación en Sencha Touch 2'});}});</script></head><body></body></html>

6. Guardar el archivo “index.html” y abrirlo en un navegador web que soporte HTML5, debe mostrarle este

resultado:

Explicación

Las siguientes líneas de código hacen referencia a las librerías de Javascript y CSS3 de Sencha Touch respectivamente:

<script src=”lib/touch/sencha-touch-all.js” type=”text/javascript”></script>

<link href=”lib/touch/resources/css/sencha-touch.css” rel=”stylesheet” type=”text/css” />

Las líneas de código de abajo significan que dentro del script se crea una instancia de la clase Ext.application, dentro de ella existe la función launch que va a mostrar un panel en pantalla completa con texto enhtml:

<script type=”text/javascript”>Ext.application({launch: function () {Ext.create(‘Ext.Panel’, {fullscreen: true,html: ‘Mi primera aplicación en Sencha Touch 2′});}});</script>

Documentación

Sencha Touch se ha esforzado por mostrar una documentación muy completa a los usuarios, ya que presenta

una API (Interfaz de Programación de Aplicaciones) de como utilizar la sintaxis de programación, guías, videos, ejemplos y blog; el único detalle es que se encuentra en inglés. Pero existen forosen español para aprender esta tecnología, así como también en la red social Google+.


Recommended