Curso Titanium

http://ulizama.com/Curso.pdf
 Programa

Qu es Titanium?
Qu es Alloy?
Construyendo nuestro primer app
Usando TiShadow
Asignaturas paso a paso
Qu sigue?
 Titanium
Conociendo la plataforma
Seguramente haz usado Titanium

688K 70K 290M

Desarrolladores Apps Devices
UI Nativo
 Swift? Tenemos Hyperloop!
OBJECTIVE-C
UITableView *myTableView = [[UITableView alloc] initWithFrame:CGRectZero
style:UITableViewStyleGrouped];

SWIFT
let myTableView: UITableView = UITableView(frame: CGRectZero, style: .Grouped)

HYPERLOOP
var myTableView = new UITableView({ frame: CGRectZero(), style: UITableView.Grouped });

TITANIUM
var myTableView = Ti.UI.createTableView({ style: Ti.UI.TableView.GROUPED });
 Recursos
Dnde conseguir la informacin?
 Recursos

tidev.io/resources

appcelerator.com/developers
docs.appcelerator.com
Todos Listos?
Verificando Instalacin
 Qu compone a Titanium?

NodeJS CLI

SDK

Titanium Studio (opcional)

SDKs de las plataformas

a desarrollar
 Asignatura

Crea un nuevo Classic / Default Project

Corre en el simulador o en un device
Investiga Resources/app.js
 Alloy
Convenciones vs Caos
Esto puede ser algo confuso
 Clsico vs Alloy
CLSICO: APP.JS
var win = Ti.UI.createWindow({backgroundColor:white});
win.open();

ALLOY: INDEX.XML
<Alloy><Window id=win /></Alloy>

ALLOY: INDEX.TSS
#win: { backgroundColor: white }

ALLOY: INDEX.JS
$.win.open();
 Y mucho ms features
Configurador Central del Proyecto
Widgets
Built-ins Adaptadores Sync
Views sin controllers

Configurador de Builds Backbone.js

Temas
Underscore.js
Moment.js Source Maps

Require
Estilos Dinmicos
Data-binding
Widgets Open Source*
* y Mdulos

http://gitt.io
 Asignatura

Crear la Aplicacin Alloy de Dos Tabs

Correr en el simulador o en el device
Mostrar el directorio de Resources

Comparar app.js con iphone/alloy/controllers/index.js

Empieza la diversin
Qu vamos a construir hoy?
Lector RSS de tiDev
 Ingredientes

El feed de JSON: tidev.io/feed/json

git: github.com/FokkeZB/Tutorial

VS
 Asignatura

Importar un clon del repositorio

File > Import > Git > .. as New Project

Ejecuta el app
 TiShadow
Desarrollo Rpido de Aplicaciones
 Si no usas TiShadow en tus
proyectos de Titanium, puedes
estar desperdiciando horas a la
semana en compilaciones.

@kevinwhinnery
 Proceso de Compilacin

Compilacin de Alloy
Compilacin de Titanium
Compilacin de Xcode/Android
Enviar al simulador/device
Inicializar el app
Ejecucin de tu cdigo
 Unos features extras
Dynamic localisation
Express
Rooms Automatic updates
Server hosting

Automated testing Jasmine

Should.js
REPL
Spies Appify

Browser interface
Code coverage
Screengrabbing
 Asignatura

Instalar TiShadow

~ $ [sudo] npm install -g tishadow

Ejecutar app usando CLI y TiShadow Express

~/Tutorial $ ti build -p ios --shadow

Cambiar color a red y salva

 Window
Creando una ventana
 Views

Los componentes UI viven bajo el name-

space Ti.UI.*
La mayora de los componentes UI
extienden a Ti.UI.View
Creacin: Ti.UI.create<View>()
En Alloy <View> Ti.UI.create<View>()
Los atributos XML y propiedades TSS son
tomadas y pasadas al mtodo de creacin.
TSS con tag, id class.
En JS se puede referenciar con $.<id>
 Clsico vs Alloy
CLASSIC: APP.JS
var win = Ti.UI.createWindow({backgroundColor:white});
win.open();

ALLOY: INDEX.XML
<Alloy><Window id=win /></Alloy>

ALLOY: INDEX.TSS
#win: { backgroundColor: white }

ALLOY: INDEX.JS
$.win.open();
 Asignatura
Haz reset de cualquier cambio:

~/Tutorial $ git reset -hard

Cambia al branch de window.

~/Tutorial $ git checkout window

Ejecuta el app.
Aade un Label que diga Hola mundo.
Ponle una clase al Label.
Usa la clase para cambiar el color a rojo.
 ListView
No es el componente ms sencillo
 ListViews

Docs > Busca: guide: ListViews

Docs > Busca: UI.ListView

Cruzar el bridge (puente) es costoso

ListView vs TableView
Alloy hace la mayora del trabajo sucio
 Asignatura

Lee la gua de ListViews.

Haz reset y cambia al branch de listview.
Corre el app.
Prueba el primer ejemplo (JS y TSS) del API
doc.
Remueve los iconos en blanco, alinea el texto
a la izquierda, reduce las secciones a una y
remueve el headerTitle de la seccin.
NavigationWindow
Ventanas que se apilan
 NavigationWindow

Docs > Busca: NavigationWindow

Solo para iOS
 Listeners de Eventos

Docs > Busca: Alloy XML Markup

Atributo on[Event] parecido a HTML

INDEX.XML
<Button onClick=talkToMe />

INDEX.JS
function talkToMe(e) {
alert(hello world);
}
 Crear Controllers

~/Tutorial $ alloy generate controller detail

 Usar Controllers

Usa <Require> para crear + aadir en XML

Usa Alloy.createController en JS

INDEX.XML
<Window id=win>
<Require src=detail />
</Window>

INDEX.JS
var detailController = Alloy.createController(detail);
var rootView = detailController.getView();
$.win.add(rootView);
 Asignatura

Estudia los API docs de NavigationWindow

Haz Reset y Cambia al branch de navwin y ejecuta
el app.
Encierra el elemento Window en un
NavigationWindow
Para Android aade el atributo module=xp.ui.
Aade un listener itemclick al ListView.
Crea un nuevo controller detail y hazlo un Window.
Ponle a las dos ventanas un ttulo.
En itemclick, crea una instancia del detail controller
y abre la ventana por medio de NavigationWindow.
Estudia lib/xp.ui.js. Qu pasa en Android?
Collections
Modelos con cerebro

STORAGE SYNC ADAPTER COLLECTION BINDINGS
Ti.UI

VIEWS

EVENTS
 Docs > Busca: Alloy Models
Nota: Versin vieja (0.9.2)
En Titanium JS no tiene DOM

Instancia una coleccin global:

Collection
Hacer bind de una coleccin a un view con loop:
Atributo dataCollection
Hacer bind de un atributo del modelo a una
propiedad de un child view:
valor {<atributo>}
 Asignatura

Estudia la gua de Alloy Data Binding.

Haz Reset y Cambia al branch de collections
y ejecuta el app.
Haz bind de la coleccin feed al ListSection
para que la lista sea llenada mostrando el
title y excerpt de los elementos.
Estudia models/feed.js y lib/alloy/sync/
json.js. Cmo funcionan?
 WebView
Titanium > Phonegap
 WebView

Docs > Busca: guide: Communication

Docs > Busca: UI.WebView

Despliega HML local, remoto e inline

Comuncate va eventos y evalJS

Desplegar texto formateado de forma nativa

es complicado
Desplegar HTML en WebViews es fcil :)
 Asignatura

Estudia los docs de WebView.

Reset y Cambia al branch de webview y
ejecuta el cdigo.
Estudia index.xml para ver como exponemos
el id del modelo por medio de itemId.
Pasa el modelo al controller detail.
Aade un WebView al Window detail y usa el
modelo para llenarlo.
Usa el modelo para llenar el title del Window
detail.
 SeachBar
Filtrando nuestro feed
 SearchBar

Docs > Busca: ListViews > Search Text and View

Docs > Busca: UI.ListView (ltimos ejemplos)
Docs > Busca: UI.SearchBar

ListView.searchView trabaja en conjunto con

ListView.searchText y
ListItem.searchAbleText
 Asignatura

Estudia el elemento SearchView de ListView.

Reset y Cambia al branch searchbar y corre
el app.
Aade un SearchBar a la lista para buscar en
excerpt.
Como ejercicio despus de clase, intenta
buscar en content, despus de usar el
atributo dataTransform para remover los tags
de HTML.

HINT: Google es tu amigo :D
Imagen y Arte
El Infierno de la Densidad
 NO RETINA RETINA (2X)

.75x 1x 1.5x 2x 3x
4x
Icons & Splashes
 Folders especficos de densidad y plataforma

assets/dir/archivo.ejemplo
assets/android/dir/archivo.ejemplo
assets/iphone/dir/archivo.ejemplo

assets/android/images/res-xhdpi/archivo.ejemplo

platform/android/res/drawable-xhdpi/archivo.ejemplo
platform/android/res/drawable-nl-port-xhdpi/archivo.ejemplo

assets/iphone/images/image@2x.png
assets/images/image.png BUENA
assets/android/images/res-mdpi/image.png PRACTICA
assets/android/images/res-xhdpi/image.png
9-Patch de Android
 No ms trabajo manual
~ $ [sudo] npm install -g ticons
 Asignatura

Ve el Icons and Splash Screens guide

Instala el plugin de ticons CLI o visita el sitio.
~ $ [sudo] npm install -g ticons

Reset y Cambia al branch de artwork y corre

el app.
Genera iconos y splashes usando el CLI o
sitio con la imagen de logo.png.
 Felicidades!
Ya eres un TiDev!

Baboon Media
Qu sigue?
nete a la comunidad
 nete a la comunidad

Sigue @appcelerator & @TiDevIO,

@ulizama, @FokkeZB & @JasonKneen.
nete al Meetup de Titanium en Cancn.
Seguir con las reuniones.
Ayuda en los foros de Q&A.
Encuentra widgets y mdulos en gitTio.
Comparte tus libreras y widgets en
GitHub.
Gracias!