Alloy PreviewMauro Parra-Mirandamauropm@gmail.com

Agenda

Pre-requisitos

Instalación

Usando Alloy

Conclusiones

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)

¿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 .

¿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!

Estructura del proyecto

Echemos un vistazo mas a fondo...

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

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.

Directorios opcionales

migrations - Archivos JS que definen migraciones de modelos.

widgets - Componentes reusables autocontenidos crossplataforma que pueden reutilizarse en diversos proyectos de Alloy.

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.

Corriendo el app

$ alloy run

Generando archivos en alloy

view & style -

$ alloy generate view NAME

view, style & Controller -

$ alloy generate controller NAME

Generando archivos en Alloy

Widget (con id ID):

$ alloy generate widget ID

Generando hooks pre y post compilación:

$ alloy generate jmk

Recursos

Alloy Source Code - https://github.com/appcelerator/alloy

Alloy Quick Start - https://wiki.appcelerator.org/display/guides2/Alloy+Quick+Start#AlloyQuickStart-SimpleExample

¿Preguntas?