Titanium é um framework open source que permite construir aplicações móveis e desktop nativas usando JavaScript, HTML e CSS. Ele suporta plataformas como iOS, Android, BlackBerry e Windows e permite reuso de código entre plataformas. O framework fornece APIs para elementos de interface, armazenamento local, multimídia e serviços como geolocalização e mapas.

1. TITANIUM
Eric Cavalcanti
ecavalcanti@gmail.com
@ericoc

2. Apoiada pela Storm Ventures, Sierra Ventures e eBay.
Appcelerator Inc. foi fundada em 2006 por especialista em
desenvolvimento web.

3. O QUE É O TITANIUM?
Titanium é um framework open source para construir
aplicações móveis (ou desktop) nativas usando tecnologias
web abertas (JavaScript - opcionalmente HTML e CSS)

4. POR QUE NATIVA?
O usuário já está acostumado em utilizar aplicações nativas em
seu dispositivo
O tempo de resposta de uma UI nativa é menor
Aumentamos consideravelmente a probabilidade de aprovação
por lojas mais criteriosas

5. PLATAFORMA SUPORTADAS
Desktop
Win 32
Mac OS X (Intel)
Linux
Mobile
iPhone/iPod (3.1 ou mais recente)
Android (1.6 ou mais recente)
iPad
BlackBerry

6. LICENÇA
SDKs e Titanium Studio – open source e free
Licença Apache 2.0
Serviços comerciais de treinamento e suporte
Outros serviços comerciais como o Analytics

10. QUEM USA?
... e mais

11. SHOWCASE
http://www.appcelerator.com/showcase/
applications-showcase/

12. PLATAFORMA TITANIUM

13. FUNDAMENTOS
Uma aplicação Titanium é um programa JavaScript que é
interpretado em tempo de execução no dispositivo
Não roda dentro de um browser
Webkit JavaScriptCore no iOS
Rhino no Android / BlackBerry (em breve V8 no Android)

14. CROSS-PLATFORM
Cross-platform != “Write Once, Run Everywhere”
100% de reuso de código não visual
Boa parte do código de UI é reusada, dependendo do design
Melhor experiência do usuário em cada plataforma
Titanium é “Write Once, Adapt Everywhere”

15. TITANIUM FEATURES
Native User Experience Multimedia
Native performance + Native UI Camera, video camera,
(tables, animations, gestures…etc.) streaming/device audio/video
Location-based services Analytics
Augmented reality, geo-location, Custom analytics baked into every
compass, native maps application, track usage patterns
and adoption
Social sharing Titanium+Plus
Authenticated access to Facebook, Encrypted database, ecommerce,
Twitter, Yahoo YQL. ads, barcode scanners, custom
Native email/address book analytics, in-app purchase
Data Development tools
Local SQLite data store, web Create, test, and publish your app
services, lightweight key/value using the same tools across
store platforms

16. OPEN MOBILE MARKETPLACE
http://marketplace.appcelerator.com

17. PRÉ-REQUISITOS
Mac OS X 10.6 (Snow Leopard) ou 10.7 (Lion)
Windows XP (todas edições, exceto Starter Edition)
Windows 7
Ubuntu Linux 10.04
iOS SDK
Android SDK

18. TITANIUM STUDIO E SDKS
Titanium Studio é uma IDE baseada no eclipse que
interage com vários scripts Python contidos no
Titanium SDK
Os scripts interagem com
as ferramentas nativas de
cada plataforma

19. CRIANDO UM NOVO
PROJETO

20. PROJETO EM EXECUÇÃO

21. RESOURCES ESPECÍFICOS DE
CADA PLATAFORMA
Subpastas da pasta Resources
android
iphone

22. RECURSOS ESPECÍFICOS DE
CADA PLATAFORMA
Android: intents, background services, hardware menu button
iOS: routes in map, pre-built animations, custom fonts, Cocoa UI
APIs específicas de cada plataforma são implementadas em
namespace específicos para a plataforma.
Ex. Titanium.Android.Menu

23. EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA
PLATAFORMA
if (Ti.Platform.osname == "iphone") {
...
} else {
...
}

24. TIPOS DE APLICAÇÕES
Tab Group
Single Window
Window Stack

25. PARA DESENVOLVEDORES
WEB...
Uma “window” seria similar a uma “página”
Uma “view” seria similar a uma “div”
O namespace TI.UI fornece vários componentes visuais (buttons,
text field, pickers, maps, scroll views)

26. EXEMPLO

27. TABLEVIEW
var win1 = Titanium.UI.createWindow({
" backgroundColor:"#fff"
});
var dados = [
" " {title:"Row 1 - simple row"},
" " {title:"Row 2 - with child", hasChild:true},
" " {title:"Row 3 - with detail", hasDetail:true},
" " {title:"Row 4 - with check", hasCheck:true},
" " {title:"Row 5 - red background", backgroundColor:"#f00"}
" ];"
var table1 = Titanium.UI.createTableView({
" data:dados
});
win1.add(table1);
win1.open();

28. TABELAS AGRUPADAS
var table1 = Titanium.UI.createTableView({
" style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
var section1 = Titanium.UI.createTableViewSection();
section1.headerTitle = "Hello";
var row1 = Titanium.UI.createTableViewRow({title:"Hello 1"});
var row2 = Titanium.UI.createTableViewRow({title:"Hello 2"});
section1.add(row1);
section1.add(row2);
var section2 = Titanium.UI.createTableViewSection();
section2.headerTitle = "Hello2";
var row3 = Titanium.UI.createTableViewRow({title:"Hello 3"});
var row4 = Titanium.UI.createTableViewRow({title:"Hello 4"});
section2.add(row3);
section2.add(row4);
table1.setData([section1,section2]);

29. TABLEVIEW EDITÁVEIS
SOMENTE NO IOS
// create table view
var tableview = Titanium.UI.createTableView({
data:data,
editable:true,
top:50
});
tableview.editing = true;
tableview.editing = false;

30. SCROLLABLEVIEW
Permite o scroll horizontal de uma ou mais views através do
gesto slider
var image1 = Ti.UI.createImageView({
image:'image1.jpg'
});
var image2 = Ti.UI.createImageView({
image:'image2.jpg'
});
var image3 = Ti.UI.createImageView({
image:'image3.jpg'
});
var win = Ti.UI.createWindow({
backgroundColor:'black'
});
var scrollView = Ti.UI.createScrollableView({
views:[image1, image2, image3],
showPagingControl:true,
pagingControlHeight:30
});
win.add(scrollView);
win.open();

31. ESTILOS

32. STYLE COM JSS
(JAVASCRIPT STYLESHEETS)
app.js
!"#$%&'()%$*$+&,-.,/#0"102&'()%34$
$$&(56%6$
789$
!"#$:;11)'$*$+&,-.,/#0"10<;11)'34$
$$&(56:6=$
$$1&1>056?0>>)6$
789$
!"#$%&'@$*$+&1"'&;A,-.,/#0"102&'()%34/>"BBC"A056%&'<>;06789$
app.jss
!"#$#
##%&'()*+,-./'+0+*12*3.24#
5#
%,66+-#$#
##"7.6819::;<4#
##837)861=:;<4#
5#
>"7-?0,3#$#
##%&'()*+,-./'+0+*12%0,324#
5#

33. JSS POR PLATAFORMA
app.jss
app.android.jss
app.android.high.jss
app.android.medium.jss
app.android.low.jss
app.iphone.jss

34. BANCO DE DADOS E SISTEMA
DE ARQUIVOS

35. DADOS LOCAIS
Titanium.App.Properties
Ideal para armazenar configurações da aplicação
Titanium.Filesystem
Utilizado para manipulação do sistema de arquivos
Titanium.Database
Permite o acesso local a banco de dados SQLite

36. DADOS REMOTOS

37. HTTPCLIENT
Ti.Network.HTTPClient implementa a
especificação XHR (XMLHttpRequest)
Familiar para programadores Ajax

38. MULTIMÍDIA

39. API DE ÁUDIO
Executa arquivo de som local ou remoto (Sound)
Suporte a stream de áudio (Audio Player)
Suporte a gravação de áudio (no android via intent)

40. EXECUTANDO
AUDIO
var win = Ti.UI.createWindow({
backgroundColor:'#FFF'
})
var sound = Ti.Media.createSound({
url:'music/u2.mp3'
});
var button = Ti.UI.createButton({
title:'Play Sound',
width:250,
height:35
});
button.addEventListener('click', function(e){
sound.play();
})
win.add(button);
win.open();

41. API DE VÍDEO
Executa arquivos de vídeo local
Suporte a stream de vídeo (somente no iOS)
Suporte a captura de vídeo (no android via intent)

42. EXECUTANDO
VÍDEO
var win = Ti.UI.createWindow({
backgroundColor:'#000'
});
var video = Ti.Media.createVideoPlayer({
url:'video/movie.mp4',
backgroundColor:'#000'
});
// No android você não adiciona o video player na
window
if (Ti.Platform.osname != 'android') {
win.add(video);
}
win.open();
video.play();

43. CÂMERA
Interagir com a câmera
embutida do Android ou
IPhone

44. CAPTURANDO UMA
FOTO
Ti.Media.showCamera({
success:function(e) {
var image = e.media;
imgPhoto.image = image;
},
cancel:function() {},
error:function(e) {
alert.(e.code);
},
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
});

45. GEOLOCALIZAÇÃO
E
MAPAS

46. UTILIZANDO A
GEOLOCALIZAÇÃO
Ti.Geolocation.getCurrentPosition(function(e){
if (e.error) {
alert('Erro :' + e.error.message);
return;
}
Ti.API.info('Latitude: ' + e.coords.latitude);
Ti.API.info('Longitude: ' + e.coords.longitude);
});

47. UTILIZANDO
MAPAS
var mountainView = Ti.Map.createAnnotation({
latitude:37.390749,
longitude:-122.081651,
title:'Appcelerator Headquarters',
subtitle:'Mountain View, CA',
pincolor:Ti.Map.ANNOTATION_RED,
animate:true
});
var mapView = Ti.Map.createView({
mapType:Ti.Map.STANDARD_TYPE,
region: {latitude:37.390749, longitude:-122.081651,
latitudeDelta:0.01, longitudeDelta:0.01},
animate:true,
regionFit:true,
annotations:[mountainView]
});
win.add(mapView);

48. ACELERÔMETRO

49. UTILIZANDO O
ACELERÔMETRO
Titanium.Accelerometer.addEventListener('update',function(e)
{
Ti.API.debug("accelerometer - x:"+e.x+",y:"+e.y+",z:"+e.z);
});

50. Twitter Trends

51. APPCELERATOR WIKI
http://wiki.appcelerator.org/display/guides/Home

52. MOBILE API REFERENCE
http://developer.appcelerator.com/apidoc/mobile/latest

53. APPCELERATOR BLOG
http://developer.appcelerator.com/blog/

54. COMMUNITY QUESTIONS & ANSWERS
http://developer.appcelerator.com/questions

55. APPCELERATOR VIDEO CHANNEL
http://vimeo.com/appcelerator

56. KITCHEN SINK
https://github.com/appcelerator/KitchenSink

58. OBRIGADO!
Eric Cavalcanti
ecavalcanti@gmail.com
@ericoc