Nuestra primera aplicación

Una vez instalado Sencha Touch y Sencha Cmd ya podemos crear nuestra primera aplicación. Para ello crearemos una nueva carpeta para la aplicación y entraremos en ella:

mkdir myapp
cd myapp

Y a continuación ejecutaremos el comando:

sencha -sdk /path/to/touch generate app MyApp .

Esto generará el esqueleto de una nueva aplicación de Sencha Touch en el directorio actual, con todas los ficheros que vamos a necesitar incluyendo un documento index.html inicial, una copia del SDK de Sencha Touch, las hojas de estilo, imágenes y ficheros de configuración.

Una vez creada la aplicación podemos comprobar que funcione correctamente de varias formas:

• Abriendo directamente el fichero index.html, la mayoría de aplicaciones básicas las podremos probar de esta forma.

• Copiando nuestro proyecto a un servidor web y accediendo al proyecto a través de la dirección: http://localhost/MyApp

• Usando el servidor Web que proporciona el Cmd de Sencha. Para activarlo tenemos que ir a la carpeta de nuestra aplicación y en un terminal ejecutar sencha web start &. Para acceder en este caso tendremos que usar la ruta: http://localhost:1841/

Sencha Touch solo funciona con navegadores basados en WebKit, como son: Safari, Google Chrome, Epiphany, Maxthon o Midori. Si lo probamos en un navegador que no lo soporte, como Firefox o Internet Explorer, solamente veremos una página en blanco o un resultado erróneo. Por lo tanto para probar nuestros proyectos Web tendremos que instalar uno de los navegadores soportados, como Google Chrome (http://www.google.es/chrome) o Apple Safari (http://www.apple.com/es/safari/).

Aunque la mayoría de webs que podemos hacer con Sencha Touch se podrían ejecutar y visualizar directamente sin necesidad de un servidor Web, sí que será necesario su uso si queremos probar nuestros proyectos utilizando algún emulador o un dispositivo móvil real.

En la sección inicial de "Instalación de un servidor Web" se puede encontrar información sobre la instalación de un emulador móvil o la configuración para el acceso externo mediante un dispositivo móvil real.

Estructura de carpetas

Las carpetas y ficheros principales que se generan con un nuevo proyecto son:

• app - En este directorio es donde se almacenan las vistas, modelos, controladores y stores para la aplicación.

• app.js - Es el principal script o punto de entrada de nuestra aplicación, el cual ejecutará el código inicial.

• app.json - Es el fichero de configuración de nuestra aplicación.

• index.html - Fichero HTML principal de la aplicación, el cual se abrirá al iniciarla.

• packager.json - Fichero de configuración utilizado por Sencha Cmd para la generación de paquetes nativos de la aplicación.

• resources - Contiene todos los recursos o assets de la aplicación, como los CSS, imágenes, etc.

El fichero index.html es el primero que se abrirá al iniciar la aplicación. Este fichero únicamente contendrá la carga de javascripts y estilos y después le pasará el control al fichero app.js, el cual será el punto de entrada a la aplicación y donde irá todo el código de Sencha Touch.