Introducción a la tecnología de Alloy, el MVC de Appcelerator para Titanium Appcelerator.

1. Alloy Preview
Mauro Parra-Miranda
mauropm@gmail.com

2. Agenda
Pre-requisitos
Instalación
Usando Alloy
Conclusiones

3. Pre-requisitos
Titanium Studio (bajalo de http://appcelerator.com)
NodeJS instalado (bajalo de Node.js http://
nodejs.org/#download)
XCode (bajalo de http://developer.apple.com )
Titanium Mobile SDK 2.1.x (de Titanium Studio,
selecciona help->install SDK)

4. ¿Cómo comenzar?
Crear un proyecto nuevo en Ti Appc
abre la terminal y vete a donde esta tu proyecto (por
ejemplo, en mi caso: ~/Documents/
Titanium_Studio_Workspace/testalloy) y corre:
alloy new .

6. ¿Qué hay nuevo?
Nota que hay un nuevo directorio, llamado “ app”. Ese
será el nuevo “Resources” (i.e., todos los cambios los
haremos en app).
Resources será automáticamente reescrito cada
ocasión que compilemos, por lo que de preferencia, NO
PONGAS NADA AHI!

7. Estructura del proyecto

8. Echemos un vistazo mas a
fondo...

9. Estructura de directorio
en app
views - Archivos XML que describen el UI
controllers - Archivos JS que contienen la lógica de
la app y las llamadas a la Ti API
styles - Archivos TSS que contienen el estilo de la
UI, definidos en Views. TSS es una sintáxis similar a
la de JSON, con sabor a CSS.
models - Archivos JS que incluyen la definición y
extensión de modelos y colecciones basadas en
Backbone.JS

10. Estructura de Directorio
(continuación)
assets - Cosas como imagenes, logos, db files, etc.
Cualquier cosa que desees termine en el directorio
Resources de la aplicación.
lib - Directorio donde guardas bibliotecas de JS y
módulos commonjs. Al igual que assets, se copiarán a
Resources.

11. Directorios opcionales
migrations - Archivos JS que definen migraciones de
modelos.
widgets - Componentes reusables autocontenidos
crossplataforma que pueden reutilizarse en diversos
proyectos de Alloy.

12. Compilando el proyecto
$ alloy compile --config platform=ios
(esto se hace desde la terminal aún, pronto será
integrado con Titanium Studio).
Como platform se puede poner:
ios, android o mobileweb.

13. Corriendo el app
$ alloy run

14. Generando archivos en
alloy
view & style -
$ alloy generate view NAME
view, style & Controller -
$ alloy generate controller NAME

15. Generando archivos en
Alloy
Widget (con id ID):
$ alloy generate widget ID
Generando hooks pre y post compilación:
$ alloy generate jmk

16. Recursos
Alloy Source Code - https://github.com/
appcelerator/alloy
Alloy Quick Start - https://wiki.appcelerator.org/
display/guides2/Alloy+Quick+Start#AlloyQuickStart-
SimpleExample

17. ¿Preguntas?