alloy preview
DESCRIPTION
Introducción a la tecnología de Alloy, el MVC de Appcelerator para Titanium Appcelerator.TRANSCRIPT
![Page 2: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/2.jpg)
Agenda
Pre-requisitos
Instalación
Usando Alloy
Conclusiones
![Page 3: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/3.jpg)
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)
![Page 4: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/4.jpg)
¿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 .
![Page 5: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/5.jpg)
![Page 6: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/6.jpg)
¿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!
![Page 7: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/7.jpg)
Estructura del proyecto
![Page 8: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/8.jpg)
Echemos un vistazo mas a fondo...
![Page 9: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/9.jpg)
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
![Page 10: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/10.jpg)
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.
![Page 11: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/11.jpg)
Directorios opcionales
migrations - Archivos JS que definen migraciones de modelos.
widgets - Componentes reusables autocontenidos crossplataforma que pueden reutilizarse en diversos proyectos de Alloy.
![Page 12: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/12.jpg)
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.
![Page 13: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/13.jpg)
Corriendo el app
$ alloy run
![Page 14: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/14.jpg)
Generando archivos en alloy
view & style -
$ alloy generate view NAME
view, style & Controller -
$ alloy generate controller NAME
![Page 15: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/15.jpg)
Generando archivos en Alloy
Widget (con id ID):
$ alloy generate widget ID
Generando hooks pre y post compilación:
$ alloy generate jmk
![Page 16: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/16.jpg)
Recursos
Alloy Source Code - https://github.com/appcelerator/alloy
Alloy Quick Start - https://wiki.appcelerator.org/display/guides2/Alloy+Quick+Start#AlloyQuickStart-SimpleExample
![Page 17: Alloy Preview](https://reader034.vdocument.in/reader034/viewer/2022052505/555e7293d8b42a34098b5354/html5/thumbnails/17.jpg)
¿Preguntas?